ironhack-labs · miquelmpg · Dec 10, 2025 · Dec 10, 2025
diff --git a/index.html b/index.html
@@ -5,6 +5,11 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>LAB Stack Tracker</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
+      crossorigin="anonymous">
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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.10.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",

diff --git a/src/App.css b/src/App.css
@@ -1,42 +1 @@
-#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);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,11 +1,25 @@
+
+import companies from './companies.json'
+import technologies from './technologies.json'
+import Navbar from './components/Navbar';
+import HomePage from './pages/HomePage';
+import CompanyPage from './pages/CompanyPage';
+import TechnologyPage from './pages/TechnologyPage';
 import "./App.css";
+import { Routes, Route} from 'react-router-dom'
 
 function App() {
   return (
     <div className="App">
-      <h1>LAB | React Stack Tracker</h1>
+      <Navbar></Navbar>
+
+      <Routes>
+        <Route path='/' element={<HomePage companies={companies}/>}></Route>
+        <Route path='/company/:companySlug' element={<CompanyPage companies={companies} />}></Route>
+        <Route path='/tech/:slug' element={<TechnologyPage technologies={technologies} />}></Route>
+      </Routes>
     </div>
   );
 }
 
-export default App;
+export default App;
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,5 +1,12 @@
+
+import { useNavigate } from "react-router-dom";
+
 function Navbar() {
-  return <nav>Navbar</nav>;
+  const navigate = useNavigate();
+  return <nav 
+          className="align-content-center ps-4 fs-5 fw-semibold"
+          onClick={() => navigate("/")}
+          style={{backgroundColor: '#656dff', height: '75px', color: '#ffffff', cursor: 'pointer'}}>StackTracker</nav>;
 }
 
 export default Navbar;
diff --git a/src/index.css b/src/index.css
@@ -1,64 +1 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-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;
-  }
-}
diff --git a/src/main.jsx b/src/main.jsx
@@ -3,8 +3,12 @@ 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(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
 )
diff --git a/src/pages/CompanyPage.jsx b/src/pages/CompanyPage.jsx
@@ -1,7 +1,28 @@
-function CompanyPage() {
+
+import { useParams, Link } from "react-router-dom";
+
+function CompanyPage({ companies }) {
+  const { companySlug } = useParams();
+  const companyFiltered = companies.find((company) => company.slug === companySlug);
   return (
-    <div>
-      <h1>CompanyPage</h1>
+    <div className="container">
+      <h1 className="mb-5 mt-5 text-center">Company Profile</h1>
+      <div className="d-flex text-center justify-content-around">
+        <img src={companyFiltered.logo} style={{width: '250px'}} />
+        <div style={{width: '420px'}}>
+          <div className="fs-1 fw-semibold">{companyFiltered.name}</div>
+          <div className="fs-5 fw-semibold">About</div>
+          <div className="fs-5">{companyFiltered.description}</div>
+        </div>
+      </div>
+      {companyFiltered['techStack'].map((tech) => {
+        return (
+        <Link to={`/tech/${tech.slug}`} key={tech.name} 
+              style={{textDecoration: 'none', color: "black", width:'150px', whiteSpace: "nowrap", overflowX: "auto"}}
+              className="d-inline-block fw-semibold fs-5 text-center border-start border-end border-bottom ms-5">
+          <img src={tech.image} style={{width: '50px'}} className="m-5" />
+          <div>{tech.name}</div>
+        </Link>)})}
     </div>
   );
 }

diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
@@ -1,7 +1,21 @@
-function HomePage() {
+
+import { Link } from "react-router-dom";
+
+function HomePage({ companies }) {
   return (
-    <div>
-      <h1>HomePage</h1>
+    <div className="container d-flex flex-wrap justify-content-center">
+      <h1 className="mb-5 mt-5">StackTracker: Discover Tech Stacks Used by Top Companies</h1>
+      {companies.map((company) => {
+        return (
+          <Link to={`/company/${company.slug}`} 
+                key={company.id} 
+                className="fw-semibold fs-5 text-center m-5 border-bottom border-start border-end"
+                style={{width: '500px', textDecoration: 'none', color: 'black'}}>
+            <div className="mb-5">{company.name}</div>
+            <img className="mb-5" src={company.logo} style={{width: '150px'}}/>
+          </Link>
+        )
+      })}
     </div>
   );
 }