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

Web Performance Fundamentals

Web Performance Fundamentals

Sources: Nadia Makarevich
"The Fundamentals of Web Performance" focuses on the key aspects of improving the speed and responsiveness of web applications in the context of React...
Build Web Apps with React & Firebase

Build Web Apps with React & Firebase

Sources: udemy
React is a hugely popular front-end library and React developers are always in hight demand in the web dev job market. In this course you'll learn how to use React from the grou...
23 hours 34 minutes 47 seconds
Node Fundamentals Authentication

Node Fundamentals Authentication

Sources: leveluptutorials
Welcome to Node Fundamentals Authentication! In this series, we will dive into Node foundations and build an authentication system from scratch.
4 hours 49 minutes 28 seconds
React Summit 2024 - Amsterdam

React Summit 2024 - Amsterdam

Sources: reactsummit.com
React Summit is an in-person and remote-first (hybrid) conference dedicated to all things React. It gathers OSS authors, top trainers, and speakers, as well...
18 hours 56 minutes 36 seconds
Working with React and Go (Golang)

Working with React and Go (Golang)

Sources: udemy
React and Go are something of a match made in heaven. React is the world's most popular JavaScript library for building Single Page Applications, and Go is uniquely well-suited ...
24 hours 48 minutes 43 seconds