Mern Stack Development

Course Detail

Course Outline

Section1: introduction

1. Course resources
2. Course requirements
3. Free resources
4. Blur fix
5. Course review

Section 2: general setup

1. Vs code
2. Vite info
3. Vite install
4. Vite folder structure
5. Remove boiler plate
6. Obtain assets
7. Global CSS
8. Title and favicon
9. Install all libraries

Section3. React router

1. React router info
2. React router initial setup
3. Create pages
4. Setup index .js
5. Link components
6. Nested routes
7. Error pages

Sectione4: landing page

1. Styled components intro
2. Wrapper
3. Landing page
4. Landing page CSS
5. Logo component
6. Logo and images
7. Section5: errors and images
8. Error page JSS
9. Error page CSS

Section6 : Register page

1. Register page setup
2. Form row component

Section7 : login page 

1. Login page
2. Login and register CSS

Section8: dashboard 

1. Dashboard setup
2. Dashboard structure
3. Dashboard CSS
4. Dashboard context
5. React icons
6. Navbar structure
7. Navbar CSS
8. Links data
9. Sidebar structure
10. Big sidebar CSS
11. Logout container
12. Logout container CSS
13. Theme toggle
14. Theme toggle CSS
15. Dark theme logic
16. Dark theme logic bug fix
17. Dark theme CSS

Section9: server 

1. Folder structure
2. ES6 modules
3. Install server packages
4. Express and nodemon
5. Thunder client
6. Json middleware
7. Morgan and Dontev
8. New node feature
9. Get all jobs
10. Create jobs
11. Get single job
12. Edit job
13. Delete job
14. Not found and error route
15. Not found vs error route
16. Controller and router
17. Mongo DB
18. Atlas account
19. Mongoose
20. Connect DB
21. Job model
22. Create job controller
23. Async error
24. Get all jobs and get single jobs
25. Delete and update jobs
26. Status codes
27. More custom errors
28. Validation layer intro
29. Express validator setup
30. Validation middleware
31. Constants
32. Validate job input
33. Validate id prams
34. Validate job
35. User model
36. User controller and router
37. Create user
38. Validate register user
39. Admin user
40. Hash password
41. Hash utils
42. Validate login
43. Login logic
44. JWT
45. JWT ENV
46. HTTP ONLY cookie
47. Authentic user setup
48. Verify cookie
49. Verify JWT
50. Add user to job routes
51. Validate owner
52. Logout controller
53. User routes
54. Get current users
55. Update user
56. Get application stats
57. Proxy setup
58. Concurrently
59. Axios
60. Section10: register page 
61. React router action intro
62. First action
63. Register user complete
64. Navigation state
65. React testify

Section11: dashboard and login 

1. Login user
2. Use action data hook
3. Loaders
4. Get current users
5. Logout

Section12:jobs pages

1. Add job structure
2. Select input
3. Create job functionally
4. Add job CSS
5. Add job structure
6. All job context
7. Jobs container JXS
8. Job container CSS
9. Job component
10. Job component CSS
11. Edit job setups
12. Route params
13. Edit job loader
14. Edit job jsx
15. Edit job action
16. Delete job
17. Section13 : admin page
18. Admin page setup
19. Admin page complete
20. Admin page CSS

Section14: profile page 

1. Avatar pages
2. Public folder
3. User schema update
4. Profile page structure
5. Profile action
6. Setup multer
7. Cloudinary
8. Update user functionally
9. Submit user component
10. Create test user
11. Restrict access to test user
12. Mockaroo
13. Populate db.

Section15. stats page 

1. Stats route setup
2. Group by job status
3. Group by monthly application
4. Stats page setup
5. Stats container
6. Bar chart container
7. Charts
8. Charts container CSS

Section16: All jobs page

1. Query params
2. Search param
3. Job status and job type
4. Sort
5. Pagination
6. Search from setup
7. Loader and query params
8. Controlled inputs
9. Debounce
10. Pagination setups
11. Render buttons
12. Pagination logic first approach
13. Pagination logic complex
14. approach
15. Button container CSS

Section17: initial deploy

1. Local build
2. Render intro
3. Deploy app

Section18: react query and other extra feature

1. Build front end programmatically
2. Update user fix
3. Global loading
4. React query install
5. Page error element
6. First query with react query
7. React query in stats loader
8. React query current user
9. Invalidate queries’
10. React query all jobs
11. React query edit jobs
12. Anxious interceptors
13. Security packages