From dddd6166cb879b8987986af406eff0ded555fc15 Mon Sep 17 00:00:00 2001 From: RoniPG Date: Fri, 29 Nov 2024 11:18:21 +0100 Subject: [PATCH 01/12] Iteration 0 | Getting Started --- package-lock.json | 109 +++++++++++++++++++++++++++++++++++++++++++++- package.json | 3 +- 2 files changed, 110 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index eadb7c4..69a88e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "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", @@ -935,6 +936,12 @@ "@types/chai": "*" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", + "license": "MIT" + }, "node_modules/@types/node": { "version": "20.2.5", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.5.tgz", @@ -1505,6 +1512,15 @@ "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", "dev": true }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -3555,6 +3571,46 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.1.tgz", + "integrity": "sha512-WVAhv9oWCNsja5AkK6KLpXJDSJCQizOIyOd4vvB/+eHGbYx5vkhcmcmwWjQ9yqkRClogi+xjEg9fNEOd5EX/tw==", + "license": "MIT", + "dependencies": { + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.0.1.tgz", + "integrity": "sha512-duBzwAAiIabhFPZfDjcYpJ+f08TMbPMETgq254GWne2NW1ZwRHhZLj7tpSp8KGb7JvZzlLcjGUnqLxpZQVEPng==", + "license": "MIT", + "dependencies": { + "react-router": "7.0.1" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/regexp.prototype.flags": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz", @@ -3723,6 +3779,12 @@ "semver": "bin/semver.js" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -3990,6 +4052,12 @@ "node": ">=14" } }, + "node_modules/turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==", + "license": "ISC" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -5038,6 +5106,11 @@ "@types/chai": "*" } }, + "@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==" + }, "@types/node": { "version": "20.2.5", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.5.tgz", @@ -5464,6 +5537,11 @@ "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", "dev": true }, + "cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==" + }, "cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -6960,6 +7038,25 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.0.1.tgz", + "integrity": "sha512-WVAhv9oWCNsja5AkK6KLpXJDSJCQizOIyOd4vvB/+eHGbYx5vkhcmcmwWjQ9yqkRClogi+xjEg9fNEOd5EX/tw==", + "requires": { + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" + } + }, + "react-router-dom": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.0.1.tgz", + "integrity": "sha512-duBzwAAiIabhFPZfDjcYpJ+f08TMbPMETgq254GWne2NW1ZwRHhZLj7tpSp8KGb7JvZzlLcjGUnqLxpZQVEPng==", + "requires": { + "react-router": "7.0.1" + } + }, "regexp.prototype.flags": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz", @@ -7073,6 +7170,11 @@ "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", "dev": true }, + "set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==" + }, "shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -7274,6 +7376,11 @@ "punycode": "^2.3.0" } }, + "turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==" + }, "type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/package.json b/package.json index 727f1c1..9f4bb78 100644 --- 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": "^7.0.1" }, "devDependencies": { "@types/react": "^18.0.37", From 0d38750f85bfcbd5e231ec02506812306b9e7275 Mon Sep 17 00:00:00 2001 From: RoniPG Date: Fri, 29 Nov 2024 11:21:49 +0100 Subject: [PATCH 02/12] Iteration 1 | Import Data --- src/App.jsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/App.jsx b/src/App.jsx index 1b51d87..b899f78 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,6 +1,13 @@ +import { useState } from "react"; import "./App.css"; +import companiesData from "./companies.json"; +import technologiesData from "./technologies.json"; + function App() { + const [companies, setCompanies] = useState(companiesData); + const [technologies, setTechnologies] = useState(technologiesData); + return (

LAB | React Stack Tracker

