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
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
About the Authors
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.
Watch Online 69 lessons
- 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 |
Related courses
-
Updated 2y agoNode Fundamentals Authentication
By: Level Up Tutorials (Scott Tolinski)Welcome to Node Fundamentals Authentication! In this series, we will dive into Node foundations and build an authentication system from scratch.4h 49m -
Updated 11mo agoFull-Stack Fundamentals 1 - Frontend
By: Mckay WrigleyEmbark on an exciting journey to create your personal portfolio website from scratch, showcasing your burgeoning skills in software development using AI.1h 8m -
Updated 2y agoBuild Collaborative editor and Real-time video call with NodeJS
By: Code4StartupIn this project, you will be learning how to build a collaborative platform with real-time code editor so that you can share what you are coding/typing on the s4h 35m5/5
Frequently asked questions
What is MERN Stack Front To Back: Full Stack React, Redux & Node.js. about?
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…
Who teaches this course?
It is taught by Brad Traversy, Udemy. You can find more courses by these instructors on the corresponding source pages.
How long is the course?
It contains 69 lessons with a total runtime of 11 hours 52 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
Yes — this is a free online course on CourseFlix. You can watch every lesson without a paid subscription.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/mern-stack-front-to-back-full-stack-react-redux-node-js. The page hosts every lesson with the integrated video player; no download is required.