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

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.

What's inside

Learning objectives

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

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

Syllabus

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

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

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Teaches Redux, a core skill for state management in React applications

Taught by Brad Traversy, who is recognized for their work in web development

Develops skills in building full-stack social network applications with MongoDB, React, Redux, and Node.js

Covers React Hooks, Async/Await, and other modern practices

Assumes basic knowledge of React and Node.js

Reviews summary

Brad traversy's mern stack course

According to students, Brad Traversy is an engaging teacher who presents complex topics in a clear and understandable way. The course is well-received, with students highly recommending it.

Brad Traversy is an engaging instructor.

"Man, Brad is amazing."

Brad Traversy explains complex topics in a clear and understandable way.

"Man, Brad is amazing...He explains things in about as clear of terms as anyone can explain them."

"I'm still confused most of the time but I like going back and listening a second time."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in MERN Stack Front To Back: Full Stack React, Redux & Node.js with these activities:

Review Node.js Basics

Show steps

Review Node.js concepts and syntax to strengthen your understanding of the backend framework used in this course.

Browse courses on Node.js

Show steps

Revisit Node.js tutorials or documentation
Set up a practice Node.js project for experimentation
Experiment with Node.js modules and methods

Build a Simple Express.js Server

Show steps

Create a basic Express.js server to gain hands-on experience with the core backend technology of this course.

Show steps

Follow a guided tutorial on building an Express.js server
Set up a development environment with Node.js and Express.js
Build a simple route and handle requests

Join a Study Group or Online Forum

Show steps

Collaborate with peers to discuss course concepts and share knowledge, fostering a deeper understanding of the material.

Show steps

Identify relevant study groups or online forums
Participate in discussions and ask clarifying questions
Contribute to the group by sharing your insights and expertise

Four other activities

Expand to see all activities and additional details

Show all seven activities

MongoDB CRUD Operations Practice

Show steps

Perform CRUD (Create, Read, Update, Delete) operations on a MongoDB database to solidify your understanding of data persistence.

Browse courses on MongoDB

Show steps

Set up a MongoDB database and connect to it using Mongoose
Create a simple data model and perform create, read, update, and delete operations
Explore MongoDB aggregation and filtering techniques

Create a React-Redux Todo App

Show steps

Build a simple Todo application using React and Redux to gain practical experience with the frontend framework and state management.

Browse courses on React

Show steps

Follow a guided tutorial on building a React-Redux Todo app
Set up a development environment with React, Redux, and related tools
Implement Todo creation, deletion, and filtering

Develop a Mini Social Media App with CRUD Functionality

Show steps

Create a mini social media application that implements CRUD operations to reinforce your understanding of the full-stack development process.

Show steps

Design a schema for a social media platform
Implement user registration, login, and profile management
Enable users to create, read, update, and delete posts

Attend a Workshop on Advanced React Techniques

Show steps

Enhance your React skills by attending a workshop that covers advanced concepts and best practices.

Browse courses on React

Show steps

Identify and register for a relevant workshop
Attend the workshop and actively participate in discussions
Apply the acquired knowledge to your own React projects

Career center

Learners who complete MERN Stack Front To Back: Full Stack React, Redux & Node.js will develop knowledge and skills that may be useful to these careers:

Full-Stack Developer

As a Full Stack Developer, you would be responsible for both the front-end and back-end development of web applications. This course can help you build a solid foundation in the MERN stack, which is a popular choice for full-stack development. You will learn how to use React for the front-end, Redux for state management, Node.js for the back-end, and MongoDB for data storage. This course can help you develop the skills you need to be a successful Full Stack Developer.

See salaries and explore the career path for Full-Stack Developer

Front-End Developer

As a Front End Developer, you would be responsible for the design and development of the user interface of web applications. This course can help you build a strong foundation in React, which is a popular choice for front-end development. You will learn how to use React to create interactive and user-friendly web applications. This course can help you develop the skills you need to be a successful Front End Developer.

See salaries and explore the career path for Front-End Developer

Back-End Developer

As a Back End Developer, you would be responsible for the development and maintenance of the server-side of web applications. This course can help you build a strong foundation in Node.js, which is a popular choice for back-end development. You will learn how to use Node.js to create RESTful APIs and handle data storage. This course can help you develop the skills you need to be a successful Back End Developer.

See salaries and explore the career path for Back-End Developer

Software Engineer

