From 2961476c0edc059c22d0fc68873311e8ecb6442f Mon Sep 17 00:00:00 2001 From: Uros Cirkovic Date: Mon, 31 Jul 2023 17:10:59 +0200 Subject: [PATCH 1/8] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ee42f26..8d323a4 100644 --- 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: From abcf578f00cbf82fbc2443beb6670b8253dc494d Mon Sep 17 00:00:00 2001 From: Uros Cirkovic Date: Wed, 13 Sep 2023 10:12:54 +0200 Subject: [PATCH 2/8] feat: update page title --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 79c4701..ba47f90 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite + React + LAB Stack Tracker
From 8c278b851dfc3f8d389a31a805fed8bc5fef167a Mon Sep 17 00:00:00 2001 From: Uros Cirkovic Date: Wed, 13 Sep 2023 10:21:36 +0200 Subject: [PATCH 3/8] fix: update faq about react router setup --- README.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 8d323a4..29f8bce 100644 --- a/README.md +++ b/README.md @@ -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 `` component with it: +2. Import the `BrowserRouter` component in your app's entry point (usually `main.jsx`) and wrap your `` component with it: ```jsx import { BrowserRouter as Router } from "react-router-dom"; -ReactDOM.render( - - - , - document.getElementById("root") +const root = ReactDOM.createRoot(document.getElementById("root")); + +root.render( + + + + + ); ``` From 92123de8f3fa82267a331a68c62951b4d802b17a Mon Sep 17 00:00:00 2001 From: Arnau Ramos Date: Sat, 9 Mar 2024 14:50:55 +0100 Subject: [PATCH 4/8] done iterations 0 & 1 --- package-lock.json | 63 ++++++++++++++++++++++++++++++++++++++++++++++- package.json | 3 ++- src/App.jsx | 2 ++ 3 files changed, 66 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index eadb7c4..f1e8939 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": "^6.22.3" }, "devDependencies": { "@types/react": "^18.0.37", @@ -911,6 +912,14 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", + "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", @@ -3555,6 +3564,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", + "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", + "dependencies": { + "@remix-run/router": "1.15.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", + "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", + "dependencies": { + "@remix-run/router": "1.15.3", + "react-router": "6.22.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/regexp.prototype.flags": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz", @@ -5017,6 +5056,11 @@ "fastq": "^1.6.0" } }, + "@remix-run/router": { + "version": "1.15.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", + "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==" + }, "@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", @@ -6960,6 +7004,23 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", + "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", + "requires": { + "@remix-run/router": "1.15.3" + } + }, + "react-router-dom": { + "version": "6.22.3", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", + "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", + "requires": { + "@remix-run/router": "1.15.3", + "react-router": "6.22.3" + } + }, "regexp.prototype.flags": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz", diff --git a/package.json b/package.json index 727f1c1..174cb0c 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": "^6.22.3" }, "devDependencies": { "@types/react": "^18.0.37", diff --git a/src/App.jsx b/src/App.jsx index 1b51d87..bf06658 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,4 +1,6 @@ import "./App.css"; +import companies from './companies.json' +import technologies from './technologies.json' function App() { return ( From df7148c9a6854fb6a9a4efb2f216951ca9d87f36 Mon Sep 17 00:00:00 2001 From: Arnau Ramos Date: Sat, 9 Mar 2024 15:03:00 +0100 Subject: [PATCH 5/8] done iteration 2 --- src/App.css | 10 +++++++++- src/App.jsx | 6 +++++- src/components/Navbar.jsx | 2 +- src/index.css | 1 - src/pages/CompanyPage.jsx | 2 +- src/pages/HomePage.jsx | 2 +- src/pages/TechnologyPage.jsx | 2 +- 7 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/App.css b/src/App.css index b9d355d..f8c7181 100644 --- 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,11 @@ .read-the-docs { color: #888; } + +nav { + background-color: rgb(113, 5, 201); + color: white; + width: 100vw; + display: flex; + padding: 15px 10px; +} diff --git a/src/App.jsx b/src/App.jsx index bf06658..2551625 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,11 +1,15 @@ 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"; function App() { return (
-

LAB | React Stack Tracker

