diff --git a/package-lock.json b/package-lock.json index eadb7c4..adf1ca7 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.4.0" }, "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.4.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.4.0.tgz", + "integrity": "sha512-Y2g5ObjkvX3VFeVt+0CIPuYd9PpgqCslG7ASSIdN73LwA1nNWzcMLaoMRJfP3prZFI92svxFwbn7XkLJ+UPQ6A==", + "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.4.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.4.0.tgz", + "integrity": "sha512-VlksBPf3n2bijPvnA7nkTsXxMAKOj+bWp4R9c3i+bnwlSOFAGOkJkKhzy/OsRkWaBMICqcAl1JDzh9ZSOze9CA==", + "license": "MIT", + "dependencies": { + "react-router": "7.4.0" + }, + "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.4.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.4.0.tgz", + "integrity": "sha512-Y2g5ObjkvX3VFeVt+0CIPuYd9PpgqCslG7ASSIdN73LwA1nNWzcMLaoMRJfP3prZFI92svxFwbn7XkLJ+UPQ6A==", + "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.4.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.4.0.tgz", + "integrity": "sha512-VlksBPf3n2bijPvnA7nkTsXxMAKOj+bWp4R9c3i+bnwlSOFAGOkJkKhzy/OsRkWaBMICqcAl1JDzh9ZSOze9CA==", + "requires": { + "react-router": "7.4.0" + } + }, "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..b2b4298 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.4.0" }, "devDependencies": { "@types/react": "^18.0.37", diff --git a/src/App.css b/src/App.css index b9d355d..587e11f 100644 --- a/src/App.css +++ b/src/App.css @@ -40,3 +40,210 @@ .read-the-docs { color: #888; } + +.navbar { + width: 100%; + height: 50px; + top: 0; + left: 0; + position: fixed; + display: flex; + align-items: center; + background-color: #646cff; + text-align: left; + font-size: 1.2rem; + font-weight: bold; + padding: 10px 20px; +} + +.logo { + height: 30px; + color: white; + cursor: pointer; +} + +.content { + width: auto; + height: calc(100vh - 170px); + font-size: 0.6rem; + display: flex; +} + +.home-page-content { + display: flex; + flex-direction: column; +} + +.companies { + padding-top: 30px; + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: center; + gap: 40px; + max-width: calc(2 * 300px + 40px); + margin: 0 auto; +} + +.companies a { + color: black; +} + +.company { + width: 300px; + height: 300px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 30px; + box-shadow: 0px 5px 5px 5px rgba(0, 0, 0, 0.055); + border-radius: 5px; +} + +.company-name { + font-size: 1.2rem; + font-weight: bold; + margin: 0; + padding: 0; +} + +.company-logo { + width: 100%; + min-width: 50px; + max-width: 80px; + height: auto; +} + +.company-details-content { + margin-top: 80px; + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + gap: 20px; +} + +.company-wrapper { + display: flex; + flex-direction: column; + gap: 200px; +} + +.company-details { + display: flex; + align-items: center; + justify-content: center; + gap: 100px; +} + +.company-img { + width: 200px; + height: 200px; + margin: 10px; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0px 5px 5px 5px rgba(0, 0, 0, 0.055); + border-radius: 5px; +} + +.company-img img { + width: 100px; + height: 100px; +} + +.company-about-section { + text-align: center; + width: 300px; +} + +.company-about-section h2 { + font-size: 1.7rem; + padding: 0; + margin: 0; +} + +.company-about-section p { + font-size: 0.85rem; +} + +.technologies { + display: flex; + justify-content: space-around; + gap: 20px; +} + +.technologies a { + color: black; +} + +.tech-details { + display: flex; + flex-direction: column; +} + +.tech-img { + width: 100px; + height: 100px; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0px 5px 5px 5px rgba(0, 0, 0, 0.055); + border-radius: 5px; +} + +.tech-img img { + width: 100%; + min-width: 40px; + max-width: 40px; + height: auto; +} + +.technologies-details-content { + display: flex; + flex-direction: column; + gap: 20px; +} + +.page-name { + margin-bottom: 70px; +} + +.technology { + display: flex; + justify-content: space-between; + gap: 150px; + align-items: center; +} + +.technology .tech-img { + width: 200px; + height: 200px; +} + +.technology .tech-img img { + width: 100%; + min-width: 80px; + max-width: 80px; + height: auto; +} + +.tech-about { + width: 320px; +} + +.tech-about h1 { + padding: 0; + margin: 0; +} + +.tech-about p { + font-size: 0.9rem; +} + +.back-btn { + margin-top: 100px; + width: 150px; + font-size: 0.9rem; +} diff --git a/src/App.jsx b/src/App.jsx index 1b51d87..ccc2fc1 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,30 @@ +import { Routes, Route } 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 TechnologyPage from "./pages/TechnologyPage"; +import CompanyPage from "./pages/CompanyPage"; + function App() { return (
-

LAB | React Stack Tracker

+ + + } /> + } + /> + } + /> +
); } diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 09e2806..2437e1f 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,5 +1,13 @@ +import { Link } from "react-router-dom"; + function Navbar() { - return ; + return ( + + ); } export default Navbar; diff --git a/src/main.jsx b/src/main.jsx index 54b39dd..4b2f6d9 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,10 +1,14 @@ -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 { BrowserRouter as Router } from "react-router-dom"; -ReactDOM.createRoot(document.getElementById('root')).render( +import App from "./App.jsx"; +import "./index.css"; + +ReactDOM.createRoot(document.getElementById("root")).render( - - , -) + + + + +); diff --git a/src/pages/CompanyPage.jsx b/src/pages/CompanyPage.jsx index cc5903c..42141f4 100644 --- a/src/pages/CompanyPage.jsx +++ b/src/pages/CompanyPage.jsx @@ -1,7 +1,40 @@ -function CompanyPage() { +import { useParams, Link } from "react-router-dom"; + +function CompanyPage({ companies }) { + const { companySlug } = useParams(); + return ( -
-

CompanyPage

+
+

Company Profile

+ {companies && + companies + .filter((company) => company.slug === companySlug) + .map((company) => ( +
+
+
+ {company.name} +
+
+

{company.name}

+

About

+

{company.description}

+
+
+
+ {company.techStack.map((tech) => ( + +
+
+ {tech.name} +
+

{tech.name}

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

HomePage

+
+

StackTracker: Discover Tech Stacks Used by Top Companies

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

{company.name}

+ +
+ + ))} +
); } diff --git a/src/pages/TechnologyPage.jsx b/src/pages/TechnologyPage.jsx index 30f9414..5edcc65 100644 --- a/src/pages/TechnologyPage.jsx +++ b/src/pages/TechnologyPage.jsx @@ -1,7 +1,40 @@ -function TechnologyPage() { +import { useParams, useSearchParams, useNavigate } from "react-router-dom"; + +function TechnologyPage({ technologies }) { + const { slug } = useParams(); + const [searchParams] = useSearchParams(); + const navigate = useNavigate(); + + const companySlug = searchParams.get("companySlug"); + return ( -
-

TechnologyPage

+
+

Technology Details

+
+ {technologies && + technologies + .filter((tech) => tech.slug === slug) + .map((tech) => ( +
+
+ {tech.name} +
+
+

{tech.name}

+

About

+

{tech.description}

+
+
+ ))} +
+
+ +
); }