diff --git a/.eslintrc.cjs b/.eslintrc.cjs index ec601b2..d46b749 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -11,5 +11,6 @@ module.exports = { plugins: ['react-refresh'], rules: { 'react-refresh/only-export-components': 'warn', + 'react/prop-types': 'off' }, } diff --git a/package-lock.json b/package-lock.json index eadb7c4..1061412 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": "^7.8.0" }, "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,28 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.8.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.8.0.tgz", + "integrity": "sha512-r15M3+LHKgM4SOapNmsH3smAizWds1vJ0Z9C4mWaKnT9/wD7+d/0jYcj6LmOvonkrO4Rgdyp4KQ/29gWN2i1eg==", + "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/regexp.prototype.flags": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.0.tgz", @@ -3723,6 +3755,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 +5502,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 +7003,15 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "7.8.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.8.0.tgz", + "integrity": "sha512-r15M3+LHKgM4SOapNmsH3smAizWds1vJ0Z9C4mWaKnT9/wD7+d/0jYcj6LmOvonkrO4Rgdyp4KQ/29gWN2i1eg==", + "requires": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.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 +7125,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..aacae0a 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": "^7.8.0" }, "devDependencies": { "@types/react": "^18.0.37", 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 1b51d87..74d6673 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,9 +1,27 @@ -import "./App.css"; +import { useState } from "react"; + +import companiesJSON from "./companies.json" +import technologiesJSON 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"; function App() { + const [companies, setCompanies] = useState(companiesJSON); + const [technologies, setTechnologies] = useState(technologiesJSON); + return (
-

LAB | React Stack Tracker

+ + + }> + }> + }> + +
); } diff --git a/src/components/CompanyTech.jsx b/src/components/CompanyTech.jsx new file mode 100644 index 0000000..c95b023 --- /dev/null +++ b/src/components/CompanyTech.jsx @@ -0,0 +1,13 @@ +import { Link } from "react-router" + +function CompanyTech({ techStack: { name, slug, image }, companySlug }) { + return ( + +
+ {name +
+

{name}

+ + ) +} +export default CompanyTech \ No newline at end of file diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 09e2806..7ef8ce6 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,5 +1,10 @@ +import { Link } from "react-router"; + function Navbar() { - return ; + return ( + + + ); } export default Navbar; diff --git a/src/components/ProfileDetail.jsx b/src/components/ProfileDetail.jsx new file mode 100644 index 0000000..94fb408 --- /dev/null +++ b/src/components/ProfileDetail.jsx @@ -0,0 +1,15 @@ +function ProfileDetail({logo, name, description}) { + return ( +
+
+ {name +
+
+

{name}

+

About

+

{description}

+
+
+ ); +} +export default ProfileDetail; diff --git a/src/index.css b/src/index.css index b121ef9..0fa95ec 100644 --- a/src/index.css +++ b/src/index.css @@ -22,7 +22,7 @@ a:hover { body { margin: 0; display: flex; - place-items: center; + /* place-items: center; */ min-width: 320px; min-height: 100vh; } @@ -62,3 +62,137 @@ button:focus-visible { background-color: #f9f9f9; } } + +#root { + width: 100%; + + .App { + width: 100%; + display: flex; + flex-direction: column; + + nav { + background-color: #646cff; + color: white; + padding: 20px 10px; + width: 100%; + box-sizing: border-box; + font-weight: 600; + } + + .main-container { + margin: 20px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 40px; + + h1 { + font-size: 1.5em; + text-align: center; + } + } + + .homepage-container { + .companies-list { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + + .company-info-container { + width: 35%; + /* height: 200px; */ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 60px 10px; + margin: 10px; + box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1); + border-radius: 5px; + gap: 50px; + + h3 { + margin: 0px; + } + + img { + width: 125px; + } + } + } + } + + .company-container { + display: flex; + flex-direction: column; + + .tech-list-container { + display: flex; + align-items: center; + gap: 20px; + overflow-x: auto; + width: 100%; + flex-wrap: nowrap; + padding-bottom: 20px; + + .company-tech-container { + margin-top: 100px; + + .tech-logo-container { + box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1); + border-radius: 5px; + height: 100px; + width: 100px; + display: flex; + justify-content: center; + align-items: center; + img { + width: 50px; + } + } + + h3 { + font-size: 0.7em; + text-align: center; + } + } + } + } + } +} + +.profile-info { + display: flex; + justify-content: center; + gap: 150px; + + .profile-logo { + padding: 50px 70px; + margin: auto 0; + box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1); + border-radius: 5px; + img { + width: 100px; + } + } + + .profile-text-info { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 30%; + padding: 10px; + h3 { + margin: 5px; + } + h4 { + margin: 0; + } + p { + text-align: center; + } + } +} diff --git a/src/main.jsx b/src/main.jsx index 54b39dd..977d4cb 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 } from "react-router-dom"; -ReactDOM.createRoot(document.getElementById('root')).render( +ReactDOM.createRoot(document.getElementById("root")).render( - - , -) + + + + +); diff --git a/src/pages/CompanyPage.jsx b/src/pages/CompanyPage.jsx index cc5903c..aefb8f6 100644 --- a/src/pages/CompanyPage.jsx +++ b/src/pages/CompanyPage.jsx @@ -1,7 +1,21 @@ -function CompanyPage() { +import { useParams } from "react-router"; +import CompanyTech from "../components/CompanyTech"; +import ProfileDetail from "../components/ProfileDetail"; + +function CompanyPage({ companies }) { + const { companySlug } = useParams(); + const foundCompany = companies.find(company => company.slug === companySlug); + if (!foundCompany) { + return

Company not found

+ } + return ( -
-

CompanyPage

+
+

Company Profile

+ +
+ {foundCompany.techStack.map(tech => )} +
); } diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index e97e7de..75c4224 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -1,7 +1,23 @@ -function HomePage() { +import { Link } from "react-router"; + +function HomePage({ companies }) { + if (!companies) { + return

There is no companies

+ } + return ( -
-

HomePage

+
+

StackTracker: Discover Tech Stacks Used by Top Companies

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

{company.name}

+ Company logo + + ); + })} +
); } diff --git a/src/pages/TechnologyPage.jsx b/src/pages/TechnologyPage.jsx index 30f9414..22bc0ce 100644 --- a/src/pages/TechnologyPage.jsx +++ b/src/pages/TechnologyPage.jsx @@ -1,7 +1,23 @@ -function TechnologyPage() { +import { Link, useParams, useSearchParams } from "react-router"; +import ProfileDetail from "../components/ProfileDetail"; + +function TechnologyPage({ technologies }) { + const { slug } = useParams(); + const [search, setSearch] = useSearchParams(); + const company = search.get("company"); + + const foundTech = technologies.find(tech => tech.slug === slug); + + + if (!foundTech) { + return

Tech not found

+ } + return ( -
-

TechnologyPage

+
+

Technology Details

+ +
); }