Lab done

package.json

@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.27.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",

src/App.css

@@ -1,7 +1,6 @@
 #root {
   max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+  margin: 0;
   text-align: center;
 }
 
@@ -40,3 +39,125 @@
 .read-the-docs {
   color: #888;
 }
+
+nav{
+  background-color: #646cffaa;
+  color: white;
+  text-align: left;
+  padding: 20px;
+}
+
+.App{
+  width: 100vw;
+}
+
+.App-main{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  h1{
+    margin: 5px 0;
+  }
+}
+
+.companies{
+  text-align: center;
+
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.company{
+  width: 500px;
+  height: 500px;
+  padding: 100px;
+
+  cursor: pointer;
+
+  h3{
+    font-size: 2em;
+    margin-bottom: 100px;
+  }
+}
+
+.small-company{
+  width: 350px;
+  height: 350px;
+}
+
+.main-title{
+  width: 350px;
+  height: 350px;
+  margin: 50px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  box-shadow:  0 3px 10px  rgb(0 0 0 / 0.2);
+}
+
+.technology{
+  width: 350px;
+  height: 350px;
+}
+
+.img-tile{
+  width: 50%;
+}
+
+.company-area, .tech-area{
+  display: flex;
+  justify-content: center;
+}
+
+.company-img, .technology-img{
+  width: 50%;
+}
+
+.company-details, .technology-details{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  text-align: center;
+
+  width: 400px;
+  margin-left: 100px;
+}
+
+.company-tech{
+  display: flex;
+  overflow-x: scroll;
+  margin: 0 20px;
+}
+
+.tech-tile-area{
+  display: flex;
+  flex-direction: column;
+}
+
+.tech-tile{
+  width: 150px;
+  height: 150px;
+  margin: 25px;
+  cursor: pointer;
+
+  box-shadow:  0 3px 10px  rgb(0 0 0 / 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tech-icon{
+  width: 50%;
+}
+
+#back-button{
+  background-color: #c2bebe;
+
+  border: 0.5px solid black;
+}

src/App.jsx

@@ -1,9 +1,25 @@
+import { Route, Routes } from "react-router-dom";
 import "./App.css";
+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';
 
 function App() {
   return (
     <div className="App">
-      <h1>LAB | React Stack Tracker</h1>
+      <Navbar/>
+      <div className="App-main">
+        <h1>LAB | React Stack Tracker</h1>
+        <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>
     </div>
   );
 }

src/components/Navbar.jsx

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

src/index.css

@@ -22,7 +22,6 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
 }

src/main.jsx

@@ -2,9 +2,12 @@ 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,41 @@
-function CompanyPage() {
+import { useParams } from "react-router-dom";
+import { Link } from "react-router-dom";
+
+function CompanyPage({companies}) {
+  let {companySlug} = useParams();
+
+  let company = companies.find(c => c.slug === companySlug);
+
   return (
     <div>
-      <h1>CompanyPage</h1>
+      <h3>Company Profile</h3>
+
+      <div className="company-area">
+        <div className="small-company main-title">
+          <img src={company.logo} className="company-img"></img>
+        </div>
+
+        <div className="company-details">
+          <h1>{company.name}</h1>
+          <h4>About</h4>
+          <p>{company.description}</p>
+        </div>              
+      </div>
+
+      <div className="company-tech">
+        {company.techStack.map(tech => {
+          return(
+            <div key={tech.id} className="tech-tile-area">
+              <Link to={`/tech/${tech.slug}?companySlug=${company.slug}`}>
+                <div className="tech-tile">
+                  <img src={tech.image} alt="Technology icon" className="tech-icon"/>
+                </div>
+              </Link>
+              <h4>{tech.name}</h4>
+            </div>
+          )
+        })}
+      </div>
     </div>
   );
 }

src/pages/HomePage.jsx

@@ -1,8 +1,22 @@
-function HomePage() {
+import { Link } from "react-router-dom";
+
+function HomePage({companies}) {
   return (
-    <div>
-      <h1>HomePage</h1>
-    </div>
+    <>
+      <h1>StackTracker: Discover Tech Stacks Used by Top Companies</h1>
+      <div className="companies">
+        {companies.map(company =>{        
+          return(
+            <Link to={`/company/${company.slug}`} key={company.id}>
+              <div className="company main-title">
+                <h3>{company.name}</h3>
+                <img src={company.logo} className="img-tile"></img>
+              </div>
+            </Link>
+          )})
+        }
+      </div>
+    </>
   );
 }