MERN Stack Project Course – Build Fullstack React App

MERN Stack Project Course – Build Fullstack React App, available at $79.99, has an average rating of 4.58, with 326 lectures, based on 289 reviews, and has 2218 subscribers.

You will learn about Learn How To Combine MongoDB, Express, React, NodeJS (MERN Stack) How To Create Fullstack Web Applications (Frontend + Backend) From Scratch Using MERN Stack How To Create Testable and Maintainable React Components How To Test Your App using Jest & Testing Library & Postman/Insomnia Understand Redux With Real Life Scenarios Create Real Time Chat and Chart Deploy to Heroku/Render Much much more This course is ideal for individuals who are Everyone who wants to build full stack web applications using MERN Stack or Everyone who wants to add to the portfolio an advanced MERN Stack project It is particularly useful for Everyone who wants to build full stack web applications using MERN Stack or Everyone who wants to add to the portfolio an advanced MERN Stack project.

Enroll now: MERN Stack Project Course – Build Fullstack React App

Summary

Title: MERN Stack Project Course – Build Fullstack React App

Price: $79.99

Average Rating: 4.58

Number of Lectures: 326

Number of Published Lectures: 326

Number of Curriculum Items: 326

Number of Published Curriculum Objects: 326

Original Price: $94.99

Quality Status: approved

Status: Live

What You Will Learn

Learn How To Combine MongoDB, Express, React, NodeJS (MERN Stack)
How To Create Fullstack Web Applications (Frontend + Backend) From Scratch Using MERN Stack
How To Create Testable and Maintainable React Components
How To Test Your App using Jest & Testing Library & Postman/Insomnia
Understand Redux With Real Life Scenarios
Create Real Time Chat and Chart
Deploy to Heroku/Render
Much much more

Who Should Attend

Everyone who wants to build full stack web applications using MERN Stack
Everyone who wants to add to the portfolio an advanced MERN Stack project

Target Audiences

Everyone who wants to build full stack web applications using MERN Stack
Everyone who wants to add to the portfolio an advanced MERN Stack project

In this course, you will learn the MERN Stackby building an amazing e-commerce application from scratch. The application will have not only basic functionalities such as a shopping cart and product search, but also advanced things such as chat, real-time sales charts, product attributes (e. g. product color to choose from), creating testable components in React and other things (see free videos and curriculum).

MERN Stackis a very popular development kit for building web applications. MERN consists of MongoDB (as a database), Express (a framework to make it easier to use Node), React (to create user interfaces), and Node (as a server). You will learn how to combine all four technologies together and build an advanced fully responsive e-commerce application step by step.

In the first part, you will learn the basics of MERN Stack and the JSX extension. Thanks to JSX we can easily create components in React. I will also show you the entire application and give you some tips about VS Code and downloadable resources. And the rest of this course is about covering and going through the steps of creating each MERN Stack application from scratch using e-commerce as example app. I will explain you everything in elegant and understandable way. You will deeply understand Redux using real life scenarios.

We’ll start by installing React and creating an HTML template for the entire application (using React Bootstrap). We will link the created subpages with routing
Next, we will install Express JS to handle the Node server for our application
We will connect to the MongoDD database and save example data to this database, such as a list of products for the store
We will create an API through which the frontend will retrieve data from the database, log in to the application, etc.
Once we have the frontend, backend and API, we can connect everything together and develop the application further by supplementing the frontend code with backend operations
We will test our app using Jest & Testing Library

Some of the e-commerce app features:

shopping cart
login, register
PayPal payment
upload images to Cloudinary and to local disk
searching, sorting, filtering, pagination of product list
multilevel categories
bestsellers carousel
star rating system and reviews
real time sales charts using SocketIO
chat using SocketIO
deploy application to Heroku & Render
React local state
Redux state
beautiful functional programming using React Hooks
Much more!

Please go through the curriculum and see free videos to get better understanding of the course

Almost all of my students are satisfied with my courses! Take a look at some of the comments from them:

“I loved this course, the author explains everything in a good way, even for me non native speaker. I was a bit scared to do an english course but it paid off.

Thanks a lot and greetings from Germany”

another:

“This course is outstanding! It covers ground that no other course does. The instructor is well organized and thorough in all his examples and explanations. I’m looking forward to more of his courses.”

Course Curriculum

Chapter 1: Introduction To The MERN Stack Course

Lecture 1: Introduction To The MERN Stack Course

Lecture 2: Application Demo

Lecture 3: MERN Stack Basics

Lecture 4: JSX Syntax Crash Course

Lecture 5: VS Code Editor

Lecture 6: How To Use Downloadable Resources

Chapter 2: React – Building The HTML Template For The App

Lecture 1: Let's get down to business!!!

