Mern Stack Development

Both Physical & Online Classes Available

Course Detail

Course Duration: 2 Months
Class Days: Tuesday, Wednesday
Start Date Class Timing Course Fee
21 May 2024 04:00 PM - 06:00 PM
(Pakistan Time)*
16,000 Rs
* 03:00 PM - 05:00 PM (UAE Time)
Click the Icon For Contact Us: +923214946496

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
Instructions for filling out the enrollment form
  • All input fields are required. Please ensure that the details you provide are the same as those on your CNIC or Passport.
  • Please ensure that you provide accurate details matching those on your CNIC or Passport.
  • For the date of birth, please use the format month/day/year (e.g., 01/15/1990).
  • Ensure that your email address is valid and correctly formatted, (e.g., [email protected]).
  • Both contact numbers should include the country code, following the format, (e.g., +923214946496) +92 is Pakistan country code.
  • Ensure the correctness of your B-Form/CNIC/Passport ID.
  • When uploading the image of your B-Form/CNIC/Passport, make sure it is in an acceptable image format and does not exceed 2 MB (2048 KB) in size.
  • Similarly, the student image should be in an appropriate image format, and the file size should not exceed 2 MB (2048 KB).
  • Before submitting the form, make sure that everything you filled in is correct.

Enrollment Form For Batch # 01

File Size not Greater than 2 MB (2048 KB)
File Size not Greater than 2 MB (2048 KB)