image
The Ultimate Drawing Course Beginner to Advanced...
$179
$79
image
User Experience Design Essentials - Adobe XD UI UX...
$179
$79
Total:
$659

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.
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.
Who this course is for:
Anyone that wants to learn how to build and deploy a full stack MERN application

What you'll 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

Requirements

  • You will need a copy of Adobe XD 2019 or above. A free trial can be downloaded from Adobe.
  • No previous design experience is needed.
  • No previous Adobe XD skills are needed.

Course Content

27 sections • 95 lectures
Expand All Sections
1-Introduction
4
1.1-Welcome To The Course
1.2-A Look At The Course Project
1.3-Environment & Setup
1.4-Link To Project Files
2-Express & MongoDB Setup
4
2.1-MongoDB Atlas Setup
2.2-Install Dependencies & Basic Express Setup
2.3-Connecting To MongoDB With Mongoose
2.4-Route Files With Express Router
3-User API Routes & JWT Authentication
6
3.1-Creating The User Model
3.2-Request & Body Validation
3.3-User Registration
3.4-Implementing JWT
3.5-Custom Auth Middleware & JWT Verify
3.6-User Authentication / Login Route
4-Profile API Routes
9
4.1-Creating The Profile Model
4.2-Get Current User Profile
4.3-Create & Update Profile Routes
4.4-Get All Profiles & Profile By User ID
4.5-Delete Profile & User
4.6-Add Profile Experience
4.7-Delete Profile Experience
4.8-Add & Delete Profile Education
4.9-Get Github Repos For Profile
5-Post API Routes
5
5.1-Creating The Post Model
5.2-Add Post Route
5.3-Get & Delete Post Routes
5.4-Post Like & Unlike Routes
5.5-Add & Remove Comment Routes
6-Getting Started With React & The Frontend
7
6.1-A Look At The The UI / Theme
6.2-Link To Theme Building Series On YouTube
6.3-React & Concurrently Setup
6.4-Clean Up & Initial Components
6.5-React Router Setup
6.6-Register Form & useState Hook
6.7-Request Example & Login Form
7-Redux Setup & Alerts
4
7.1-The Gist Of Redux
7.2-Creating a Redux Store
7.3-Alert Reducer, Action & Types
7.4-Alert Component & Action Call
8-React User Authentication
4
8.1-Auth Reducer & Register Action
8.2-Load User & Set Auth Token
8.3-User Login
8.4-Logout & Navbar Links
9-Dashboard & Profile Management
9
9.1-Protected Route For Dashboard
9.2-Profile Reducer & Get Current Profile
9.3-Starting On The Dashboard
9.4-CreateProfile Component
9.5-Create Profile Action
9.6-Edit Profile
9.7-Add Education & Experiences
9.8-List Education & Experiences
9.9-Delete Education, Experiences & Account
10-Profile DIsplay
8
10.1-Finish Profile Actions & Reducer
10.2-Display Profiles
10.3-Addressing The Console Warnings
10.4-Starting On The Profile
10.5-ProfileTop & ProfileAbout Components
10.6-Profile Experience & Education Display
10.7-Displaying Github Repos
10.8-Profile State Issue & Fix
11-Posts & Comments
8
11.1-Post Reducer, Action & Initial Component
11.2-Post Item Component
11.3-Like & Unlike Functionality
11.4-Deleting Posts
11.5-Adding Posts
11.6-Single Post Display
11.7-Adding Comments
11.8-Comment Display & Delete
12-Prepare & Deploy
3
12.1-Install Heroku CLI
12.2-Prepare For Deployment
12.3-Deploy To Heroku
13-Issues, Added Features, etc
2
13.1-About This Section
13.2-Not Found Page & Theme Workaround