diff --git a/package-lock.json b/package-lock.json index eadb7c4..8b70256 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.7.1" }, "devDependencies": { "@types/react": "^18.0.37", @@ -1505,6 +1506,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 +3565,44 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.7.1.tgz", + "integrity": "sha512-jVKHXoWRIsD/qS6lvGveckwb862EekvapdHJN/cGmzw40KnJH5gg53ujOJ4qX6EKIK9LSBfFed/xiQ5yeXNrUA==", + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.7.1.tgz", + "integrity": "sha512-bavdk2BA5r3MYalGKZ01u8PGuDBloQmzpBZVhDLrOOv1N943Wq6dcM9GhB3x8b7AbqPMEezauv4PeGkAJfy7FQ==", + "license": "MIT", + "dependencies": { + "react-router": "7.7.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 +3771,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", @@ -5464,6 +5518,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 +7019,23 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.7.1.tgz", + "integrity": "sha512-jVKHXoWRIsD/qS6lvGveckwb862EekvapdHJN/cGmzw40KnJH5gg53ujOJ4qX6EKIK9LSBfFed/xiQ5yeXNrUA==", + "requires": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + } + }, + "react-router-dom": { + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.7.1.tgz", + "integrity": "sha512-bavdk2BA5r3MYalGKZ01u8PGuDBloQmzpBZVhDLrOOv1N943Wq6dcM9GhB3x8b7AbqPMEezauv4PeGkAJfy7FQ==", + "requires": { + "react-router": "7.7.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 +7149,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", diff --git a/package.json b/package.json index 727f1c1..b55c130 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.7.1" }, "devDependencies": { "@types/react": "^18.0.37", diff --git a/src/App.css b/src/App.css index b9d355d..317a94e 100644 --- a/src/App.css +++ b/src/App.css @@ -40,3 +40,23 @@ .read-the-docs { color: #888; } + +.company-grid, +.tech-containers { + display: grid; + grid-template-columns: repeat(5, 200px); + justify-content: center; +} + +.companyNameAndLogo img { + height: 300px; + width: 300px; + object-fit: contain; +} + +.technology img, +.company img, +.company-grid img { + width: 100px; + height: 100px; +} diff --git a/src/App.jsx b/src/App.jsx index 1b51d87..804056d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,26 @@ +import { Routes, Route } from "react-router-dom"; import "./App.css"; +import companies from "./companies.json"; +import technologies from "./technologies.json"; +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/main.jsx b/src/main.jsx index 54b39dd..14c41cb 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,12 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App.jsx' -import './index.css' - -ReactDOM.createRoot(document.getElementById('root')).render( +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( - - , -) + + + + +); diff --git a/src/pages/CompanyPage.jsx b/src/pages/CompanyPage.jsx index cc5903c..50281ba 100644 --- a/src/pages/CompanyPage.jsx +++ b/src/pages/CompanyPage.jsx @@ -1,9 +1,37 @@ -function CompanyPage() { +import { Link, useParams } from "react-router-dom"; +import PropTypes from "prop-types"; +function CompanyPage({ companies }) { + const { companySlug } = useParams(); + const company = companies.find((company) => { + return company.id === companySlug; + }); return ( -
-

CompanyPage

+
+ + + +

{company.name}

+

{company.website}

+

{company.description}

+ +
+ {company.techStack.map((techstack) => { + return ( + +

{techstack.name}

+ + + ); + })} +
); } +CompanyPage.propTypes = { + companies: PropTypes.array.isRequired, +}; export default CompanyPage; diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index e97e7de..3324948 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -1,9 +1,30 @@ -function HomePage() { +import PropTypes from "prop-types"; +import { Link } from "react-router-dom"; + +const HomePage = (props) => { + const { companies } = props; return (
-

HomePage

+

StackTracker: Discover Tech Stacks Used by Top Companies

+ +
+ {companies.map((company) => { + return ( + +
+

{company.name}

+ +
+ + ); + })} +
); -} +}; + +HomePage.propTypes = { + companies: PropTypes.array.isRequired, +}; export default HomePage; diff --git a/src/pages/TechnologyPage.jsx b/src/pages/TechnologyPage.jsx index 30f9414..3e27cf8 100644 --- a/src/pages/TechnologyPage.jsx +++ b/src/pages/TechnologyPage.jsx @@ -1,9 +1,25 @@ -function TechnologyPage() { +import { useParams, useSearchParams, Link } from "react-router-dom"; +import PropTypes from "prop-types"; + +function TechnologyPage({ technologies }) { + const { slug } = useParams(); + const [queryString] = useSearchParams(); + const companySlug = queryString.get("companySlug"); + const technology = technologies.find((technology) => { + return technology.slug === slug; + }); return ( -
-

TechnologyPage

+
+ Back +

{technology.name}

+

{technology.description}

+
); } +TechnologyPage.propTypes = { + technologies: PropTypes.array.isRequired, +}; + export default TechnologyPage;