The MERN Stack Tutorial — Building a Full Stack Application with MERN

This MERN Stack tutorial explains how to build a Full Stack Application with MERN (MongoDB, Express, React, Node.js). We will also implement Redux for state management and some other things like Reactstrap and React Transitions. Wel will also deploy to Heroku at the end.

Learn The MERN Stack [1] - Series Introduction

Learn the MERN Stack [2] - Express API & MongoDB

In this video we will setup the initial backend of our MERN application using Express JS with Mongoose which is an ODM to interact with our MongoDB database.

Learn The MERN Stack [3] - Client Setup & Reactstrap

In this video we will implement React and make it so that we can run the back and frontend servers at the same time using a package called concurrently. We will also create our AppNavbar component using Reactstrap

Learn The MERN Stack [4] - ShoppingList Component & Transitions

In this video we will create our ShoppingList component and make it work with just local state with some dummy data. We are not yet dealing with Redux or with our backend. I just want to get the single component working, then we will move to Redux

Learn The MERN Stack [5] - Implementing Redux

In this video we will add Redux to our frontend app and move the state from our ShoppingList component to a store reducer. We will also create our getItems action and action types.

Learn The MERN Stack [6] - Finishing Redux

In this video we will get the React/Redux app working with hardcoded state in the Redux store. We will create the ItemModal component to ad an item. After this video we will be ready to connect to the backend routes and make this FULL STACK!

Learn The MERN Stack [7] - Connecting The Backend

In this video we will finally connect to our backend routes within the Redux actions using axios and we will send the data down through the reducer into our ShoppingList component. We will also handle the post and delete requests.

Learn The MERN Stack [8] - Prepare & Deploy

In this video we will prepare our application for deployment to Heroku. We will create a heroku post build script so that we do not have to manually run “npm run build” for React. It will happen on the server once we push to it.

Learn The Mern Stack [9] - Backend JWT Auth

In this part we will add user registration and login with JWT (JSON Web Tokens) in Node/Express

Learn The Mern Stack [10] - React & Redux Auth State

In this video we will add our auth reducer to handle storing authentication state including the JWT token and the user data.

Learn The Mern Stack [11] - React Registration

In this video we will create the React register modal component and implement the create user functionality as well as getting the JWT token from the API.

Learn The Mern Stack [12] - React Login & Access Control

In this final video we will add the authentication of existing users and limit access based on if a user is logged in or not.

#MongoDB #Express #React #Nodejs #JavaScript