Mern Stack Development

Mern Stack Development

Section1: introduction

  • Course resources
  • Course requirements
  • Free resources
  • Blur fix
  • Course review

Section 2: general setup

  • Vs code
  • Vite info
  • Vite install
  • Vite folder structure
  • Remove boiler plate
  • Obtain assets
  • Global CSS
  • Title and favicon
  • Install all libraries

Section3. React router

  • React router info
  • React router initial setup
  • Create pages
  • Setup index .js
  • Link components
  • Nested routes
  • Error pages

Sectione4: landing page

  • Styled components intro
  • Wrapper
  • Landing page
  • Landing page CSS
  • Logo component
  • Logo and images

Section5: errors and images

  • Error page JSS
  • Error page CSS

Section6 : Register page

  • Register page setup
  • Form row component

Section7 : login page 

  • Login page
  • Login and register CSS

Section8: dashboard 

  • Dashboard setup
  • Dashboard structure
  • Dashboard CSS
  • Dashboard context
  • React icons
  • Navbar structure
  • Navbar CSS
  • Links data
  • Sidebar structure
  • Big sidebar CSS
  • Logout container
  • Logout container CSS
  • Theme toggle
  • Theme toggle CSS
  • Dark theme logic
  • Dark theme logic bug fix
  • Dark theme CSS

Section9: server 

  • Folder structure
  • ES6 modules
  • Install server packages
  • Express and nodemon
  • Thunder client
  • Json middleware
  • Morgan and Dontev
  • New node feature
  • Get all jobs
  • Create jobs
  • Get single job
  • Edit job
  • Delete job
  • Not found and error route
  • Not found vs error route
  • Controller and router
  • Mongo DB
  • Atlas account
  • Mongoose
  • Connect DB
  • Job model
  • Create job controller
  • Async error
  • Get all jobs and get single jobs
  • Delete and update jobs
  • Status codes
  • More custom errors
  • Validation layer intro
  • Express validator setup
  • Validation middleware
  • Constants
  • Validate job input
  • Validate id prams
  • Validate job
  • User model
  • User controller and router
  • Create user
  • Validate register user
  • Admin user
  • Hash password
  • Hash utils
  • Validate login
  • Login logic
  • JWT
  • JWT ENV
  • HTTP ONLY cookie
  • Authentic user setup
  • Verify cookie
  • Verify JWT
  • Add user to job routes
  • Validate owner
  • Logout controller
  • User routes
  • Get current users
  • Update user
  • Get application stats
  • Proxy setup
  • Concurrently
  • Axios

Section10: register page 

  • React router action intro
  • First action
  • Register user complete
  • Navigation state
  • React testify

Section11: dashboard and login 

  • Login user
  • Use action data hook
  • Loaders
  • Get current users
  • Logout

Section12:jobs pages

  • Add job structure
  • Select input
  • Create job functionally
  • Add job CSS
  • Add job structure
  • All job context
  • Jobs container JXS
  • Job container CSS
  • Job component
  • Job component CSS
  • Edit job setups
  • Route params
  • Edit job loader
  • Edit job jsx
  • Edit job action
  • Delete job

Section13 : admin page

  • Admin page setup
  • Admin page complete
  • Admin page CSS

Section14: profile page 

  • Avatar pages
  • Public folder
  • User schema update
  • Profile page structure
  • Profile action
  • Setup multer
  • Cloudinary
  • Update user functionally
  • Submit user component
  • Create test user
  • Restrict access to test user
  • Mockaroo
  • Populate db.

Section15. stats page 

  • Stats route setup
  • Group by job status
  • Group by monthly application
  • Stats page setup
  • Stats container
  • Bar chart container
  • Charts
  • Charts container CSS

Section16: All jobs page

  • Query params
  • Search param
  • Job status and job type
  • Sort
  • Pagination
  • Search from setup
  • Loader and query params
  • Controlled inputs
  • Debounce
  • Pagination setups
  • Render buttons
  • Pagination logic first approach
  • Pagination logic complex
  • approach
  • Button container CSS

Section17: initial deploy

  • Local build
  • Render intro
  • Deploy app

Section18: react query and other extra feature

  • Build front end programmatically
  • Update user fix
  • Global loading
  • React query install
  • Page error element
  • First query with react query
  • React query in stats loader
  • React query current user
  • Invalidate queries’
  • React query all jobs
  • React query edit jobs
  • Anxious interceptors
  • Security packages
Apply Now