Asp.Net Core & MERN MEAN stack: Build online course and shop

Name: Asp.Net Core & MERN MEAN stack: Build online course and shop
Rating: 5.0 (2 reviews)

Learn how to build online course and shop using React JS, Angular, Node JS, MongoDB, Redux, NgRx, Paypal, Asp.Net Core

Created byHùng Nguyễn Thế

Last updated 8/2021

English

What you'll learn

Learn React JS
Learn Angular
Learn how to setup Web API Server using Node JS(Express JS) with MongoDB and ASP NET Core with MS SQL Server
Learn how to setup a MERN stack project from scratch with React JS v16, REDUX, NodeJS, Express JS, MongoDB, Mongoose, ElementReact UI
Learn how to integrate CKEditor in ReactJS
Learn how to use ElementReact UI for buiding ReactJS UI Component
Learn how to use Angular Material UI for buiding Angular UI Component
Learn how to upload file using React JS & Angular and NodeJS (using Multer library)
Learn how to integrate Paypal checkout in React JS and Angular
Learn how to use POSTMAN to test API
Learn how to implement authentication and authorization using JWT (JSON Web Token), session cookie, local storage

Course content

8 sections • 142 lectures • 39h 25m total length

Course Introduction8:21
Live demo of MERN Stack project "Build Ecommerce Online Course" website18:05
Live demo of MEAN Stack project "Build Online Shop"5:20
MERN & MEAN stack architecture3:51
Setup Express Js server8:08
Install Nodemon for auto run NodeJS when change code5:42
Setup dotenv library for using environment variables5:14

React JS Introduction6:00
First simple React JS App7:20
Function-based vs Class-based Component Introduction5:56
What is JSX?7:13
How to install and run React JS using create-react-app6:22
Function vs class based component in create-react-app8:28
What is React JS Props?8:17
Props in function based component4:29
Props final review3:59
React JS State6:39
React JS Event Handling9:25
React JS Form Handling14:59
React JS Routing9:29

Define API route for managing course categories5:41
Define Course Category Mongoose Schema and Model11:29
API - Get Course Categories Implementation6:03
API - Get Course Category Parent Information13:00
API - Create a Course Category Implementation11:34
API - Update a Course Category Implementation7:54
API - Delete a Course Category Implementation6:01
Refactor Course Category Model5:02
Refactor Course Category Route6:08
Refactor Course Category Controller9:57
Authentication workflow with JSON Web Token (JWT)12:46
API - Create Mongoose User Model4:02
API - Register a user10:40
API - Register a user : Encrypt user's password with Bcrypt9:14
API - Register a user - Create a JWT Token11:06
API - Login Implementation17:36
API - Define Course Mongoose Model10:09
API - Get all Courses Implementation and Test API with PostMan25:30
API - Create a Course Implementation10:59
API - Implement a middleware for check authentication31:13
API - Logout Implementation4:23

ElementReact UI Introduction and Installation11:08
Setup ReactJS Routing19:33
Setup Admin Layout18:33
Setup static List of Course Categories using ElementReact Table6:31
Connect from React JS Component to API NodeJS Server using Axios library12:44
Setup concurrently for runing both frontend and backend project at one command8:27
Integrate Redux into React JS project21:25
Setup connection betwwen ReactJS and Redux using react-redux library20:56
Install ReduxDevTools for inspecting Redux's state and action14:43
Get List of Coure Categories from Redux's store7:36
Display a Loading icon when loading data5:41
Paginate a list of Course Categories9:16
Setup Create/Update Course Category Form using ElementReact UI16:27
Create a customize UI Component for handling form14:43
Create a customize UI Component continue30:11
Load Course Categories into DropDownList in Course Category Popup Form11:59
Save course category into database - Backend and Frontend Implementation38:36
Load selected Course Category into Course Category Popup Form25:28
Update a course category into database - Backend and Frontend Implementation33:53
Create form for Create Course function26:33
Save a course into database - Backend and Frontend Implementation27:50
Introduce about Update Course form6:40
Update Course form - Integrate CKEditor for special input content30:04
Update Course form - Integrate Upload function for uploading video files31:48
API - Get Course Information by Course ID3:14
API - Update basic Course information7:23
Implement Get Course by Course ID function in React JS7:32
Display Course Information by Course ID in Component13:05
Update Course to database12:52
Introduce about Update Course Curriculum Form5:31
Buid UI Prototype for Update Course Curriculum form33:14
API - Get Course's Curriculum by Course ID Implementation30:19
Load Course's Curriculum Into Component15:32
Load Course's Curriculum Into Component continue16:08
Course Curriculum Component - Handle Lession's content34:17
Course Curriculum Component - Change title(name) of a section22:18
Course Curriculum Component - Delete a section3:45
Course Curriculum Component - Change title(name) of a lession8:27
Course Curriculum Component- Delete a lession7:32
Course Curriculum Component - Choose lession's content type is text19:44
Course Curriculum Component - Choose lession content type is upload video file10:28
Course Curriculum Component - Add a new lession13:46
API - Update Course Curriculum9:42
Update Course Curriculum34:59
Register a user31:25
Login6:28
Implement Authentication HOC37:03
Logout9:16
Get List of Instructor Courses19:22
Instructor - Delete and Approve Course27:25
Admin - Approve and Reject Instructor's Courses28:12
Home Page19:19
Display Course Detail20:33
Add Course to Cart20:36
Display Shopping Cart and Checkout using Paypal28:23

