done

src/App.jsx

@@ -1,9 +1,26 @@
-import "./App.css";
+import { useState } from 'react';
+import './App.css';
+import { Routes, Route } from 'react-router-dom';
+import companiesData from './companies.json';
+import technologiesData from './technologies.json';
+import Navbar from './components/Navbar';
+import HomePage from './pages/HomePage';
+import CompanyPage from './pages/CompanyPage';
+import TechnologyPage from './pages/TechnologyPage';
 
 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/:slug" element={<TechnologyPage technologies={technologies} />} />
+      </Routes>
     </div>
   );
 }

src/components/Navbar.jsx

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

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(
   <React.StrictMode>
-    <App />
+    <Router>
+      <App />
+    </Router>
   </React.StrictMode>,
 )

src/pages/CompanyPage.jsx

@@ -1,7 +1,44 @@
-function CompanyPage() {
+import { useParams, Link } from 'react-router-dom';
+
+function CompanyPage({ companies }) {
+  const { companySlug } = useParams();
+
+  const company = companies && companies.find((c) => c.slug === companySlug);
+
+  if (!company) {
+    return (
+      <div className="CompanyPage">
+        <h1>Company Profile</h1>
+        <p>Company not found.</p>
+        <Link to="/">Back to Home</Link>
+      </div>
+    );
+  }
+
   return (
-    <div>
-      <h1>CompanyPage</h1>
+    <div className="CompanyPage">
+      <h1>Company Profile</h1>
+
+      <div className="company-details" style={{ padding: '16px' }}>
+        <img src={company.logo} alt={company.companyName} style={{ width: '100px', height: '100px', objectFit: 'contain' }} />
+        <h2>{company.companyName}</h2>
+        <p>Website: <a href={`https://${company.website}`} target="_blank" rel="noreferrer">{company.website}</a></p>
+        {company.description && <p>{company.description}</p>}
+
+        <h3>Tech Stack</h3>
+        <div className="tech-stack" style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
+          {company.techStack && company.techStack.map((tech) => (
+            <Link key={tech.slug} to={`/tech/${tech.slug}?company=${companySlug}`}>
+              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '8px', border: '1px solid #ccc', borderRadius: '8px', width: '80px' }}>
+                <img src={tech.image} alt={tech.name} style={{ width: '40px', height: '40px', objectFit: 'contain' }} />
+                <span style={{ marginTop: '4px', fontSize: '12px' }}>{tech.name}</span>
+              </div>
+            </Link>
+          ))}
+        </div>
+
+        <Link to="/"><button style={{ marginTop: '16px' }}>Back to Home</button></Link>
+      </div>
     </div>
   );
 }

src/pages/HomePage.jsx

@@ -1,7 +1,20 @@
-function HomePage() {
+import { Link } from 'react-router-dom';
+
+function HomePage({ companies }) {
   return (
-    <div>
-      <h1>HomePage</h1>
+    <div className="HomePage">
+      <h1>StackTracker: Discover Tech Stacks Used by Top Companies</h1>
+
+      <div className="company-list">
+        {companies && companies.map((company) => (
+          <Link key={company.id} to={`/company/${company.slug}`}>
+            <div className="company-card" style={{ display: 'flex', alignItems: 'center', gap: '16px', margin: '8px 0', padding: '8px', border: '1px solid #ccc', borderRadius: '8px' }}>
+              <img src={company.logo} alt={company.companyName} style={{ width: '50px', height: '50px', objectFit: 'contain' }} />
+              <span>{company.companyName}</span>
+            </div>
+          </Link>
+        ))}
+      </div>
     </div>
   );
 }

src/pages/TechnologyPage.jsx

@@ -1,7 +1,41 @@
-function TechnologyPage() {
+import { useParams, useSearchParams, Link } from 'react-router-dom';
+
+function TechnologyPage({ technologies }) {
+  const { slug } = useParams();
+  const [searchParams] = useSearchParams();
+  const companySlug = searchParams.get('company');
+
+  const technology = technologies && technologies.find((t) => t.slug === slug);
+
+  if (!technology) {
+    return (
+      <div className="TechnologyPage">
+        <h1>Technology Details</h1>
+        <p>Technology not found.</p>
+        <Link to="/">Back to Home</Link>
+      </div>
+    );
+  }
+
   return (
-    <div>
-      <h1>TechnologyPage</h1>
+    <div className="TechnologyPage">
+      <h1>Technology Details</h1>
+
+      <div className="technology-details" style={{ padding: '16px' }}>
+        <img src={technology.image} alt={technology.name} style={{ width: '100px', height: '100px', objectFit: 'contain' }} />
+        <h2>{technology.name}</h2>
+        <p>{technology.description}</p>
+
+        {companySlug ? (
+          <Link to={`/company/${companySlug}`}>
+            <button style={{ marginTop: '16px' }}>Back to Company</button>
+          </Link>
+        ) : (
+          <Link to="/">
+            <button style={{ marginTop: '16px' }}>Back to Home</button>
+          </Link>
+        )}
+      </div>
     </div>
   );
 }