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,11 +1,9 @@
 #root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
 }
 
-.logo {
+/* .logo {
   height: 6em;
   padding: 1.5em;
   will-change: filter;
@@ -16,27 +14,56 @@
 }
 .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;
-  }
+.App {
+  min-width: 900px;
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
 }
 
 .card {
   padding: 2em;
+  width: 200px;
+}
+.card img {
+  width: 100%;
 }
-
 .read-the-docs {
   color: #888;
 }
+.info {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.company-card {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  width: 100%;
+}
+.company-card img {
+  width: 30%;
+}
+.tech-list {
+  display: flex;
+  justify-content: space-around;
+}
+.tech-details {
+  width: 200px;
+  height: 90px;
+  border: 1px solid black;
+  margin: 0 4px;
+}
+.tech-list p {
+  text-align: center;
+}
+.tech-details img {
+  width: 30%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  justify-items: center;
+}

src/App.jsx

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

src/components/Navbar.jsx

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

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

src/pages/CompanyPage.jsx

@@ -1,9 +1,38 @@
-function CompanyPage() {
+import React, { useState } from 'react'
+import { useParams, Link } from 'react-router-dom'
+
+function CompanyPage (props) {
+  const { slug } = useParams()
+
+  const companyInfo = props.companies.find(company => {
+    return company.slug === slug
+  })
+  const [techs, setTechs] = useState(props.technologies)
   return (
-    <div>
-      <h1>CompanyPage</h1>
+    <div className='info'>
+      <h1>Company Profile</h1>
+      <div className=' company-card'>
+        <img src={companyInfo.logo} alt='' />
+        <div>
+          <p>{companyInfo.name}</p>
+
+          <p>{companyInfo.description}</p>
+        </div>
+      </div>
+      <div className='tech-list'>
+        {techs.map(tech => {
+          return (
+            <Link to={`/tech/${tech.slug}`} key={tech.id}>
+              <div className='tech-details'>
+                <img src={tech.image} alt='' />
+              </div>
+              <p>{tech.name}</p>
+            </Link>
+          )
+        })}
+      </div>
     </div>
-  );
+  )
 }
 
-export default CompanyPage;
+export default CompanyPage

src/pages/HomePage.jsx

@@ -1,9 +1,21 @@
-function HomePage() {
+import { Link } from 'react-router-dom'
+
+function HomePage (props) {
   return (
     <div>
-      <h1>HomePage</h1>
+      <h1>StackTracker: Discover Tech Stacks Used by Top Companies</h1>
+      {props.companies.map(company => {
+        return (
+          <Link to={`/company/${company.slug}`} key={company.id}>
+            <div className='card'>
+              <img src={company.logo} alt='' />
+              <p>{company.name}</p>
+            </div>
+          </Link>
+        )
+      })}
     </div>
-  );
+  )
 }
 
-export default HomePage;
+export default HomePage

src/pages/TechnologyPage.jsx

@@ -1,9 +1,24 @@
-function TechnologyPage() {
+import { useParams, Link } from 'react-router-dom'
+function TechnologyPage (props) {
+  const { slug } = useParams()
+  const techInfo = props.technologies.find(tech => {
+    return tech.slug === slug
+  })
+  console.log(techInfo)
   return (
     <div>
-      <h1>TechnologyPage</h1>
+      <h1>Technology Details</h1>
+      <div className=' company-card'>
+        <img src={techInfo.image} alt='' />
+        <div>
+          <p>{techInfo.name}</p>
+
+          <p>{techInfo.description}</p>
+        </div>
+      </div>
+      <button onClick={() => window.history.back()}>Back</button>
     </div>
-  );
+  )
 }
 
-export default TechnologyPage;
+export default TechnologyPage