diff --git a/package-lock.json b/package-lock.json index eadb7c4..14a72cf 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.27.0" }, "devDependencies": { "@types/react": "^18.0.37", @@ -911,6 +912,15 @@ "node": ">= 8" } }, + "node_modules/@remix-run/router": { + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz", + "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==", + "license": "MIT", + "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 +3565,38 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.27.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz", + "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.20.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.27.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz", + "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.20.0", + "react-router": "6.27.0" + }, + "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 +5059,11 @@ "fastq": "^1.6.0" } }, + "@remix-run/router": { + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz", + "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==" + }, "@tootallnate/once": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz", @@ -6960,6 +7007,23 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "6.27.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz", + "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==", + "requires": { + "@remix-run/router": "1.20.0" + } + }, + "react-router-dom": { + "version": "6.27.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz", + "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==", + "requires": { + "@remix-run/router": "1.20.0", + "react-router": "6.27.0" + } + }, "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..f4ee931 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.27.0" }, "devDependencies": { "@types/react": "^18.0.37", diff --git a/src/App.css b/src/App.css index b9d355d..5214294 100644 --- a/src/App.css +++ b/src/App.css @@ -1,7 +1,6 @@ #root { max-width: 1280px; - margin: 0 auto; - padding: 2rem; + margin: 0; text-align: center; } @@ -40,3 +39,125 @@ .read-the-docs { color: #888; } + +nav{ + background-color: #646cffaa; + color: white; + text-align: left; + padding: 20px; +} + +.App{ + width: 100vw; +} + +.App-main{ + display: flex; + flex-direction: column; + justify-content: center; + + h1{ + margin: 5px 0; + } +} + +.companies{ + text-align: center; + + display: flex; + justify-content: center; + flex-wrap: wrap; +} + +.company{ + width: 500px; + height: 500px; + padding: 100px; + + cursor: pointer; + + h3{ + font-size: 2em; + margin-bottom: 100px; + } +} + +.small-company{ + width: 350px; + height: 350px; +} + +.main-title{ + width: 350px; + height: 350px; + margin: 50px; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); +} + +.technology{ + width: 350px; + height: 350px; +} + +.img-tile{ + width: 50%; +} + +.company-area, .tech-area{ + display: flex; + justify-content: center; +} + +.company-img, .technology-img{ + width: 50%; +} + +.company-details, .technology-details{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + text-align: center; + + width: 400px; + margin-left: 100px; +} + +.company-tech{ + display: flex; + overflow-x: scroll; + margin: 0 20px; +} + +.tech-tile-area{ + display: flex; + flex-direction: column; +} + +.tech-tile{ + width: 150px; + height: 150px; + margin: 25px; + cursor: pointer; + + box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); + display: flex; + justify-content: center; + align-items: center; +} + +.tech-icon{ + width: 50%; +} + +#back-button{ + background-color: #c2bebe; + + border: 0.5px solid black; +} \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 1b51d87..87ec0c9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,25 @@ +import { Route, Routes } from "react-router-dom"; 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

+ +
+

LAB | React Stack Tracker

+ + }> + }> + }> + +
); } diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 09e2806..a3d9dde 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,5 +1,9 @@ +import { Link } from "react-router-dom"; + 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/main.jsx b/src/main.jsx index 54b39dd..622dec4 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( - + + + , ) diff --git a/src/pages/CompanyPage.jsx b/src/pages/CompanyPage.jsx index cc5903c..c38cd01 100644 --- a/src/pages/CompanyPage.jsx +++ b/src/pages/CompanyPage.jsx @@ -1,7 +1,41 @@ -function CompanyPage() { +import { useParams } from "react-router-dom"; +import { Link } from "react-router-dom"; + +function CompanyPage({companies}) { + let {companySlug} = useParams(); + + let company = companies.find(c => c.slug === companySlug); + return (
-

CompanyPage

+

Company Profile

+ +
+
+ +
+ +
+

{company.name}

+

About

+

{company.description}

+
+
+ +
+ {company.techStack.map(tech => { + return( +
+ +
+ Technology icon +
+ +

{tech.name}

+
+ ) + })} +
); } diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index e97e7de..b4cce55 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -1,8 +1,22 @@ -function HomePage() { +import { Link } from "react-router-dom"; + +function HomePage({companies}) { return ( -
-

HomePage

-
+ <> +

StackTracker: Discover Tech Stacks Used by Top Companies

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

{company.name}

+ +
+ + )}) + } +
+ ); } diff --git a/src/pages/TechnologyPage.jsx b/src/pages/TechnologyPage.jsx index 30f9414..d7ee097 100644 --- a/src/pages/TechnologyPage.jsx +++ b/src/pages/TechnologyPage.jsx @@ -1,7 +1,35 @@ -function TechnologyPage() { +import { useParams } from "react-router-dom"; +import { useSearchParams } from "react-router-dom"; +import { Link } from "react-router-dom"; + + +function TechnologyPage({technologies}) { + let {slug} = useParams(); + const [searchParams, setSearchParams] = useSearchParams(); + + const companySlug = searchParams.get("companySlug"); + + let technology = technologies.find(t => t.slug === slug); + return (
-

TechnologyPage

+

Technology Details

+ +
+
+ +
+ +
+

{technology.name}

+

About

+

{technology.description}

+
+
+ + + +
); }