[WD-PT-RMT-SEP24] - Sara García

.eslintrc.cjs

@@ -11,5 +11,6 @@ module.exports = {
   plugins: ['react-refresh'],
   rules: {
     'react-refresh/only-export-components': 'warn',
+
   },
 }

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

src/App.jsx

@@ -1,9 +1,35 @@
+import { useState } from "react";
+import { Route, Routes } 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, setCompanies] = useState(companiesData);
+  const [technologies, setTechnologies] = useState(technologiesData);
+
   return (
     <div className="App">
       <h1>LAB | React Stack Tracker</h1>
+      <Navbar />
+      <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>
   );
 }

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>
-    <App />
+    <Router>
+      <App />
+    </Router>
   </React.StrictMode>,
 )

src/pages/CompanyPage.jsx

@@ -1,7 +1,27 @@
-function CompanyPage() {
+import { useParams, Link } from "react-router-dom";
+
+function CompanyPage({companies}) {
+  const {companySlug} = useParams();
+
+  const companyToDisplay = companies.find((company) =>
+    company.slug === companySlug
+  )
+
   return (
     <div>
-      <h1>CompanyPage</h1>
+      <h1>Company Profile</h1>
+
+      {companyToDisplay.name}
+      {companyToDisplay.website}
+      {companyToDisplay.description}
+      {companyToDisplay.logo}
+
+      {companyToDisplay.techStack.map((tech) => (
+        <Link key={companyToDisplay.id} to={`/tech/${tech.slug}`}>
+          {tech.name}
+          {tech.image}
+        </Link>
+      ))}
     </div>
   );
 }

src/pages/HomePage.jsx

@@ -1,7 +1,19 @@
-function HomePage() {
+import { Link } from "react-router-dom";
+
+function HomePage({ companies }) {
   return (
     <div>
-      <h1>HomePage</h1>
+      <h1>StackTracker: Discover Tech Stacks Used by Top Companies</h1>
+      {companies.map((company) => (
+        <Link key={company.id} to={`/company/${company.slug}`}>
+          {company.name}
+          <img
+            src={company.logo}
+            alt={company.name}
+            style={{ maxWidth: "100px" }}
+          />
+        </Link>
+      ))}
     </div>
   );
 }

src/pages/TechnologyPage.jsx

@@ -1,7 +1,19 @@
-function TechnologyPage() {
+import { useParams } from "react-router-dom";
+
+
+function TechnologyPage({technologies}) {
+
+  const {slug} = useParams();
+
+  const technologyToDisplay = technologies.find((tech) => tech.slug === slug)
+
+
   return (
     <div>
-      <h1>TechnologyPage</h1>
+      <h1>Technology Details</h1>
+      {technologyToDisplay.name}
+      {technologyToDisplay.image}
+      {technologyToDisplay.description}
     </div>
   );
 }