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.41 (15429 reviews)
Udemy
platform
English
language
Web Development
category
instructor
MERN Stack Front To Back: Full Stack React, Redux & Node.js
62,461
students
12 hours
content
Nov 2019
last update
$109.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

Why take this course?

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.


This is a project-based course, which means the entire course is building one large project. The project is called DevConnector and allows users to register and login to create a profile. They can add a resume of jobs and education and link all of their social networks.

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

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

Our review

🌟 **Overall Course Rating:** 4.41/5 ## Pros of the Course: - **Comprehensive Hands-On Experience:** The course offers a lot of practical, hands-on experience which is highly valued by learners. (Reviewer 1) - **Regular Updates and Support:** The instructor and team actively update information on GitHub and in the comments section, ensuring that learners receive up-to-date guidance. (Reviewer 7, 13) - **Clear Explanations for Complex Topics:** Some aspects of the course, such as explanations for configuration of extensions and formatters, and the part about Redux, are praised for being very clear and beneficial for beginners. (Reviewers 10, 12) - **Practical Project:** The course culminates in a practical project that provides a clear understanding of how full stack development works. (Reviewer 18) - **Essential Tools and Technologies Covered:** The course covers essential tools and technologies, which are explained succinctly. (Reviewer 16) - **Minimalist Approach:** The course is appreciated for its minimalist approach, which is perfect for developers who need to be concise and get straight to the point. (Reviewer 14) - **Great Mentorship:** Brad Traversy is commended for being an excellent mentor and for creating courses that consistently exceed expectations. (Reviewers 20, 19) - **Versatility in Learning:** The course is suitable for a wide range of learners, from beginners to those with prior knowledge. (Reviewer 18, Reviewer 17) ## Cons of the Course: - **Outdated Content:** Some reviewers pointed out that the course content is outdated, particularly with newer versions of React and other technologies not being covered. (Reviewers 2, 11, 4) - **Lack of Depth in Certain Areas:** There is a desire for more in-depth explanations, especially regarding why certain technologies or tools are used. (Reviewer 15) - **Heroku Deployment Challenges:** Some learners found challenges with deploying the application on Heroku but were able to resolve these issues. (Reviewer 6) - **Redundancy in Code:** The code provided in the course is sometimes criticized for being redundant and not always clean or up-to-date. (Reviewer 8, Reviewer 21) - **Lack of Complete Materials:** A few reviewers noted that some materials were missing alongside the course content. (Reviewer 3) - **No Full Explanation of MongoDB vs Other Databases:** There is a lack of comparison between MongoDB and other databases like PostgreSQL or MySQL, which could provide a more comprehensive understanding. (Reviewer 5) - **Dependency on Obsolete Packages:** Some learners felt that the course relies on obsolete versions of React Router, which may cause confusion for those expecting to work with the latest versions. (Reviewer 4) ## General Feedback: - The course is generally considered good, with a strong emphasis on practical learning and real-world application. (Reviewer 22) - The project structure is well thought out, offering insights into full stack development. (Reviewer 18) ## Conclusion: The MERN Stack course offered by Brad Traversy receives a high overall rating, indicating that it is a valuable resource for learning MERN Stack development. While there are some drawbacks related to the outdated content and a lack of theoretical background in certain areas, the pros heavily outweigh the cons, particularly with the support system in place for updates and the hands-on, practical approach to learning. It is recommended for those looking to start or enhance their skills in MERN Stack development.

Coupons

DateDiscountStatus
7/13/202089% OFF
expired
8/2/202093% OFF
expired
10/9/202089% OFF
expired

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
1646980
udemy ID
4/15/2018
course created date
5/6/2019
course indexed date
Bot
course submited by