MERN STACK APP DEVELOPMENT

MERN STACK APP DEVELOPMENT Course Outline

Course Details

Prerequisites: HTML/CSS/ JAVASCRIPT

Course Objective:

This JavaScript Full Stack Development course, focusing on MERN Stack, provides participants with a solid foundation in HTML5, CSS, and JavaScript, progressing to advanced front-end technologies like React. The curriculum delves deeply into back-end development using Node.js or Express.js, covering database integration with MongoDB and emphasizing asynchronous programming. Participants can specialize in MERN, gaining insights into each Stack Components.

Course Contents:

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