Description

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

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.

What You Will 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 post-build script

Audience

Anyone that wants to learn how to build and deploy a full stack MERN application

Approach

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. The author tries and explains everything as he goes so it is possible to follow without React/Node experience but it is recommended that you know at least the basics first.

Key Features

- 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

Github Repo

https://github.com/packtpublishing/mern-stack-front-to-back-full-stack-react-redux-and-node.js

About the Author

Brad Traversy

Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media, which is a successful web development YouTube channel and specializes in everything from HTML5 to front-end frameworks such as Angular as well as server-side technologies such as Node.js, PHP, and Python. Brad has mastered explaining overly complex topics in a simple manner that is understandable. Invest in your knowledge by watching Brad's courses.

Course Outline

1. Introduction

1. Welcome To the Course

Introduction: Welcome To the Course

2. A Look at the Main App

Introduction: A Look at the Main App

3. Before We Begin

Introduction: Before We Begin

4. VSCode Setup

Introduction: VSCode Setup

2. Basic Express Setup

1. MongoDB Setup With mLab

Basic Express Setup: MongoDB Setup With mLab

2. Install Dependencies & Basic Server Setup

Basic Express Setup: Install Dependencies & Basic Server Setup

3. Connecting To MongoDB with Mongoose

Basic Express Setup: Connecting To MongoDB with Mongoose

4. Route Files with Express Router

Basic Express Setup: Route Files with Express Router

3. User API Routes & JWT Authentication

1. Creating the User Model

User API Routes & JWT Authentication: Creating the User Model

2. User Registration & Postman

User API Routes & JWT Authentication: User Registration & Postman

3. Email & Password Login

User API Routes & JWT Authentication: Email & Password Login

4. Creating the JWT

User API Routes & JWT Authentication: Creating the JWT

5. Passport JWT Authentication Strategy

User API Routes & JWT Authentication: Passport JWT Authentication Strategy

6. Validation Handlers - 1

User API Routes & JWT Authentication: Validation Handlers - 1

7. Validation Handlers - 2

User API Routes & JWT Authentication: Validation Handlers - 2

4. Profile API Routes

1. Aside - Front End Visual

Profile API Routes: Aside - Front End Visual

2. Creating the Profile Model

Profile API Routes: Creating the Profile Model

3. Current User Profile Route

Profile API Routes: Current User Profile Route

4. Create & Update Profile Routes

Profile API Routes: Create & Update Profile Routes

5. Profile Field Validations

Profile API Routes: Profile Field Validations

6. More Profile API Routes

Profile API Routes: More Profile API Routes

7. Add Experience & Education Routes

Profile API Routes: Add Experience & Education Routes

8. Delete Education & Experience Routes

Profile API Routes: Delete Education & Experience Routes

5. Post API Routes

1. Creating the Post Model

Post API Routes: Creating the Post Model

2. Post Create Route

Post API Routes: Post Create Route

3. Get & Delete Post Routes

Post API Routes: Get & Delete Post Routes

4. Post Like & Unlike Routes

Post API Routes: Post Like & Unlike Routes

5. Add & Remove Comment Routes

Post API Routes: Add & Remove Comment Routes

6. Getting Started With React & the Frontend

1. A Look at the Bootstrap Theme & UI

Getting Started With React & the Frontend: A Look at the Bootstrap Theme & UI

2. Implementing React

Getting Started With React & the Frontend: Implementing React

3. Bootstrap & Assets Setup

Getting Started With React & the Frontend: Bootstrap & Assets Setup

4. Basic Layout

Getting Started With React & the Frontend: Basic Layout

7. React Router & Component State

1. React Router Setup (v4)

React Router & Component State: React Router Setup (v4)

2. Creating the Register Form with State

React Router & Component State: Creating the Register Form with State

3. Creating the Login Form with State

React Router & Component State: Creating the Login Form with State

4. Testing Registration with Our Form - No Redux Yet