From fc50b113131f235c1c70f4ca11c5c2969fba5f42 Mon Sep 17 00:00:00 2001 From: RoniPG Date: Fri, 29 Nov 2024 11:45:49 +0100 Subject: [PATCH 03/12] Iteration 2 | Create Components --- src/App.jsx | 9 ++++++++- src/components/Navbar.jsx | 18 +++++++++++++++++- src/pages/CompanyPage.jsx | 2 +- src/pages/HomePage.jsx | 2 +- src/pages/TechnologyPage.jsx | 2 +- 5 files changed, 28 insertions(+), 5 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index b899f78..3b43d0c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,6 +2,10 @@ import { useState } from "react"; 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() { @@ -10,7 +14,10 @@ function App() { return (
-

LAB | React Stack Tracker

+ + + +
); } diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 09e2806..ee2f46e 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,5 +1,21 @@ function Navbar() { - return ; + return ( + + ); } export default Navbar; diff --git a/src/pages/CompanyPage.jsx b/src/pages/CompanyPage.jsx index cc5903c..2d9ee3f 100644 --- a/src/pages/CompanyPage.jsx +++ b/src/pages/CompanyPage.jsx @@ -1,7 +1,7 @@ function CompanyPage() { return (
-

CompanyPage

+

Company Profile

); } diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index e97e7de..bad7ad2 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -1,7 +1,7 @@ function HomePage() { return (
-

HomePage

+

StackTracker: Discover Tech Stacks Used by Top Companies

); } diff --git a/src/pages/TechnologyPage.jsx b/src/pages/TechnologyPage.jsx index 30f9414..2e077ef 100644 --- a/src/pages/TechnologyPage.jsx +++ b/src/pages/TechnologyPage.jsx @@ -1,7 +1,7 @@ function TechnologyPage() { return (
-

TechnologyPage

+

Technology Details

); } From 625488d6b37cf3f9fb6f2fec063a19ce0ae905f0 Mon Sep 17 00:00:00 2001 From: RoniPG Date: Fri, 29 Nov 2024 11:53:45 +0100 Subject: [PATCH 04/12] Iteration 3 | Setup React Router and Create Routes --- src/App.jsx | 14 +++++++++----- src/main.jsx | 5 ++++- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 3b43d0c..852ae1d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,11 +1,12 @@ import { useState } from "react"; import "./App.css"; -import companiesData from "./companies.json"; -import technologiesData from "./technologies.json"; +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"; +import { Route, Routes } from "react-router-dom"; function App() { @@ -15,9 +16,12 @@ function App() { return (
- - - + + } /> + } /> + } /> + +
); } diff --git a/src/main.jsx b/src/main.jsx index 54b39dd..3bbac49 100644 --- a/src/main.jsx +++ b/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( - + + + , ) From 481ab3bd1084eabd67b7d76a1abf1c29712b4f10 Mon Sep 17 00:00:00 2001 From: RoniPG Date: Fri, 29 Nov 2024 12:07:24 +0100 Subject: [PATCH 05/12] Iteration 4 | Display Companies as a List --- .eslintrc.cjs | 1 + src/App.jsx | 2 +- src/pages/HomePage.jsx | 9 ++++++++- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index ec601b2..8e14e96 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -11,5 +11,6 @@ module.exports = { plugins: ['react-refresh'], rules: { 'react-refresh/only-export-components': 'warn', + 'prop-validations' : 'off' }, } diff --git a/src/App.jsx b/src/App.jsx index 852ae1d..6f21ba0 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -17,7 +17,7 @@ function App() {
- } /> + } /> } /> } /> diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index bad7ad2..c50ded7 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -1,7 +1,14 @@ -function HomePage() { +import { Link } from "react-router-dom"; + +function HomePage({companies}) { return (

StackTracker: Discover Tech Stacks Used by Top Companies

+ {companies.map( company => ( + {company.name} + {company.name} + + ))}
); } From e3a6488bf40e08b821e8653fa79a908bf2ec8199 Mon Sep 17 00:00:00 2001 From: RoniPG Date: Fri, 29 Nov 2024 13:15:56 +0100 Subject: [PATCH 06/12] 5.1 | Access URL Parameters --- src/App.jsx | 2 +- src/components/Navbar.jsx | 14 +------------- src/pages/CompanyPage.jsx | 7 ++++++- 3 files changed, 8 insertions(+), 15 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 6f21ba0..5d8e451 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -18,7 +18,7 @@ function App() { } /> - } /> + } /> } /> diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index ee2f46e..39e926c 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,18 +1,6 @@ function Navbar() { return ( -
diff --git a/src/pages/TechnologyPage.jsx b/src/pages/TechnologyPage.jsx index 2e077ef..088bb8d 100644 --- a/src/pages/TechnologyPage.jsx +++ b/src/pages/TechnologyPage.jsx @@ -1,4 +1,9 @@ -function TechnologyPage() { +import { useParams } from "react-router-dom"; + +function TechnologyPage({technologies}) { + const {slug} = useParams(); + console.log(slug); + return (

Technology Details

From 7074884104c286d0c83b6bf20ed485c0c011ab3e Mon Sep 17 00:00:00 2001 From: RoniPG Date: Fri, 29 Nov 2024 13:42:16 +0100 Subject: [PATCH 10/12] 6.2 | Show Technology Details --- src/pages/TechnologyPage.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/TechnologyPage.jsx b/src/pages/TechnologyPage.jsx index 088bb8d..7193eef 100644 --- a/src/pages/TechnologyPage.jsx +++ b/src/pages/TechnologyPage.jsx @@ -2,11 +2,16 @@ import { useParams } from "react-router-dom"; function TechnologyPage({technologies}) { const {slug} = useParams(); - console.log(slug); + + const technology = technologies.find((tech) => tech.slug === slug) + console.log(technology); return (

Technology Details

+ {technology.name} + {technology.image} + {technology.description}
); } From 0cd56287c90910c7eedd316ff33970900c970ab5 Mon Sep 17 00:00:00 2001 From: RoniPG Date: Fri, 29 Nov 2024 14:41:39 +0100 Subject: [PATCH 11/12] Bonus: Iteration 7 | Back to Visited Company --- src/pages/CompanyPage.jsx | 5 +++-- src/pages/TechnologyPage.jsx | 16 ++++++++++++---- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/pages/CompanyPage.jsx b/src/pages/CompanyPage.jsx index 5edefa8..2a4b04b 100644 --- a/src/pages/CompanyPage.jsx +++ b/src/pages/CompanyPage.jsx @@ -6,16 +6,17 @@ function CompanyPage({companies}) { const companyToShow = companies.find((company) => ( company.slug === companySlug )); + const name = companyToShow.slug; return (

Company Profile

- {companyToShow.name} + {name} {companyToShow.website} {companyToShow.description} {companyToShow.logo} {companyToShow.techStack.map((tech) => ( - + {tech.name} {tech.image} diff --git a/src/pages/TechnologyPage.jsx b/src/pages/TechnologyPage.jsx index 7193eef..e9c798a 100644 --- a/src/pages/TechnologyPage.jsx +++ b/src/pages/TechnologyPage.jsx @@ -1,10 +1,17 @@ -import { useParams } from "react-router-dom"; +import { Link, useParams, useSearchParams } from "react-router-dom"; function TechnologyPage({technologies}) { const {slug} = useParams(); - - const technology = technologies.find((tech) => tech.slug === slug) - console.log(technology); + const [searchParams, setSearchParams] = useSearchParams(); + console.log("tech.slug === slug"); + + const companySlug = searchParams.get("slug"); + + const technology = technologies.find((tech) => { + console.log("tech.slug === slug", tech.slug, slug); + return tech.slug === slug}) + console.log("technology", technology); + return (
@@ -12,6 +19,7 @@ function TechnologyPage({technologies}) { {technology.name} {technology.image} {technology.description} +
); } From cf09d68f5abe21b7bb6fd7046877b29deabab5df Mon Sep 17 00:00:00 2001 From: RoniPG Date: Fri, 29 Nov 2024 18:52:23 +0100 Subject: [PATCH 12/12] Bonus: Iteration 8 | Styling --- index.html | 1 + src/App.css | 42 ----------------- src/App.jsx | 5 +- src/components/Navbar.jsx | 6 ++- src/index.css | 88 ++++++++++++------------------------ src/pages/CompanyPage.jsx | 49 ++++++++++++++------ src/pages/HomePage.jsx | 23 ++++++---- src/pages/TechnologyPage.jsx | 39 ++++++++++------ 8 files changed, 113 insertions(+), 140 deletions(-) delete mode 100644 src/App.css diff --git a/index.html b/index.html index ba47f90..f311151 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ LAB Stack Tracker +
diff --git a/src/App.css b/src/App.css deleted file mode 100644 index b9d355d..0000000 --- a/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/src/App.jsx b/src/App.jsx index 53f70d5..ff0a215 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,6 @@ +/* eslint-disable no-unused-vars */ + import { useState } from "react"; -import "./App.css"; import companiesData from "./companies.json"; import technologiesData from "./technologies.json"; import Navbar from "./components/Navbar"; @@ -15,7 +16,7 @@ function App() { return (
- + } /> } /> diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 39e926c..f89bd2a 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,7 +1,9 @@ function Navbar() { return ( -