MERN Ecommerce Web App Development
This course is designed to teach you how to build a fully functional eCommerce web application using the MERN stack (MongoDB, Express.js, React.js, and Node.js). You will learn how to use these technologies to create a complete web application, from the back-end database to the front-end user interface. By the end of the course, you will have the skills and knowledge needed to develop your own eCommerce web application.
What you’ll learn
- Create a fully customized eCommerce platform from scratch, utilizing the powerful combination of React, Redux, Node, Express, and MongoDB
- Generate REST APIs Using Node.js and Express And Call Them In Front-end
- Learn by building a real-world project, progressing in a linear and structured manner that will give you a solid understanding of the technologies used
- Implement a full-featured shopping cart system that supports both PayPal and credit/debit card payments
- Build an admin area to manage customers, products, and orders with ease and easily
- Enhance the user experience with a product rating and review system, as well as a product search, carousel, pagination, and more features that will make your eCommerce platform stand out.
Course Content:
Module1: Introduction
Module2: React Setup & Git Intialize
- React Setup & Git Intialize
- React-Bootstrap Setup, Header & Footer Components
-
HomeScreen Product Listing
-
Rating Component
-
Note on React Router
-
Implementing React Router
-
Product Details Screen
Module3: Serving & Fetching Data
- Front End / Back End Workflow & Explanation\
- Serving Products – Back End Routes
- Fetching Products From React (useEffect)
- Nodemon & Concurrently Setu
- Environment Variable
- ES Modules In Node.js
Module4: Getting Started with MongoDB
-
MongoDB Atlas & Compass Setu
-
Connecting To The Databas
-
Adding Colors To The Console (Optional
-
Modeling Our Data
-
Preparing Sample Data
-
Data Seeder Script
-
Fetching Products From The Database
-
Getting Started With Postman
-
Custom Error Handling
Module5: Implementing Redux For State Management:
-
An Overview Of Redux
-
Create a Redux Store
-
Product List Reducer & Action
-
Bringing Redux State Into HomeScreen – useDispatch & useSelector
-
Message & Loader Components
-
Product Details Reducer & Action
Module6: Adding to shopping cart:
-
Qty Select & Add To Cart Button
-
Cart Reducer & Add To Cart Action
-
Add To Cart Functionality
-
Cart Screen
-
Remove from cart
-
Clean Up By Using Controllers
-
User Authentication Endpoint
-
Brief Explanation of JWT (JSON Web Tokens)
-
Generate a JSON Web Token
-
Custom Authentication Middleware
-
Saving The Token In Postman
-
User Registration & Password Encryption
Module8: Frontend User Authentication & Profile:
-
User Login Reducer & Action
-
User Login Screen & Functionality
-
Show User In Navbar & Logout
-
User Register Reducer, Action & Screen
-
Update Profile Endpoint
-
Profile Screen & Get User Details
-
Update User Profile
Module9: Checkout process :
-
Shipping Screen & Save Address
-
Checkout Steps Component
-
Payment Screen & Save Payment Method
-
Place Order Screen
-
Order Controller & Rout
-
Create Order
-
Get Order by ID Endpoint
-
Order Details Reducer & Action
-
Order Screen
-
Add check for order
-
Update To Paid Endpoint
-
Order Pay Reducer & Action
-
Adding PayPal Payments
- Show Orders On ProfileUser
- Details & Orders Reset
Module10: Admin Screens
- Admin Middleware & Get Users Endpoint
- Admin User List
- Admin Screen Access Security
- Admin User Delete
- Get User By ID & Update User Endpoints
- User Edit Screen & Get User Details
- Update User Functionality
- Admin Product List
- Admin Delete Products
- Create & Update Product Endpoints
- Admin Create Product
- Edit Product Screen
- Admin Update Product
- Image Upload Config & Endpoint
- Front End Image Upload
- Admin Order List
- Mark Order As Delivered
Module11: Product Reviews And Search
Requirements
-
You should know modern JS fundamentals and the basics of React
Who this course is for:
- Full-stack web developers that want to learn MERN by building a real-world app
International Student Fee: 400 USD
Job Interview Preparation (Soft Skills Questions & Answers)
- Tough Open-Ended Job Interview Questions
- What to Wear for Best Job Interview Attire
- Job Interview Question- What are You Passionate About?
- How to Prepare for a Job Promotion Interview
🎥 Your FREE eLEARNING Courses (Click Here)
Internships, Freelance and Full-Time Work opportunities
Flexible Class Options
- Week End Classes For Professionals SAT | SUN
- Corporate Group Trainings Available
- Online Classes – Live Virtual Class (L.V.C), Online Training
Related Courses
Full Stack Web development With E-commerce Project
Full Stack Web Developer Training (Python and Django)
Fundamentals Of Web Development
Complete Web development Bootcamp with React JS
Web Application Development Using Django & React.js
