Bonus iteration using query string

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,12 +1,11 @@
 #root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
   text-align: center;
 }
 
 .logo {
   height: 6em;
+  width: 6em;
+  object-fit: contain;
   padding: 1.5em;
   will-change: filter;
   transition: filter 300ms;
@@ -17,6 +16,11 @@
 .logo.react:hover {
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
+.logo-small {
+  height: 3rem;
+  width: 3rem;
+  object-fit: contain;
+}
 
 @keyframes logo-spin {
   from {
@@ -40,3 +44,40 @@
 .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 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+.company-card {
+  /* margin: 2rem;
+  border: 2px rgba(187, 187, 187, 0.356) solid;
+  border-radius: 5rem; */
+}
+
+.company-stack-container {
+  display: flex;
+  flex-direction: row;
+}
+
+.company-stack-container {
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  grid-auto-flow: column;
+}
+

src/App.jsx

@@ -1,9 +1,19 @@
+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";
 
 function App() {
   return (
     <div className="App">
-      <h1>LAB | React Stack Tracker</h1>
+      <Navbar />
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/company" element={<CompanyPage />} />
+        <Route path="/tech" element={<TechnologyPage />} />
+      </Routes>
     </div>
   );
 }

src/components/CompanyCard.jsx

@@ -0,0 +1,15 @@
+/* eslint-disable react/prop-types */
+import { Link } from "react-router";
+
+function CompanyCard({ company }) {
+  return (
+    <div className="company-card">
+      <Link to={`/company?company=${company.slug}`}>
+        <h4>{company.name}</h4>
+        <img className="logo" src={company.logo} alt="Company logo" />
+      </Link>
+    </div>
+  );
+}
+
+export default CompanyCard;

src/components/CompanyDetails.jsx

@@ -0,0 +1,28 @@
+/* eslint-disable react/prop-types */
+import { Link } from "react-router";
+
+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?company=${company.slug}&tech=${stack.slug}`}>
+              <img className="logo logo-small" 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,23 @@
+import { Link } from "react-router";
+import { useSearchParams } from "react-router-dom";
+
+function TechDetails({ techStack }) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const companySlug = searchParams.get("company");
+
+  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>
+      <Link to={`/company?company=${companySlug}`}>
+        <button>Back</button>
+      </Link>
+    </div>
+  );
+}
+
+export default TechDetails;

src/index.css

@@ -21,10 +21,6 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
 }
 
 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,7 +1,17 @@
+import companiesData from "../companies.json";
+import CompanyDetails from "../components/CompanyDetails";
+import { useSearchParams } from "react-router-dom";
+
 function CompanyPage() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const companySlug = searchParams.get("company");
+
+  const foundCompany = companiesData.find((oneCompany) => oneCompany.slug === companySlug);
   return (
-    <div>
-      <h1>CompanyPage</h1>
+    <div className="company-details-container">
+      <h2>Company Profile</h2>
+      {!foundCompany && <h3>Error 404: the page not found!</h3>}
+      {foundCompany && <CompanyDetails company={foundCompany} />}
     </div>
   );
 }

src/pages/HomePage.jsx

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

src/pages/TechnologyPage.jsx

@@ -1,7 +1,26 @@
+import technologiesData from "../technologies.json";
+import TechDetails from "../components/TechDetails";
+import { Link, useSearchParams } from "react-router-dom";
+
 function TechnologyPage() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const companySlug = searchParams.get("company");
+  const techSlug = searchParams.get("tech");
+
+  const foundTech = technologiesData.find((oneTech) => oneTech.slug === techSlug);
+
   return (
     <div>
-      <h1>TechnologyPage</h1>
+      <h2>Technology Details</h2>
+      {!foundTech && (
+        <>
+          <h3>Error 404: the page not found!</h3>
+          <Link to={`/company?company=${companySlug}`}>
+            <button>Back</button>
+          </Link>
+        </>
+      )}
+      {foundTech && <TechDetails techStack={foundTech} />}
     </div>
   );
 }