ross-u · Idiru · Jul 31, 2023 · Sep 13, 2023 · Sep 13, 2023 · Mar 9, 2024
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.22.3"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",

diff --git a/src/App.css b/src/App.css
@@ -1,7 +1,7 @@
 #root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 0;
   text-align: center;
 }
 
@@ -40,3 +40,44 @@
 .read-the-docs {
   color: #888;
 }
+
+nav {
+  background-color: rgb(113, 5, 201);
+  color: white;
+  width: 100vw;
+  display: flex;
+  padding: 15px 10px;
+}
+
+.card-container {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 10px;
+}
+
+.company-card {
+  width: 33%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: black solid 1px;
+}
+
+img {
+  height: 80px;
+  width: 110px;
+}
+
+.company-details {
+  overflow: hidden;
+}
+
+.tech-container {
+  display: flex;
+  gap: 10px;
+  overflow: auto;
+}.
+
+.techstack {
+  box-shadow: 0px -2px 10px 5px #c7c7c7;
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,9 +1,29 @@
 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";
+import { Routes, Route } from "react-router-dom";
+import { useState } from "react";
 
 function App() {
+  const [company, setCompany] = useState(companies);
+
   return (
     <div className="App">
-      <h1>LAB | React Stack Tracker</h1>
+      <Navbar />
+      <Routes>
+        <Route path="/" element={<HomePage company={company} />} />
+
+        <Route
+          path="/company/:companySlug"
+          element={<CompanyPage company={company} />}
+        />
+
+        <Route path="/tech/:slug" element={<TechnologyPage />} />
+      </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/index.css b/src/index.css
@@ -22,7 +22,6 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
 }

diff --git a/src/main.jsx b/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(
+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,39 @@
-function CompanyPage() {
+import { useParams, Link } from "react-router-dom";
+
+function CompanyPage({ company }) {
+  const { companySlug } = useParams();
+
+  const newArray = [];
+  company.forEach((company) => {
+    if (company.slug == companySlug) {
+      newArray.push(company);
+    }
+  });
+
+  console.log(newArray);
+
   return (
     <div>
-      <h1>CompanyPage</h1>
+      <h1>Company Profile</h1>
+      <div className="company-details">
+        <img src={newArray[0].logo} alt={newArray[0].name} />
+        <div>
+          <h3>{newArray[0].name}</h3>
+          <h5>About</h5>
+          <p>{newArray[0].description}</p>
+        </div>
+      </div>
+      <div className="tech-container">
+        {" "}
+        {newArray[0].techStack.map((tech) => (
+          <Link key={tech.slug}>
+            <div className="techstack">
+              <img src={tech.image}></img>
+              {tech.name}
+            </div>
+          </Link>
+        ))}
+      </div>
     </div>
   );
 }

diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
@@ -1,7 +1,17 @@
-function HomePage() {
+import { Link } from "react-router-dom";
+
+function HomePage({ company }) {
   return (
     <div>
-      <h1>HomePage</h1>
+      <h1>StackTracker: Discover Tech Stacks Used by Top Companies</h1>
+      <div className="card-container">
+        {company.map((company) => (
+          <Link to={`/company/${company.slug}`} className="company-card" key={company.id}>
+            {company.name}
+            <img src={company.logo} alt={company.name} />
+          </Link>
+        ))}
+      </div>
     </div>
   );
 }

diff --git a/src/pages/TechnologyPage.jsx b/src/pages/TechnologyPage.jsx
@@ -1,7 +1,7 @@
 function TechnologyPage() {
   return (
     <div>
-      <h1>TechnologyPage</h1>
+      <h1>Technology Details</h1>
     </div>
   );
 }