solved

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.3.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",

src/App.jsx

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

src/components/Navbar.jsx

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

src/index.css

@@ -11,15 +11,12 @@
 }
 
 a {
-  font-weight: 500;
-  color: #646cff;
+  color: black;
   text-decoration: inherit;
 }
-a:hover {
-  color: #535bf2;
-}
 
 body {
+  overflow-x: hidden;
   margin: 0;
   display: flex;
   place-items: center;
@@ -32,6 +29,14 @@ h1 {
   line-height: 1.1;
 }
 
+h2{
+  padding-bottom: 20px;
+}
+
+h4{
+  margin: 0;
+}
+
 button {
   border-radius: 8px;
   border: 1px solid transparent;
@@ -55,10 +60,116 @@ button:focus-visible {
     color: #213547;
     background-color: #ffffff;
   }
-  a:hover {
-    color: #747bff;
-  }
   button {
     background-color: #f9f9f9;
   }
 }
+
+a h2{
+  padding: 0 0 20px 0;
+}
+
+
+#homePage img{
+  width: 100px;
+  height: 100px;
+  object-fit: scale-down;
+  padding-bottom: 50px;
+}
+
+
+.companyList{
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+  justify-content: center;
+  padding: 0 20px 0 20px;
+  gap: 100px;
+}
+
+.companyCard{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 30%;
+  padding: 1rem;
+  border-radius: 10px;
+  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+}
+
+#companyProfile{
+  width: 100%;
+  overflow: hidden
+}
+
+.companyDetails{
+  display: flex;
+  padding: 0 20px 0 20px;
+  margin-bottom: 30px;
+  justify-content: center;
+  align-items: center;
+  gap: 70px;
+}
+
+.companyLogo{
+  width: 20%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  border-radius: 10px;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+}
+
+.companyLogo img{
+  width: 100px;
+  height: 100px;
+  object-fit: scale-down;
+  padding: 20px 0 20px 0;
+}
+
+.companyInfo{
+  width: 40%;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+}
+
+.companyInfo p{
+  padding: 0 2.5rem 0 2.5rem;
+}
+
+.companyInfo h2{
+  padding: 10px 0 10px 0;
+  margin: 0;
+}
+
+.companyTechStack{
+  width: 90%;
+  display: flex;
+  overflow-y: auto;
+  gap: 20px;
+  padding: 20px;
+  margin-bottom: 30px;
+}
+
+.techCard{
+  display: flex;
+  flex-direction: column;
+}
+
+.techCard img{
+  width: 80px;
+  height: 80px;
+  object-fit: scale-down;
+  padding: 20px 0 20px 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+  border-radius: 10px;
+  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+}

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,46 @@
-function CompanyPage() {
+import { Link, useParams } from "react-router-dom";
+
+function CompanyPage({ companies }) {
+  const { companySlug } = useParams();
+  const matchCompany = companies.find((company) => {
+    return company.slug === companySlug;
+  });
   return (
-    <div>
-      <h1>CompanyPage</h1>
+    <div id="companyProfile">
+      <h2>Company Profile</h2>
+      {matchCompany && (
+        <>
+          <div className="companyDetails">
+            <div className="companyLogo">
+              <Link to={matchCompany.website}>
+                <img src={matchCompany.logo} />
+              </Link>
+            </div>
+            <div className="companyInfo">
+              <h2>{matchCompany.name}</h2>
+              <h4>About</h4>
+              <p>{matchCompany.description}</p>
+            </div>
+          </div>
+          <div className="companyTechStack">
+            {matchCompany.techStack.map((tech) => {
+              return (
+                <div className="techCard" key={tech.slug}>
+                  <div>
+                    <Link to={`/tech/${tech.slug}?fromCompany=${companySlug}`}>
+                      <img src={tech.image} alt="" />
+                    </Link>
+                  </div>
+                  <p>{tech.name}</p>
+                </div>
+              );
+            })}
+          </div>
+          <Link to="/" className="back-button">
+            <button>← Back to home page</button>
+          </Link>
+        </>
+      )}
     </div>
   );
 }

src/pages/HomePage.jsx

@@ -1,7 +1,23 @@
-function HomePage() {
+import { Link } from "react-router-dom";
+
+function HomePage({ companies }) {
   return (
-    <div>
-      <h1>HomePage</h1>
+    <div id="homePage">
+      <h2>Discover Tech Stacks Used by Top Companies</h2>
+      <div className="companyList">
+        {companies.map((company) => {
+          return (
+            <Link
+              to={`/company/${company.slug}`}
+              key={company.id}
+              className="companyCard"
+            >
+              <h2>{company.name}</h2>
+              <img src={company.logo} alt="" />
+            </Link>
+          );
+        })}
+      </div>
     </div>
   );
 }

src/pages/NotFound.jsx

@@ -0,0 +1,3 @@
+export default function NotFound() {
+  return <h1>404 NotFound</h1>;
+}

src/pages/TechnologyPage.jsx

@@ -1,7 +1,35 @@
-function TechnologyPage() {
+import { Link, useParams, useSearchParams } from "react-router-dom";
+
+function TechnologyPage({ technologies }) {
+  const { slug } = useParams();
+  const [searchParams] = useSearchParams();
+  const fromCompany = searchParams.get("fromCompany");
+
+  const matchTechnology = technologies.find((technology) => {
+    return technology.slug === slug;
+  });
   return (
     <div>
-      <h1>TechnologyPage</h1>
+      <h2>Technology Details</h2>
+      {matchTechnology && (
+        <>
+          <div className="companyDetails">
+            <div className="companyLogo">
+              <img src={matchTechnology.image} />
+            </div>
+            <div className="companyInfo">
+              <h2>{matchTechnology.name}</h2>
+              <h4>About</h4>
+              <p>{matchTechnology.description}</p>
+            </div>
+          </div>
+          {fromCompany && (
+            <Link to={`/company/${fromCompany}`} className="back-button">
+              <button>← Back to {fromCompany} profile</button>
+            </Link>
+          )}
+        </>
+      )}
     </div>
   );
 }