├── .env.temp
├── .gitignore
├── JOBIFY.postman_collection.json
├── README.MD
├── client
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── _redirects
│ ├── data.json
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
│ ├── App.js
│ ├── assets
│ ├── css
│ │ └── index.css
│ ├── images
│ │ ├── favicon.ico
│ │ ├── logo.svg
│ │ ├── main-alternative.svg
│ │ ├── main.svg
│ │ └── not-found.svg
│ └── wrappers
│ │ ├── BigSidebar.js
│ │ ├── ChartsContainer.js
│ │ ├── DashboardFormPage.js
│ │ ├── ErrorPage.js
│ │ ├── Job.js
│ │ ├── JobInfo.js
│ │ ├── JobsContainer.js
│ │ ├── LandingPage.js
│ │ ├── Navbar.js
│ │ ├── PageBtnContainer.js
│ │ ├── RegisterPage.js
│ │ ├── SearchContainer.js
│ │ ├── SharedLayout.js
│ │ ├── SmallSidebar.js
│ │ ├── StatItem.js
│ │ ├── StatsContainer.js
│ │ └── Testing.js
│ ├── components
│ ├── Alert.js
│ ├── AreaChart.js
│ ├── BarChart.js
│ ├── BigSidebar.js
│ ├── ChartsContainer.js
│ ├── FormRow.js
│ ├── FormRowSelect.js
│ ├── Job.js
│ ├── JobInfo.js
│ ├── JobsContainer.js
│ ├── Loading.js
│ ├── Logo.js
│ ├── NavLinks.js
│ ├── Navbar.js
│ ├── PageBtnContainer.js
│ ├── SearchContainer.js
│ ├── SmallSidebar.js
│ ├── StatItem.js
│ ├── StatsContainer.js
│ └── index.js
│ ├── context
│ ├── actions.js
│ ├── appContext.js
│ └── reducer.js
│ ├── index.css
│ ├── index.js
│ ├── pages
│ ├── Error.js
│ ├── Landing.js
│ ├── ProtectedRoute.js
│ ├── Register.js
│ ├── dashboard
│ │ ├── AddJob.js
│ │ ├── AllJobs.js
│ │ ├── Profile.js
│ │ ├── SharedLayout.js
│ │ ├── Stats.js
│ │ └── index.js
│ └── index.js
│ └── utils
│ └── links.js
├── controllers
├── authController.js
└── jobsController.js
├── db
└── connect.js
├── errors
├── bad-request.js
├── custom-api.js
├── index.js
├── not-found.js
└── unauthenticated.js
├── middleware
├── auth.js
├── error-handler.js
├── not-found.js
└── testUser.js
├── mock-data.json
├── models
├── Job.js
└── User.js
├── package-lock.json
├── package.json
├── populate.js
├── routes
├── authRoutes.js
└── jobsRoutes.js
├── server.js
└── utils
├── attachCookie.js
└── checkPermissions.js
/.env.temp:
--------------------------------------------------------------------------------
1 | MONGO_URL='your connection string'
2 | JWT_SECRET=jwtSecret
3 | JWT_LIFETIME=1d
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | .env
--------------------------------------------------------------------------------
/JOBIFY.postman_collection.json:
--------------------------------------------------------------------------------
1 | {
2 | "info": {
3 | "_postman_id": "76f6c6e1-820c-4eed-bf01-5b96894d9749",
4 | "name": "JOBIFY",
5 | "schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
6 | "_exporter_id": "18152321"
7 | },
8 | "item": [
9 | {
10 | "name": "Jobs",
11 | "item": [
12 | {
13 | "name": "Create Job",
14 | "request": {
15 | "auth": {
16 | "type": "bearer",
17 | "bearer": [
18 | {
19 | "key": "token",
20 | "value": "{{token}}",
21 | "type": "string"
22 | }
23 | ]
24 | },
25 | "method": "POST",
26 | "header": [],
27 | "body": {
28 | "mode": "raw",
29 | "raw": "{\n \"company\":\"hulu\",\"position\":\"testing\"\n}",
30 | "options": {
31 | "raw": {
32 | "language": "json"
33 | }
34 | }
35 | },
36 | "url": {
37 | "raw": "{{URL}}/jobs",
38 | "host": [
39 | "{{URL}}"
40 | ],
41 | "path": [
42 | "jobs"
43 | ]
44 | }
45 | },
46 | "response": []
47 | },
48 | {
49 | "name": "Get All Jobs",
50 | "request": {
51 | "auth": {
52 | "type": "bearer",
53 | "bearer": [
54 | {
55 | "key": "token",
56 | "value": "{{token}}",
57 | "type": "string"
58 | }
59 | ]
60 | },
61 | "method": "GET",
62 | "header": [],
63 | "url": {
64 | "raw": "{{URL}}/jobs?status=all&jobType=all&sort=latest&page=1&limit=25",
65 | "host": [
66 | "{{URL}}"
67 | ],
68 | "path": [
69 | "jobs"
70 | ],
71 | "query": [
72 | {
73 | "key": "status",
74 | "value": "all"
75 | },
76 | {
77 | "key": "jobType",
78 | "value": "all"
79 | },
80 | {
81 | "key": "search",
82 | "value": "",
83 | "disabled": true
84 | },
85 | {
86 | "key": "sort",
87 | "value": "latest"
88 | },
89 | {
90 | "key": "page",
91 | "value": "1"
92 | },
93 | {
94 | "key": "limit",
95 | "value": "25"
96 | }
97 | ]
98 | }
99 | },
100 | "response": []
101 | },
102 | {
103 | "name": "Show Stats",
104 | "request": {
105 | "auth": {
106 | "type": "bearer",
107 | "bearer": [
108 | {
109 | "key": "token",
110 | "value": "{{token}}",
111 | "type": "string"
112 | }
113 | ]
114 | },
115 | "method": "GET",
116 | "header": [],
117 | "url": {
118 | "raw": "{{URL}}/jobs/stats",
119 | "host": [
120 | "{{URL}}"
121 | ],
122 | "path": [
123 | "jobs",
124 | "stats"
125 | ]
126 | }
127 | },
128 | "response": []
129 | },
130 | {
131 | "name": "Delete Job",
132 | "request": {
133 | "auth": {
134 | "type": "bearer",
135 | "bearer": [
136 | {
137 | "key": "token",
138 | "value": "{{token}}",
139 | "type": "string"
140 | }
141 | ]
142 | },
143 | "method": "DELETE",
144 | "header": [],
145 | "url": {
146 | "raw": "{{URL}}/jobs/61b13c009315ca467f020c65",
147 | "host": [
148 | "{{URL}}"
149 | ],
150 | "path": [
151 | "jobs",
152 | "61b13c009315ca467f020c65"
153 | ]
154 | }
155 | },
156 | "response": []
157 | },
158 | {
159 | "name": "Update Job",
160 | "request": {
161 | "auth": {
162 | "type": "bearer",
163 | "bearer": [
164 | {
165 | "key": "token",
166 | "value": "{{token}}",
167 | "type": "string"
168 | }
169 | ]
170 | },
171 | "method": "PATCH",
172 | "header": [],
173 | "body": {
174 | "mode": "raw",
175 | "raw": "{\n \"company\": \"wow this works!\",\n \"position\": \"backend developer\"\n}",
176 | "options": {
177 | "raw": {
178 | "language": "json"
179 | }
180 | }
181 | },
182 | "url": {
183 | "raw": "{{URL}}/jobs/61bf64374c66746131fe74c9",
184 | "host": [
185 | "{{URL}}"
186 | ],
187 | "path": [
188 | "jobs",
189 | "61bf64374c66746131fe74c9"
190 | ]
191 | }
192 | },
193 | "response": []
194 | }
195 | ]
196 | },
197 | {
198 | "name": "Auth",
199 | "item": [
200 | {
201 | "name": "Register User",
202 | "event": [
203 | {
204 | "listen": "test",
205 | "script": {
206 | "exec": [
207 | "const jsonData = pm.response.json()",
208 | "pm.globals.set(\"token\", jsonData.token);"
209 | ],
210 | "type": "text/javascript"
211 | }
212 | }
213 | ],
214 | "request": {
215 | "method": "POST",
216 | "header": [],
217 | "body": {
218 | "mode": "raw",
219 | "raw": "{\n\"name\":\"john\",\n\"password\":\"secret\",\n \"email\":\"anna@gmail.com\" \n}",
220 | "options": {
221 | "raw": {
222 | "language": "json"
223 | }
224 | }
225 | },
226 | "url": {
227 | "raw": "{{URL}}/auth/register",
228 | "host": [
229 | "{{URL}}"
230 | ],
231 | "path": [
232 | "auth",
233 | "register"
234 | ]
235 | }
236 | },
237 | "response": []
238 | },
239 | {
240 | "name": "Login User",
241 | "event": [
242 | {
243 | "listen": "test",
244 | "script": {
245 | "exec": [
246 | "const jsonData = pm.response.json()",
247 | "pm.globals.set(\"token\", jsonData.token);"
248 | ],
249 | "type": "text/javascript"
250 | }
251 | }
252 | ],
253 | "request": {
254 | "method": "POST",
255 | "header": [],
256 | "body": {
257 | "mode": "raw",
258 | "raw": "{\n \"email\":\"john@gmail.com\",\n \"password\":\"secret\"\n}",
259 | "options": {
260 | "raw": {
261 | "language": "json"
262 | }
263 | }
264 | },
265 | "url": {
266 | "raw": "{{URL}}/auth/login",
267 | "host": [
268 | "{{URL}}"
269 | ],
270 | "path": [
271 | "auth",
272 | "login"
273 | ]
274 | }
275 | },
276 | "response": []
277 | },
278 | {
279 | "name": "Update User",
280 | "request": {
281 | "auth": {
282 | "type": "bearer",
283 | "bearer": [
284 | {
285 | "key": "token",
286 | "value": "{{token}}",
287 | "type": "string"
288 | }
289 | ]
290 | },
291 | "method": "PATCH",
292 | "header": [],
293 | "body": {
294 | "mode": "raw",
295 | "raw": "{\n \"name\": \"peter\",\n \"email\": \"john@gmail.com\",\n \"lastName\": \"lastName\",\n \"location\": \"my city\"\n}",
296 | "options": {
297 | "raw": {
298 | "language": "json"
299 | }
300 | }
301 | },
302 | "url": {
303 | "raw": "{{URL}}/auth/updateUser",
304 | "host": [
305 | "{{URL}}"
306 | ],
307 | "path": [
308 | "auth",
309 | "updateUser"
310 | ]
311 | }
312 | },
313 | "response": []
314 | }
315 | ]
316 | }
317 | ]
318 | }
--------------------------------------------------------------------------------
/client/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/client/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `npm start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 |
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 |
17 | ### `npm test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `npm run build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `npm run eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 |
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 |
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
48 | ### Code Splitting
49 |
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 |
52 | ### Analyzing the Bundle Size
53 |
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 |
56 | ### Making a Progressive Web App
57 |
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 |
60 | ### Advanced Configuration
61 |
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 |
64 | ### Deployment
65 |
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 |
68 | ### `npm run build` fails to minify
69 |
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 |
--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "client",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.5",
7 | "@testing-library/react": "^13.4.0",
8 | "@testing-library/user-event": "^13.5.0",
9 | "axios": "^1.2.1",
10 | "moment": "^2.29.4",
11 | "normalize.css": "^8.0.1",
12 | "react": "^18.2.0",
13 | "react-dom": "^18.2.0",
14 | "react-icons": "^4.7.1",
15 | "react-router-dom": "^6.4.4",
16 | "react-scripts": "5.0.1",
17 | "recharts": "^2.1.16",
18 | "styled-components": "^5.3.6",
19 | "web-vitals": "^2.1.4"
20 | },
21 | "scripts": {
22 | "start": "react-scripts start",
23 | "build": "CI= react-scripts build",
24 | "test": "react-scripts test",
25 | "eject": "react-scripts eject"
26 | },
27 | "eslintConfig": {
28 | "extends": [
29 | "react-app",
30 | "react-app/jest"
31 | ]
32 | },
33 | "browserslist": {
34 | "production": [
35 | ">0.2%",
36 | "not dead",
37 | "not op_mini all"
38 | ],
39 | "development": [
40 | "last 1 chrome version",
41 | "last 1 firefox version",
42 | "last 1 safari version"
43 | ]
44 | },
45 | "proxy": "http://localhost:5000"
46 | }
47 |
--------------------------------------------------------------------------------
/client/public/_redirects:
--------------------------------------------------------------------------------
1 | /api/* https://mern-course-jobify-e4jv.onrender.com/api/:splat 200
2 |
3 | /* /index.html 200
4 |
5 |
6 |
--------------------------------------------------------------------------------
/client/public/data.json:
--------------------------------------------------------------------------------
1 | { "name": "john" }
2 |
--------------------------------------------------------------------------------
/client/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/mern-course-jobify/edd98b3f3d10ecd0a1c57e7835751e40d0a28c77/client/public/favicon.ico
--------------------------------------------------------------------------------
/client/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | Jobify
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/client/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/mern-course-jobify/edd98b3f3d10ecd0a1c57e7835751e40d0a28c77/client/public/logo192.png
--------------------------------------------------------------------------------
/client/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/mern-course-jobify/edd98b3f3d10ecd0a1c57e7835751e40d0a28c77/client/public/logo512.png
--------------------------------------------------------------------------------
/client/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/client/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/client/src/App.js:
--------------------------------------------------------------------------------
1 | import { BrowserRouter, Routes, Route } from 'react-router-dom'
2 | import { Register, Landing, Error, ProtectedRoute } from './pages'
3 | import {
4 | AllJobs,
5 | Profile,
6 | SharedLayout,
7 | Stats,
8 | AddJob,
9 | } from './pages/dashboard'
10 |
11 | function App() {
12 | return (
13 |
14 |
15 |
19 |
20 |
21 | }
22 | >
23 | } />
24 | } />
25 | } />
26 | } />
27 |
28 | } />
29 | } />
30 | } />
31 |
32 |
33 | )
34 | }
35 |
36 | export default App
37 |
--------------------------------------------------------------------------------
/client/src/assets/css/index.css:
--------------------------------------------------------------------------------
1 | *,
2 | ::after,
3 | ::before {
4 | box-sizing: border-box;
5 | }
6 |
7 | /* fonts */
8 | @import url('https://fonts.googleapis.com/css2?family=Cabin&family=Roboto+Condensed:wght@400;700&display=swap');
9 |
10 | html {
11 | font-size: 100%;
12 | } /*16px*/
13 |
14 | :root {
15 | /* colors */
16 | --primary-50: #e0fcff;
17 | --primary-100: #bef8fd;
18 | --primary-200: #87eaf2;
19 | --primary-300: #54d1db;
20 | --primary-400: #38bec9;
21 | --primary-500: #2cb1bc;
22 | --primary-600: #14919b;
23 | --primary-700: #0e7c86;
24 | --primary-800: #0a6c74;
25 | --primary-900: #044e54;
26 |
27 | /* grey */
28 | --grey-50: #f0f4f8;
29 | --grey-100: #d9e2ec;
30 | --grey-200: #bcccdc;
31 | --grey-300: #9fb3c8;
32 | --grey-400: #829ab1;
33 | --grey-500: #627d98;
34 | --grey-600: #486581;
35 | --grey-700: #334e68;
36 | --grey-800: #243b53;
37 | --grey-900: #102a43;
38 | /* rest of the colors */
39 | --black: #222;
40 | --white: #fff;
41 | --red-light: #f8d7da;
42 | --red-dark: #842029;
43 | --green-light: #d1e7dd;
44 | --green-dark: #0f5132;
45 |
46 | /* fonts */
47 | --headingFont: 'Roboto Condensed', Sans-Serif;
48 | --bodyFont: 'Cabin', Sans-Serif;
49 | --small-text: 0.875rem;
50 | --extra-small-text: 0.7em;
51 | /* rest of the vars */
52 | --backgroundColor: var(--grey-50);
53 | --textColor: var(--grey-900);
54 | --borderRadius: 0.25rem;
55 | --letterSpacing: 1px;
56 | --transition: 0.3s ease-in-out all;
57 | --max-width: 1120px;
58 | --fixed-width: 500px;
59 | --fluid-width: 90vw;
60 | --breakpoint-lg: 992px;
61 | --nav-height: 6rem;
62 | /* box shadow*/
63 | --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
64 | --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
65 | 0 2px 4px -1px rgba(0, 0, 0, 0.06);
66 | --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
67 | 0 4px 6px -2px rgba(0, 0, 0, 0.05);
68 | --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
69 | 0 10px 10px -5px rgba(0, 0, 0, 0.04);
70 | }
71 |
72 | body {
73 | background: var(--backgroundColor);
74 | font-family: var(--bodyFont);
75 | font-weight: 400;
76 | line-height: 1.75;
77 | color: var(--textColor);
78 | }
79 |
80 | p {
81 | margin-bottom: 1.5rem;
82 | max-width: 40em;
83 | }
84 |
85 | h1,
86 | h2,
87 | h3,
88 | h4,
89 | h5 {
90 | margin: 0;
91 | margin-bottom: 1.38rem;
92 | font-family: var(--headingFont);
93 | font-weight: 400;
94 | line-height: 1.3;
95 | text-transform: capitalize;
96 | letter-spacing: var(--letterSpacing);
97 | }
98 |
99 | h1 {
100 | margin-top: 0;
101 | font-size: 3.052rem;
102 | }
103 |
104 | h2 {
105 | font-size: 2.441rem;
106 | }
107 |
108 | h3 {
109 | font-size: 1.953rem;
110 | }
111 |
112 | h4 {
113 | font-size: 1.563rem;
114 | }
115 |
116 | h5 {
117 | font-size: 1.25rem;
118 | }
119 |
120 | small,
121 | .text-small {
122 | font-size: var(--small-text);
123 | }
124 |
125 | a {
126 | text-decoration: none;
127 | letter-spacing: var(--letterSpacing);
128 | }
129 | a,
130 | button {
131 | line-height: 1.15;
132 | }
133 | button:disabled {
134 | cursor: not-allowed;
135 | }
136 | ul {
137 | list-style-type: none;
138 | padding: 0;
139 | }
140 |
141 | .img {
142 | width: 100%;
143 | display: block;
144 | object-fit: cover;
145 | }
146 | /* buttons */
147 |
148 | .btn {
149 | cursor: pointer;
150 | color: var(--white);
151 | background: var(--primary-500);
152 | border: transparent;
153 | border-radius: var(--borderRadius);
154 | letter-spacing: var(--letterSpacing);
155 | padding: 0.375rem 0.75rem;
156 | box-shadow: var(--shadow-2);
157 | transition: var(--transition);
158 | text-transform: capitalize;
159 | display: inline-block;
160 | }
161 | .btn:hover {
162 | background: var(--primary-700);
163 | box-shadow: var(--shadow-3);
164 | }
165 | .btn-hipster {
166 | color: var(--primary-500);
167 | background: var(--primary-200);
168 | }
169 | .btn-hipster:hover {
170 | color: var(--primary-200);
171 | background: var(--primary-700);
172 | }
173 | .btn-block {
174 | width: 100%;
175 | }
176 | .btn-hero {
177 | font-size: 1.25rem;
178 | padding: 0.5rem 1.25rem;
179 | }
180 | .btn-danger {
181 | background: var(--red-light);
182 | color: var(--red-dark);
183 | }
184 | .btn-danger:hover {
185 | background: var(--red-dark);
186 | color: var(--white);
187 | }
188 | /* alerts */
189 | .alert {
190 | padding: 0.375rem 0.75rem;
191 | margin-bottom: 1rem;
192 | border-color: transparent;
193 | border-radius: var(--borderRadius);
194 | text-align: center;
195 | letter-spacing: var(--letterSpacing);
196 | }
197 |
198 | .alert-danger {
199 | color: var(--red-dark);
200 | background: var(--red-light);
201 | }
202 | .alert-success {
203 | color: var(--green-dark);
204 | background: var(--green-light);
205 | }
206 | /* form */
207 |
208 | .form {
209 | width: 90vw;
210 | max-width: var(--fixed-width);
211 | background: var(--white);
212 | border-radius: var(--borderRadius);
213 | box-shadow: var(--shadow-2);
214 | padding: 2rem 2.5rem;
215 | margin: 3rem auto;
216 | transition: var(--transition);
217 | }
218 | .form:hover {
219 | box-shadow: var(--shadow-4);
220 | }
221 | .form-label {
222 | display: block;
223 | font-size: var(--smallText);
224 | margin-bottom: 0.5rem;
225 | text-transform: capitalize;
226 | letter-spacing: var(--letterSpacing);
227 | }
228 | .form-input,
229 | .form-textarea,
230 | .form-select {
231 | width: 100%;
232 | padding: 0.375rem 0.75rem;
233 | border-radius: var(--borderRadius);
234 | background: var(--backgroundColor);
235 | border: 1px solid var(--grey-200);
236 | }
237 | .form-input,
238 | .form-select,
239 | .btn-block {
240 | height: 35px;
241 | }
242 | .form-row {
243 | margin-bottom: 1rem;
244 | }
245 |
246 | .form-textarea {
247 | height: 7rem;
248 | }
249 | ::placeholder {
250 | font-family: inherit;
251 | color: var(--grey-400);
252 | }
253 | .form-alert {
254 | color: var(--red-dark);
255 | letter-spacing: var(--letterSpacing);
256 | text-transform: capitalize;
257 | }
258 | /* alert */
259 |
260 | @keyframes spinner {
261 | to {
262 | transform: rotate(360deg);
263 | }
264 | }
265 |
266 | .loading {
267 | width: 6rem;
268 | height: 6rem;
269 | border: 5px solid var(--grey-400);
270 | border-radius: 50%;
271 | border-top-color: var(--primary-500);
272 | animation: spinner 2s linear infinite;
273 | }
274 | .loading-center {
275 | margin: 0 auto;
276 | }
277 | /* title */
278 |
279 | .title {
280 | text-align: center;
281 | }
282 |
283 | .title-underline {
284 | background: var(--primary-500);
285 | width: 7rem;
286 | height: 0.25rem;
287 | margin: 0 auto;
288 | margin-top: -1rem;
289 | }
290 |
291 | .container {
292 | width: var(--fluid-width);
293 | max-width: var(--max-width);
294 | margin: 0 auto;
295 | }
296 | .full-page {
297 | min-height: 100vh;
298 | }
299 |
300 | .coffee-info {
301 | text-align: center;
302 | text-transform: capitalize;
303 | margin-bottom: 1rem;
304 | letter-spacing: var(--letterSpacing);
305 | }
306 | .coffee-info span {
307 | display: block;
308 | }
309 | .coffee-info a {
310 | color: var(--primary-500);
311 | }
312 |
313 | @media screen and (min-width: 992px) {
314 | .coffee-info {
315 | text-align: left;
316 | }
317 | .coffee-info span {
318 | display: inline-block;
319 | margin-right: 0.5rem;
320 | }
321 | }
322 |
--------------------------------------------------------------------------------
/client/src/assets/images/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/john-smilga/mern-course-jobify/edd98b3f3d10ecd0a1c57e7835751e40d0a28c77/client/src/assets/images/favicon.ico
--------------------------------------------------------------------------------
/client/src/assets/images/logo.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/client/src/assets/images/main-alternative.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/src/assets/images/main.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/src/assets/images/not-found.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/client/src/assets/wrappers/BigSidebar.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | const Wrapper = styled.aside`
4 | display: none;
5 | @media (min-width: 992px) {
6 | display: block;
7 | box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.1);
8 | .sidebar-container {
9 | background: var(--white);
10 | min-height: 100vh;
11 | height: 100%;
12 | width: 250px;
13 | margin-left: -250px;
14 | transition: var(--transition);
15 | }
16 | .content {
17 | position: sticky;
18 | top: 0;
19 | }
20 | .show-sidebar {
21 | margin-left: 0;
22 | }
23 | header {
24 | height: 6rem;
25 | display: flex;
26 | align-items: center;
27 | padding-left: 2.5rem;
28 | }
29 | .nav-links {
30 | padding-top: 2rem;
31 | display: flex;
32 | flex-direction: column;
33 | }
34 | .nav-link {
35 | display: flex;
36 | align-items: center;
37 | color: var(--grey-500);
38 | padding: 1rem 0;
39 | padding-left: 2.5rem;
40 | text-transform: capitalize;
41 | transition: var(--transition);
42 | }
43 | .nav-link:hover {
44 | background: var(--grey-50);
45 | padding-left: 3rem;
46 | color: var(--grey-900);
47 | }
48 | .nav-link:hover .icon {
49 | color: var(--primary-500);
50 | }
51 | .icon {
52 | font-size: 1.5rem;
53 | margin-right: 1rem;
54 | display: grid;
55 | place-items: center;
56 | transition: var(--transition);
57 | }
58 | .active {
59 | color: var(--grey-900);
60 | }
61 | .active .icon {
62 | color: var(--primary-500);
63 | }
64 | }
65 | `
66 | export default Wrapper
67 |
--------------------------------------------------------------------------------
/client/src/assets/wrappers/ChartsContainer.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | const Wrapper = styled.section`
4 | margin-top: 4rem;
5 | text-align: center;
6 | button {
7 | background: transparent;
8 | border-color: transparent;
9 | text-transform: capitalize;
10 | color: var(--primary-500);
11 | font-size: 1.25rem;
12 | cursor: pointer;
13 | }
14 | h4 {
15 | text-align: center;
16 | margin-bottom: 0.75rem;
17 | }
18 | `
19 |
20 | export default Wrapper
21 |
--------------------------------------------------------------------------------
/client/src/assets/wrappers/DashboardFormPage.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | const Wrapper = styled.section`
4 | border-radius: var(--borderRadius);
5 | width: 100%;
6 | background: var(--white);
7 | padding: 3rem 2rem 4rem;
8 | box-shadow: var(--shadow-2);
9 | h3 {
10 | margin-top: 0;
11 | }
12 | .form {
13 | margin: 0;
14 | border-radius: 0;
15 | box-shadow: none;
16 | padding: 0;
17 | max-width: 100%;
18 | width: 100%;
19 | }
20 | .form-row {
21 | margin-bottom: 0;
22 | }
23 | .form-center {
24 | display: grid;
25 | row-gap: 0.5rem;
26 | }
27 | .form-center button {
28 | align-self: end;
29 | height: 35px;
30 | margin-top: 1rem;
31 | }
32 | .btn-container {
33 | display: grid;
34 | grid-template-columns: 1fr 1fr;
35 | column-gap: 1rem;
36 | align-self: flex-end;
37 | margin-top: 0.5rem;
38 | button {
39 | height: 35px;
40 | }
41 | }
42 | .clear-btn {
43 | background: var(--grey-500);
44 | }
45 | .clear-btn:hover {
46 | background: var(--black);
47 | }
48 | @media (min-width: 992px) {
49 | .form-center {
50 | grid-template-columns: 1fr 1fr;
51 | align-items: center;
52 | column-gap: 1rem;
53 | }
54 | .btn-container {
55 | margin-top: 0;
56 | }
57 | }
58 | @media (min-width: 1120px) {
59 | .form-center {
60 | grid-template-columns: 1fr 1fr 1fr;
61 | }
62 | .form-center button {
63 | margin-top: 0;
64 | }
65 | }
66 | `
67 |
68 | export default Wrapper
69 |
--------------------------------------------------------------------------------
/client/src/assets/wrappers/ErrorPage.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | const Wrapper = styled.main`
4 | text-align: center;
5 | img {
6 | max-width: 600px;
7 | display: block;
8 | margin-bottom: 2rem;
9 | }
10 | display: flex;
11 | align-items: center;
12 | justify-content: center;
13 | h3 {
14 | margin-bottom: 0.5rem;
15 | }
16 | p {
17 | margin-top: 0;
18 | margin-bottom: 0.5rem;
19 | color: var(--grey-500);
20 | }
21 | a {
22 | color: var(--primary-500);
23 | text-decoration: underline;
24 | text-transform: capitalize;
25 | }
26 | `
27 |
28 | export default Wrapper
29 |
--------------------------------------------------------------------------------
/client/src/assets/wrappers/Job.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | const Wrapper = styled.article`
4 | background: var(--white);
5 | border-radius: var(--borderRadius);
6 | display: grid;
7 | grid-template-rows: 1fr auto;
8 | box-shadow: var(--shadow-2);
9 |
10 | header {
11 | padding: 1rem 1.5rem;
12 | border-bottom: 1px solid var(--grey-100);
13 | display: grid;
14 | grid-template-columns: auto 1fr;
15 | align-items: center;
16 | h5 {
17 | letter-spacing: 0;
18 | }
19 | }
20 | .main-icon {
21 | width: 60px;
22 | height: 60px;
23 | display: grid;
24 | place-items: center;
25 | background: var(--primary-500);
26 | border-radius: var(--borderRadius);
27 | font-size: 1.5rem;
28 | font-weight: 700;
29 | text-transform: uppercase;
30 | color: var(--white);
31 | margin-right: 2rem;
32 | }
33 | .info {
34 | h5 {
35 | margin-bottom: 0.25rem;
36 | }
37 | p {
38 | margin: 0;
39 | text-transform: capitalize;
40 | color: var(--grey-400);
41 | letter-spacing: var(--letterSpacing);
42 | }
43 | }
44 | .pending {
45 | background: #fcefc7;
46 | color: #e9b949;
47 | }
48 | .interview {
49 | background: #e0e8f9;
50 | color: #647acb;
51 | }
52 | .declined {
53 | color: #d66a6a;
54 | background: #ffeeee;
55 | }
56 | .content {
57 | padding: 1rem 1.5rem;
58 | }
59 | .content-center {
60 | display: grid;
61 | grid-template-columns: 1fr;
62 | row-gap: 0.5rem;
63 | @media (min-width: 576px) {
64 | grid-template-columns: 1fr 1fr;
65 | }
66 | @media (min-width: 992px) {
67 | grid-template-columns: 1fr;
68 | }
69 | @media (min-width: 1120px) {
70 | grid-template-columns: 1fr 1fr;
71 | }
72 | }
73 |
74 | .status {
75 | border-radius: var(--borderRadius);
76 | text-transform: capitalize;
77 | letter-spacing: var(--letterSpacing);
78 | text-align: center;
79 | width: 100px;
80 | height: 30px;
81 | }
82 | footer {
83 | margin-top: 1rem;
84 | }
85 | .edit-btn,
86 | .delete-btn {
87 | letter-spacing: var(--letterSpacing);
88 | cursor: pointer;
89 | height: 30px;
90 | }
91 | .edit-btn {
92 | color: var(--green-dark);
93 | background: var(--green-light);
94 | margin-right: 0.5rem;
95 | }
96 | .delete-btn {
97 | color: var(--red-dark);
98 | background: var(--red-light);
99 | }
100 | &:hover .actions {
101 | visibility: visible;
102 | }
103 | `
104 |
105 | export default Wrapper
106 |
--------------------------------------------------------------------------------
/client/src/assets/wrappers/JobInfo.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | const Wrapper = styled.div`
4 | margin-top: 0.5rem;
5 | display: flex;
6 | align-items: center;
7 |
8 | .icon {
9 | font-size: 1rem;
10 | margin-right: 1rem;
11 | display: flex;
12 | align-items: center;
13 | svg {
14 | color: var(--grey-400);
15 | }
16 | }
17 | .text {
18 | text-transform: capitalize;
19 | letter-spacing: var(--letterSpacing);
20 | }
21 | `
22 | export default Wrapper
23 |
--------------------------------------------------------------------------------
/client/src/assets/wrappers/JobsContainer.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | const Wrapper = styled.section`
4 | margin-top: 4rem;
5 | h2 {
6 | text-transform: none;
7 | }
8 | & > h5 {
9 | font-weight: 700;
10 | }
11 | .jobs {
12 | display: grid;
13 | grid-template-columns: 1fr;
14 | row-gap: 2rem;
15 | }
16 | @media (min-width: 992px) {
17 | .jobs {
18 | display: grid;
19 | grid-template-columns: 1fr 1fr;
20 | gap: 1rem;
21 | }
22 | }
23 | `
24 | export default Wrapper
25 |
--------------------------------------------------------------------------------
/client/src/assets/wrappers/LandingPage.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | const Wrapper = styled.main`
4 | nav {
5 | width: var(--fluid-width);
6 | max-width: var(--max-width);
7 | margin: 0 auto;
8 | height: var(--nav-height);
9 | display: flex;
10 | align-items: center;
11 | }
12 | .page {
13 | min-height: calc(100vh - var(--nav-height));
14 | display: grid;
15 | align-items: center;
16 | margin-top: -3rem;
17 | }
18 | h1 {
19 | font-weight: 700;
20 | span {
21 | color: var(--primary-500);
22 | }
23 | }
24 | p {
25 | color: var(--grey-600);
26 | }
27 | .main-img {
28 | display: none;
29 | }
30 | @media (min-width: 992px) {
31 | .page {
32 | grid-template-columns: 1fr 1fr;
33 | column-gap: 3rem;
34 | }
35 | .main-img {
36 | display: block;
37 | }
38 | }
39 | `
40 | export default Wrapper
41 |
--------------------------------------------------------------------------------
/client/src/assets/wrappers/Navbar.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | const Wrapper = styled.nav`
4 | height: var(--nav-height);
5 | display: flex;
6 | align-items: center;
7 | justify-content: center;
8 | box-shadow: 0 1px 0px 0px rgba(0, 0, 0, 0.1);
9 | .logo {
10 | display: flex;
11 | align-items: center;
12 | width: 100px;
13 | }
14 | .nav-center {
15 | display: flex;
16 | width: 90vw;
17 | align-items: center;
18 | justify-content: space-between;
19 | }
20 | .toggle-btn {
21 | background: transparent;
22 | border-color: transparent;
23 | font-size: 1.75rem;
24 | color: var(--primary-500);
25 | cursor: pointer;
26 | display: flex;
27 | align-items: center;
28 | }
29 | background: var(--white);
30 | .btn-container {
31 | position: relative;
32 | }
33 | .btn {
34 | display: flex;
35 | align-items: center;
36 | justify-content: center;
37 | gap: 0 0.5rem;
38 | position: relative;
39 | box-shadow: var(--shadow-2);
40 | }
41 |
42 | .dropdown {
43 | position: absolute;
44 | top: 40px;
45 | left: 0;
46 | width: 100%;
47 | background: var(--primary-100);
48 | box-shadow: var(--shadow-2);
49 | padding: 0.5rem;
50 | text-align: center;
51 | visibility: hidden;
52 | border-radius: var(--borderRadius);
53 | }
54 | .show-dropdown {
55 | visibility: visible;
56 | }
57 | .dropdown-btn {
58 | background: transparent;
59 | border-color: transparent;
60 | color: var(--primary-500);
61 | letter-spacing: var(--letterSpacing);
62 | text-transform: capitalize;
63 | cursor: pointer;
64 | }
65 | .logo-text {
66 | display: none;
67 | margin: 0;
68 | }
69 | @media (min-width: 992px) {
70 | position: sticky;
71 | top: 0;
72 |
73 | .nav-center {
74 | width: 90%;
75 | }
76 | .logo {
77 | display: none;
78 | }
79 | .logo-text {
80 | display: block;
81 | }
82 | }
83 | `
84 | export default Wrapper
85 |
--------------------------------------------------------------------------------
/client/src/assets/wrappers/PageBtnContainer.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | const Wrapper = styled.section`
4 | height: 6rem;
5 | margin-top: 2rem;
6 | display: flex;
7 | align-items: center;
8 | justify-content: end;
9 | flex-wrap: wrap;
10 | gap: 1rem;
11 | .btn-container {
12 | background: var(--primary-100);
13 | border-radius: var(--borderRadius);
14 | }
15 | .pageBtn {
16 | background: transparent;
17 | border-color: transparent;
18 | width: 50px;
19 | height: 40px;
20 | font-weight: 700;
21 | font-size: 1.25rem;
22 | color: var(--primary-500);
23 | transition: var(--transition);
24 | border-radius: var(--borderRadius);
25 | cursor: pointer;
26 | }
27 | .active {
28 | background: var(--primary-500);
29 | color: var(--white);
30 | }
31 | .prev-btn,
32 | .next-btn {
33 | width: 100px;
34 | height: 40px;
35 | background: var(--white);
36 | border-color: transparent;
37 | border-radius: var(--borderRadius);
38 | color: var(--primary-500);
39 | text-transform: capitalize;
40 | letter-spacing: var(--letterSpacing);
41 | display: flex;
42 | align-items: center;
43 | justify-content: center;
44 | gap: 0.5rem;
45 | cursor: pointer;
46 | transition: var(--transition);
47 | }
48 | .prev-btn:hover,
49 | .next-btn:hover {
50 | background: var(--primary-500);
51 | color: var(--white);
52 | }
53 | `
54 | export default Wrapper
55 |
--------------------------------------------------------------------------------
/client/src/assets/wrappers/RegisterPage.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | const Wrapper = styled.section`
4 | display: grid;
5 | align-items: center;
6 | .logo {
7 | display: block;
8 | margin: 0 auto;
9 | margin-bottom: 1.38rem;
10 | }
11 | .form {
12 | max-width: 400px;
13 | border-top: 5px solid var(--primary-500);
14 | }
15 |
16 | h3 {
17 | text-align: center;
18 | }
19 | p {
20 | margin: 0;
21 | margin-top: 1rem;
22 | text-align: center;
23 | }
24 | .btn {
25 | margin-top: 1rem;
26 | }
27 | .member-btn {
28 | background: transparent;
29 | border: transparent;
30 | color: var(--primary-500);
31 | cursor: pointer;
32 | letter-spacing: var(--letterSpacing);
33 | }
34 | `
35 | export default Wrapper
36 |
--------------------------------------------------------------------------------
/client/src/assets/wrappers/SearchContainer.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | const Wrapper = styled.section`
4 | .form {
5 | width: 100%;
6 | max-width: 100%;
7 | }
8 | .form-input,
9 | .form-select,
10 | .btn-block {
11 | height: 35px;
12 | }
13 | .form-row {
14 | margin-bottom: 0;
15 | }
16 | .form-center {
17 | display: grid;
18 | grid-template-columns: 1fr;
19 | column-gap: 2rem;
20 | row-gap: 0.5rem;
21 | }
22 | h5 {
23 | font-weight: 700;
24 | }
25 | .btn-block {
26 | align-self: end;
27 | margin-top: 1rem;
28 | }
29 | @media (min-width: 768px) {
30 | .form-center {
31 | grid-template-columns: 1fr 1fr;
32 | }
33 | }
34 | @media (min-width: 992px) {
35 | .form-center {
36 | grid-template-columns: 1fr 1fr 1fr;
37 | }
38 | .btn-block {
39 | margin-top: 0;
40 | }
41 | }
42 | `
43 |
44 | export default Wrapper
45 |
--------------------------------------------------------------------------------
/client/src/assets/wrappers/SharedLayout.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | const Wrapper = styled.section`
4 | .dashboard {
5 | display: grid;
6 | grid-template-columns: 1fr;
7 | }
8 | .dashboard-page {
9 | width: 90vw;
10 | margin: 0 auto;
11 | padding: 2rem 0;
12 | }
13 | @media (min-width: 992px) {
14 | .dashboard {
15 | grid-template-columns: auto 1fr;
16 | }
17 | .dashboard-page {
18 | width: 90%;
19 | }
20 | }
21 | `
22 | export default Wrapper
23 |
--------------------------------------------------------------------------------
/client/src/assets/wrappers/SmallSidebar.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | const Wrapper = styled.aside`
4 | @media (min-width: 992px) {
5 | display: none;
6 | }
7 | .sidebar-container {
8 | position: fixed;
9 | inset: 0;
10 | background: rgba(0, 0, 0, 0.7);
11 | display: flex;
12 | justify-content: center;
13 | align-items: center;
14 | z-index: -1;
15 | opacity: 0;
16 | transition: var(--transition);
17 | }
18 | .show-sidebar {
19 | z-index: 99;
20 | opacity: 1;
21 | }
22 | .content {
23 | background: var(--white);
24 | width: var(--fluid-width);
25 | height: 95vh;
26 | border-radius: var(--borderRadius);
27 | padding: 4rem 2rem;
28 | position: relative;
29 | display: flex;
30 | align-items: center;
31 | flex-direction: column;
32 | }
33 | .close-btn {
34 | position: absolute;
35 | top: 10px;
36 | left: 10px;
37 | background: transparent;
38 | border-color: transparent;
39 | font-size: 2rem;
40 | color: var(--red-dark);
41 | cursor: pointer;
42 | }
43 | .nav-links {
44 | padding-top: 2rem;
45 | display: flex;
46 | flex-direction: column;
47 | }
48 | .nav-link {
49 | display: flex;
50 | align-items: center;
51 | color: var(--grey-500);
52 | padding: 1rem 0;
53 | text-transform: capitalize;
54 | transition: var(--transition);
55 | }
56 | .nav-link:hover {
57 | color: var(--grey-900);
58 | }
59 | .nav-link:hover .icon {
60 | color: var(--primary-500);
61 | }
62 | .icon {
63 | font-size: 1.5rem;
64 | margin-right: 1rem;
65 | display: grid;
66 | place-items: center;
67 | transition: var(--transition);
68 | }
69 | .active {
70 | color: var(--grey-900);
71 | }
72 | .active .icon {
73 | color: var(--primary-500);
74 | }
75 | `
76 | export default Wrapper
77 |
--------------------------------------------------------------------------------
/client/src/assets/wrappers/StatItem.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | const Wrapper = styled.article`
4 | padding: 2rem;
5 | background: var(--white);
6 | border-radius: var(--borderRadius);
7 | border-bottom: 5px solid ${(props) => props.color};
8 | header {
9 | display: flex;
10 | align-items: center;
11 | justify-content: space-between;
12 | }
13 | .count {
14 | display: block;
15 | font-weight: 700;
16 | font-size: 50px;
17 | color: ${(props) => props.color};
18 | }
19 | .title {
20 | margin: 0;
21 | text-transform: capitalize;
22 | letter-spacing: var(--letterSpacing);
23 | text-align: left;
24 | margin-top: 0.5rem;
25 | }
26 | .icon {
27 | width: 70px;
28 | height: 60px;
29 | background: ${(props) => props.bcg};
30 | border-radius: var(--borderRadius);
31 | display: flex;
32 | align-items: center;
33 | justify-content: center;
34 | svg {
35 | font-size: 2rem;
36 | color: ${(props) => props.color};
37 | }
38 | }
39 | `
40 |
41 | export default Wrapper
42 |
--------------------------------------------------------------------------------
/client/src/assets/wrappers/StatsContainer.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | const Wrapper = styled.section`
4 | display: grid;
5 | row-gap: 2rem;
6 | @media (min-width: 768px) {
7 | grid-template-columns: 1fr 1fr;
8 | column-gap: 1rem;
9 | }
10 | @media (min-width: 1120px) {
11 | grid-template-columns: 1fr 1fr 1fr;
12 | column-gap: 1rem;
13 | }
14 | `
15 | export default Wrapper
16 |
--------------------------------------------------------------------------------
/client/src/assets/wrappers/Testing.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components'
2 |
3 | const Wrapper = styled.main`
4 | nav {
5 | width: var(--fluid-width);
6 | max-width: var(--max-width);
7 | margin: 0 auto;
8 | height: var(--nav-height);
9 | display: flex;
10 | align-items: center;
11 | }
12 | .page {
13 | min-height: calc(100vh - var(--nav-height));
14 | display: grid;
15 | align-items: center;
16 | margin-top: -3rem;
17 | }
18 | h1 {
19 | font-weight: 700;
20 | span {
21 | color: var(--primary-500);
22 | }
23 | }
24 | p {
25 | color: var(--grey-600);
26 | }
27 | .main-img {
28 | display: none;
29 | }
30 | @media (min-width: 992px) {
31 | .page {
32 | grid-template-columns: 1fr 1fr;
33 | column-gap: 3rem;
34 | }
35 | .main-img {
36 | display: block;
37 | }
38 | }
39 | `
40 | export default Wrapper
41 |
--------------------------------------------------------------------------------
/client/src/components/Alert.js:
--------------------------------------------------------------------------------
1 | import { useAppContext } from '../context/appContext'
2 |
3 | const Alert = () => {
4 | const { alertType, alertText } = useAppContext()
5 | return {alertText}
6 | }
7 |
8 | export default Alert
9 |
--------------------------------------------------------------------------------
/client/src/components/AreaChart.js:
--------------------------------------------------------------------------------
1 | import {
2 | ResponsiveContainer,
3 | AreaChart,
4 | Area,
5 | XAxis,
6 | YAxis,
7 | CartesianGrid,
8 | Tooltip,
9 | } from 'recharts'
10 |
11 | const AreaChartComponent = ({ data }) => {
12 | return (
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | )
23 | }
24 |
25 | export default AreaChartComponent
26 |
--------------------------------------------------------------------------------
/client/src/components/BarChart.js:
--------------------------------------------------------------------------------
1 | import {
2 | BarChart,
3 | Bar,
4 | XAxis,
5 | YAxis,
6 | CartesianGrid,
7 | Tooltip,
8 | ResponsiveContainer,
9 | } from 'recharts'
10 |
11 | const BarChartComponent = ({ data }) => {
12 | return (
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | )
23 | }
24 |
25 | export default BarChartComponent
26 |
--------------------------------------------------------------------------------
/client/src/components/BigSidebar.js:
--------------------------------------------------------------------------------
1 | import { useAppContext } from '../context/appContext'
2 | import NavLinks from './NavLinks'
3 | import Logo from '../components/Logo'
4 | import Wrapper from '../assets/wrappers/BigSidebar'
5 |
6 | const BigSidebar = () => {
7 | const { showSidebar } = useAppContext()
8 | return (
9 |
10 |
22 |
23 | )
24 | }
25 |
26 | export default BigSidebar
27 |
--------------------------------------------------------------------------------
/client/src/components/ChartsContainer.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 |
3 | import BarChart from './BarChart'
4 | import AreaChart from './AreaChart'
5 | import { useAppContext } from '../context/appContext'
6 | import Wrapper from '../assets/wrappers/ChartsContainer'
7 |
8 | const ChartsContainer = () => {
9 | const [barChart, setBarChart] = useState(true)
10 | const { monthlyApplications: data } = useAppContext()
11 | return (
12 |
13 | Monthly Applications
14 |
17 | {barChart ? : }
18 |
19 | )
20 | }
21 |
22 | export default ChartsContainer
23 |
--------------------------------------------------------------------------------
/client/src/components/FormRow.js:
--------------------------------------------------------------------------------
1 | const FormRow = ({ type, name, value, handleChange, labelText }) => {
2 | return (
3 |
4 |
7 |
14 |
15 | )
16 | }
17 |
18 | export default FormRow
19 |
--------------------------------------------------------------------------------
/client/src/components/FormRowSelect.js:
--------------------------------------------------------------------------------
1 | const FormRowSelect = ({ labelText, name, value, handleChange, list }) => {
2 | return (
3 |
4 |
7 |
21 |
22 | )
23 | }
24 |
25 | export default FormRowSelect
26 |
--------------------------------------------------------------------------------
/client/src/components/Job.js:
--------------------------------------------------------------------------------
1 | import moment from 'moment'
2 | import { FaLocationArrow, FaBriefcase, FaCalendarAlt } from 'react-icons/fa'
3 | import { Link } from 'react-router-dom'
4 | import { useAppContext } from '../context/appContext'
5 | import Wrapper from '../assets/wrappers/Job'
6 | import JobInfo from './JobInfo'
7 |
8 | const Job = ({
9 | _id,
10 | position,
11 | company,
12 | jobLocation,
13 | jobType,
14 | createdAt,
15 | status,
16 | }) => {
17 | const { setEditJob, deleteJob } = useAppContext()
18 |
19 | let date = moment(createdAt)
20 | date = date.format('MMM Do, YYYY')
21 | return (
22 |
23 |
24 | {company.charAt(0)}
25 |
26 |
{position}
27 |
{company}
28 |
31 |
32 |
} text={jobLocation} />
33 |
} text={date} />
34 |
} text={jobType} />
35 |
{status}
36 |
37 |
55 |
No jobs to display...
35 |
36 | );
37 | }
38 |
39 | return (
40 |
41 | {showAlert && }
42 |
43 | {totalJobs} job{jobs.length > 1 && 's'} found
44 |
45 |
46 | {jobs.map((job) => {
47 | return ;
48 | })}
49 |
50 | {numOfPages > 1 && }
51 |
52 | );
53 | };
54 |
55 | export default JobsContainer;
56 |
--------------------------------------------------------------------------------
/client/src/components/Loading.js:
--------------------------------------------------------------------------------
1 | const Loading = ({ center }) => {
2 | return
3 | }
4 |
5 | export default Loading
6 |
--------------------------------------------------------------------------------
/client/src/components/Logo.js:
--------------------------------------------------------------------------------
1 | import logo from '../assets/images/logo.svg'
2 |
3 | const Logo = () => {
4 | return 
5 | }
6 |
7 | export default Logo
8 |
--------------------------------------------------------------------------------
/client/src/components/NavLinks.js:
--------------------------------------------------------------------------------
1 | import links from '../utils/links';
2 | import { NavLink } from 'react-router-dom';
3 |
4 | const NavLinks = ({ toggleSidebar }) => {
5 | return (
6 |
7 | {links.map((link) => {
8 | const { text, path, id, icon } = link;
9 |
10 | return (
11 |
16 | isActive ? 'nav-link active' : 'nav-link'
17 | }
18 | end
19 | >
20 | {icon}
21 | {text}
22 |
23 | );
24 | })}
25 |
26 | );
27 | };
28 |
29 | export default NavLinks;
30 |
--------------------------------------------------------------------------------
/client/src/components/Navbar.js:
--------------------------------------------------------------------------------
1 | import Wrapper from '../assets/wrappers/Navbar'
2 | import { FaAlignLeft, FaUserCircle, FaCaretDown } from 'react-icons/fa'
3 | import { useAppContext } from '../context/appContext'
4 | import Logo from './Logo'
5 | import { useState } from 'react'
6 | const Navbar = () => {
7 | const [showLogout, setShowLogout] = useState(false)
8 | const { toggleSidebar, logoutUser, user } = useAppContext()
9 | return (
10 |
11 |
12 |
15 |
16 |
17 |
dashboard
18 |
19 |
20 |
29 |
30 |
33 |
34 |
35 |
32 | {pages.map((pageNumber) => {
33 | return (
34 |
42 | )
43 | })}
44 |
45 |
49 |
50 | )
51 | }
52 |
53 | export default PageBtnContainer
54 |
--------------------------------------------------------------------------------
/client/src/components/SearchContainer.js:
--------------------------------------------------------------------------------
1 | import { FormRow, FormRowSelect } from '.';
2 | import { useAppContext } from '../context/appContext';
3 | import Wrapper from '../assets/wrappers/SearchContainer';
4 | import { useState, useMemo } from 'react';
5 | const SearchContainer = () => {
6 | const [localSearch, setLocalSearch] = useState('');
7 | const {
8 | isLoading,
9 | search,
10 | searchStatus,
11 | searchType,
12 | sort,
13 | sortOptions,
14 | handleChange,
15 | clearFilters,
16 | jobTypeOptions,
17 | statusOptions,
18 | } = useAppContext();
19 | const handleSearch = (e) => {
20 | handleChange({ name: e.target.name, value: e.target.value });
21 | };
22 | const handleSubmit = (e) => {
23 | e.preventDefault();
24 | setLocalSearch('');
25 | clearFilters();
26 | };
27 | const debounce = () => {
28 | let timeoutID;
29 | return (e) => {
30 | setLocalSearch(e.target.value);
31 | clearTimeout(timeoutID);
32 | timeoutID = setTimeout(() => {
33 | handleChange({ name: e.target.name, value: e.target.value });
34 | }, 1000);
35 | };
36 | };
37 | const optimizedDebounce = useMemo(() => debounce(), []);
38 | return (
39 |
40 |
83 |
84 | );
85 | };
86 |
87 | export default SearchContainer;
88 |
--------------------------------------------------------------------------------
/client/src/components/SmallSidebar.js:
--------------------------------------------------------------------------------
1 | import Wrapper from '../assets/wrappers/SmallSidebar'
2 | import { FaTimes } from 'react-icons/fa'
3 | import { useAppContext } from '../context/appContext'
4 |
5 | import Logo from './Logo'
6 | import NavLinks from './NavLinks'
7 |
8 | const SmallSidebar = () => {
9 | const { showSidebar, toggleSidebar } = useAppContext()
10 | return (
11 |
12 |
17 |
18 |
21 |
24 |
25 |
26 |
{title}
11 |
12 | )
13 | }
14 |
15 | export default StatsItem
16 |
--------------------------------------------------------------------------------
/client/src/components/StatsContainer.js:
--------------------------------------------------------------------------------
1 | import { useAppContext } from '../context/appContext'
2 | import StatItem from './StatItem'
3 | import { FaSuitcaseRolling, FaCalendarCheck, FaBug } from 'react-icons/fa'
4 | import Wrapper from '../assets/wrappers/StatsContainer'
5 |
6 | const StatsContainer = () => {
7 | const { stats } = useAppContext()
8 |
9 | const defaultStats = [
10 | {
11 | title: 'pending applications',
12 | count: stats.pending || 0,
13 | icon: ,
14 | color: '#e9b949',
15 | bcg: '#fcefc7',
16 | },
17 | {
18 | title: 'interviews scheduled',
19 | count: stats.interview || 0,
20 | icon: ,
21 | color: '#647acb',
22 | bcg: '#e0e8f9',
23 | },
24 | {
25 | title: 'jobs declined',
26 | count: stats.declined || 0,
27 | icon: ,
28 | color: '#d66a6a',
29 | bcg: '#ffeeee',
30 | },
31 | ]
32 |
33 | return (
34 |
35 | {defaultStats.map((item, index) => {
36 | return
37 | })}
38 |
39 | )
40 | }
41 |
42 | export default StatsContainer
43 |
--------------------------------------------------------------------------------
/client/src/components/index.js:
--------------------------------------------------------------------------------
1 | import Alert from './Alert'
2 | import BigSidebar from './BigSidebar'
3 | import ChartsContainer from './ChartsContainer'
4 | import FormRow from './FormRow'
5 | import FormRowSelect from './FormRowSelect'
6 | import JobsContainer from './JobsContainer'
7 | import Loading from './Loading'
8 | import Logo from './Logo'
9 | import Navbar from './Navbar'
10 | import SearchContainer from './SearchContainer'
11 | import SmallSidebar from './SmallSidebar'
12 | import StatsContainer from './StatsContainer'
13 | export {
14 | Logo,
15 | FormRow,
16 | Alert,
17 | Navbar,
18 | BigSidebar,
19 | SmallSidebar,
20 | FormRowSelect,
21 | SearchContainer,
22 | JobsContainer,
23 | StatsContainer,
24 | ChartsContainer,
25 | Loading,
26 | }
27 |
--------------------------------------------------------------------------------
/client/src/context/actions.js:
--------------------------------------------------------------------------------
1 | export const DISPLAY_ALERT = 'SHOW_ALERT';
2 | export const CLEAR_ALERT = 'CLEAR_ALERT';
3 |
4 | export const SETUP_USER_BEGIN = 'SETUP_USER_BEGIN';
5 | export const SETUP_USER_SUCCESS = 'SETUP_USER_SUCCESS';
6 | export const SETUP_USER_ERROR = 'SETUP_USER_ERROR';
7 |
8 | export const TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR';
9 | export const LOGOUT_USER = 'LOGOUT_USER';
10 |
11 | export const UPDATE_USER_BEGIN = 'UPDATE_USER_BEGIN';
12 | export const UPDATE_USER_SUCCESS = 'UPDATE_USER_SUCCESS';
13 | export const UPDATE_USER_ERROR = 'UPDATE_USER_ERROR';
14 |
15 | export const HANDLE_CHANGE = 'HANDLE_CHANGE';
16 | export const CLEAR_VALUES = 'CLEAR_VALUES';
17 |
18 | export const CREATE_JOB_BEGIN = 'CREATE_JOB_BEGIN';
19 | export const CREATE_JOB_SUCCESS = 'CREATE_JOB_SUCCESS';
20 | export const CREATE_JOB_ERROR = 'CREATE_JOB_ERROR';
21 |
22 | export const GET_JOBS_BEGIN = 'GET_JOBS_BEGIN';
23 | export const GET_JOBS_SUCCESS = 'GET_JOBS_SUCCESS';
24 |
25 | export const SET_EDIT_JOB = 'SET_EDIT_JOB';
26 |
27 | export const DELETE_JOB_BEGIN = 'DELETE_JOB_BEGIN';
28 | export const DELETE_JOB_ERROR = 'DELETE_JOB_ERROR';
29 |
30 | export const EDIT_JOB_BEGIN = 'EDIT_JOB_BEGIN';
31 | export const EDIT_JOB_SUCCESS = 'EDIT_JOB_SUCCESS';
32 | export const EDIT_JOB_ERROR = 'EDIT_JOB_ERROR';
33 |
34 | export const SHOW_STATS_BEGIN = 'SHOW_STATS_BEGIN';
35 | export const SHOW_STATS_SUCCESS = 'SHOW_STATS_SUCCESS';
36 | export const CLEAR_FILTERS = 'CLEAR_FILTERS';
37 | export const CHANGE_PAGE = 'CHANGE_PAGE';
38 |
39 | export const GET_CURRENT_USER_BEGIN = 'GET_CURRENT_USER_BEGIN';
40 | export const GET_CURRENT_USER_SUCCESS = 'GET_CURRENT_USER_SUCCESS';
41 |
--------------------------------------------------------------------------------
/client/src/context/appContext.js:
--------------------------------------------------------------------------------
1 | import React, { useReducer, useContext, useEffect } from 'react';
2 |
3 | import reducer from './reducer';
4 | import axios from 'axios';
5 | import {
6 | DISPLAY_ALERT,
7 | CLEAR_ALERT,
8 | SETUP_USER_BEGIN,
9 | SETUP_USER_SUCCESS,
10 | SETUP_USER_ERROR,
11 | TOGGLE_SIDEBAR,
12 | LOGOUT_USER,
13 | UPDATE_USER_BEGIN,
14 | UPDATE_USER_SUCCESS,
15 | UPDATE_USER_ERROR,
16 | HANDLE_CHANGE,
17 | CLEAR_VALUES,
18 | CREATE_JOB_BEGIN,
19 | CREATE_JOB_SUCCESS,
20 | CREATE_JOB_ERROR,
21 | GET_JOBS_BEGIN,
22 | GET_JOBS_SUCCESS,
23 | SET_EDIT_JOB,
24 | DELETE_JOB_BEGIN,
25 | DELETE_JOB_ERROR,
26 | EDIT_JOB_BEGIN,
27 | EDIT_JOB_SUCCESS,
28 | EDIT_JOB_ERROR,
29 | SHOW_STATS_BEGIN,
30 | SHOW_STATS_SUCCESS,
31 | CLEAR_FILTERS,
32 | CHANGE_PAGE,
33 | GET_CURRENT_USER_BEGIN,
34 | GET_CURRENT_USER_SUCCESS,
35 | } from './actions';
36 |
37 | const initialState = {
38 | userLoading: true,
39 | isLoading: false,
40 | showAlert: false,
41 | alertText: '',
42 | alertType: '',
43 | user: null,
44 | userLocation: '',
45 | showSidebar: false,
46 | isEditing: false,
47 | editJobId: '',
48 | position: '',
49 | company: '',
50 | jobLocation: '',
51 | jobTypeOptions: ['full-time', 'part-time', 'remote', 'internship'],
52 | jobType: 'full-time',
53 | statusOptions: ['interview', 'declined', 'pending'],
54 | status: 'pending',
55 | jobs: [],
56 | totalJobs: 0,
57 | numOfPages: 1,
58 | page: 1,
59 | stats: {},
60 | monthlyApplications: [],
61 | search: '',
62 | searchStatus: 'all',
63 | searchType: 'all',
64 | sort: 'latest',
65 | sortOptions: ['latest', 'oldest', 'a-z', 'z-a'],
66 | };
67 |
68 | const AppContext = React.createContext();
69 |
70 | const AppProvider = ({ children }) => {
71 | const [state, dispatch] = useReducer(reducer, initialState);
72 |
73 | // axios
74 | const authFetch = axios.create({
75 | baseURL: '/api/v1',
76 | });
77 | // request
78 |
79 | // response
80 |
81 | authFetch.interceptors.response.use(
82 | (response) => {
83 | return response;
84 | },
85 | (error) => {
86 | // console.log(error.response)
87 | if (error.response.status === 401) {
88 | logoutUser();
89 | }
90 | return Promise.reject(error);
91 | }
92 | );
93 |
94 | const displayAlert = () => {
95 | dispatch({ type: DISPLAY_ALERT });
96 | clearAlert();
97 | };
98 |
99 | const clearAlert = () => {
100 | setTimeout(() => {
101 | dispatch({ type: CLEAR_ALERT });
102 | }, 3000);
103 | };
104 |
105 | const setupUser = async ({ currentUser, endPoint, alertText }) => {
106 | dispatch({ type: SETUP_USER_BEGIN });
107 | try {
108 | const { data } = await axios.post(
109 | `/api/v1/auth/${endPoint}`,
110 | currentUser
111 | );
112 |
113 | const { user, location } = data;
114 | dispatch({
115 | type: SETUP_USER_SUCCESS,
116 | payload: { user, location, alertText },
117 | });
118 | } catch (error) {
119 | dispatch({
120 | type: SETUP_USER_ERROR,
121 | payload: { msg: error.response.data.msg },
122 | });
123 | }
124 | clearAlert();
125 | };
126 | const toggleSidebar = () => {
127 | dispatch({ type: TOGGLE_SIDEBAR });
128 | };
129 |
130 | const logoutUser = async () => {
131 | await authFetch.get('/auth/logout');
132 | dispatch({ type: LOGOUT_USER });
133 | };
134 | const updateUser = async (currentUser) => {
135 | dispatch({ type: UPDATE_USER_BEGIN });
136 | try {
137 | const { data } = await authFetch.patch('/auth/updateUser', currentUser);
138 | const { user, location } = data;
139 |
140 | dispatch({
141 | type: UPDATE_USER_SUCCESS,
142 | payload: { user, location },
143 | });
144 | } catch (error) {
145 | if (error.response.status !== 401) {
146 | dispatch({
147 | type: UPDATE_USER_ERROR,
148 | payload: { msg: error.response.data.msg },
149 | });
150 | }
151 | }
152 | clearAlert();
153 | };
154 |
155 | const handleChange = ({ name, value }) => {
156 | dispatch({ type: HANDLE_CHANGE, payload: { name, value } });
157 | };
158 | const clearValues = () => {
159 | dispatch({ type: CLEAR_VALUES });
160 | };
161 | const createJob = async () => {
162 | dispatch({ type: CREATE_JOB_BEGIN });
163 | try {
164 | const { position, company, jobLocation, jobType, status } = state;
165 | await authFetch.post('/jobs', {
166 | position,
167 | company,
168 | jobLocation,
169 | jobType,
170 | status,
171 | });
172 | dispatch({ type: CREATE_JOB_SUCCESS });
173 | dispatch({ type: CLEAR_VALUES });
174 | } catch (error) {
175 | if (error.response.status === 401) return;
176 | dispatch({
177 | type: CREATE_JOB_ERROR,
178 | payload: { msg: error.response.data.msg },
179 | });
180 | }
181 | clearAlert();
182 | };
183 |
184 | const getJobs = async () => {
185 | const { page, search, searchStatus, searchType, sort } = state;
186 |
187 | let url = `/jobs?page=${page}&status=${searchStatus}&jobType=${searchType}&sort=${sort}`;
188 | if (search) {
189 | url = url + `&search=${search}`;
190 | }
191 | dispatch({ type: GET_JOBS_BEGIN });
192 | try {
193 | const { data } = await authFetch(url);
194 | const { jobs, totalJobs, numOfPages } = data;
195 | dispatch({
196 | type: GET_JOBS_SUCCESS,
197 | payload: {
198 | jobs,
199 | totalJobs,
200 | numOfPages,
201 | },
202 | });
203 | } catch (error) {
204 | logoutUser();
205 | }
206 | clearAlert();
207 | };
208 |
209 | const setEditJob = (id) => {
210 | dispatch({ type: SET_EDIT_JOB, payload: { id } });
211 | };
212 | const editJob = async () => {
213 | dispatch({ type: EDIT_JOB_BEGIN });
214 |
215 | try {
216 | const { position, company, jobLocation, jobType, status } = state;
217 | await authFetch.patch(`/jobs/${state.editJobId}`, {
218 | company,
219 | position,
220 | jobLocation,
221 | jobType,
222 | status,
223 | });
224 | dispatch({ type: EDIT_JOB_SUCCESS });
225 | dispatch({ type: CLEAR_VALUES });
226 | } catch (error) {
227 | if (error.response.status === 401) return;
228 | dispatch({
229 | type: EDIT_JOB_ERROR,
230 | payload: { msg: error.response.data.msg },
231 | });
232 | }
233 | clearAlert();
234 | };
235 | const deleteJob = async (jobId) => {
236 | dispatch({ type: DELETE_JOB_BEGIN });
237 | try {
238 | await authFetch.delete(`/jobs/${jobId}`);
239 | getJobs();
240 | } catch (error) {
241 | if (error.response.status === 401) return;
242 | dispatch({
243 | type: DELETE_JOB_ERROR,
244 | payload: { msg: error.response.data.msg },
245 | });
246 | }
247 | clearAlert();
248 | };
249 | const showStats = async () => {
250 | dispatch({ type: SHOW_STATS_BEGIN });
251 | try {
252 | const { data } = await authFetch('/jobs/stats');
253 | dispatch({
254 | type: SHOW_STATS_SUCCESS,
255 | payload: {
256 | stats: data.defaultStats,
257 | monthlyApplications: data.monthlyApplications,
258 | },
259 | });
260 | } catch (error) {
261 | logoutUser();
262 | }
263 | clearAlert();
264 | };
265 | const clearFilters = () => {
266 | dispatch({ type: CLEAR_FILTERS });
267 | };
268 | const changePage = (page) => {
269 | dispatch({ type: CHANGE_PAGE, payload: { page } });
270 | };
271 |
272 | const getCurrentUser = async () => {
273 | dispatch({ type: GET_CURRENT_USER_BEGIN });
274 | try {
275 | const { data } = await authFetch('/auth/getCurrentUser');
276 | const { user, location } = data;
277 |
278 | dispatch({
279 | type: GET_CURRENT_USER_SUCCESS,
280 | payload: { user, location },
281 | });
282 | } catch (error) {
283 | if (error.response.status === 401) return;
284 | logoutUser();
285 | }
286 | };
287 | useEffect(() => {
288 | getCurrentUser();
289 | }, []);
290 |
291 | return (
292 |
312 | {children}
313 |
314 | );
315 | };
316 |
317 | const useAppContext = () => {
318 | return useContext(AppContext);
319 | };
320 |
321 | export { AppProvider, initialState, useAppContext };
322 |
--------------------------------------------------------------------------------
/client/src/context/reducer.js:
--------------------------------------------------------------------------------
1 | import {
2 | DISPLAY_ALERT,
3 | CLEAR_ALERT,
4 | SETUP_USER_BEGIN,
5 | SETUP_USER_SUCCESS,
6 | SETUP_USER_ERROR,
7 | TOGGLE_SIDEBAR,
8 | LOGOUT_USER,
9 | UPDATE_USER_BEGIN,
10 | UPDATE_USER_SUCCESS,
11 | UPDATE_USER_ERROR,
12 | HANDLE_CHANGE,
13 | CLEAR_VALUES,
14 | CREATE_JOB_BEGIN,
15 | CREATE_JOB_SUCCESS,
16 | CREATE_JOB_ERROR,
17 | GET_JOBS_BEGIN,
18 | GET_JOBS_SUCCESS,
19 | SET_EDIT_JOB,
20 | DELETE_JOB_BEGIN,
21 | DELETE_JOB_ERROR,
22 | EDIT_JOB_BEGIN,
23 | EDIT_JOB_SUCCESS,
24 | EDIT_JOB_ERROR,
25 | SHOW_STATS_BEGIN,
26 | SHOW_STATS_SUCCESS,
27 | CLEAR_FILTERS,
28 | CHANGE_PAGE,
29 | GET_CURRENT_USER_BEGIN,
30 | GET_CURRENT_USER_SUCCESS,
31 | } from './actions';
32 |
33 | import { initialState } from './appContext';
34 |
35 | const reducer = (state, action) => {
36 | if (action.type === DISPLAY_ALERT) {
37 | return {
38 | ...state,
39 | showAlert: true,
40 | alertType: 'danger',
41 | alertText: 'Please provide all values!',
42 | };
43 | }
44 | if (action.type === CLEAR_ALERT) {
45 | return {
46 | ...state,
47 | showAlert: false,
48 | alertType: '',
49 | alertText: '',
50 | };
51 | }
52 |
53 | if (action.type === SETUP_USER_BEGIN) {
54 | return { ...state, isLoading: true };
55 | }
56 | if (action.type === SETUP_USER_SUCCESS) {
57 | return {
58 | ...state,
59 | isLoading: false,
60 | user: action.payload.user,
61 | userLocation: action.payload.location,
62 | jobLocation: action.payload.location,
63 | showAlert: true,
64 | alertType: 'success',
65 | alertText: action.payload.alertText,
66 | };
67 | }
68 | if (action.type === SETUP_USER_ERROR) {
69 | return {
70 | ...state,
71 | isLoading: false,
72 | showAlert: true,
73 | alertType: 'danger',
74 | alertText: action.payload.msg,
75 | };
76 | }
77 | if (action.type === TOGGLE_SIDEBAR) {
78 | return {
79 | ...state,
80 | showSidebar: !state.showSidebar,
81 | };
82 | }
83 | if (action.type === LOGOUT_USER) {
84 | return {
85 | ...initialState,
86 | userLoading: false,
87 | };
88 | }
89 | if (action.type === UPDATE_USER_BEGIN) {
90 | return { ...state, isLoading: true };
91 | }
92 | if (action.type === UPDATE_USER_SUCCESS) {
93 | return {
94 | ...state,
95 | isLoading: false,
96 | user: action.payload.user,
97 | userLocation: action.payload.location,
98 | jobLocation: action.payload.location,
99 | showAlert: true,
100 | alertType: 'success',
101 | alertText: 'User Profile Updated!',
102 | };
103 | }
104 | if (action.type === UPDATE_USER_ERROR) {
105 | return {
106 | ...state,
107 | isLoading: false,
108 | showAlert: true,
109 | alertType: 'danger',
110 | alertText: action.payload.msg,
111 | };
112 | }
113 | if (action.type === HANDLE_CHANGE) {
114 | return {
115 | ...state,
116 | page: 1,
117 | [action.payload.name]: action.payload.value,
118 | };
119 | }
120 | if (action.type === CLEAR_VALUES) {
121 | const initialState = {
122 | isEditing: false,
123 | editJobId: '',
124 | position: '',
125 | company: '',
126 | jobLocation: state.userLocation,
127 | jobType: 'full-time',
128 | status: 'pending',
129 | };
130 |
131 | return {
132 | ...state,
133 | ...initialState,
134 | };
135 | }
136 | if (action.type === CREATE_JOB_BEGIN) {
137 | return { ...state, isLoading: true };
138 | }
139 |
140 | if (action.type === CREATE_JOB_SUCCESS) {
141 | return {
142 | ...state,
143 | isLoading: false,
144 | showAlert: true,
145 | alertType: 'success',
146 | alertText: 'New Job Created!',
147 | };
148 | }
149 | if (action.type === CREATE_JOB_ERROR) {
150 | return {
151 | ...state,
152 | isLoading: false,
153 | showAlert: true,
154 | alertType: 'danger',
155 | alertText: action.payload.msg,
156 | };
157 | }
158 | if (action.type === GET_JOBS_BEGIN) {
159 | return { ...state, isLoading: true, showAlert: false };
160 | }
161 | if (action.type === GET_JOBS_SUCCESS) {
162 | return {
163 | ...state,
164 | isLoading: false,
165 | jobs: action.payload.jobs,
166 | totalJobs: action.payload.totalJobs,
167 | numOfPages: action.payload.numOfPages,
168 | };
169 | }
170 | if (action.type === SET_EDIT_JOB) {
171 | const job = state.jobs.find((job) => job._id === action.payload.id);
172 | const { _id, position, company, jobLocation, jobType, status } = job;
173 | return {
174 | ...state,
175 | isEditing: true,
176 | editJobId: _id,
177 | position,
178 | company,
179 | jobLocation,
180 | jobType,
181 | status,
182 | };
183 | }
184 | if (action.type === DELETE_JOB_BEGIN) {
185 | return { ...state, isLoading: true };
186 | }
187 | if (action.type === DELETE_JOB_ERROR) {
188 | return {
189 | ...state,
190 | isLoading: false,
191 | showAlert: true,
192 | alertType: 'danger',
193 | alertText: action.payload.msg,
194 | };
195 | }
196 | if (action.type === EDIT_JOB_BEGIN) {
197 | return {
198 | ...state,
199 | isLoading: true,
200 | };
201 | }
202 | if (action.type === EDIT_JOB_SUCCESS) {
203 | return {
204 | ...state,
205 | isLoading: false,
206 | showAlert: true,
207 | alertType: 'success',
208 | alertText: 'Job Updated!',
209 | };
210 | }
211 | if (action.type === EDIT_JOB_ERROR) {
212 | return {
213 | ...state,
214 | isLoading: false,
215 | showAlert: true,
216 | alertType: 'danger',
217 | alertText: action.payload.msg,
218 | };
219 | }
220 | if (action.type === SHOW_STATS_BEGIN) {
221 | return {
222 | ...state,
223 | isLoading: true,
224 | showAlert: false,
225 | };
226 | }
227 | if (action.type === SHOW_STATS_SUCCESS) {
228 | return {
229 | ...state,
230 | isLoading: false,
231 | stats: action.payload.stats,
232 | monthlyApplications: action.payload.monthlyApplications,
233 | };
234 | }
235 | if (action.type === CLEAR_FILTERS) {
236 | return {
237 | ...state,
238 | search: '',
239 | searchStatus: 'all',
240 | searchType: 'all',
241 | sort: 'latest',
242 | };
243 | }
244 | if (action.type === CHANGE_PAGE) {
245 | return { ...state, page: action.payload.page };
246 | }
247 | if (action.type === GET_CURRENT_USER_BEGIN) {
248 | return { ...state, userLoading: true, showAlert: false };
249 | }
250 | if (action.type === GET_CURRENT_USER_SUCCESS) {
251 | return {
252 | ...state,
253 | userLoading: false,
254 | user: action.payload.user,
255 | userLocation: action.payload.location,
256 | jobLocation: action.payload.location,
257 | };
258 | }
259 | throw new Error(`no such action : ${action.type}`);
260 | };
261 |
262 | export default reducer;
263 |
--------------------------------------------------------------------------------
/client/src/index.css:
--------------------------------------------------------------------------------
1 | *,
2 | ::after,
3 | ::before {
4 | box-sizing: border-box;
5 | }
6 |
7 | /* fonts */
8 | @import url('https://fonts.googleapis.com/css2?family=Cabin&family=Roboto+Condensed:wght@400;700&display=swap');
9 |
10 | html {
11 | font-size: 100%;
12 | } /*16px*/
13 |
14 | :root {
15 | /* colors */
16 | --primary-50: #e0fcff;
17 | --primary-100: #bef8fd;
18 | --primary-200: #87eaf2;
19 | --primary-300: #54d1db;
20 | --primary-400: #38bec9;
21 | --primary-500: #2cb1bc;
22 | --primary-600: #14919b;
23 | --primary-700: #0e7c86;
24 | --primary-800: #0a6c74;
25 | --primary-900: #044e54;
26 |
27 | /* grey */
28 | --grey-50: #f0f4f8;
29 | --grey-100: #d9e2ec;
30 | --grey-200: #bcccdc;
31 | --grey-300: #9fb3c8;
32 | --grey-400: #829ab1;
33 | --grey-500: #627d98;
34 | --grey-600: #486581;
35 | --grey-700: #334e68;
36 | --grey-800: #243b53;
37 | --grey-900: #102a43;
38 | /* rest of the colors */
39 | --black: #222;
40 | --white: #fff;
41 | --red-light: #f8d7da;
42 | --red-dark: #842029;
43 | --green-light: #d1e7dd;
44 | --green-dark: #0f5132;
45 |
46 | /* fonts */
47 | --headingFont: 'Roboto Condensed', Sans-Serif;
48 | --bodyFont: 'Cabin', Sans-Serif;
49 | --small-text: 0.875rem;
50 | --extra-small-text: 0.7em;
51 | /* rest of the vars */
52 | --backgroundColor: var(--grey-50);
53 | --textColor: var(--grey-900);
54 | --borderRadius: 0.25rem;
55 | --letterSpacing: 1px;
56 | --transition: 0.3s ease-in-out all;
57 | --max-width: 1120px;
58 | --fixed-width: 500px;
59 | --fluid-width: 90vw;
60 | --breakpoint-lg: 992px;
61 | --nav-height: 6rem;
62 | /* box shadow*/
63 | --shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
64 | --shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
65 | 0 2px 4px -1px rgba(0, 0, 0, 0.06);
66 | --shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
67 | 0 4px 6px -2px rgba(0, 0, 0, 0.05);
68 | --shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
69 | 0 10px 10px -5px rgba(0, 0, 0, 0.04);
70 | }
71 |
72 | body {
73 | background: var(--backgroundColor);
74 | font-family: var(--bodyFont);
75 | font-weight: 400;
76 | line-height: 1.75;
77 | color: var(--textColor);
78 | }
79 |
80 | p {
81 | margin-bottom: 1.5rem;
82 | max-width: 40em;
83 | }
84 |
85 | h1,
86 | h2,
87 | h3,
88 | h4,
89 | h5 {
90 | margin: 0;
91 | margin-bottom: 1.38rem;
92 | font-family: var(--headingFont);
93 | font-weight: 400;
94 | line-height: 1.3;
95 | text-transform: capitalize;
96 | letter-spacing: var(--letterSpacing);
97 | }
98 |
99 | h1 {
100 | margin-top: 0;
101 | font-size: 3.052rem;
102 | }
103 |
104 | h2 {
105 | font-size: 2.441rem;
106 | }
107 |
108 | h3 {
109 | font-size: 1.953rem;
110 | }
111 |
112 | h4 {
113 | font-size: 1.563rem;
114 | }
115 |
116 | h5 {
117 | font-size: 1.25rem;
118 | }
119 |
120 | small,
121 | .text-small {
122 | font-size: var(--small-text);
123 | }
124 |
125 | a {
126 | text-decoration: none;
127 | letter-spacing: var(--letterSpacing);
128 | }
129 | a,
130 | button {
131 | line-height: 1.15;
132 | }
133 | button:disabled {
134 | cursor: not-allowed;
135 | }
136 | ul {
137 | list-style-type: none;
138 | padding: 0;
139 | }
140 |
141 | .img {
142 | width: 100%;
143 | display: block;
144 | object-fit: cover;
145 | }
146 | /* buttons */
147 |
148 | .btn {
149 | cursor: pointer;
150 | color: var(--white);
151 | background: var(--primary-500);
152 | border: transparent;
153 | border-radius: var(--borderRadius);
154 | letter-spacing: var(--letterSpacing);
155 | padding: 0.375rem 0.75rem;
156 | box-shadow: var(--shadow-2);
157 | transition: var(--transition);
158 | text-transform: capitalize;
159 | display: inline-block;
160 | }
161 | .btn:hover {
162 | background: var(--primary-700);
163 | box-shadow: var(--shadow-3);
164 | }
165 | .btn-hipster {
166 | color: var(--primary-500);
167 | background: var(--primary-200);
168 | }
169 | .btn-hipster:hover {
170 | color: var(--primary-200);
171 | background: var(--primary-700);
172 | }
173 | .btn-block {
174 | width: 100%;
175 | }
176 | .btn-hero {
177 | font-size: 1.25rem;
178 | padding: 0.5rem 1.25rem;
179 | }
180 | .btn-danger {
181 | background: var(--red-light);
182 | color: var(--red-dark);
183 | }
184 | .btn-danger:hover {
185 | background: var(--red-dark);
186 | color: var(--white);
187 | }
188 | /* alerts */
189 | .alert {
190 | padding: 0.375rem 0.75rem;
191 | margin-bottom: 1rem;
192 | border-color: transparent;
193 | border-radius: var(--borderRadius);
194 | text-align: center;
195 | letter-spacing: var(--letterSpacing);
196 | }
197 |
198 | .alert-danger {
199 | color: var(--red-dark);
200 | background: var(--red-light);
201 | }
202 | .alert-success {
203 | color: var(--green-dark);
204 | background: var(--green-light);
205 | }
206 | /* form */
207 |
208 | .form {
209 | width: 90vw;
210 | max-width: var(--fixed-width);
211 | background: var(--white);
212 | border-radius: var(--borderRadius);
213 | box-shadow: var(--shadow-2);
214 | padding: 2rem 2.5rem;
215 | margin: 3rem auto;
216 | transition: var(--transition);
217 | }
218 | .form:hover {
219 | box-shadow: var(--shadow-4);
220 | }
221 | .form-label {
222 | display: block;
223 | font-size: var(--smallText);
224 | margin-bottom: 0.5rem;
225 | text-transform: capitalize;
226 | letter-spacing: var(--letterSpacing);
227 | }
228 | .form-input,
229 | .form-textarea,
230 | .form-select {
231 | width: 100%;
232 | padding: 0.375rem 0.75rem;
233 | border-radius: var(--borderRadius);
234 | background: var(--backgroundColor);
235 | border: 1px solid var(--grey-200);
236 | }
237 | .form-input,
238 | .form-select,
239 | .btn-block {
240 | height: 35px;
241 | }
242 | .form-row {
243 | margin-bottom: 1rem;
244 | }
245 |
246 | .form-textarea {
247 | height: 7rem;
248 | }
249 | ::placeholder {
250 | font-family: inherit;
251 | color: var(--grey-400);
252 | }
253 | .form-alert {
254 | color: var(--red-dark);
255 | letter-spacing: var(--letterSpacing);
256 | text-transform: capitalize;
257 | }
258 | /* alert */
259 |
260 | @keyframes spinner {
261 | to {
262 | transform: rotate(360deg);
263 | }
264 | }
265 |
266 | .loading {
267 | width: 6rem;
268 | height: 6rem;
269 | border: 5px solid var(--grey-400);
270 | border-radius: 50%;
271 | border-top-color: var(--primary-500);
272 | animation: spinner 2s linear infinite;
273 | }
274 | .loading-center {
275 | margin: 0 auto;
276 | }
277 | /* title */
278 |
279 | .title {
280 | text-align: center;
281 | }
282 |
283 | .title-underline {
284 | background: var(--primary-500);
285 | width: 7rem;
286 | height: 0.25rem;
287 | margin: 0 auto;
288 | margin-top: -1rem;
289 | }
290 |
291 | .container {
292 | width: var(--fluid-width);
293 | max-width: var(--max-width);
294 | margin: 0 auto;
295 | }
296 | .full-page {
297 | min-height: 100vh;
298 | }
299 |
300 | .coffee-info {
301 | text-align: center;
302 | text-transform: capitalize;
303 | margin-bottom: 1rem;
304 | letter-spacing: var(--letterSpacing);
305 | }
306 | .coffee-info span {
307 | display: block;
308 | }
309 | .coffee-info a {
310 | color: var(--primary-500);
311 | }
312 |
313 | @media screen and (min-width: 992px) {
314 | .coffee-info {
315 | text-align: left;
316 | }
317 | .coffee-info span {
318 | display: inline-block;
319 | margin-right: 0.5rem;
320 | }
321 | }
322 |
--------------------------------------------------------------------------------
/client/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import 'normalize.css';
4 | import './index.css';
5 | import App from './App';
6 | import { AppProvider } from './context/appContext';
7 | const root = ReactDOM.createRoot(document.getElementById('root'));
8 |
9 | root.render(
10 |
11 |
12 |
13 |
14 |
15 | );
16 |
--------------------------------------------------------------------------------
/client/src/pages/Error.js:
--------------------------------------------------------------------------------
1 | import { Link } from 'react-router-dom'
2 | import img from '../assets/images/not-found.svg'
3 | import Wrapper from '../assets/wrappers/ErrorPage'
4 |
5 | const Error = () => {
6 | return (
7 |
8 |
9 |
10 |
Ohh! page not found
11 |
We can't seem to find the page you're looking for
12 |
back home
13 |
19 | {/* info */}
20 |
21 |
22 | job tracking app
23 |
24 |
25 | I'm baby wayfarers hoodie next level taiyaki brooklyn cliche blue
26 | bottle single-origin coffee chia. Aesthetic post-ironic venmo,
27 | quinoa lo-fi tote bag adaptogen everyday carry meggings +1 brunch
28 | narwhal.
29 |
30 |
31 | Login/Register
32 |
33 |
34 |
35 |