Mô tả

MERN Stack (MongoDB Express React Node) FullStack Project from Scratch to Live Server with production ready Authentication

MERN STACK

Learn MERN stack web development by building production ready login register system with account activation, forgot password, reset password, login with facebook, login with google as well as ACL by implementing private and protected routes for authenticated user and users with the role of admin.

As a bonus, I have also included profile update and deployment to digital ocean cloud servers.

If you are looking to go FullStack with React Node Express and MongoDB or better known as MERN Stack then this should be your first go to  course. Because here you will learn to build an Ultimate boilerplate project which can also be used for any future MERN Stack projects you will build for yourself, for your clients or at your job.

New Lectures Added

  1. Adding a domain name

  2. Cloudflare CDN and Free SSL

  3. Force HTTP to HTTPS

  4. Redirect all www to non-www

  5. Updating Google and Facebook login redirect to production domain

  6. Redirect Digital Ocean IP to actual domain name

The key concepts covered in this course

  1. Building Ultimate MERN (Mongo Express React Node) Stack Project

  2. Building Production Ready Authentication System

  3. Building Login Register System using Email Password

  4. Implementing Social Login System with Google and Facebook

  5. ACL - Access Control

  6. MERN Stack Web Development

  7. API Development with Node Js

  8. Frontend Web Development with React

  9. Create your own base project for all your future React Node FullStack Projects

  10. Learn FullStack Deployment to Digital Ocean Cloud Servers including MongoDB Setup

  11. Account Activation before saving user to database

  12. Login with Google

  13. Login with Facebook

  14. Private Routing

  15. Admin Routing

  16. Page Layout with React

  17. Working with LocalStorage

  18. Working with Cookies

  19. Working with JWT (JSON web token)

  20. Role based redirects

  21. Profile Update

  22. Auth Middleware

  23. Admin Middleware

  24. Protecting Routes

  25. Handling JWT expiry

  26. Error handling

  27. Toast Notifications

  28. Forgot Password

  29. Reset Password

  30. Pushing projects to Github

  31. Pulling projects from Github to Digital Ocean

  32. Digital Ocean Server Configuration

  33. Deploying both backend/frontend to single Digital Ocean Droplet

  34. Committing changes after pushing project to live servers

By the end of this course, you will have your own Production Ready MERN Stack Project running live in Digital Ocean Cloud Servers.

Have a look at the promo video to get a better understanding of what this course is all about and how it can change your life for good :)

Web Development is not only about coding, It's also about deploying, dealing with domains, hosting, CDN, www/non-www, http/https, redirects, SEO, pushing new features and more. Get all that knowledge plus the production ready Authentication system, admin routes, page layouts with solid project architecture. This course's project is the beginning of something big :)

Let's go Full Stack. Let's go MERN Stack.

<code continue />

Bạn sẽ học được gì

Building Ultimate MERN (Mongo Express React Node) Stack Boilerplate Project

Building Production Ready Authentication System

Building Login Register System using Email Password

Implementing Social Login System with Google and Facebook

ACL - Access Control

MERN Stack Web Development

API Development with Node Js

Frontend Web Development with React

Create your own base project for all your future React Node FullStack Projects

Learn FullStack Deployment to Digital Ocean Cloud Servers including MongoDB Setup

Account Activation before saving user to database

Login with Google

Login with Facebook

Private Routing

Admin Routing

Page Layout with React

Working with LocalStorage

Working with Cookies

Working with JWT (json web token)

Role based redirects

Profile Update

Auth Middleware

Admin Middlewares

Protecting Routes

Handling JWT expiry

Error handling

Toast Notifications

Forgot Password

Reset Password

Pushing projects to Github

Pulling projects from Github to Digital Ocean

Digital Ocean Server Configuration

Deploying both backend/frontend to single Digital Ocean Droplet

Committing changes after pushing project to live servers

Adding a domain name

Cloudflare CDN and Free SSL

Force HTTP to HTTPS

Redirect all www to non-www

Updating Google and Facebook login redirect to production domain

Redirect Digital Ocean IP to actual domain name

Static Site / SEO

Yêu cầu

  • Basic understanding of React
  • Basic Understanding of Node Js
  • Basic Understanding of JavaScript
  • Ability to connect Node JS App to MongoDB (either using local mongodb install or mongo atlas)
  • Interested in FullStack React Node MongoDB Web Development

Nội dung khoá học

16 sections

Course Introduction

4 lectures
Introduction
01:37
Requirements
01:26
Are you new to JavaScript React and NodeJs?
00:33
Source Code
00:14

Getting Started

5 lectures
Setup client
02:23
List of NPM packages to install
00:11
Setup server
11:12
Installing NPM packages
07:02
Source code
00:14

Node Js API

10 lectures
Moving routes
07:03
Moving to controllers
04:42
Code for User model
00:34
User model
17:47
Applying middlewares
11:01
OPTIONAL - Using Monto Atlas for MongoDB as a service in the cloud
00:16
Mongoose version
00:11
MongoDB Atlas Robo3T and Postman
05:39
Connect to mongodb
06:09
Source code
00:14

Node Js Signin / Signup / Email Confirmation

10 lectures
Express validator
14:30
Signup user
09:43
Email confirmation workflow
06:47
How to switch from Sendgrid to Nodemailer and Gmail to send Emails (OPTIONAL)
02:10
Signup with sendgrid
05:21
SENDGRID FORBIDDEN ERROR
00:18
Send email on signup
14:40
Account activation
12:23
Signin user
14:24
Source code
00:14

React

5 lectures
Starting with react
03:28
Create layout
06:34
React router version
00:29
Using react router dom
06:46
Source code
00:14

React Signup / Signin / Activation

10 lectures
Signup page setup
07:36
Signup form
11:46
Finishing signup
18:24
Simple rules of useEffect
00:21
User signin
06:52
Activate account
21:33
Active nav link
08:29
Auth helpers
19:58
Authenticate and signout
18:38
Source code
00:14

Private / Admin Routing

4 lectures
Private route
10:35
Admin route
04:20
Redirect based on role
06:57
Source code
00:14

User Profile

10 lectures
Read user profile
08:57
Protect API endpoint
08:21
Update user profile
14:12
Admin middleware
08:15
Profile update page setup
05:58
Errors cleanup
03:07
Pre populate profile update and handle JWT expiry
13:30
Profile update with toast message
11:49
Admin profile update
04:06
Source code
00:14

Forgot / Reset Password

5 lectures
Forgot password server
13:18
Reset password server
15:32
Forgot password client
09:48
Reset password client
17:10
Source code
00:14

Login with Google

4 lectures
Login with google client
21:22
Resources - Login with google (optional)
00:19
Login with google - server
24:20
Source code
00:14

Login with Facebook

3 lectures
Login with facebook client
11:10
Login with facebook server
13:36
Source code
00:14

Production steps

3 lectures
Code for server js
00:23
Getting ready for production
03:07
Source code
00:14

Deployment

7 lectures
Signup to Digital Ocean
00:10
Deployment commands / steps
02:02
Github and digital ocean
05:59
Deployment part 1
18:14
Deployment part 2
15:07
Pushing changes and making admin user
11:22
Source code
00:14

Post Deployment

7 lectures
Adding a domain name
01:52
Cloudflare CDN and Free SSL
01:24
Force http to https
00:26
Redirect all www to non-www
00:54
Update google login domain and callback url's
00:58
Update facebook login domain and callback url's
00:17
Redirect Digital Ocean IP to domain name
00:17

SEO - Generate Static Site

1 lectures
Pre-render a web app into static HTML for SEO
00:59

Bonus

1 lectures
Other courses you may like
01:00

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.