Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Udemy

MERN Stack Project Course - Build Fullstack React App

via Udemy

Overview

Learn MERN Stack By Building an Advanced E-commerce App incl. Product Attributes, SocketIO, Real Time Chat, Charts

What you'll 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

In this course, you will learn the MERN Stack by 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 Stack is 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.

  1. 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

  2. Next, we will install Express JS to handle the Node server for our application

  3. We will connect to the MongoDD database and save example data to this database, such as a list of products for the store

  4. We will create an API through which the frontend will retrieve data from the database, log in to the application, etc.

  5. 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

  6. 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."


Sign up for the course now and become a MERN Stack web developer !

Syllabus

  • Introduction To The MERN Stack Course
  • React - Building The HTML Template For The App
  • Node & Express as a Backend
  • MongoDB & Mongoose
  • API for Our MERN Stack E-commerce Application
  • Connect Frontent with Backend
  • Local State in React Components
  • Redux for Global State - Introduction
  • Login and Registration System & Authorization
  • Developing Pages for MERN Stack E-commerce Application
  • Analytics System - Real Time Charts using SocketIO for MERN Stack Application
  • Chat Using SocketIO for MERN Stack Application
  • Deploy MERN Stack Application to Live Server
  • Test MERN Stack App using Jest Framework

Taught by

Robert Apollo | Lead PHP Developer

Reviews

4.4 rating at Udemy based on 337 ratings

Start your review of MERN Stack Project Course - Build Fullstack React App

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.