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