+
); } diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 09e2806..55b6495 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,5 +1,5 @@ function Navbar() { - return ; + return ; } export default Navbar; diff --git a/src/index.css b/src/index.css index b121ef9..740b025 100644 --- 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/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 c7d5395f7fecdee11398f2f88ef324775e8e40e0 Mon Sep 17 00:00:00 2001 From: Arnau Ramos Date: Sat, 9 Mar 2024 15:11:39 +0100 Subject: [PATCH 6/8] Done iteration 3 --- src/App.jsx | 16 ++++++++++++---- src/main.jsx | 19 +++++++++++-------- 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 2551625..ef6efc8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,15 +1,23 @@ import "./App.css"; -import companies from './companies.json' -import technologies from './technologies.json' +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"; function App() { + + return ( -
- +
+ + + }> + }> + }> +
); } diff --git a/src/main.jsx b/src/main.jsx index 54b39dd..53f68c8 100644 --- 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( - - , -) + + + + +); From 0928caf131a8ab94ff7bd9555921fcb8557ac6a8 Mon Sep 17 00:00:00 2001 From: Arnau Ramos Date: Sat, 9 Mar 2024 15:48:05 +0100 Subject: [PATCH 7/8] Done Iteration 4 + some basic styling --- src/App.css | 21 +++++++++++++++++++++ src/App.jsx | 6 ++++-- src/pages/HomePage.jsx | 12 +++++++++++- 3 files changed, 36 insertions(+), 3 deletions(-) diff --git a/src/App.css b/src/App.css index f8c7181..abbc585 100644 --- a/src/App.css +++ b/src/App.css @@ -48,3 +48,24 @@ nav { 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; +} + + +.company-card img { + height: 80px; + width: 110px +} diff --git a/src/App.jsx b/src/App.jsx index ef6efc8..32c00be 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -6,15 +6,17 @@ 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 (
- }> + }> }> }> diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index bad7ad2..31e8de2 100644 --- 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 (

StackTracker: Discover Tech Stacks Used by Top Companies

+
+ {company.map((company) => ( + + {company.name} + {company.name} + + ))} +
); } From 99222c3444e47bdf9322f7de47724bb5dc196757 Mon Sep 17 00:00:00 2001 From: Arnau Ramos Date: Sat, 9 Mar 2024 16:58:56 +0100 Subject: [PATCH 8/8] Done Iteration 5, styling left --- src/App.css | 26 +++++++++++++++++++------- src/App.jsx | 22 +++++++++++++--------- src/pages/CompanyPage.jsx | 34 +++++++++++++++++++++++++++++++++- src/pages/HomePage.jsx | 2 +- 4 files changed, 66 insertions(+), 18 deletions(-) diff --git a/src/App.css b/src/App.css index abbc585..0a16c9c 100644 --- a/src/App.css +++ b/src/App.css @@ -49,23 +49,35 @@ nav { padding: 15px 10px; } - .card-container { display: flex; flex-wrap: wrap; - row-gap: 10px + row-gap: 10px; } .company-card { width: 33%; display: flex; - flex-direction: column; - align-items: center; + flex-direction: column; + align-items: center; border: black solid 1px; } - -.company-card img { +img { height: 80px; - width: 110px + 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 index 32c00be..bd878d5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -9,17 +9,21 @@ import { Routes, Route } from "react-router-dom"; import { useState } from "react"; function App() { - - const [company, setCompany] = useState(companies) + const [company, setCompany] = useState(companies); return ( -
- - - }> - }> - }> - +
+ + + } /> + + } + /> + + } /> +
); } diff --git a/src/pages/CompanyPage.jsx b/src/pages/CompanyPage.jsx index 2d9ee3f..86a9803 100644 --- 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 (

Company Profile

+
+ {newArray[0].name} +
+

{newArray[0].name}

+
About
+

{newArray[0].description}

+
+
+
+ {" "} + {newArray[0].techStack.map((tech) => ( + +
+ + {tech.name} +
+ + ))} +
); } diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index 31e8de2..d068618 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -6,7 +6,7 @@ function HomePage({ company }) {

StackTracker: Discover Tech Stacks Used by Top Companies

{company.map((company) => ( - + {company.name} {company.name}