Solved fully using UseState

package.json

@@ -11,8 +11,10 @@
     "test": "vitest --ui"
   },
   "dependencies": {
+    "express": "^4.21.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^7.1.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",

src/App.css

@@ -1,7 +1,4 @@
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
   text-align: center;
 }
 
@@ -40,3 +37,26 @@
 .read-the-docs {
   color: #888;
 }
+
+nav {
+  height: 4rem;
+  background-color: #646cffaa;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+nav a {
+  color: white;
+  text-decoration: none;
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin: 0 2rem;
+}
+
+#homePage {
+}
+
+.company-stack-container {
+  display: flex;
+  flex-direction: row;
+}

src/App.jsx

@@ -1,9 +1,25 @@
+import { Routes, Route } from "react-router-dom"; // <== IMPORT
 import "./App.css";
+import Navbar from "./components/Navbar";
+import HomePage from "./pages/HomePage";
+import CompanyPage from "./pages/CompanyPage";
+import TechnologyPage from "./pages/TechnologyPage";
+import companiesData from "./companies.json";
+import technologiesData from "./technologies.json";
+import { useState } from "react";
 
 function App() {
+  const [companies] = useState(companiesData);
+  const [technologies] = useState(technologiesData);
+
   return (
     <div className="App">
-      <h1>LAB | React Stack Tracker</h1>
+      <Navbar />
+      <Routes>
+        <Route path="/" element={<HomePage companies={companies} />} />
+        <Route path="/company/:companySlug" element={<CompanyPage companies={companies} />} />
+        <Route path="/tech/:techSlug" element={<TechnologyPage technologies={technologies} />} />
+      </Routes>
     </div>
   );
 }

src/components/CompanyCard.jsx

@@ -0,0 +1,14 @@
+import { Link } from "react-router-dom";
+
+function CompanyCard({ company }) {
+  return (
+    <li className="company-card">
+      <Link to={`/company/${company.slug}`}>
+        <h4>{company.name}</h4>
+        <img className="logo" src={company.logo} alt="Company logo" />
+      </Link>
+    </li>
+  );
+}
+
+export default CompanyCard;

src/components/CompanyDetails.jsx

@@ -0,0 +1,28 @@
+/* eslint-disable react/prop-types */
+import { Link } from "react-router-dom";
+
+function CompanyDetails({ company }) {
+  return (
+    <div className="company-details">
+      <div className="company-info">
+        <img className="logo" src={company.logo} alt="Company logo" />
+        <h2>{company.name}</h2>
+        <h5>About</h5>
+        <p>{company.description}</p>
+      </div>
+
+      <div className="company-stack-container">
+        {company.techStack.map((stack) => (
+          <div key={stack.slug} className="company-stack">
+            <Link to={`/tech/${stack.slug}`}>
+              <img className="logo" src={stack.image} alt="Stack image" />
+              <p>{stack.name}</p>
+            </Link>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default CompanyDetails;

src/components/Navbar.jsx

@@ -1,5 +1,11 @@
+import { NavLink } from "react-router";
+
 function Navbar() {
-  return <nav>Navbar</nav>;
+  return (
+    <nav>
+      <NavLink to="/">StackTracker</NavLink>
+    </nav>
+  );
 }
 
 export default Navbar;

src/components/TechDetails.jsx

@@ -0,0 +1,19 @@
+/* eslint-disable react/prop-types */
+function TechDetails({ techStack }) {
+
+  return (
+    <>
+      <div className="tech-details">
+        <img className="logo" src={techStack.image} alt="Company logo" />
+        <div className="tech-info">
+          <h2>{techStack.name}</h2>
+          <h5>About</h5>
+          <p>{techStack.description}</p>
+        </div>
+      </div>
+        <button onClick={() => window.history.back()}>Back</button>
+    </>
+  );
+}
+
+export default TechDetails;

src/index.css

@@ -21,10 +21,7 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  max-width: 1440px;
 }
 
 h1 {

src/main.jsx

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

src/pages/CompanyPage.jsx

@@ -1,8 +1,15 @@
-function CompanyPage() {
+import CompanyDetails from "../components/CompanyDetails";
+import { useParams } from "react-router-dom";
+
+function CompanyPage({ companies }) {
+  const { companySlug } = useParams();
+  const foundCompany = companies.find((oneCompany) => oneCompany.slug === companySlug);
   return (
-    <div>
-      <h1>CompanyPage</h1>
-    </div>
+    <li className="company-details-container">
+      <h2>Company Profile</h2>
+      {!foundCompany && <h3>Error 404: the page not found!</h3>}
+      {foundCompany && <CompanyDetails company={foundCompany} />}
+    </li>
   );
 }
 

src/pages/HomePage.jsx

@@ -1,7 +1,14 @@
-function HomePage() {
+import CompanyCard from "../components/CompanyCard";
+
+function HomePage({ companies }) {
   return (
-    <div>
-      <h1>HomePage</h1>
+    <div id="homePage">
+      <h2>StackTracker: Discover Tech Stacks Used by Top Companies</h2>
+      <ul>
+        {companies.map((element) => (
+          <CompanyCard key={element.id} company={element} />
+        ))}
+      </ul>
     </div>
   );
 }

src/pages/TechnologyPage.jsx

@@ -1,7 +1,20 @@
-function TechnologyPage() {
+import TechDetails from "../components/TechDetails";
+import { useParams } from "react-router-dom";
+
+function TechnologyPage({ technologies }) {
+  const { techSlug } = useParams();
+  const foundTech = technologies.find((oneTech) => oneTech.slug === techSlug);
+
   return (
     <div>
-      <h1>TechnologyPage</h1>
+      <h2>Technology Details</h2>
+      {!foundTech && (
+        <>
+          <h3>Error 404: the page not found!</h3>
+            <button onClick={() => window.history.back()}>back</button>
+        </>
+      )}
+      {foundTech && <TechDetails techStack={foundTech} />}
     </div>
   );
 }