ross-u · MarineRossi · Jul 31, 2023 · Sep 13, 2023 · Sep 13, 2023 · Nov 12, 2023
diff --git a/README.md b/README.md
@@ -381,9 +381,9 @@ For each technology, display its `name` and `image`, and wrap them in a React Ro
 
 ---
 
-### Iteration 6 | Technology Details
+### Bonus: Iteration 6 | Technology Details
 
-In this iteration, you will work on the `TechologyPage` component to display the information of a specific technology.
+In this iteration, you will work on the `TechologyPage` component to display information about a specific technology.
 
 The component should take 1 prop:
 
@@ -485,16 +485,19 @@ To set up the React Router in your React application, follow these steps:
 npm install react-router-dom
 ```
 
-2. Import the `BrowserRouter` component in your app's entry point (usually `index.js`) and wrap your `<App />` component with it:
+2. Import the `BrowserRouter` component in your app's entry point (usually `main.jsx`) and wrap your `<App />` component with it:
 
 ```jsx
 import { BrowserRouter as Router } from "react-router-dom";
 
-ReactDOM.render(
-  <Router>
-    <App />
-  </Router>,
-  document.getElementById("root")
+const root = ReactDOM.createRoot(document.getElementById("root"));
+
+root.render(
+  <React.StrictMode>
+    <Router>
+      <App />
+    </Router>
+  </React.StrictMode>
 );
 ```
 

diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>LAB Stack Tracker</title>
   </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": "^6.18.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,9 +1,23 @@
+import { Routes, Route } from "react-router-dom";
 import "./App.css";
+import companiesJson from "./companies.json"
+import technologiesJson from "./technologies.json"
+import { useState } from "react";
+import HomePage from "./pages/HomePage";
+import CompanyPage from "./pages/CompanyPage";
+import TechnologyPage from "./pages/TechnologyPage";
 
 function App() {
+  const [technologies, setTechnologies] = useState(technologiesJson)
+  const [companies, setCompanies]= useState (companiesJson)
   return (
     <div className="App">
       <h1>LAB | React Stack Tracker</h1>
+      <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>
   );
 }

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,5 +1,5 @@
 function Navbar() {
-  return <nav>Navbar</nav>;
+  return <nav> StackTracker</nav>;
 }
 
 export default Navbar;
diff --git a/src/main.jsx b/src/main.jsx
@@ -1,10 +1,15 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
+// src/main.jsx
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import React from "react";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+import { BrowserRouter as Router } from "react-router-dom";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+    <Router>
+      <App />
+    </Router>
+  </React.StrictMode>
+);
diff --git a/src/pages/CompanyPage.jsx b/src/pages/CompanyPage.jsx
@@ -1,7 +1,30 @@
-function CompanyPage() {
+import { useParams, Link } from "react-router-dom";
+
+function CompanyPage(props) {
+  const { companySlug } = useParams();
+  const result = props.companies.find((company) => {
+    if (companySlug === company.slug) {
+      return true;
+    } else {
+      return false;
+    }
+  });
+  if (!result) return <div>Error</div>;
   return (
     <div>
-      <h1>CompanyPage</h1>
+      <h1>Company Profile</h1>
+      <h3>{result.name}</h3>
+      <div>{result.website}</div>
+      <div>{result.description}</div>
+      <img src={result.logo} />
+      {result.techStack.map((techStack) => (
+        <div key={techStack.slug}>
+          <Link to={`/tech/${techStack.slug}`}>
+            <img src={techStack.image} style={{ width: "50px" }} />
+          </Link>
+        </div>
+      ))}
+      <p> {companySlug}</p>
     </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";
+import React from "react";
+
+function HomePage(props) {
+  console.log(props.companies)
   return (
     <div>
-      <h1>HomePage</h1>
+      <h1>StackTracker: Discover Tech Stacks Used by Top Companies</h1>
+      <ul>
+        {props.companies.map(company=>(
+         <li key={company.slug}> 
+          <Link to={`/company/${company.slug}`}>
+          <img src={company.logo} style={{width:"50px"}}/>
+           {company.name}
+          </Link>
+         </li>
+        ))}
+      </ul>
     </div>
   );
 }

diff --git a/src/pages/TechnologyPage.jsx b/src/pages/TechnologyPage.jsx
@@ -1,7 +1,23 @@
-function TechnologyPage() {
+import { useParams } from "react-router-dom";
+
+function TechnologyPage(props) {
+  const { slug } = useParams();
+  let result;
+  for (let i = 0; i < props.technologies.length; i++) {
+    if (props.technologies[i].slug === slug) {
+      result = props.technologies[i];
+      break;
+    }
+  }
+  if (!result) {
+    return <div>Error slug not found</div>;
+  }
   return (
     <div>
-      <h1>TechnologyPage</h1>
+      <h1>Technology Details</h1>
+      <div>{result.name}</div>
+        <img src={result.image}/>
+        <div>{result.description}</div>
     </div>
   );
 }