Setup Angular project using Angular CLI17:31
Communicate with API server : axios vs Angular HttpClient15:28
Demo Manage Categories and setup Angular Routing16:45
Design Admin Layout using Angular Material UI15:23
Load data using Angular Material UI Table Component11:18
NgRx Store Introduction17:13
NgRx Store Code Implementation31:06
NgRx Store Code Implementation Continue23:09
Load Real Categories into UI15:56
Manage Categories : Filter data, sort and pagination10:09
Create, Update , Delete Category - NgRx Store Code Implementation12:49
Create, Update, Delete Category - UI Component22:51
Display Products24:04
Create Product28:54
Update Product26:54
Home page, Add to Cart, Paypal integration, View Transaction - part 137:34
Home page, Add to Cart, Paypal integration, View Transaction - part 219:16

Setup ASP.NET Core 3.1 Web API Project8:12
Connect MS SQL Server using Entity Framework Core33:17
Implement API for managing Product's Categories17:00
Category CRUD API25:16
Implement API for managing Products28:23
Implement Repository Pattern33:51
Implement Generic Repository Pattern33:41
Implement Unit Of Work Pattern26:49
Implement pagination13:14
Implement pagination (continue)12:43
ASP.NET Core Authentication Authorization With JWT59:11
Implement ASP.NET Core Authentication Authorization With JWT49:56
DTO (Data Transfer Object) & AutoMapper19:15
Unit Of Work Load Related Category in Product Entity29:25
Connect Angular Client to ASP.NET Core Web API Server27:14
Fix bug Angular Client & ASP.NET Core Web API Server43:51

Requirements

Any level can learn this course

Description

In this course you not only learn React JS, MongoDB basic knowledge but also learn how to build a complete "Ecommerce Online Course website" and "Online Shop (mini Udemy clone)" using MERN & MEAN stack and ASP.NET Core Web API from scratch.

You will learn many interesting techniques from this course:

+ How to setup a simple MERN stack project

+ How to setup a simple MEAN stack project

+ How to setup Web API Server using NodeJS (Express JS) with MongoDB and Asp.Net Core 3.x Web API with MS SQL Server

+ How to integrate CKEditor in your ReactJS

+ How to upload file in ReactJS & Angular and NodeJS (using Multer library) & upload file to ASP.NET Core API server.

+ How to integrate Paypal checkout

+ How to use ElementReact UI , Angular Material UI for building user interfaces with existed components for Button, Table, Tab,Upload.... and much much more components for nice user interface

+ How to use Redux, NgRx Store for better state management in React JS, Angular

In this course you not only learn React JS, MongoDB basic knowledge but also learn how to build a complete "Ecommerce Online Course website" and "Online Shop" using MERN & MEAN stack and ASP.NET Core Web API from scratch.

Who this course is for:

All students interested in MERN & MEAN stack (React JS,Angular, Redux, Ngrx Store, MongoDB, Mongoose, NodeJS, ExpressJS) and ASP NET Core with MS SQL Server

Asp.Net Core & MERN MEAN stack: Build online course and shop

What you'll learn

Explore related topics

Course content

Introduction7 lectures • 55min

React JS Basic Knowledge13 lectures • 1hr 39min

MongoDB and Mongoose9 lectures • 51min

Backend - API NodeJS (ExpressJs) Server21 lectures • 3hr 50min

Frontend - React JS55 lectures • 16hr 49min

Frontend - Angular17 lectures • 5hr 46min

ASP.NET Core Web API Server16 lectures • 7hr 41min

Deployment4 lectures • 1hr 55min

Requirements

Description

Who this course is for: