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

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

4.53 (14027 reviews)
Udemy
platform
English
language
Web Development
category
instructor
54,883
students
12 hours
content
Nov 2019
last update
$149.99
regular price

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

React Hooks, Async/Await & modern practices

Use Redux for state management

Deploy to Heroku with a postbuild script

Description

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.

 

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.

Screenshots

MERN Stack Front To Back: Full Stack React, Redux & Node.js - Screenshot_01MERN Stack Front To Back: Full Stack React, Redux & Node.js - Screenshot_02MERN Stack Front To Back: Full Stack React, Redux & Node.js - Screenshot_03MERN Stack Front To Back: Full Stack React, Redux & Node.js - Screenshot_04

Content

Introduction

Welcome To The Course
A Look At The Course Project
Environment & Setup
Link To Project Files

Express & MongoDB Setup

MongoDB Atlas Setup
Install Dependencies & Basic Express Setup
Connecting To MongoDB With Mongoose
Route Files With Express Router

User API Routes & JWT Authentication

Creating The User Model
Request & Body Validation
User Registration
Implementing JWT
Custom Auth Middleware & JWT Verify
User Authentication / Login Route

Profile API Routes

Creating The Profile Model
Get Current User Profile
Create & Update Profile Routes
Get All Profiles & Profile By User ID
Delete Profile & User
Add Profile Experience
Delete Profile Experience
Add & Delete Profile Education
Get Github Repos For Profile

Post API Routes

Creating The Post Model
Add Post Route
Get & Delete Post Routes
Post Like & Unlike Routes
Add & Remove Comment Routes

Getting Started With React & The Frontend

A Look At The The UI / Theme
Link To Theme Building Series On YouTube
React & Concurrently Setup
Clean Up & Initial Components
React Router Setup
Register Form & useState Hook
Request Example & Login Form

Redux Setup & Alerts

The Gist Of Redux
Creating a Redux Store
Alert Reducer, Action & Types
Alert Component & Action Call

React User Authentication

Auth Reducer & Register Action
Load User & Set Auth Token
User Login
Logout & Navbar Links

Dashboard & Profile Management

Protected Route For Dashboard
Profile Reducer & Get Current Profile
Starting On The Dashboard
CreateProfile Component
Create Profile Action
Edit Profile
Add Education & Experiences
List Education & Experiences
Delete Education, Experiences & Account

Profile DIsplay

Finish Profile Actions & Reducer
Display Profiles
Addressing The Console Warnings
Starting On The Profile
ProfileTop & ProfileAbout Components
Profile Experience & Education Display
Displaying Github Repos
Profile State Issue & Fix

Posts & Comments

Post Reducer, Action & Initial Component
Post Item Component
Like & Unlike Functionality
Deleting Posts
Adding Posts
Single Post Display
Adding Comments
Comment Display & Delete

Prepare & Deploy

Install Heroku CLI
Prepare For Deployment
Deploy To Heroku

Issues, Added Features, etc

About This Section
Not Found Page & Theme Workaround

Reviews

Scott
November 22, 2021
The content is presented in a clear manner and I appreciate Brad's teaching style. It's a hands on tutorial approach, which I prefer, but if you need more details on a particular technology, you will probably have to go to the documentation for whichever part of MERN you have questions about. This course should get you familiar enough to know what to look for in that case.
Warren
November 18, 2021
I really enjoyed following along with you the development! I always watch your videos on YT and finally got sometime to complete this course. Thanks a lot, keep up with the amazing job that you are doing! Cheers
Lee
November 12, 2021
I watched all the crash course on your channel. No use. I code after your video, cant understand it. I read express document for two days, i learnt a lot. Sometimes you can explain a bit more so i can save the time for searching. You are just coding but not explains it.
SOUARI
November 7, 2021
This course is amazing , Brad is a great teacher and the staff behind answering the students questions is professionnal , although you have be prepared and have some knowledge of used technologies before starting this course ! thank you again Brad for you effort you are a bless , cheers from Tunisia !
Chinmay
November 1, 2021
Great job!! more focus required on backend ...... its very basic ..... please include things like sorting and pagination
Noam
October 25, 2021
Not a good course, even new concepts that the instructor knows people came on the course to learn them are rushed. If I make a mistake I don't feel as if I understand enought to go back and debug on my own. A very disappointing course.
Hámori
October 23, 2021
I already watched Brad's tutorial videos on youtube, so I am not suprised about his teaching skills. Just Perfect, thank you Brad! :) Mark from Hungary.
Zhassulan
October 16, 2021
1. Explanation of some terminologies are vague 2. Instead of copying from prepared directory, react-bootstap could be used
Pomelo
October 13, 2021
This course is already outdated in 2021, everything is under-explained. Disappointed with a paid course as this is only a simple project that could have been explained more in depth for the beginners. The only good thing is that Brad did hire someone to help out in Q&A, the support is good.
Vishal
October 11, 2021
It is a great course to learn about new concepts. It might be old but if you are familiar with the ES6 you will be able to update the code along the way as needed. Redux is explained in great detail so this is a good place to start familiarising yourself with Redux concepts. Love Brad's way of teaching and making everything feel really easy.
Pradumna
October 9, 2021
This was an amazing course from top to bottom, I sincerely thank the instructor! <3 Keep on doing the good work man!
Manuel
October 2, 2021
Great course to learn the MERN stack. With the crash courses about Node, Express and React on Youtube, there are not many difficulties to learn the MERN stack. The course is almost completly hands on, therefor you will get great practise. Sometimes a little theoretical explanation might have helped, to understand some technologies or procedures. All in all a great course!
Mayank
September 29, 2021
Explained with detail about testing the development routes and debugging. Building the backend from scratch and dealing with database queries. Loved this course.
Ezequiel
September 26, 2021
The choice to not use TypeScript really affects most of the students on the course, as most companies nowadays use TypeScript and it's a considerable learning curve switching from JS to TS. Many of the solutions provided on the course are outdated and require us to check the GitHub for an updated version or fixed in most cases. Really disappointed with Brad on this one.
Nur
September 12, 2021
Brad's explanation is very easy to understand, I've followed every video course, and every project that Brad makes me curious, wish you good health bro ??

Charts

Price

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

Rating

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

Enrollment distribution

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

Coupons

DateDiscountStatus
7/13/202089% OFF
expired
8/2/202093% OFF
expired
10/9/202089% OFF
expired
1646980
udemy ID
4/15/2018
course created date
5/6/2019
course indexed date
Bot
course submited by