React Router & Component State: Testing Registration with Our Form - No Redux Yet

5. Error Handling & Display

React Router & Component State: Error Handling & Display

8. Redux & Authentication

1. Why We Need Redux

Redux & Authentication: Why We Need Redux

2. Redux Store & Chrome Extension Setup

Redux & Authentication: Redux Store & Chrome Extension Setup

3. Redux Action & Reducer Workflow Example

Redux & Authentication: Redux Action & Reducer Workflow Example

4. Registration & the Error Reducer

Redux & Authentication: Registration & the Error Reducer

5. Redux Login Action & Set Current User

Redux & Authentication: Redux Login Action & Set Current User

6. Login Form Functionality

Redux & Authentication: Login Form Functionality

7. Logout & Conditional Navbar Links

Redux & Authentication: Logout & Conditional Navbar Links

9. Dashboard & Profile State - Part 1

1. TextFieldGroupInput Component

Dashboard & Profile State - Part 1: Text: Dashboard & Profile State - Part 1:

2. Profile Reducer & Get Current Profile

Dashboard & Profile State - Part 1: Profile Reducer & Get Current Profile

3. Spinner Component & Dashboard Start

Dashboard & Profile State - Part 1: Spinner Component & Dashboard Start

4. Private Route Setup

Dashboard & Profile State - Part 1: Private Route Setup

5. CreateProfile Component & Route

Dashboard & Profile State - Part 1: CreateProfile Component & Route

6. Form Field Components

Dashboard & Profile State - Part 1: Form Field Components

7. Create Profile Form

Dashboard & Profile State - Part 1: Create Profile Form

8. Create Profile Functionality

Dashboard & Profile State - Part 1: Create Profile Functionality

10. Dashboard & Profile State - Part 2

1. Profile Actions Component & Delete Account

Dashboard & Profile State - Part 2: Profile Actions Component & Delete Account

2. Edit Profile Component

Dashboard & Profile State - Part 2: Edit Profile Component

3. Add Experience Form

Dashboard & Profile State - Part 2: Add Experience Form

4. Add Experience Functionality

Dashboard & Profile State - Part 2: Add Experience Functionality

5. Add Education Form & Functionality

Dashboard & Profile State - Part 2: Add Education Form & Functionality

6. Dashboard Experience Display & Delete

Dashboard & Profile State - Part 2: Dashboard Experience Display & Delete

7. Dashboard Education Display & Delete

Dashboard & Profile State - Part 2: Dashboard Education Display & Delete

11. Profile Display

1. Profiles Component & getProfiles Action

Profile Display: Profiles Component & getProfiles Action

2. Profile Items

Profile Display: Profile Items

3. Profile By Handle & Sub Components

Profile Display: Profile By Handle & Sub Components

4. Profile Header

Profile Display: Profile Header

5. Profile About & Credentials

Profile Display: Profile About & Credentials

6. Profile Github & Touch Ups

Profile Display: Profile Github & Touch Ups

12. Posts & Comments

1. Post State & addPost Action

Posts & Comments: Post State & addPost Action

2. Posts & Post Form Component

Posts & Comments: Posts & Post Form Component

3. getPosts Action & PostFeed Component

Posts & Comments: getPosts Action & PostFeed Component

4. Post Item Component

Posts & Comments: Post Item Component

5. Delete, Like & Unlike Posts

Posts & Comments: Delete, Like & Unlike Posts

6. Single Post Display

Posts & Comments: Single Post Display

7. Comment Form Component & Action

Posts & Comments: Comment Form Component & Action

8. Comment Display & Delete

Posts & Comments: Comment Display & Delete

13. Prepare & Deploy

1. Securing Our Keys

Prepare & Deploy: Securing Our Keys

2. Heroku Setup

Prepare & Deploy: Heroku Setup

3. Post Build & Deployment

Prepare & Deploy: Post Build & Deployment

Course Images

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

By Packt

Booking options

Highlights