Lecture 2: Install React App Using NPM

Lecture 3: Create First Page And First Route

Lecture 4: Create Routes For Publicly Available Pages like List Of Products

Lecture 5: Create Routes For Protected Pages For Regular User

Lecture 6: Create Routes For Protected Pages For Administrator

Lecture 7: Create Header And Footer Components

Lecture 8: Info about next video

Lecture 9: Create User Chat Component

Lecture 10: Create The Header Using React Bootstrap

Lecture 11: Create Badge for Number of Products in The Cart and Select List For Categories

Lecture 12: Customize Header Component

Lecture 13: Style Footer Component

Lecture 14: Create Carousel and Card Components using React Bootstrap

Lecture 15: Customize the Home Page

Lecture 16: Chat Popup – Blue Circle With Icons

Lecture 17: Chat Popup – Create Header

Lecture 18: Chat Popup – Message Field and Submit Button

Lecture 19: Chat Popup – Example Chat History

Lecture 20: Prepare Product List Page

Lecture 21: Create HTML for Star Rating System

Lecture 22: Improve HTML for Sorting and Filtering Products

Lecture 23: Improve Component for Category Filters

Lecture 24: Improve Attributes Section for Filtering Options

Lecture 25: Improve Component for Product List

Lecture 26: Improve Pagination Component

Lecture 27: Create Scroll To Top Functionality

Lecture 28: Prepare Product Details Page

Lecture 29: Continue Developing Product Details Page

Lecture 30: Improve Message Component

Lecture 31: Update Product Description Page

Lecture 32: Improve Reviews Section

Lecture 33: Create Mouse Hover Effect on Images

Lecture 34: Prepare Cart Page

Lecture 35: Finish Cart Page

Lecture 36: Prepare Register Page

Lecture 37: Continue Developing Register Page

Lecture 38: Finish Template for Register Page

Lecture 39: Prepare Login Page

Lecture 40: Prepare User Profile Page

Lecture 41: Prepare User Orders Page

Lecture 42: Finish User Orders Page (template for now)

Lecture 43: The Page for User Order Details

Lecture 44: Finish User Order Details Page

Lecture 45: Prepare the Page for User Cart Details

Lecture 46: Prepare the Page for Admin Orders

Lecture 47: Create Component for Admin Links

Lecture 48: Prepare Admin Order Details Page

Lecture 49: Create Product List Page for Admin

Lecture 50: Prepare the Page for Creating The Product by Admin

Lecture 51: Finish the Page for Creating The Product by Admin

Lecture 52: Complete Edit Product Page for Administrator

Lecture 53: Create Users Page for Admin

Lecture 54: Create Edit Users Page for Admin

Lecture 55: Create Chats Page for Admin

Lecture 56: Create Chat Component for Admin

Lecture 57: Prepare Analytics Page for Admin

Lecture 58: Finish Analytics Page for Admin

Chapter 3: Node & Express as a Backend

Lecture 1: Install Express JS server for the Backend of our App

Lecture 2: Express Middleware

Lecture 3: Prepare for Creating API

Lecture 4: Introduce Controllers in Express

Lecture 5: Handle Errors in Express

Lecture 6: Custom Middleware to Handle Errors

Chapter 4: MongoDB & Mongoose

Lecture 1: MongoDB Introduction and Configuration

Lecture 2: Mongoose Introduction – Connect with MongoDB

Lecture 3: First MongoDB Database Operation

Lecture 4: Finish Product Model

Lecture 5: Product May Have Many Reviews

Lecture 6: More About Database Relationships

Lecture 7: Create Indexes on Product Model

Lecture 8: More About Database Indexes

Lecture 9: Create Category Model

Lecture 10: User Model

Lecture 11: Order Model

Lecture 12: Introduce Seeders

Lecture 13: Seeder for Products

Lecture 14: Seeder for Reviews

Lecture 15: Add Reviews Relationship To Products Collection

Lecture 16: Seeder for Users

Lecture 17: Seeder for Orders

Chapter 5: API for Our MERN Stack E-commerce Application

Lecture 1: Create API Endpoints and Controllers

Lecture 2: Complete First API Endpoint (GET)

Lecture 3: API Endpoint for Saving New Category

Lecture 4: Finish API Endpoint for Saving New Category (POST)

Lecture 5: More About Response Status Codes

Lecture 6: API for Deleting Category (DELETE)

Lecture 7: API Endpoint for Saving Category Attributes

Lecture 8: API Endpoint for Getting Products

Instructors

Robert Apollo
Full Stack Web Development Courses

Rating Distribution

1 stars: 8 votes
2 stars: 5 votes
3 stars: 27 votes
4 stars: 80 votes
5 stars: 169 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!

Menu