Done

package.json

@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^7.9.5"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",

src/App.css

@@ -1,42 +1,84 @@
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+	max-width: 1280px;
+	margin: 0 auto;
+	padding: 2rem;
+	text-align: center;
 }
 
 .logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+	height: 6em;
+	padding: 1.5em;
+	will-change: filter;
+	transition: filter 300ms;
 }
 .logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+	filter: drop-shadow(0 0 2em #646cffaa);
 }
 .logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+	filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
 @keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+	a:nth-of-type(2) .logo {
+		animation: logo-spin infinite 20s linear;
+	}
 }
 
 .card {
-  padding: 2em;
+	padding: 2em;
 }
 
 .read-the-docs {
-  color: #888;
+	color: #888;
+}
+
+nav {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: flex;
+	justify-content: baseline;
+	height: 10vh;
+	width: 100%;
+	align-items: center;
+	background-color: purple;
+	padding: 0.2rem;
+	font-size: 1.5rem;
+}
+.App {
+	text-align: center;
+	margin-top: 7vh;
+	font-size: 0.75rem;
+}
+
+.companies {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 20px;
+	padding: 20px;
+	max-width: 40vw;
+}
+.companyDet {
+	display: flex;
+	justify-content: space-around;
+	/* max-width: 40vw; */
+	margin-bottom: 5vh;
+}
+.companyDet p {
+	max-width: 40vh;
+}
+.stack {
+	list-style: none;
+	display: flex;
+	gap: 2vw;
+	overflow-x: auto;
 }

src/App.jsx

@@ -1,11 +1,34 @@
-import "./App.css";
+import './App.css'
+import { useState } from 'react'
+import comp from '/src/companies.json'
+import tech from '/src/technologies.json'
+import { Routes, Route } from 'react-router-dom'
+import HomePage from './pages/HomePage'
+import CompanyPage from './pages/CompanyPage'
+import TechnologyPage from './pages/TechnologyPage'
+import Navbar from './components/Navbar'
 
 function App() {
-  return (
-    <div className="App">
-      <h1>LAB | React Stack Tracker</h1>
-    </div>
-  );
+	const [companies, setCompanies] = useState(comp)
+	const [technologies, setTechnologies] = useState(tech)
+	return (
+		<>
+			<Navbar />
+			<div className="App">
+				<Routes>
+					<Route path="/" element={<HomePage companies={companies} />} />
+					<Route
+						path="/company/:companySlug"
+						element={<CompanyPage companies={companies} />}
+					/>
+					<Route
+						path="/tech/:slug"
+						element={<TechnologyPage technologies={technologies} />}
+					/>
+				</Routes>
+			</div>
+		</>
+	)
 }
 
-export default App;
+export default App

src/components/Navbar.jsx

@@ -1,5 +1,5 @@
 function Navbar() {
-  return <nav>Navbar</nav>;
+	return <nav>StackTracker</nav>
 }
 
-export default Navbar;
+export default Navbar

src/index.css

@@ -1,64 +1,64 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+	font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+	line-height: 1.5;
+	font-weight: 400;
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
+	font-synthesis: none;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-text-size-adjust: 100%;
 }
 
 a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+	font-weight: 500;
+	color: #646cff;
+	text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+	color: #535bf2;
 }
 
-body {
+/* body {
   margin: 0;
   display: flex;
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
-}
+} */
 
 h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+	font-size: 3.2em;
+	line-height: 1.1;
 }
 
 button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  cursor: pointer;
-  transition: border-color 0.25s;
+	border-radius: 8px;
+	border: 1px solid transparent;
+	padding: 0.6em 1.2em;
+	font-size: 1em;
+	font-weight: 500;
+	font-family: inherit;
+	cursor: pointer;
+	transition: border-color 0.25s;
 }
 button:hover {
-  border-color: #646cff;
+	border-color: #646cff;
 }
 button:focus,
 button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+	outline: 4px auto -webkit-focus-ring-color;
 }
 
 @media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+	:root {
+		color: #213547;
+		background-color: #ffffff;
+	}
+	a:hover {
+		color: #747bff;
+	}
+	button {
+		background-color: #f9f9f9;
+	}
 }