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

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

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 16.5 Hours | 8.23 GB
eLearning | Skill level: All Levels


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

Welcome to “MERN Stack Front To Back”. In this course we will build an in depth full stack social network application using Node.js, Express, React, Redux and MongoDB along with ES6+. We will start with a bank text editor and end with a deployed full stack application. This course includes…

  • 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

Creating a build script, securing our keys and deploy to Heroku using Git
This is NOT an “Intro to React” or “Intro to Node” course. It is a practical hands on course for building an app using the incredible MERN stack. I do try and explain everything as I go so it is possible to follow without React/Node experience but it is recommended that you know at least the basics first.

What you’ll learn

  • Build a full stack social network app with React, Redux, Node, Express & MongoDB
  • Create an extensive backend API with Express
  • Use Stateless JWT authentication practices
  • Integrate React with an Express backend in an elegant way
  • Use Redux for state management
  • Deploy to Heroku with a postbuild script
+ Table of Contents

Introduction
1 Welcome To The Course
2 A Look At the Main App
3 Before We Begin
4 VSCode Setup

Basic Express Setup
5 MongoDB Setup With mLab
6 Install Dependencies & Basic Server Setup
7 Connecting To MongoDB With Mongoose
8 Route Files With Express Router

User API Routes & JWT Authentication
9 Creating The User Model
10 User Registration & Postman
11 Email & Password Login
12 Creating The JWT
13 Passport JWT Authentication Strategy
14 Validation Handlers – 1
15 Validation Handlers – 2

Profile API Routes
16 Aside – Front End Visual
17 Creating The Profile Model
18 Current User Profile Route
19 Create & Update Profile Routes
20 Profile Field Validations
21 More Profile API Routes
22 Add Experience & Education Routes
23 Delete Education & Experience Routes

Post API Routes
24 Creating The Post Model
25 Post Create Route
26 Get & Delete Post Routes
27 Post Like & Unlike Routes
28 Add & Remove Comment Routes

Getting Started With React & The Frontend
29 A Look At The Bootstrap Theme & UI
30 Implementing React
31 Bootstrap & Assets Setup
32 Basic Layout

React Router & Component State
33 React Router Setup (v4)
34 Creating The Register Form With State
35 Creating The Login Form With State
36 bind(this) Alternative Using Arrow Functions
37 Testing Registration With Our Form – No Redux Yet
38 Error Handling & Display

Redux & Authentication
39 Why We Need Redux
40 Redux Store & Chrome Extension Setup
41 Redux Action & Reducer Workflow Example
42 Registration & The Error Reducer
43 Redux Login Action & Set Current User
44 Login Form Functionality
45 Logout & Conditional Navbar Links

Dashboard & Profile State – Part 1
46 TextFieldGroupInput Component
47 Profile Reducer & Get Current Profile
48 Spinner Component & Dashboard Start
49 Private Route Setup
50 CreateProfile Component & Route
51 Form Field Components
52 Create Profile Form
53 Create Profile Functionality

Dashboard & Profile State – Part 2
54 Profile Actions Component & Delete Account
55 Edit Profile Component
56 Add Experience Form
57 Add Experience Functionality
58 Add Education Form & Functionality
59 Dashboard Experience Display & Delete
60 Dashboard Education Display & Delete

Profile Display
61 Profiles Component & getProfiles Action
62 Profile Items
63 Profile By Handle & Sub Components
64 Profile Header
65 Profile About & Credentials
66 Profile Github & Touch Ups

Posts & Comments
67 Post State & addPost Action
68 Posts & Post Form Component
69 getPosts Action & PostFeed Component
70 Post Item Component
71 Delete, Like & Unlike Posts
72 Single Post Display
73 Comment Form Component & Action
74 Comment Display & Delete

Prepare & Deploy
75 Securing Our Keys
76 Heroku Setup
77 Post Build & Deployment
78 UPDATE Using MongoDb Atlas Instead Of MLab