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
Learn to build a first simple React app by importing libraries, using assets, creating components, and running the project to view it on your website.
Function-based vs Class-based Component Introduction5:56
Explore function-based versus class-based components, learn how to clean up code, extend components, and structure a user interface with a left navigation menu and header.
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
Explore what React JS props are and how they influence component rendering and data flow, with examples of importing data and rendering components.
Props in function based component4:29
Props final review3:59
React JS State6:39
Explore React state concepts, learn how state changes and methods to change state, and how to display state values.
React JS Event Handling9:25
React JS Form Handling14:59
React JS Routing9:29

Install MongoDB8:27
MongoDB - Create a collection3:32
MongoDB - Insert a document7:10
Insert a document into a MongoDB collection within a lesson, using the insert method and handling the operation's success or error.
MongoDB - Find all documents3:40
MongoDB - Find one document1:13
What is Mongoose ?4:32
Mongoose Schema4:36
Install and use Mongoose, define and extend a schema for documents, validate fields with min and max values, and embed subdocuments and arrays for complex data in a MEAN stack.
Mongoose Model3:48
Mongoose connect and insert a document13:59

Define API route for managing course categories5:41
Define Course Category Mongoose Schema and Model11:29
API - Get Course Categories Implementation6:03
Explore modeling concepts, licensing, empathy, and lessons in venture contexts through practical demonstrations and reflective discussion.
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
Register a user via the API and secure the password by bcrypt encryption, following library installation and integration steps in the ASP.NET Core and MERN MEAN stack course.
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
Update the course form to integrate an upload function for video files, leveraging ASP.NET Core and the MERN MEAN stack.
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
Update course data to the database using ASP.NET Core and the MERN MEAN stack, and learn practical steps to manage content and reflect changes in your online course and shop.
Introduce about Update Course Curriculum Form5:31
Explore how to update the course curriculum form, manage lessons and costs, provide previews and free video lessons, and decide what content learners can buy and view.
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
Explore how to choose the lesson content type as upload video file within the course curriculum component for the online course and shop.
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
Learn the logout flow in a web app, including displaying your name or email during sign-out in an Asp.Net Core and MERN MEAN stack context.
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
Design an admin layout using angular material ui, focusing on content components and practical interface decisions.
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
Load real categories into the UI by populating a material UI table component with authentic data from a source, showing how real data drives the category list display.
Manage Categories : Filter data, sort and pagination10:09
Create, Update , Delete Category - NgRx Store Code Implementation12:49
Create, Update, Delete Category - UI Component22:51
Learn to build a create, update, and delete category user interface component within an asp.net core and MERN MEAN stack course, focusing on information flow and database integration.
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
Set up an ASP.NET Core 3.1 web api project and configure a functional web api server, including implementing authentication options and working with a sample weather forecast controller.
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 the generic repository pattern in this asp.net core & mern mean stack course, emphasizing consistent implementation and entity usage across the project.
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
Implement authentication and authorization in ASP.NET Core using JWT by building an authentication controller, integrating identity, email activation, and token-based security for protected resources.
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: