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

11h 52m 29s
English
Free

Course 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.

Read more about the course

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.

Requirements:

  • A good understanding of JavaScript & ES6 Fundamentals

  • React & Node Basics

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

Watch Online

0:00 0:00
#Lesson TitleDuration
1Welcome To The Course03:30
2A Look At The Course Project05:23
3Environment & Setup06:34
4MongoDB Atlas Setup06:15
5Install Dependencies & Basic Express Setup08:08
6Connecting To MongoDB With Mongoose07:06
7Route Files With Express Router07:56
8Creating The User Model04:23
9Request & Body Validation09:51
10User Registration14:14
11Implementing JWT10:04
12Custom Auth Middleware & JWT Verify12:32
13User Authentication / Login Route09:40
14Creating The Profile Model05:20
15Get Current User Profile06:46
16Create & Update Profile Routes21:24
17Get All Profiles & Profile By User ID12:04
18Delete Profile & User06:20
19Add Profile Experience11:45
20Delete Profile Experience06:50
21Add & Delete Profile Education07:19
22Get Github Repos For Profile09:06
23Creating The Post Model05:49
24Add Post Route11:16
25Get & Delete Post Routes12:13
26Post Like & Unlike Routes11:24
27Add & Remove Comment Routes13:23
28A Look At The The UI / Theme06:12
29React & Concurrently Setup05:43
30Clean Up & Initial Components06:29
31React Router Setup06:16
32Register Form & useState Hook09:01
33Request Example & Login Form08:38
34The Gist Of Redux05:47
35Creating a Redux Store07:30
36Alert Reducer, Action & Types11:48
37Alert Component & Action Call17:49
38Auth Reducer & Register Action19:02
39Load User & Set Auth Token14:26
40User Login13:55
41Logout & Navbar Links09:34
42Protected Route For Dashboard10:23
43Profile Reducer & Get Current Profile13:33
44Starting On The Dashboard15:27
45CreateProfile Component11:33
46Create Profile Action14:00
47Edit Profile14:46
48Add Education & Experiences22:56
49List Education & Experiences13:18
50Delete Education, Experiences & Account16:31
51Finish Profile Actions & Reducer08:10
52Display Profiles17:14
53Addressing The Console Warnings04:13
54Starting On The Profile10:59
55ProfileTop & ProfileAbout Components14:55
56Profile Experience & Education Display10:21
57Displaying Github Repos11:29
58Post Reducer, Action & Initial Component12:16
59Post Item Component12:27
60Like & Unlike Functionality09:29
61Deleting Posts05:54
62Adding Posts10:22
63Single Post Display13:05
64Adding Comments12:21
65Comment Display & Delete10:49
66Install Heroku CLI03:55
67Prepare For Deployment07:07
68Deploy To Heroku07:54
69Not Found Page & Theme Workaround08:17

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Build a Jira clone

Build a Jira clone

Sources: Code With Antonio
In this 16-hour course, consisting of two parts (by the way, this is my longest course!), you will learn how to create a fully functional Jira clone with a...
16 hours 26 minutes 4 seconds
Learn and Understand NodeJS

Learn and Understand NodeJS

Sources: udemy
NodeJS is a rapidy growing web server technology, and Node developers are among the highest paid in the industry. Knowing NodeJS well will get you a job or improve your current ...
13 hours 9 minutes 49 seconds
Instagram Clone Coding 3.0

Instagram Clone Coding 3.0

Sources: Nomad Coders
nstagram: backend + frontend + application + server. NodeJS, Prisma, GraphQL, Hooks, React Native. You implement almost all Instagram features, including taking
20 hours 48 minutes 39 seconds
Make 20 React Apps

Make 20 React Apps

Sources: Chris Sev
Learn React best practices and concepts that you can use on the job, in side projects, and in any React app.
12 hours 20 minutes 3 seconds