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

src/App.jsx

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

src/components/Navbar.css

@@ -0,0 +1,9 @@
+.navbar{
+    background-color: rgb(98, 98, 242);
+    height: 50px;
+    color: white;
+    text-align: left;
+    padding: 20px 0 0 20px;
+    font-weight: bolder;
+    font-size: 1.3rem;
+}

src/components/Navbar.jsx

@@ -1,5 +1,11 @@
+import "../components/Navbar.css";
+
 function Navbar() {
-  return <nav>Navbar</nav>;
+  return (
+    <nav>
+      <div className="navbar">StackTacker</div>
+    </nav>
+  );
 }
 
 export default Navbar;

src/index.css

@@ -21,12 +21,10 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  text-align: center;
 }
 
+
 h1 {
   font-size: 3.2em;
   line-height: 1.1;
@@ -50,15 +48,3 @@ button:focus-visible {
   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;
-  }
-}

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 } from "react-router-dom";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

src/pages/CompanyPage.jsx

@@ -1,7 +1,40 @@
-function CompanyPage() {
+/* eslint-disable react/prop-types */
+import { NavLink, useParams } from "react-router-dom";
+
+import "../pages/CompanyPage.css";
+
+function CompanyPage({ companyList }) {
+  const { companySlug } = useParams();
+
+  const company = companyList.find((companyObj) => {
+    return companyObj.slug == companySlug;
+  });
+
   return (
-    <div>
-      <h1>CompanyPage</h1>
+    <div className="card">
+      <img src={company.logo} alt={company.name} />
+      <div>
+        <h3>About</h3>
+        <p>{company.description}</p>
+      </div>
+      <div>
+        <div style={{ display: "flex", gap: 100 }}>
+          {company.techStack.map((techstackObj, i) => {
+            return (
+              <div key={i} style={{ width: 50 }}>
+                <NavLink to={`/tech/${techstackObj.slug}`}>
+                  <img
+                    src={techstackObj.image}
+                    alt={techstackObj.slug}
+                    style={{ width: 100 }}
+                  />
+                  <h4>{techstackObj.name}</h4>
+                </NavLink>
+              </div>
+            );
+          })}
+        </div>
+      </div>
     </div>
   );
 }