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.
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
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 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 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 Title | Duration |
|---|---|---|
| 1 | Welcome To The Course | 03:30 |
| 2 | A Look At The Course Project | 05:23 |
| 3 | Environment & Setup | 06:34 |
| 4 | MongoDB Atlas Setup | 06:15 |
| 5 | Install Dependencies & Basic Express Setup | 08:08 |
| 6 | Connecting To MongoDB With Mongoose | 07:06 |
| 7 | Route Files With Express Router | 07:56 |
| 8 | Creating The User Model | 04:23 |
| 9 | Request & Body Validation | 09:51 |
| 10 | User Registration | 14:14 |
| 11 | Implementing JWT | 10:04 |
| 12 | Custom Auth Middleware & JWT Verify | 12:32 |
| 13 | User Authentication / Login Route | 09:40 |
| 14 | Creating The Profile Model | 05:20 |
| 15 | Get Current User Profile | 06:46 |
| 16 | Create & Update Profile Routes | 21:24 |
| 17 | Get All Profiles & Profile By User ID | 12:04 |
| 18 | Delete Profile & User | 06:20 |
| 19 | Add Profile Experience | 11:45 |
| 20 | Delete Profile Experience | 06:50 |
| 21 | Add & Delete Profile Education | 07:19 |
| 22 | Get Github Repos For Profile | 09:06 |
| 23 | Creating The Post Model | 05:49 |
| 24 | Add Post Route | 11:16 |
| 25 | Get & Delete Post Routes | 12:13 |
| 26 | Post Like & Unlike Routes | 11:24 |
| 27 | Add & Remove Comment Routes | 13:23 |
| 28 | A Look At The The UI / Theme | 06:12 |
| 29 | React & Concurrently Setup | 05:43 |
| 30 | Clean Up & Initial Components | 06:29 |
| 31 | React Router Setup | 06:16 |
| 32 | Register Form & useState Hook | 09:01 |
| 33 | Request Example & Login Form | 08:38 |
| 34 | The Gist Of Redux | 05:47 |
| 35 | Creating a Redux Store | 07:30 |
| 36 | Alert Reducer, Action & Types | 11:48 |
| 37 | Alert Component & Action Call | 17:49 |
| 38 | Auth Reducer & Register Action | 19:02 |
| 39 | Load User & Set Auth Token | 14:26 |
| 40 | User Login | 13:55 |
| 41 | Logout & Navbar Links | 09:34 |
| 42 | Protected Route For Dashboard | 10:23 |
| 43 | Profile Reducer & Get Current Profile | 13:33 |
| 44 | Starting On The Dashboard | 15:27 |
| 45 | CreateProfile Component | 11:33 |
| 46 | Create Profile Action | 14:00 |
| 47 | Edit Profile | 14:46 |
| 48 | Add Education & Experiences | 22:56 |
| 49 | List Education & Experiences | 13:18 |
| 50 | Delete Education, Experiences & Account | 16:31 |
| 51 | Finish Profile Actions & Reducer | 08:10 |
| 52 | Display Profiles | 17:14 |
| 53 | Addressing The Console Warnings | 04:13 |
| 54 | Starting On The Profile | 10:59 |
| 55 | ProfileTop & ProfileAbout Components | 14:55 |
| 56 | Profile Experience & Education Display | 10:21 |
| 57 | Displaying Github Repos | 11:29 |
| 58 | Post Reducer, Action & Initial Component | 12:16 |
| 59 | Post Item Component | 12:27 |
| 60 | Like & Unlike Functionality | 09:29 |
| 61 | Deleting Posts | 05:54 |
| 62 | Adding Posts | 10:22 |
| 63 | Single Post Display | 13:05 |
| 64 | Adding Comments | 12:21 |
| 65 | Comment Display & Delete | 10:49 |
| 66 | Install Heroku CLI | 03:55 |
| 67 | Prepare For Deployment | 07:07 |
| 68 | Deploy To Heroku | 07:54 |
| 69 | Not Found Page & Theme Workaround | 08:17 |
What courses are similar to MERN Stack Front To Back: Full Stack React, Redux & Node.js.?
-
Updated 2y agoReact Chrome Extension boilerplate | Shipped
By: Luca Restagno (Shipped Club)Launch your Chrome Extension in hours, not weeks. The boilerplate for busy makers, to launch your React Chrome Extensions fast. ou don't need to reinvent the wh5/5 -
Updated 2y agoMERN eCommerce From Scratch
By: Udemy, Brad TraversyThere are a lot of "eCommerce" courses out there, but most use some kind of prebuilt plugin or platform. In this course, we will build a completely customized e14h 49m5/5 -
Updated 3y agoReact and Laravel: Breaking a Monolith to Microservices
By: UdemyTransform monolithic apps into scalable microservices using React, Laravel, and Docker. Master API development, authentication, and more in this comprehensive15h 7m
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.