O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

Table of Contents

  1. Chapter 1 : Introduction
    1. Welcome To the Course 00:04:25
    2. A Look at the Main App 00:06:11
    3. Before We Begin 00:00:43
    4. VSCode Setup 00:08:23
  2. Chapter 2 : Basic Express Setup
    1. MongoDB Setup With mLab 00:03:55
    2. Install Dependencies & Basic Server Setup 00:09:37
    3. Connecting To MongoDB with Mongoose 00:04:58
    4. Route Files with Express Router 00:13:29
  3. Chapter 3 : User API Routes & JWT Authentication
    1. Creating the User Model 00:05:03
    2. User Registration & Postman 00:21:29
    3. Email & Password Login 00:08:31
    4. Creating the JWT 00:07:34
    5. Passport JWT Authentication Strategy 00:19:17
    6. Validation Handlers – 1 00:14:20
    7. Validation Handlers – 2 00:14:27
  4. Chapter 4 : Profile API Routes
    1. Aside - Front End Visual 00:03:40
    2. Creating the Profile Model 00:13:39
    3. Current User Profile Route 00:10:13
    4. Create & Update Profile Routes 00:15:50
    5. Profile Field Validations 00:18:56
    6. More Profile API Routes 00:17:29
    7. Add Experience & Education Routes 00:17:23
    8. Delete Education & Experience Routes 00:17:36
  5. Chapter 5 : Post API Routes
    1. Creating the Post Model 00:07:11
    2. Post Create Route 00:13:02
    3. Get & Delete Post Routes 00:12:22
    4. Post Like & Unlike Routes 00:12:06
    5. Add & Remove Comment Routes 00:15:19
  6. Chapter 6 : Getting Started With React & the Frontend
    1. A Look at the Bootstrap Theme & UI 00:10:33
    2. Implementing React 00:13:13
    3. Bootstrap & Assets Setup 00:10:52
    4. Basic Layout 00:13:44
  7. Chapter 7 : React Router & Component State
    1. React Router Setup (v4) 00:14:24
    2. Creating the Register Form with State 00:11:48
    3. Creating the Login Form with State 00:04:47
    4. Testing Registration with Our Form - No Redux Yet 00:08:06
    5. Error Handling & Display 00:13:45
  8. Chapter 8 : Redux & Authentication
    1. Why We Need Redux 00:09:24
    2. Redux Store & Chrome Extension Setup 00:16:46
    3. Redux Action & Reducer Workflow Example 00:16:24
    4. Registration & the Error Reducer 00:16:46
    5. Redux Login Action & Set Current User 00:16:43
    6. Login Form Functionality 00:17:08
    7. Logout & Conditional Navbar Links 00:21:49
  9. Chapter 9 : Dashboard & Profile State - Part 1
    1. TextFieldGroupInput Component 00:16:19
    2. Profile Reducer & Get Current Profile 00:20:41
    3. Spinner Component & Dashboard Start 00:16:33
    4. Private Route Setup 00:09:46
    5. CreateProfile Component & Route 00:10:10
    6. Form Field Components 00:12:14
    7. Create Profile Form 00:19:02
    8. Create Profile Functionality 00:12:07
  10. Chapter 10 : Dashboard & Profile State - Part 2
    1. Profile Actions Component & Delete Account 00:15:14
    2. Edit Profile Component 00:14:02
    3. Add Experience Form 00:22:03
    4. Add Experience Functionality 00:09:24
    5. Add Education Form & Functionality 00:09:16
    6. Dashboard Experience Display & Delete 00:22:12
    7. Dashboard Education Display & Delete 00:05:54
  11. Chapter 11 : Profile Display
    1. Profiles Component & getProfiles Action 00:19:03
    2. Profile Items 00:13:34
    3. Profile By Handle & Sub Components 00:14:19
    4. Profile Header 00:13:25
    5. Profile About & Credentials 00:17:21
    6. Profile Github & Touch Ups 00:20:38
  12. Chapter 12 : Posts & Comments
    1. Post State & addPost Action 00:07:48
    2. Posts & Post Form Component 00:18:43
    3. getPosts Action & PostFeed Component 00:12:30
    4. Post Item Component 00:12:47
    5. Delete, Like & Unlike Posts 00:15:12
    6. Single Post Display 00:15:51
    7. Comment Form Component & Action 00:08:30
    8. Comment Display & Delete 00:17:36
  13. Chapter 13 : Prepare & Deploy
    1. Securing Our Keys 00:05:29
    2. Heroku Setup 00:07:45
    3. Post Build & Deployment 00:15:48