As a Software Engineer, you would be responsible for the design, development, and maintenance of software applications. This course can help you build a strong foundation in the MERN stack, which is a popular choice for software development. You will learn how to use React, Redux, Node.js, and MongoDB to create scalable and reliable software applications. This course can help you develop the skills you need to be a successful Software Engineer.

See salaries and explore the career path for Software Engineer

Web Developer

As a Web Developer, you would be responsible for the development and maintenance of websites. This course can help you build a strong foundation in the MERN stack, which is a popular choice for web development. You will learn how to use React, Redux, Node.js, and MongoDB to create interactive and user-friendly websites. This course can help you develop the skills you need to be a successful Web Developer.

See salaries and explore the career path for Web Developer

DevOps Engineer

As a DevOps Engineer, you would be responsible for the development and maintenance of software applications. This course can help you build a strong foundation in the MERN stack, which is a popular choice for DevOps. You will learn how to use React, Redux, Node.js, and MongoDB to create scalable and reliable software applications. This course can help you develop the skills you need to be a successful DevOps Engineer.

See salaries and explore the career path for DevOps Engineer

Data Scientist

As a Data Scientist, you would be responsible for the collection, analysis, and interpretation of data. This course can help you build a strong foundation in data analysis and visualization. You will learn how to use MongoDB to store and manage data, and how to use React and Redux to create interactive data visualizations. This course can help you develop the skills you need to be a successful Data Scientist.

See salaries and explore the career path for Data Scientist

UI/UX Designer

As a UI/UX Designer, you would be responsible for the design and development of the user interface of web applications. This course can help you build a strong foundation in React, which is a popular choice for UI/UX design. You will learn how to use React to create interactive and user-friendly web applications. This course can help you develop the skills you need to be a successful UI/UX Designer.

See salaries and explore the career path for UI/UX Designer

Product Manager

As a Product Manager, you would be responsible for the development and management of software products. This course can help you build a strong foundation in the MERN stack, which is a popular choice for product development. You will learn how to use React, Redux, Node.js, and MongoDB to create scalable and user-friendly software products. This course can help you develop the skills you need to be a successful Product Manager.

See salaries and explore the career path for Product Manager

Database Administrator

As a Database Administrator, you would be responsible for the management and maintenance of databases. This course can help you build a strong foundation in MongoDB, which is a popular choice for database management. You will learn how to use MongoDB to store and manage data, and how to optimize database performance. This course can help you develop the skills you need to be a successful Database Administrator.

See salaries and explore the career path for Database Administrator

Technical Writer

As a Technical Writer, you would be responsible for the creation and maintenance of technical documentation. This course can help you build a strong foundation in React, Redux, Node.js, and MongoDB. You will learn how to use these technologies to create clear and concise technical documentation. This course can help you develop the skills you need to be a successful Technical Writer.

See salaries and explore the career path for Technical Writer

Quality Assurance Analyst

As a Quality Assurance Analyst, you would be responsible for testing and evaluating software applications. This course can help you build a strong foundation in the MERN stack, which is a popular choice for software development. You will learn how to use React, Redux, Node.js, and MongoDB to test and evaluate software applications. This course can help you develop the skills you need to be a successful Quality Assurance Analyst.

See salaries and explore the career path for Quality Assurance Analyst

Business Analyst

As a Business Analyst, you would be responsible for the analysis and improvement of business processes. This course can help you build a strong foundation in the MERN stack, which is a popular choice for business process improvement. You will learn how to use React, Redux, Node.js, and MongoDB to create and improve business processes. This course can help you develop the skills you need to be a successful Business Analyst.

See salaries and explore the career path for Business Analyst

Project Manager

As a Project Manager, you would be responsible for the planning, execution, and closure of projects. This course can help you build a strong foundation in the MERN stack, which is a popular choice for project management. You will learn how to use React, Redux, Node.js, and MongoDB to plan, execute, and close projects. This course can help you develop the skills you need to be a successful Project Manager.

See salaries and explore the career path for Project Manager

IT Support Specialist

As an IT Support Specialist, you would be responsible for providing technical support to users. This course can help you build a strong foundation in the MERN stack, which is a popular choice for IT support. You will learn how to use React, Redux, Node.js, and MongoDB to troubleshoot and resolve technical issues. This course can help you develop the skills you need to be a successful IT Support Specialist.

See salaries and explore the career path for IT Support Specialist