40 | 
45 |
46 |
47 | )
48 | }
49 |
--------------------------------------------------------------------------------
/client/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "es2021": true,
5 | "node": true // hm...https://github.com/facebook/create-react-app/issues/12212
6 | },
7 | "extends": [
8 | "eslint:recommended",
9 | "plugin:react/recommended",
10 | "plugin:prettier/recommended"
11 | ],
12 | "parserOptions": {
13 | "ecmaVersion": "latest",
14 | "sourceType": "module",
15 | "ecmaFeatures": {
16 | "jsx": true
17 | }
18 | },
19 | "plugins": ["react"],
20 | "rules": {
21 | "react/react-in-jsx-scope": "off",
22 | "react/jsx-uses-react": "off",
23 | "react/prop-types": 0,
24 | "no-prototype-builtins": "off",
25 | "prettier/prettier": [
26 | "error",
27 | {
28 | "endOfLine": "auto"
29 | }
30 | ],
31 | "eqeqeq": ["error", "always"],
32 | "no-eval": "error",
33 | "no-implied-eval": "error",
34 | "no-return-await": "error",
35 | "no-self-compare": "error",
36 | "no-throw-literal": "error",
37 | "no-unused-expressions": [
38 | "error",
39 | { "allowShortCircuit": true, "allowTernary": true }
40 | ],
41 | "no-useless-return": "error",
42 | "no-void": "error",
43 | "wrap-iife": ["error", "any"]
44 | },
45 | "settings": {
46 | "react": {
47 | "version": "detect"
48 | }
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/client/src/context/AdminContext.js:
--------------------------------------------------------------------------------
1 | import { createContext, useReducer, useEffect } from 'react'
2 |
3 | import { fetchWithAuth } from '../util/fetchUtils'
4 | import { HOST } from '../util/apiRoutes'
5 |
6 | export const AdminContext = createContext()
7 |
8 | export const adminReducer = (state, action) => {
9 | switch (action.type) {
10 | case 'SET_ADMIN':
11 | return { admin: action.payload } // action.payload should be a boolean value
12 | default:
13 | return state
14 | }
15 | }
16 |
17 | const verifyToken = async (token) => {
18 | try {
19 | const { isAdmin } = await fetchWithAuth({
20 | url: `${HOST}/api/admin/verify`,
21 | method: 'POST',
22 | data: { token },
23 | })
24 | return isAdmin
25 | } catch (error) {
26 | console.error('Error verifying token:', error)
27 | return false
28 | }
29 | }
30 |
31 | export const AdminContextProvider = ({ children }) => {
32 | const [state, dispatch] = useReducer(adminReducer, {
33 | admin: false, // Default to null
34 | })
35 |
36 | useEffect(() => {
37 | const token = localStorage.getItem('adminToken')
38 | if (token) {
39 | verifyToken(token).then((isValidToken) => {
40 | dispatch({ type: 'SET_ADMIN', payload: isValidToken })
41 | })
42 | }
43 | }, [])
44 |
45 | return (
46 |
16 |
17 | Visualize Tech
23 |
24 |
31 |
17 | Visualize Tech
18 |
19 | Career Pipelines
20 |
21 | With Ease
22 |
23 |
24 | 25 | Track, visualize, and explore your career journey. From top 26 | tech giants to small startups, discover career path insights 27 | effortlessly. 28 |
29 |
15 |
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/client/src/data/index.js:
--------------------------------------------------------------------------------
1 | const mockPipelineData = [
2 | {
3 | _id: '1',
4 | profileId: 'profile1',
5 | firstName: 'John',
6 | lastName: 'Doe',
7 | pfp: 'https://placekitten.com/200/300',
8 | anonymous: false,
9 | pipeline: [
10 | {
11 | _id: 'exp1',
12 | company: 'Amazon',
13 | title: 'Software Engineer',
14 | date: 'Jan 2022 - Present',
15 | },
16 | ],
17 | },
18 | {
19 | _id: '2',
20 | profileId: 'profile2',
21 | firstName: 'Jane',
22 | lastName: 'Smith',
23 | pfp: 'https://placekitten.com/200/300',
24 | anonymous: true,
25 | pipeline: [
26 | {
27 | _id: 'exp2',
28 | company: 'Apple',
29 | title: 'Product Manager',
30 | date: 'Mar 2020 - Dec 2021',
31 | },
32 | ],
33 | },
34 | {
35 | _id: '3',
36 | profileId: 'profile3',
37 | firstName: 'Alice',
38 | lastName: 'Johnson',
39 | pfp: 'https://placekitten.com/200/300',
40 | anonymous: false,
41 | pipeline: [
42 | {
43 | _id: 'exp3',
44 | company: 'Google',
45 | title: 'UX Designer',
46 | date: 'Jul 2019 - Feb 2021',
47 | },
48 | ],
49 | },
50 | {
51 | id: '4',
52 | profileId: 'profile4',
53 | firstName: 'Bob',
54 | lastName: 'Williams',
55 | pfp: 'https://placekitten.com/200/300',
56 | anonymous: true,
57 | pipeline: [
58 | {
59 | _id: 'exp4',
60 | company: 'Jane Street',
61 | title: 'Software Engineer',
62 | date: 'Jan 2018 - Jun 2019',
63 | },
64 | ],
65 | },
66 | ]
67 |
68 | export default mockPipelineData
69 |
--------------------------------------------------------------------------------
/client/src/context/AuthContext.js:
--------------------------------------------------------------------------------
1 | import { createContext, useReducer, useEffect } from 'react'
2 | import Cookies from 'js-cookie'
3 |
4 | import { fetchWithAuth } from '../util/fetchUtils'
5 | import { HOST } from '../util/apiRoutes'
6 |
7 | export const AuthContext = createContext()
8 |
9 | export const authReducer = (state, action) => {
10 | switch (action.type) {
11 | case 'LOGIN':
12 | return { user: action.payload }
13 | case 'LOGOUT':
14 | return { user: null }
15 | case 'CREATED':
16 | return { user: { ...state.user, profileCreated: true } }
17 | default:
18 | return state
19 | }
20 | }
21 |
22 | const verifyToken = async (email, token) => {
23 | try {
24 | const { isVerified } = await fetchWithAuth({
25 | url: `${HOST}/api/user/verify`,
26 | method: 'POST',
27 | data: { email, token },
28 | })
29 | return isVerified
30 | } catch (error) {
31 | console.error('Error verifying token:', error)
32 | return false
33 | }
34 | }
35 |
36 | export const AuthContextProvider = ({ children }) => {
37 | const [state, dispatch] = useReducer(authReducer, {
38 | user: null,
39 | })
40 |
41 | useEffect(() => {
42 | const user = JSON.parse(localStorage.getItem('user'))
43 | const token = Cookies.get('token')
44 |
45 | if (user && token) {
46 | verifyToken(user.email, token).then((isValidToken) => {
47 | if (isValidToken) {
48 | dispatch({ type: 'LOGIN', payload: user })
49 |
50 | if (user.profileCreated) {
51 | dispatch({ type: 'CREATED', payload: user })
52 | }
53 | }
54 | })
55 | }
56 | }, [])
57 |
58 | return (
59 |
16 | 
17 |
18 |
17 |
19 |
42 |
20 |
41 |
21 |
40 | 22 | 404 Error 23 |
24 |25 | {error_text} 26 |
27 |28 | Sorry about that! Please visit our homepage to get 29 | where you need to go. 30 |
31 | 39 |
22 | {/* Sidenav */}
23 |
55 | )
56 | }
57 |
58 | export default AdminDashboard
59 |
--------------------------------------------------------------------------------
/client/src/util/fetchUtils.js:
--------------------------------------------------------------------------------
1 | import Cookies from 'js-cookie'
2 |
3 | import { generateToken } from './tokenUtils'
4 |
5 | export const fetchWithAuth = async ({
6 | url,
7 | method,
8 | data = {},
9 | headers = {},
10 | retry = false,
11 | }) => {
12 | // Default headers including Authorization
13 | const defaultHeaders = {
14 | 'Content-Type': 'application/json',
15 | Authorization: `Bearer ${Cookies.get('token')}`,
16 | }
17 |
18 | // Combine default headers with any custom headers passed in
19 | const combinedHeaders = { ...defaultHeaders, ...headers }
20 |
21 | const fetchOptions = {
22 | method: method,
23 | headers: combinedHeaders,
24 | }
25 |
26 | if (data && Object.keys(data).length) {
27 | fetchOptions.body = JSON.stringify(data)
28 | }
29 |
30 | try {
31 | const response = await fetch(url, fetchOptions)
32 |
33 | // if this is the first catch at an unauthorized call
34 | // try and regenerate the token
35 | if (!retry && response.status === 401) {
36 | // Invalid token, regenerate it and retry the request
37 | const newToken = await generateToken()
38 | combinedHeaders.Authorization = `Bearer ${newToken}`
39 |
40 | // Retry the request with the new token
41 | return fetchWithAuth({
42 | url,
43 | method,
44 | data,
45 | headers: combinedHeaders,
46 | retry: true,
47 | })
48 | }
49 |
50 | if (!response.ok) {
51 | const errorMessage = await getErrorMessage(response)
52 | throw new Error(errorMessage)
53 | }
54 |
55 | return response.json()
56 | } catch (error) {
57 | throw new Error(
58 | error.message || 'An error occurred during the fetch operation.'
59 | )
60 | }
61 | }
62 |
63 | async function getErrorMessage(response) {
64 | try {
65 | const error = await response.json()
66 | return (
67 | error.error ||
68 | error.message ||
69 | error.msg ||
70 | `Error occurred with response ${error.response}`
71 | )
72 | } catch (err) {
73 | return `Error occurred with response ${response.status} ${response.statusText}`
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/client/src/components/CompanyCard.js:
--------------------------------------------------------------------------------
1 | // assets
2 | import BigSmiley from '../static/ratings/BigSmiley.png'
3 | import smiley from '../static/ratings/smiley.png'
4 | import neutral from '../static/ratings/neutral.png'
5 | import frown from '../static/ratings/frown.png'
6 | import demon from '../static/ratings/demon.png'
7 |
8 | export const CompanyCard = ({ company }) => {
9 | const options = [demon, frown, neutral, smiley, BigSmiley]
10 |
11 | return (
12 |
24 |
37 |
38 | {/* Main Dashboard Content */}
39 |
25 |
27 | Admin Dashboard
26 |-
28 |
31 |
34 | {/* Add more navigation links here */}
35 |
46 | {page === 'company' ? (
47 |
54 |
13 |
48 | )
49 | }
50 |
--------------------------------------------------------------------------------
/client/public/logos/Yelp:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/server/middleware/profile.js:
--------------------------------------------------------------------------------
1 | const axios = require("axios");
2 | const jwt = require("jsonwebtoken");
3 | const Profile = require("../models/profileModel");
4 | const User = require("../models/userModel");
5 |
6 | const getProfileIdFromToken = async (token) => {
7 | try {
8 | // get decoded token
9 | const decodedToken = jwt.verify(token, process.env.JWT_SECRET);
10 |
11 | // extract linkedin token and use this as user identifier
12 | const linkedinToken = decodedToken.linkedinToken;
13 |
14 | // this request gets basic profile info from linkedin token
15 | const { data } = await axios.get("https://api.linkedin.com/v2/userinfo", {
16 | headers: {
17 | Authorization: `Bearer ${linkedinToken}`,
18 | },
19 | });
20 | const email = data.email;
21 |
22 | // Query MongoDB model to find user with matching email
23 | const user = await User.findOne({ email: email });
24 | if (!user) {
25 | throw Error(`User not found: ${email}`);
26 | }
27 |
28 | // Find profile using user's _id
29 | const profile = await Profile.findOne({ userId: user._id });
30 | if (!profile) {
31 | throw Error(`Profile not found for user: ${user._id}`);
32 | }
33 |
34 | // extract id from profile object
35 | const profileId = profile._id.toString();
36 |
37 | // return profile id
38 | return profileId;
39 | } catch (err) {
40 | console.error(err);
41 | return null;
42 | }
43 | };
44 |
45 | const verifyProfile = async (req, res, next) => {
46 | // Log the requested URL
47 | console.log("Requested URL:", req.originalUrl);
48 |
49 | const authHeader = req.headers.authorization;
50 |
51 | if (!authHeader) {
52 | return res.status(401).json({ msg: "No authorization token provided." });
53 | }
54 |
55 | const tokenParts = authHeader.split(" ");
56 | if (tokenParts.length !== 2 || tokenParts[0] !== "Bearer") {
57 | return res.status(401).json({ msg: "Token format is 'Bearer
14 | 
18 |
24 |
19 |
23 | 20 | {company.name} 21 |
22 |
25 |
47 | {company.info}
26 | {company.rating !== null ? ( 27 |
28 |
43 | ) : (
44 |
45 | )}
46 | 29 | Rating: 30 |
31 |
35 |
42 |
36 | )
40 |
41 |
11 |
37 |
38 | )
39 | }
40 |
41 | const SlidingImages = () => {
42 | return (
43 | <>
44 | -
12 | {logos.map((logo, index) => (
13 |
-
14 |
19 |
20 | ))}
21 |
46 | Pipelines is Trusted by Engineers at Top Tech Companies 47 |
48 |
48 | {/* Input field for code */}
49 |
72 |
50 |
68 |
69 |
70 | {errorMessage && {errorMessage}
} 71 |
77 |
84 | setShow(true)}
98 | readOnly
99 | />
100 |
101 |
102 | )
103 | }
104 |
--------------------------------------------------------------------------------
/server/controllers/pfpController.js:
--------------------------------------------------------------------------------
1 | const Profile = require('../models/profileModel')
2 | const mongoose = require('mongoose')
3 | const crypto = require('crypto')
4 |
5 | // const sharp = require('sharp')
6 |
7 | const { S3Client, PutObjectCommand, GetObjectCommand } = require('@aws-sdk/client-s3')
8 | const { getSignedUrl } = require('@aws-sdk/s3-request-presigner')
9 |
10 | const randomImageName = (bytes = 32) => crypto.randomBytes(bytes).toString('hex')
11 |
12 | const BUCKET_NAME = process.env.BUCKET_NAME
13 | const BUCKET_REGION = process.env.BUCKET_REGION
14 | const AWS_ACCESS_KEY_ID = process.env.AWS_ACCESS_KEY_ID
15 | const AWS_SECRET_ACCESS_KEY = process.env.AWS_SECRET_ACCESS_KEY
16 |
17 | const s3 = new S3Client({
18 | credentials: {
19 | accessKeyId: AWS_ACCESS_KEY_ID,
20 | secretAccessKey: AWS_SECRET_ACCESS_KEY,
21 | },
22 | region: BUCKET_REGION
23 | })
24 |
25 | const isLinkedInImage = (pfp) => {
26 | const linkedInImageRegex = /^https:\/\/media\.licdn\.com\/dms\/image\/.+$/;
27 |
28 | return linkedInImageRegex.test(pfp);
29 | };
30 |
31 | const getPfp = async (req, res) => {
32 | const { id } = req.params
33 |
34 | const profile = await Profile.findById(id);
35 |
36 | if (!profile) {
37 | return res.status(404).json({ error: 'No such Profile.' });
38 | }
39 |
40 | const pfp = profile.pfp
41 |
42 | if (!pfp) {
43 | return res.status(404).json({ error: 'No such profile picture.' });
44 | } else if (pfp === "") {
45 | return res.status(200).json({ pfp: "" });
46 | }
47 |
48 | if (isLinkedInImage(pfp)) {
49 | return res.status(200).json({ pfp: pfp });
50 | }
51 |
52 | const getObjectParams = {
53 | Bucket: BUCKET_NAME,
54 | Key: pfp
55 | }
56 |
57 | const command = new GetObjectCommand(getObjectParams)
58 | const url = await getSignedUrl(s3, command, { expiresIn: 3600 })
59 |
60 | res.status(200).json({ pfp: url });
61 | }
62 |
63 | const updatePfp = async (req, res) => {
64 | const { id } = req.params
65 |
66 | let profile = await Profile.findOne({ _id: id });
67 |
68 | if (!profile) {
69 | return res.status(404).json({ error: 'No such Profile.' });
70 | }
71 |
72 | // if there is no file, then no changes will be made
73 | if (!req.file) {
74 | return res.status(200).json(profile);
75 | }
76 | let { buffer, mimetype } = req.file
77 |
78 | // resize image
79 | // const buffer = sharp(buffer).resize({
80 | // height: 320,
81 | // width: 320,
82 | // fit: "contain"
83 | // }).toBuffer()
84 |
85 | let imageName;
86 | if (profile.pfp === "") {
87 | imageName = randomImageName()
88 | } else {
89 | imageName = profile.pfp
90 | }
91 |
92 | const params = {
93 | Bucket: BUCKET_NAME,
94 | Key: imageName,
95 | Body: buffer,
96 | ContentType: mimetype
97 | }
98 |
99 | const command = new PutObjectCommand(params)
100 | await s3.send(command)
101 |
102 | // save image name (key) to mongodb
103 | const pfpData = { pfp: imageName }
104 | profile = await Profile.findOneAndUpdate({ _id: id }, pfpData, { new: true });
105 |
106 | if (!profile) {
107 | return res.status(404).json({ error: 'No such Profile.' });
108 | }
109 |
110 | res.status(200).json(profile);
111 | }
112 |
113 | module.exports = {
114 | getPfp,
115 | updatePfp
116 | }
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as
6 | contributors and maintainers pledge to making participation in our project and
7 | our community a harassment-free experience for everyone, regardless of age, body
8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 |
12 | ## Our Standards
13 |
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 |
17 | - Using welcoming and inclusive language
18 | - Being respectful of differing viewpoints and experiences
19 | - Gracefully accepting constructive criticism
20 | - Focusing on what is best for the community
21 | - Showing empathy towards other community members
22 |
23 | Examples of unacceptable behavior by participants include:
24 |
25 | - The use of sexualized language or imagery and unwelcome sexual attention or
26 | advances
27 | - Trolling, insulting/derogatory comments, and personal or political attacks
28 | - Public or private harassment
29 | - Publishing others' private information, such as a physical or electronic
30 | address, without explicit permission
31 | - Other conduct which could reasonably be considered inappropriate in a
32 | professional setting
33 |
34 | ## Our Responsibilities
35 |
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 |
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 |
46 | ## Scope
47 |
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 |
55 | ## Enforcement
56 |
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at **support@pipelines.lol**. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 |
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 |
68 | ## Attribution
69 |
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 |
73 | [homepage]: https://www.contributor-covenant.org
74 |
75 | For answers to common questions about this code of conduct, see
76 | https://www.contributor-covenant.org/faq
77 |
--------------------------------------------------------------------------------
/client/src/components/QuerySearchInput.js:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 |
3 | import { HOST } from '../util/apiRoutes'
4 | import { fetchWithAuth } from '../util/fetchUtils'
5 |
6 | export const QuerySearchInput = ({ handleSearch }) => {
7 | const [query, setQuery] = useState('')
8 | const [results, setResults] = useState([])
9 | const hasResults = results.length > 0
10 |
11 | const handleInputChange = async (event) => {
12 | const inputValue = event.target.value
13 | setQuery(inputValue)
14 |
15 | // make sure theres an input before querying
16 | if (inputValue.length > 0) {
17 | try {
18 | const data = await fetchWithAuth({
19 | url: `${HOST}/api/company/get/companies/${inputValue.toLowerCase()}`,
20 | method: 'GET',
21 | })
22 |
23 | setResults(data)
24 | } catch (error) {
25 | console.error(error.message)
26 | }
27 | } else {
28 | setResults([])
29 | }
30 | }
31 |
32 | const handleCompanyButtonClick = async (company) => {
33 | // reset text input
34 | setQuery(company.displayName)
35 | setResults([])
36 |
37 | await handleSearch(company)
38 | }
39 |
40 | return (
41 | <>
42 |
82 |
83 | )
84 | }
85 |
--------------------------------------------------------------------------------
/client/src/components/landing/CTA.js:
--------------------------------------------------------------------------------
1 | import { useNavigate } from 'react-router-dom'
2 | import { HOMEPAGE } from '../../util/apiRoutes'
3 | import { CLIENT_ID, SCOPE } from '../../util/linkedinUtils'
4 | import { useAuthContext } from '../../hooks/useAuthContext'
5 |
6 | export default function CTA() {
7 | const navigate = useNavigate()
8 | const { user } = useAuthContext()
9 | const linkedinRedirectUrl = `https://linkedin.com/oauth/v2/authorization?client_id=${CLIENT_ID}&response_type=code&scope=${SCOPE}&redirect_uri=${HOMEPAGE}`
10 |
11 | const handleNavigation = () => {
12 | if (user) {
13 | navigate('/edit')
14 | } else {
15 | window.location.href = linkedinRedirectUrl
16 | }
17 | }
18 |
19 | return (
20 | <>
21 |
30 | 
45 |
46 | handleNavigation()}
49 | className="group relative mt-12 inline-flex scale-125 items-center justify-center overflow-hidden rounded-full border-2 border-pipeline-blue-200/50 p-4 px-6 font-medium text-pipeline-blue-200 shadow-md transition duration-300 ease-out"
50 | >
51 |
52 |
66 |
67 |
68 | Add Your Pipeline
69 |
70 |
71 | Add Your Pipeline
72 |
73 |
74 |
75 |
31 | What are you waiting for?
32 |
33 |
34 | Share
35 | {' '}
36 | your own pipeline and inspire others to follow in your
37 | footsteps.
38 |
45 |
46 | handleNavigation()}
49 | className="group relative mt-12 inline-flex scale-125 items-center justify-center overflow-hidden rounded-full border-2 border-pipeline-blue-200/50 p-4 px-6 font-medium text-pipeline-blue-200 shadow-md transition duration-300 ease-out"
50 | >
51 |
52 |
66 |
67 |
68 | Add Your Pipeline
69 |
70 |
71 | Add Your Pipeline
72 |
73 |
74 |
100 | {!isAdminRoute && earlyAccess &&
104 | )
105 | }
106 |
107 | // Main App Component
108 | function App() {
109 | const { user } = useAuthContext()
110 |
111 | return (
112 |
114 |
115 |
117 |
118 |
28 |
39 | A pipeline is a collection of experiences that
40 | individuals embark on throughout their career.
41 |
42 |
58 | 29 | What is a pipeline? 30 |
31 | 32 |
43 |
44 |
56 |
57 |
45 |
46 |
55 |
47 |
54 | 48 | Think of a pipeline as a roadmap of 49 | internships, jobs, and other 50 | opportunities that you can take to reach 51 | your career goals. 52 |
53 |69 | With{' '} 70 | 71 | pipelines.lol 72 | 73 | , gain insights, draw inspiration, and chart your course 74 | by discovering the diverse destinations that await along 75 | your very own career pipeline. 76 |
77 |
80 | 
85 |
86 |
85 | | 13 | Welcome to Pipelines! 14 | | 15 ||||||
18 |
|
46 | |||||
49 |
|
68 |
63 | {/* Hero */}
64 |
65 | Pipelines
70 |
71 |
113 |
65 | Pipelines
66 |
67 | Coming Soon
68 |
69 |
70 |
71 | 72 | Signup for our newsletter to receive information on when we 73 | launch! 74 |
75 | 76 | {/* Input field for email */} 77 |
78 |
102 |
103 |
104 | {errorMessage && {errorMessage}
} 105 | 106 | {/* Grayed-out link for the secret code */} 107 | 112 |
48 |
53 |
64 |
65 |
77 | )
78 | }
79 | import { useNavigate } from 'react-router-dom'
80 |
81 | export const ExperienceCard = ({ experience }) => {
82 | const current = new Date(experience.startDate) > new Date()
83 | const formatDateToMMYY = (dateString) => {
84 | // Converts 2023-01-01T00:00:00.000Z to January 2023
85 | const date = new Date(dateString)
86 |
87 | if (!(date instanceof Date) || isNaN(date.getTime())) {
88 | return 'Invalid Date'
89 | }
90 |
91 | const options = { year: 'numeric', month: 'long' }
92 | return date.toLocaleDateString(undefined, options)
93 | }
94 |
95 | const navigate = useNavigate()
96 |
97 | return (
98 |
54 | 
59 |
63 | 60 | {anonymous ? 'Anonymous' : name} 61 |
62 |
66 | {pipeline &&
67 | pipeline.map((experience) => (
68 |
76 |
72 |
74 | ))}
75 |
102 |
132 | )
133 | }
134 |
--------------------------------------------------------------------------------
/client/src/components/landing/People.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react'
2 | import { useNavigate } from 'react-router-dom'
3 |
4 | import { HOST } from '../../util/apiRoutes'
5 | import { fetchWithAuth } from '../../util/fetchUtils'
6 |
7 | // components
8 | import Loading from '../../pages/Loading'
9 | import { PipelineCard } from '../PipelineCard'
10 |
11 | export default function People() {
12 | const [profiles, setProfiles] = useState([])
13 | const [loading, setLoading] = useState(false)
14 | const navigate = useNavigate()
15 |
16 | const generateProfiles = async (size = 5) => {
17 | setLoading(true)
18 |
19 | try {
20 | const data = await fetchWithAuth({
21 | url: `${HOST}/api/profile/random?amount=${size}`,
22 | method: 'GET',
23 | })
24 | setProfiles([...data])
25 | setLoading(false)
26 | } catch (error) {
27 | console.error(error.message)
28 | }
29 | }
30 |
31 | const handleNavigation = () => {
32 | navigate('/discover')
33 | }
34 |
35 | useEffect(() => {
36 | generateProfiles()
37 | }, [])
38 |
39 | if (loading) {
40 | return {
105 | navigate(`/company/${experience.companyName}`)
106 | }}
107 | >
108 | 
113 |
114 |
115 |
116 |
131 | 117 | {experience.displayName} 118 |
119 |120 | {experience.title} 121 |
122 |123 | {formatDateToMMYY(experience.startDate)} -{' '} 124 | {!experience.isIndefinite 125 | ? formatDateToMMYY(experience.endDate) 126 | : !current 127 | ? 'Present' 128 | : 'Indefinite'} 129 |
130 |
47 |
105 | 48 | People from{' '} 49 | 50 | Around the World 51 | {' '} 52 | are Sharing Their Pipelines 53 |
54 | 55 |
56 | {profiles.map((profile) => (
57 |
76 | handleNavigation()}
79 | className="group relative mt-12 inline-flex scale-125 items-center justify-center overflow-hidden rounded-full border-2 border-pipeline-blue-200/50 p-4 px-6 font-medium text-pipeline-blue-200 shadow-md transition duration-300 ease-out"
80 | >
81 |
82 |
96 |
97 |
98 | Discover
99 |
100 |
101 | Add Your Pipeline
102 |
103 |
104 |
61 |
74 | ))}
75 |