MERN Stack Front To Back: Full Stack React, Redux and Node.js

Video description

Build and deploy a social network with Node.js, Express, React, Redux and MongoDB. Learn how to put it all together

About This Video

Building an extensive backend API with Node.js & Express
Protecting routes/endpoints with JWT (JSON Web Tokens)
Extensive API testing with Postman
Integrating React with our backend in an elegant way, creating a great workflow
Building our frontend to work with the API
Using Redux for …

MERN Stack Front To Back: Full Stack React, Redux and Node.js

Video description

Build and deploy a social network with Node.js, Express, React, Redux and MongoDB. Learn how to put it all together

About This Video

Building an extensive backend API with Node.js & Express
Protecting routes/endpoints with JWT (JSON Web Tokens)
Extensive API testing with Postman
Integrating React with our backend in an elegant way, creating a great workflow
Building our frontend to work with the API
Using Redux for app state management
Creating reducers and actions for our resources
Creating many container components that integrate with Redux
Testing with the Redux Chrome extension

In Detail

In this course you will build an in depth full stack social network application using Node.js, Express, React, Redux and MongoDB along with ES6+. You will start with a bank text editor and end with a deployed full stack application.

Downloading the example code for this course: You can download the example code files for all Packt video courses you have purchased from your account at http://www.PacktPub.com. If you purchased this course elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Publisher resources

Download Example Code

Chapter 1 : Introduction

Welcome To the Course 00:04:25

A Look at the Main App 00:06:11

Before We Begin 00:00:43

VSCode Setup 00:08:23

Chapter 2 : Basic Express Setup

MongoDB Setup With mLab 00:03:55

Install Dependencies & Basic Server Setup 00:09:37

Connecting To MongoDB with Mongoose 00:04:58

Route Files with Express Router 00:13:29

Chapter 3 : User API Routes & JWT Authentication

Creating the User Model 00:05:03

User Registration & Postman 00:21:29

Email & Password Login 00:08:31

Creating the JWT 00:07:34

Passport JWT Authentication Strategy 00:19:17

Validation Handlers – 1 00:14:20

Validation Handlers – 2 00:14:27

Chapter 4 : Profile API Routes

Aside - Front End Visual 00:03:40

Creating the Profile Model 00:13:39

Current User Profile Route 00:10:13

Create & Update Profile Routes 00:15:50

Profile Field Validations 00:18:56

More Profile API Routes 00:17:29

Add Experience & Education Routes 00:17:23

Delete Education & Experience Routes 00:17:36

Chapter 5 : Post API Routes

Creating the Post Model 00:07:11

Post Create Route 00:13:02

Get & Delete Post Routes 00:12:22

Post Like & Unlike Routes 00:12:06

Add & Remove Comment Routes 00:15:19

Chapter 6 : Getting Started With React & the Frontend

A Look at the Bootstrap Theme & UI 00:10:33

Implementing React 00:13:13

Bootstrap & Assets Setup 00:10:52

Basic Layout 00:13:44

Chapter 7 : React Router & Component State

React Router Setup (v4) 00:14:24

Creating the Register Form with State 00:11:48

Creating the Login Form with State 00:04:47

Testing Registration with Our Form - No Redux Yet 00:08:06

Error Handling & Display 00:13:45

Chapter 8 : Redux & Authentication

Why We Need Redux 00:09:24

Redux Store & Chrome Extension Setup 00:16:46

Redux Action & Reducer Workflow Example 00:16:24

Registration & the Error Reducer 00:16:46

Redux Login Action & Set Current User 00:16:42

Logout & Conditional Navbar Links 00:21:49

Chapter 9 : Dashboard & Profile State - Part 1

TextFieldGroupInput Component 00:16:19

Profile Reducer & Get Current Profile 00:20:41

Spinner Component & Dashboard Start 00:16:33

Private Route Setup 00:09:46

CreateProfile Component & Route 00:10:10

Form Field Components 00:12:14

Create Profile Form 00:19:02

Create Profile Functionality 00:12:07

Chapter 10 : Dashboard & Profile State - Part 2

Profile Actions Component & Delete Account 00:15:14

Edit Profile Component 00:14:02

Add Experience Form 00:22:03

Add Experience Functionality 00:09:24

Add Education Form & Functionality 00:09:16

Dashboard Experience Display & Delete 00:22:12

Dashboard Education Display & Delete 00:05:54

Chapter 11 : Profile Display

Profiles Component & getProfiles Action 00:19:03

Profile Items 00:13:34

Profile By Handle & Sub Components 00:14:19

Profile Header 00:13:25

Profile About & Credentials 00:17:21

Profile Github & Touch Ups 00:20:38

Chapter 12 : Posts & Comments

Post State & addPost Action 00:07:48

Posts & Post Form Component 00:18:43

getPosts Action & PostFeed Component 00:12:30

Post Item Component 00:12:47

Delete, Like & Unlike Posts 00:15:12

Single Post Display 00:15:51

Comment Form Component & Action 00:08:30

Comment Display & Delete 00:17:36

Chapter 13 : Prepare & Deploy

Securing Our Keys 00:05:29

Heroku Setup 00:07:45

Post Build & Deployment 00:15:48

Start your Free Trial

Self paced

Go to the Course
We have partnered with providers to bring you collection of courses, When you buy through links on our site, we may earn an affiliate commission from provider.