MERN Stack Web Development with Ultimate Authentication

Build Ultimate Authentication Boilerplate Project with MERN Stack from Scratch to Digital Ocean Cloud Servers
MERN Stack Web Development with Ultimate Authentication
File Size :
3.89 GB
Total length :
9h 43m

Category

Instructor

Ryan Dhungel

Language

Last update

Last updated 10/2022

Ratings

4.8/5

MERN Stack Web Development with Ultimate Authentication

What you’ll learn

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

MERN Stack Web Development with Ultimate Authentication

Requirements

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

Description

MERN Stack (MongoDB Express React Node) FullStack Project from Scratch to Live Server with production ready AuthenticationMERN STACKLearn 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 AddedAdding a domain nameCloudflare CDN and Free SSLForce HTTP to HTTPSRedirect all www to non-wwwUpdating Google and Facebook login redirect to production domainRedirect Digital Ocean IP to actual domain nameThe key concepts covered in this courseBuilding Ultimate MERN (Mongo Express React Node) Stack ProjectBuilding Production Ready Authentication SystemBuilding Login Register System using Email PasswordImplementing Social Login System with Google and FacebookACL – Access ControlMERN Stack Web DevelopmentAPI Development with Node JsFrontend Web Development with ReactCreate your own base project for all your future React Node FullStack ProjectsLearn FullStack Deployment to Digital Ocean Cloud Servers including MongoDB SetupAccount Activation before saving user to databaseLogin with GoogleLogin with FacebookPrivate RoutingAdmin RoutingPage Layout with ReactWorking with LocalStorageWorking with CookiesWorking with JWT (JSON web token)Role based redirectsProfile UpdateAuth MiddlewareAdmin MiddlewareProtecting RoutesHandling JWT expiryError handlingToast NotificationsForgot PasswordReset PasswordPushing projects to GithubPulling projects from Github to Digital OceanDigital Ocean Server ConfigurationDeploying both backend/frontend to single Digital Ocean DropletCommitting changes after pushing project to live serversBy 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.

Overview

Section 1: Course Introduction

Lecture 1 Introduction

Lecture 2 Requirements

Lecture 3 Are you new to JavaScript React and NodeJs?

Lecture 4 Source Code

Section 2: Getting Started

Lecture 5 Setup client

Lecture 6 List of NPM packages to install

Lecture 7 Setup server

Lecture 8 Installing NPM packages

Lecture 9 Source code

Section 3: Node Js API

Lecture 10 Moving routes

Lecture 11 Moving to controllers

Lecture 12 Code for User model

Lecture 13 User model

Lecture 14 Applying middlewares

Lecture 15 OPTIONAL – Using Monto Atlas for MongoDB as a service in the cloud

Lecture 16 Mongoose version

Lecture 17 MongoDB Atlas Robo3T and Postman

Lecture 18 Connect to mongodb

Lecture 19 Source code

Section 4: Node Js Signin / Signup / Email Confirmation

Lecture 20 Express validator

Lecture 21 Signup user

Lecture 22 Email confirmation workflow

Lecture 23 How to switch from Sendgrid to Nodemailer and Gmail to send Emails (OPTIONAL)

Lecture 24 Signup with sendgrid

Lecture 25 SENDGRID FORBIDDEN ERROR

Lecture 26 Send email on signup

Lecture 27 Account activation

Lecture 28 Signin user

Lecture 29 Source code

Section 5: React

Lecture 30 Starting with react

Lecture 31 Create layout

Lecture 32 React router version

Lecture 33 Using react router dom

Lecture 34 Source code

Section 6: React Signup / Signin / Activation

Lecture 35 Signup page setup

Lecture 36 Signup form

Lecture 37 Finishing signup

Lecture 38 Simple rules of useEffect

Lecture 39 User signin

Lecture 40 Activate account

Lecture 41 Active nav link

Lecture 42 Auth helpers

Lecture 43 Authenticate and signout

Lecture 44 Source code

Section 7: Private / Admin Routing

Lecture 45 Private route

Lecture 46 Admin route

Lecture 47 Redirect based on role

Lecture 48 Source code

Section 8: User Profile

Lecture 49 Read user profile

Lecture 50 Protect API endpoint

Lecture 51 Update user profile

Lecture 52 Admin middleware

Lecture 53 Profile update page setup

Lecture 54 Errors cleanup

Lecture 55 Pre populate profile update and handle JWT expiry

Lecture 56 Profile update with toast message

Lecture 57 Admin profile update

Lecture 58 Source code

Section 9: Forgot / Reset Password

Lecture 59 Forgot password server

Lecture 60 Reset password server

Lecture 61 Forgot password client

Lecture 62 Reset password client

Lecture 63 Source code

Section 10: Login with Google

Lecture 64 Login with google client

Lecture 65 Resources – Login with google (optional)

Lecture 66 Login with google – server

Lecture 67 Source code

Section 11: Login with Facebook

Lecture 68 Login with facebook client

Lecture 69 Login with facebook server

Lecture 70 Source code

Section 12: Production steps

Lecture 71 Code for server js

Lecture 72 Getting ready for production

Lecture 73 Source code

Section 13: Deployment

Lecture 74 Signup to Digital Ocean

Lecture 75 Deployment commands / steps

Lecture 76 Github and digital ocean

Lecture 77 Deployment part 1

Lecture 78 Deployment part 2

Lecture 79 Pushing changes and making admin user

Lecture 80 Source code

Section 14: Post Deployment

Lecture 81 Adding a domain name

Lecture 82 Cloudflare CDN and Free SSL

Lecture 83 Force http to https

Lecture 84 Redirect all www to non-www

Lecture 85 Update google login domain and callback url’s

Lecture 86 Update facebook login domain and callback url’s

Lecture 87 Redirect Digital Ocean IP to domain name

Section 15: SEO – Generate Static Site

Lecture 88 Pre-render a web app into static HTML for SEO

Section 16: Bonus

Lecture 89 Other courses you may like

JavaScript enthusiast looking to go FullStack with React Node and MongoDB,Web Developer who wants to build his own MERN Boilerplate project,Web Developer who wants to build or add production ready Authentication system to his projects,Web Developer who is curious how to setup FullStack project with React and Node,Web Developer who wants to learn how to implement Layout and Routing system,Web Developer who wants to learn to implement ACL (access control) for Admin and Subscribers (regular user),Web Developer who has build great projects but unable to go live because of not having production ready Authentication System,All JavaScript React Node Js Developers who wants to start building production ready FullStack MERN Stack Apps,Web Developer who is interested in learning how to deploy production ready apps to Digital Ocean Cloud Servers

Course Information:

Udemy | English | 9h 43m | 3.89 GB
Created by: Ryan Dhungel

You Can See More Courses in the Developer >> Greetings from CourseDown.com

New Courses

Scroll to Top