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 | 12 Hours | 5.21 GB

Build and deploy a social network with Node.js, Express, React, Redux & MongoDB

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 blank 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

UPDATE: The entire course was updated to use React Hooks, Async/Await and better overall code.

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
  • React Hooks, Async/Await & modern practices
  • 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 Course Project
3 Environment & Setup
4 Link To Project Files

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

User API Routes & JWT Authentication
9 Creating The User Model
10 Request & Body Validation
11 User Registration
12 Implementing JWT
13 Custom Auth Middleware & JWT Verify
14 User Authentication Login Route

Profile API Routes
15 Creating The Profile Model
16 Get Current User Profile
17 Create & Update Profile Routes
18 Get All Profiles & Profile By User ID
19 Delete Profile & User
20 Add Profile Experience
21 Delete Profile Experience
22 Add & Delete Profile Education
23 Get Github Repos For Profile

Post API Routes
24 Creating The Post Model
25 Add Post 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 The UI Theme
30 Link To Theme Building Series On YouTube
31 React & Concurrently Setup
32 Clean Up & Initial Components
33 React Router Setup
34 Register Form & useState Hook
35 Request Example & Login Form

Redux Setup & Alerts
36 The Gist Of Redux
37 Creating a Redux Store
38 Alert Reducer, Action & Types
39 Alert Component & Action Call

React User Authentication
40 Auth Reducer & Register Action
41 Load User & Set Auth Token
42 User Login
43 Logout & Navbar Links

Dashboard & Profile Management
44 Protected Route For Dashboard
45 Profile Reducer & Get Current Profile
46 Starting On The Dashboard
47 CreateProfile Component
48 Create Profile Action
49 Edit Profile
50 Add Education & Experiences
51 List Education & Experiences
52 Delete Education, Experiences & Account

Profile DIsplay
53 Finish Profile Actions & Reducer
54 Display Profiles
55 Addressing The Console Warnings
56 Starting On The Profile
57 ProfileTop & ProfileAbout Components
58 Profile Experience & Education Display
59 Displaying Github Repos
60 Profile State Issue & Fix

Posts & Comments
61 Post Reducer, Action & Initial Component
62 Post Item Component
63 Like & Unlike Functionality
64 Deleting Posts
65 Adding Posts
66 Single Post Display
67 Adding Comments
68 Comment Display & Delete

Prepare & Deploy
69 Install Heroku CLI
70 Prepare For Deployment
71 Deploy To Heroku

Issues, Added Features, etc
72 About This Section
73 Not Found Page & Theme Workaround