PT_RMT_012025 [DANIEL_FISCHER]

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

src/App.css

@@ -40,3 +40,8 @@
 .read-the-docs {
   color: #888;
 }
+
+img {
+  width: 30px;
+  height: 30px;
+}

src/App.jsx

@@ -1,10 +1,26 @@
+import { useState } from "react";
 import "./App.css";
+import comps from "./companies.json"
+import tech from "./technologies.json"
+import { Routes, Route } from "react-router-dom";
+import HomePage from "./pages/HomePage";
+import CompanyPage from "./pages/CompanyPage";
+import TechnologyPage from "./pages/TechnologyPage";
 
 function App() {
+
+  const [companies, setCompanies] = useState(comps);
+  const [technologies, setTechnologies] = useState(tech)
+
+
   return (
-    <div className="App">
-      <h1>LAB | React Stack Tracker</h1>
-    </div>
+    <>
+    <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>
+    </>
   );
 }
 

src/components/Navbar.jsx

@@ -1,5 +1,5 @@
 function Navbar() {
-  return <nav>Navbar</nav>;
+  return <nav>StackTracker</nav>;
 }
 
 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 as Router } from 'react-router-dom'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
+    <Router>
     <App />
+    </Router>
   </React.StrictMode>,
 )

src/pages/CompanyPage.jsx

@@ -1,8 +1,39 @@
-function CompanyPage() {
+import { useParams } from "react-router-dom";
+import { Link } from "react-router-dom";
+
+function CompanyPage({ companies }) {
+  const { companySlug } = useParams()
+  const company = companies.find((company) => company.slug === companySlug)
+
+
+
   return (
-    <div>
-      <h1>CompanyPage</h1>
-    </div>
+    <>
+      <div>
+        <h1>Company Profile</h1>
+      </div>
+
+      <div>
+        <img src={company.logo} alt={`${company.name} logo`} />
+      </div>
+      <h3>{company.name}</h3>
+      <a href={`https://${company.website}`} target="_blank" rel="noopener noreferrer">{company.website}</a>
+      <p>{company.description}</p>
+
+      <div>
+        {company.techStack.map((stack) => {
+          return (
+            <div>
+              <div>
+                <img src={stack.image} alt={`${stack.name} logo`} />
+              </div>
+              <Link to={`/tech/${stack.name}?companySlug=${company.slug}`}>{stack.name}</Link>
+            </div>
+          )
+        })}
+      </div>
+    </>
+
   );
 }
 

src/pages/HomePage.jsx

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

src/pages/TechnologyPage.jsx

@@ -1,7 +1,33 @@
-function TechnologyPage() {
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+
+function TechnologyPage( {technologies}) {
+
+  const [searchParams, setSearchParams] = useSearchParams()
+  const {slug} = useParams()
+  const companySlug = searchParams.get("companySlug").toLowerCase()
+  const navigate = useNavigate()
+  const technology = technologies.find((tech) => tech.slug === slug.toLowerCase().split(".").join(""))
+
+  const handleBackClick = () => {
+    if(companySlug) {
+      navigate(`/company/${companySlug}`)
+    } else {
+      navigate(-1)
+    }
+  }
+
+
   return (
     <div>
-      <h1>TechnologyPage</h1>
+      <h1>Technology Details</h1>
+      <div>
+        <img src={technology.image} alt={`${technology.name} logo`} />
+      </div>
+      <div>
+        <h3>{technology.name}</h3>
+        <p>{technology.description}</p>
+      </div>
+      <button onClick={handleBackClick}>Back</button>
     </div>
   );
 }