done

src/App.css

@@ -1,42 +1,34 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+.navbar {
+  background: #222;
+  color: white;
+  padding: 15px;
+  font-size: 24px;
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.page {
+  padding: 20px;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+.company-list,
+.tech-list {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
 }
 
-.card {
-  padding: 2em;
+.company-item,
+.tech-item {
+  border: 1px solid #ccc;
+  padding: 10px;
+  width: 150px;
+  text-align: center;
+  border-radius: 10px;
+  transition: 0.3s;
 }
 
-.read-the-docs {
-  color: #888;
+.company-item:hover,
+.tech-item:hover {
+  background: #f3f3f3;
 }

src/App.jsx

@@ -1,9 +1,37 @@
+import { useState } from "react";
 import "./App.css";
 
+import companiesData from "./companies.json";
+import technologiesData from "./technologies.json";
+
+import { Routes, Route } from "react-router-dom";
+
+import Navbar from "./components/Navbar";
+import HomePage from "./pages/HomePage";
+import CompanyPage from "./pages/CompanyPage";
+import TechnologyPage from "./pages/TechnologyPage";
+
 function App() {
+  const [companies] = useState(companiesData);
+  const [technologies] = useState(technologiesData);
+
   return (
-    <div className="App">
-      <h1>LAB | React Stack Tracker</h1>
+    <div>
+      <Navbar />
+
+      <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>
   );
 }

src/components/Navbar.jsx

@@ -1,5 +1,9 @@
 function Navbar() {
-  return <nav>Navbar</nav>;
+  return (
+    <nav className="navbar">
+      <h1>StackTracker</h1>
+    </nav>
+  );
 }
 
 export default Navbar;

src/main.jsx

@@ -1,10 +1,14 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+import { BrowserRouter as Router } from "react-router-dom";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+    <Router>
+      <App />
+    </Router>
+  </React.StrictMode>
+);

src/pages/CompanyPage.jsx

@@ -1,7 +1,36 @@
-function CompanyPage() {
+import { useParams, Link } from "react-router-dom";
+
+function CompanyPage({ companies }) {
+  const { companySlug } = useParams();
+
+  const company = companies.find((c) => c.slug === companySlug);
+
+  if (!company) return <h2>Company not found</h2>;
+
   return (
-    <div>
-      <h1>CompanyPage</h1>
+    <div className="page">
+      <h2>Company Profile</h2>
+
+      <h3>{company.companyName}</h3>
+      <img src={company.logo} alt={company.companyName} width="120" />
+      <p>
+        Website:{" "}
+        <a href={company.website} target="_blank">
+          {company.website}
+        </a>
+      </p>
+
+      <h3>Tech Stack</h3>
+      <ul className="tech-list">
+        {company.techStack.map((tech) => (
+          <li key={tech.slug} className="tech-item">
+            <Link to={`/tech/${tech.slug}?company=${company.slug}`}>
+              <img src={tech.image} alt={tech.name} width="50" />
+              <p>{tech.name}</p>
+            </Link>
+          </li>
+        ))}
+      </ul>
     </div>
   );
 }

src/pages/HomePage.jsx

@@ -1,7 +1,20 @@
-function HomePage() {
+import { Link } from "react-router-dom";
+
+function HomePage({ companies }) {
   return (
-    <div>
-      <h1>HomePage</h1>
+    <div className="page">
+      <h2>StackTracker: Discover Tech Stacks Used by Top Companies</h2>
+
+      <ul className="company-list">
+        {companies.map((company) => (
+          <li key={company.id} className="company-item">
+            <Link to={`/company/${company.slug}`}>
+              <img src={company.logo} alt={company.companyName} width="60" />
+              <p>{company.companyName}</p>
+            </Link>
+          </li>
+        ))}
+      </ul>
     </div>
   );
 }

src/pages/TechnologyPage.jsx

@@ -1,7 +1,28 @@
-function TechnologyPage() {
+import { useParams, useSearchParams, Link } from "react-router-dom";
+
+function TechnologyPage({ technologies }) {
+  const { slug } = useParams();
+  const [searchParams] = useSearchParams();
+
+  const tech = technologies.find((t) => t.slug === slug);
+
+  const previousCompany = searchParams.get("company");
+
+  if (!tech) return <h2>Technology not found</h2>;
+
   return (
-    <div>
-      <h1>TechnologyPage</h1>
+    <div className="page">
+      <h2>Technology Details</h2>
+
+      <h3>{tech.name}</h3>
+      <img src={tech.image} alt={tech.name} width="120" />
+      <p>{tech.description}</p>
+
+      {previousCompany && (
+        <Link to={`/company/${previousCompany}`}>
+          <button>⬅ Back to Company</button>
+        </Link>
+      )}
     </div>
   );
 }