ironhack-labs · clasei · Sep 19, 2024 · Sep 19, 2024 · Sep 21, 2024 · Sep 21, 2024
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>LAB Stack Tracker</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.26.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",

diff --git a/src/App.css b/src/App.css
@@ -1,7 +1,6 @@
 #root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
   text-align: center;
 }
 
@@ -18,6 +17,66 @@
   filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
+.App {
+  height: 100vh;
+}
+
+.App nav {
+  background-color: #b8dbff;
+  color: rgb(80, 80, 80);
+  padding: 1rem;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin-top: 0;
+  padding: 1rem;
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+h1 {
+  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+  font-size: 2rem;
+  padding: 1rem;
+}
+
+ul, li {
+  list-style: none;
+}
+
+ul {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
+  gap: 2rem; 
+  padding: 2rem;
+}
+
+li {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  gap: 1rem;
+  background: #e7e7e7;
+  border: 1px solid #ffee52;
+  box-shadow: 0 2px 5px rgba(219, 219, 219, 0.1);
+  border-radius: 10px;
+  padding: 2rem;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 1rem;
+}
+
+ul img {
+  margin-top: 1rem;
+}
+
+.tech-container {
+  padding: 50px;
+}
+.tech-container img, .tech-stack-container img {
+  width: 50px;
+}
+
 @keyframes logo-spin {
   from {
     transform: rotate(0deg);

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,9 +1,44 @@
+import { useState } from "react";
+import { Route, Routes, Link } from 'react-router-dom'
 import "./App.css";
+import companiesData from './companies.json'
+import technologiesData 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() {
+
+  const [ companies ] = useState(companiesData)
+  const [ technologies ] = useState(technologiesData)
+
   return (
     <div className="App">
-      <h1>LAB | React Stack Tracker</h1>
+
+      {/* <div className="companies-container">
+        {companies.map(company => (
+          <div key={company.id}>{company.name}</div>
+        ))}
+      </div>
+      <div className="tech-container">
+        {technologies.map(technology => (
+          <div key={technology.id}>{technology.name}</div>
+        ))}
+      </div> */}
+
+      {/* info showed fine; dynamic parameters needed to work with the data stored in json */}
+
+      <Navbar />
+
+      <Routes>
+
+        <Route path={"/"} element={ <HomePage companiesData={companies} /> }/>
+        <Route path={"/company/:companySlug"} element={ <CompanyPage companies={companies}/> }/>
+        <Route path={"/technology/:techSlug"} element={ <TechnologyPage technologies={technologies}/> }/> 
+
+      </Routes>
+
     </div>
   );
 }

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
@@ -1,5 +1,17 @@
+import { Link } from "react-router-dom";
+
 function Navbar() {
-  return <nav>Navbar</nav>;
+  return  (
+
+    <nav>
+      <p>StackTracker</p>
+
+      <Link to="/">Home</Link>
+      <Link to="/company/:companySlug">Company</Link>
+      <Link to="/technology/:slug">Tech</Link>
+
+    </nav>
+  )
 }
 
 export default Navbar;
diff --git a/src/main.jsx b/src/main.jsx
@@ -2,9 +2,11 @@ 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>
+
+  <BrowserRouter>
     <App />
-  </React.StrictMode>,
+  </BrowserRouter>
 )
diff --git a/src/pages/CompanyPage.jsx b/src/pages/CompanyPage.jsx
@@ -1,7 +1,38 @@
-function CompanyPage() {
+import { useParams, Link } from "react-router-dom";
+
+function CompanyPage({ companies }) {
+  // following feedback steps below
+  // access url params to get the company slug
+  const { companySlug } = useParams();
+
+  // uses find method to get matching company slug
+  const companyToDisplay = companies.find(
+    (company) => company.slug === companySlug
+  );
+
+  // guard clause in case the company doesn't appear
+  if (!companyToDisplay) {
+    return <p>company not found</p>;
+  }
+
   return (
-    <div>
-      <h1>CompanyPage</h1>
+    <div className="tech-container">
+      <img src={companyToDisplay.logo} />
+      <h2>{companyToDisplay.name}</h2>
+      <p>{companyToDisplay.description}</p>
+
+      <ul>
+        {companyToDisplay.techStack.map((tech) => (
+          <li key={tech.slug}>
+            {/* adding ?company=${companySlug} so the company slug is passed as a query param 
+                when visiting the tech page and we can use back-btn to come back to the company page */}
+            <Link to={`/technology/${tech.slug}?company=${companySlug}`}>
+              <img src={tech.image} />
+              {tech.name}            
+            </Link>
+          </li>
+        ))}
+      </ul>
     </div>
   );
 }

diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
@@ -1,7 +1,22 @@
-function HomePage() {
+import { Link } from "react-router-dom";
+
+function HomePage({ companiesData }) {
   return (
     <div>
-      <h1>HomePage</h1>
+      <h1>StackTracker: Discover Tech Stacks Used by Top Companies</h1>
+
+      <ul>
+        {companiesData.map(company => (
+          <li key={company.id}>
+            <Link to={`/company/${company.slug}`}>
+              {company.name}
+              <br />
+              <img src={company.logo} style={{ width: "50px" }} />
+            </Link>
+          </li>
+        ))}
+      </ul>
+
     </div>
   );
 }

diff --git a/src/pages/TechnologyPage.jsx b/src/pages/TechnologyPage.jsx
@@ -1,7 +1,35 @@
-function TechnologyPage() {
+import { useParams, useSearchParams, Link } from "react-router-dom";
+
+function TechnologyPage({ technologies }) {
+
+  const { techSlug } = useParams()
+  // adding the visited company slug from the query param passed from CompanyPage
+  // using searchParams to get it 
+  const [searchParams] = useSearchParams()
+
+
+  const companySlug = searchParams.get("company")
+
+  // console.log(techSlug);
+  // console.log(technologies)
+
+  const techToDisplay = technologies.find((tech) => tech.slug === techSlug)
+
+  if (!techToDisplay) {
+    return <p>tech not foudn</p>
+  }
+
+
   return (
-    <div>
-      <h1>TechnologyPage</h1>
+    <div className="tech-stack-container">
+      <img src={techToDisplay.image} />
+      <p>{techToDisplay.name}</p>
+      <p>{techToDisplay.description}</p>
+
+      {/* back-btn to navigate to the previous company page using the query param shared before */}
+      <Link to={`/company/${companySlug}`}>
+        <button>back to {companySlug} page</button>
+      </Link>
     </div>
   );
 }