Description

Build the ultimate authentication boilerplate project with the MERN stack from scratch and deploy it to DigitalOcean cloud servers

The MERN (Mongo Express React Node) stack consists of open source components that provide an end-to-end framework for developing comprehensive web applications that connect browsers to databases. This video will help you get to grips with MERN stack web development by building a production-ready login register system with authentication features such as account activation, forget password, reset password, and log in with Facebook, Google, and ACL by implementing private and protected routes for both, authenticated users and admins. If you are looking to go full-stack with React Node Express and MongoDB (better known as the MERN stack), this course is where you should start. You'll learn how to build a boilerplate project that can be used for any MERN stack projects that you'll build for yourself and your clients. By the end of this course, you'll have your production-ready MERN stack project running live on DigitalOcean cloud servers. All the code and the supporting files for this course are available at https://github.com/PacktPublishing/MERN-Stack-Web-Development-with-Ultimate-Authentication

What You Will Learn

Discover how to build a MERN stack boilerplate project
Learn full-stack deployment to DigitalOcean cloud servers, including MongoDB setup
Develop a production-ready authentication system
Create a base project for all future React Node full-stack projects
Implement a social login system with Google and Facebook

Audience

This course is for JavaScript enthusiasts looking to go full-stack with React Node and MongoDB. Web developers who want to build their own MERN boilerplate project or add a production-ready authentication system to their projects will also find this course useful. If you're looking to learn how to deploy production-ready apps to DigitalOcean cloud servers, this course is for you.

Approach

This course is packed with step-by-step instructions, working examples, and helpful tips. It is clearly divided into small sections that will help you understand each section individually and learn at your own pace. Concepts are gradually and carefully introduced. This course is easy to understand and follow along with, and provides an incredible real-world development workflow with a balanced coding speed.

Key Features

Learn how to use the authentication boilerplate to build a project * Explore private and admin routing with role-based access control * Build a real-world project from scratch and deploy it to live servers running on the cloud

Github Repo

https://github.com/packtpublishing/mern-stack-web-development-with-ultimate-authentication

About the Author

Ryan Dhungel

Narayan Dhungel who creates training videos under the pseudonym Ryan Dhungel is a Web Developer from Sydney, Australia. He builds web apps using JavaScript, Node.js, React.js, Vue.js, Laravel, and other emerging platforms. He also wants to make the entire Web Development process enjoyable and productive at the same time by producing well explained practical tutorials and training packages for fellow developers.

Course Outline

1. Course Introduction

1. Introduction

Course Introduction: Introduction

2. Getting Started

1. Setup client

Getting Started: Setup client

2. Setup server

Getting Started: Setup server

3. Installing NPM packages

Getting Started: Installing NPM packages

3. Node Js API

1. Moving routes

Node Js API: Moving routes

2. Moving to controllers

Node Js API: Moving to controllers

3. User model

Node Js API: User mode

4. Applying middlewares

Node Js API: Applying middlewares

5. MongoDB Atlas Robo3T and Postman

Node Js API: MongoDB Atlas Robo3T and Postman

6. Connect to mongodb

Node Js API: Connect to mongodb

4. Node Js Signin / Signup / Email Confirmation

1. Express validator

Node Js Signin / Signup / Email Confirmation: Express validator

2. Signup user

Node Js Signin / Signup / Email Confirmation: Signup user

3. Email confirmation workflow

Node Js Signin / Signup / Email Confirmation: Email confirmation workflow

4. Signup with sendgrid

Node Js Signin / Signup / Email Confirmation: Signup with sendgrid

5. Send email on signup

Node Js Signin / Signup / Email Confirmation: Send email on signup

6. Account activation

Node Js Signin / Signup / Email Confirmation: Account activation

7. Signin user

Node Js Signin / Signup / Email Confirmation: Signin user

5. React

1. Starting with react

React: Starting with react

2. Create layout

React: Create layout

3. Using react router dom

React: Using react router dom

6. React Signup / Signin / Activation

1. Signup page setup

React Signup / Signin / Activation: Signup page setup

2. Signup form

React Signup / Signin / Activation: Signup form

3. Finishing signup

React Signup / Signin / Activation: Finishing signup

4. User signin

React Signup / Signin / Activation: User signin

5. Activate account

React Signup / Signin / Activation: Activate account

6. Active nav link

React Signup / Signin / Activation: Active nav link

7. Auth helpers

React Signup / Signin / Activation: Auth helpers

8. Authenticate and signout

React Signup / Signin / Activation: Authenticate and signout

7. Private / Admin Routing

1. Private route

Private / Admin Routing: Private route

2. Admin route

Private / Admin Routing: Admin route

3. Redirect based on role

Private / Admin Routing: Redirect based on role

8. User Profile

1. Read user profile

User Profile: Read user profile

2. Protect API endpoint

User Profile: Protect API endpoint

3. Update user profile

User Profile: Update user profile

4. Admin middleware

User Profile: Admin middleware

5. Profile update page setup

User Profile: Profile update page setup

6. Errors cleanup

User Profile: Errors cleanup

7. Pre populate profile update and handle JWT expiry

User Profile: Pre populate profile update and handle JWT expiry

8. Profile update with toast message

User Profile: Profile update with toast message

9. Admin profile update

User Profile: Admin profile update

9. Forgot / Reset Password

1. Forgot password server

Forgot / Reset Password: Forgot password server

2. Reset password server

Forgot / Reset Password: Reset password server

3. Forgot password client

Forgot / Reset Password: Forgot password client

4. Reset password client

Forgot / Reset Password: Reset password client

10. Login with Google

1. Login with google client

2. Login with google - server

11. Login with Facebook

1. Login with facebook client

2. Login with facebook server

12. Production steps

1. Getting ready for production

Production steps: Getting ready for production

13. Deployment

1. Github and digital ocean

Deployment: Github and digital ocean

2. Deployment part 1

Deployment: Deployment part 1

3. Deployment part 2

Deployment: Deployment part 2

4. Pushing changes and making admin user

Deployment: Pushing changes and making admin user

Course Images

MERN Stack Web Development with Ultimate Authentication

By Packt

Booking options

Highlights