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 |
Recommended next
What courses are similar to MERN Stack Front To Back: Full Stack React, Redux & Node.js.?
-
Updated 2y agoNode with React: Fullstack Web Development
By: Udemy, Stephen GriderGo beyond the basics of React and Redux! This course will teach you to combine the ultra-popular React, Redux, Express, and MongoDB technologies to build a full25h 36m -
Updated 3y agoBuild fancy landing pages with React and Threejs
By: Paul Henschel (0xca0a)This course teaches you how to add stunning flourishes to your sites with little code and complexity.38m -
Updated 2y agoNode.js, Express, MongoDB & More The Complete Bootcamp 2024
By: UdemyLearn how to build back-end apps with Node.js, Express and MongoDB. You get clear steps that help you plan, build and deploy real projects.42h 15m -
Updated 2y agoReact Router v5
By: UI.dev (Tyler McGinnis)React Router v5 — route configuration, dynamic routing, code splitting, server rendering, and migration patterns from earlier React Router versions.3h 38m -
Updated 2y agoEve: Building RESTful APIs with MongoDB and Flask
By: Talk Python TrainingEve is an open source Python REST API framework designed for human beings. It allows you to effortlessly build and deploy highly customizable, fully featured RE5h 6m -
Updated 2y agoZero to Full Stack Hero
By: PAPA React (Sonny Sangha)PAPA React presents.. Zero to Full Stack Hero. It's NOT just another COURSE. It's the world's BEST COMMUNITY.101h 29m5/5 -
Updated 2y agoInstagram Clone Coding 3.0
By: Nomad CodersInstagram clone with NodeJS, Prisma, GraphQL, React Native and TypeScript — build the full backend, frontend, and mobile app from scratch.20h 48m
More courses by Brad Traversy
-
FreeClassicNext.js From Scratch 2024
The main project in this course is a full-featured property rental website with property search, browsing and management. User authentication using Next Auth al11h 54m5/5 -
Updated 2y agoPHP From Scratch 2024 | Beginner To Advanced
Learn PHP fundamentals then build a job listing website from the ground up, using a Laravel-like infrastructure. This course is broken up into two parts. First18h 17m5/5 -
FreeUpdated 2y agoReact Front To Back 2022
This course is for anyone that wants to learn React and also for React developers looking to build some projects and sharpen their skills.19h 57m -
ClassicMERN Stack From Scratch
We spend 12 hours creating this project from scratch. It includes a multi-step checkout process with PayPal integration, product search, rating & review, user p13h 32m5/5 -
Updated 3y agoDjango with React | An Ecommerce Website
Build an eCommerce platform from the ground up with React, Redux, Django & Postgres.18h 6m5/5 -
Updated 3y ago20 Web Projects With Vanilla JavaScript
This is a fun, practical & project based course for all skill levels. The projects in this course are designed to get you building things using HTML5, CSS & Jav16h 8m
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.