CF

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

11h 52m 29s
English
Free

MERN Stack Front To Back: Full Stack React, Redux & Node.js. is a 69-lesson 11 hours 52 minutes self-paced course by Brad Traversy, Udemy. Welcome to "MERN Stack Front To Back".

Course facts

Lessons
69
Duration
11 hours 52 minutes
Level
All levels
Language
English
Updated
Instructor
Brad Traversy, Udemy
Price
Free

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.

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

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

Brad Traversy

Brad Traversy thumbnail

Brad Traversy is a US developer behind Traversy Media — one of the largest independent web-development YouTube channels, with millions of subscribers and one of the most-viewed introductory tutorial libraries on the platform. He has been publishing daily-or-near-daily web development content continuously for nearly a decade and has anchored a generation of self-taught developers' first exposure to HTML, CSS, JavaScript, and the modern framework landscape.

The course catalog (sold via Udemy and the standalone Traversy platform) covers the full web-development stack: HTML and CSS fundamentals, JavaScript, React (including Next.js), Vue, Node.js, Express, MongoDB, full-stack MERN applications, Tailwind CSS, modern CSS layout, and the surrounding tooling. Brad's teaching style is calm, patient, and deliberately accessible to absolute beginners.

The CourseFlix listing under this source carries over 17 Brad Traversy courses spanning that range. Material is paid and aimed primarily at self-taught developers building real proficiency with web development from a clean start.

Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in MERN Stack Front To Back: Full Stack React, Redux & Node.js.?

  • Space or K: play or pause
  • J: rewind 10 seconds
  • L: forward 10 seconds
  • Left Arrow: rewind 5 seconds
  • Right Arrow: forward 5 seconds
  • Up Arrow: volume up
  • Down Arrow: volume down
  • M: mute or unmute
  • F: toggle fullscreen
  • T: toggle theater mode
  • I: toggle mini player
  • 0 to 9: seek to 0 to 90 percent of the video
  • Shift plus N: next video
  • Shift plus P: previous video
0:00 0:00
#Lesson TitleDuration
1Welcome To The Course 03:30
2A Look At The Course Project 05:23
3Environment & Setup 06:34
4MongoDB Atlas Setup 06:15
5Install Dependencies & Basic Express Setup 08:08
6Connecting To MongoDB With Mongoose 07:06
7Route Files With Express Router 07:56
8Creating The User Model 04:23
9Request & Body Validation 09:51
10User Registration 14:14
11Implementing JWT 10:04
12Custom Auth Middleware & JWT Verify 12:32
13User Authentication / Login Route 09:40
14Creating The Profile Model 05:20
15Get Current User Profile 06:46
16Create & Update Profile Routes 21:24
17Get All Profiles & Profile By User ID 12:04
18Delete Profile & User 06:20
19Add Profile Experience 11:45
20Delete Profile Experience 06:50
21Add & Delete Profile Education 07:19
22Get Github Repos For Profile 09:06
23Creating The Post Model 05:49
24Add Post Route 11:16
25Get & Delete Post Routes 12:13
26Post Like & Unlike Routes 11:24
27Add & Remove Comment Routes 13:23
28A Look At The The UI / Theme 06:12
29React & Concurrently Setup 05:43
30Clean Up & Initial Components 06:29
31React Router Setup 06:16
32Register Form & useState Hook 09:01
33Request Example & Login Form 08:38
34The Gist Of Redux 05:47
35Creating a Redux Store 07:30
36Alert Reducer, Action & Types 11:48
37Alert Component & Action Call 17:49
38Auth Reducer & Register Action 19:02
39Load User & Set Auth Token 14:26
40User Login 13:55
41Logout & Navbar Links 09:34
42Protected Route For Dashboard 10:23
43Profile Reducer & Get Current Profile 13:33
44Starting On The Dashboard 15:27
45CreateProfile Component 11:33
46Create Profile Action 14:00
47Edit Profile 14:46
48Add Education & Experiences 22:56
49List Education & Experiences 13:18
50Delete Education, Experiences & Account 16:31
51Finish Profile Actions & Reducer 08:10
52Display Profiles 17:14
53Addressing The Console Warnings 04:13
54Starting On The Profile 10:59
55ProfileTop & ProfileAbout Components 14:55
56Profile Experience & Education Display 10:21
57Displaying Github Repos 11:29
58Post Reducer, Action & Initial Component 12:16
59Post Item Component 12:27
60Like & Unlike Functionality 09:29
61Deleting Posts 05:54
62Adding Posts 10:22
63Single Post Display 13:05
64Adding Comments 12:21
65Comment Display & Delete 10:49
66Install Heroku CLI 03:55
67Prepare For Deployment 07:07
68Deploy To Heroku 07:54
69Not Found Page & Theme Workaround 08:17

Recommended next

What courses are similar to MERN Stack Front To Back: Full Stack React, Redux & Node.js.?

More courses by Brad Traversy

Frequently asked questions

What are the prerequisites for enrolling in this course?
This course requires a foundational understanding of JavaScript, as it involves building a full-stack application using modern JavaScript frameworks and libraries. Familiarity with ES6+ syntax and basic web development concepts, such as HTML and CSS, is recommended. Prior experience with Node.js, Express, React, and MongoDB can be beneficial but is not mandatory as the course covers these technologies extensively.
What kind of project will I build in this course?
The course guides you through building a full-stack social network application. This project involves using Node.js and Express for the backend, React and Redux for the frontend, and MongoDB for the database. Starting from a blank text editor, you will learn to develop a complete application with functionalities like user authentication, profile management, post creation, and interaction features such as likes and comments.
Who is the target audience for this course?
The course is designed for web developers who wish to enhance their skills in full-stack development using the MERN stack. It is suitable for individuals looking to build practical, real-world applications and those interested in learning how to integrate frontend and backend technologies effectively. While beginners with some JavaScript knowledge can benefit, it is particularly aimed at intermediate developers seeking to deepen their expertise.
How does the depth and scope of this course compare to similar courses?
This course provides an in-depth exploration of the MERN stack by focusing on building a comprehensive social network application. Unlike some courses that cover either frontend or backend in isolation, this course offers a balanced approach by integrating both aspects. It includes detailed lessons on working with authentication, state management using Redux, and database interaction with MongoDB, making it a robust choice for those seeking a holistic full-stack development experience.
Does the course cover deployment of the application?
While the course covers the development of the full-stack application from scratch, specific details about deployment are not mentioned in the lesson list provided. However, understanding how to build and manage a full-stack application using the MERN stack can provide a strong foundation for exploring deployment practices independently or through additional resources.
What specific tools and platforms are used in this course?
This course utilizes a range of tools and platforms integral to the MERN stack. For the backend, Node.js and Express are used for server-side programming. The frontend development involves React and Redux for building user interfaces and managing application state. MongoDB is employed as the database solution, with Mongoose as the object data modeling library. Additionally, lessons cover using MongoDB Atlas for database setup and JWT for implementing authentication.
What is not covered in this course?
The course does not explicitly mention covering advanced deployment strategies or server management techniques. Topics like cloud hosting, CI/CD pipelines, and server scaling are not detailed in the course outline. While it provides a strong foundation in building a full-stack application, those interested in these advanced topics may need to seek additional resources or courses to supplement their learning.