We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

React, NodeJS, Express & MongoDB - The MERN Fullstack Guide

Manuel Lorenz, Academind by Maximilian Schwarzmüller, and Maximilian Schwarzmüller

We built the bestselling React course on Udemy - this course now allows you to take your React knowledge to the next level and build fullstack web apps based on React, NodeJS, MongoDB and Express.

Read more

We built the bestselling React course on Udemy - this course now allows you to take your React knowledge to the next level and build fullstack web apps based on React, NodeJS, MongoDB and Express.

Building fullstack applications (i.e. frontend + backend) with the MERN stack is very popular - in this course, you will learn it from scratch at the example of a complete project.

MERN stands for MongoDB, Express.js, React.js and Node.js - and combined, these four technologies allow you to build amazing web applications.

In this course, we'll build an entire project and you will learn how these different technologies work together step by step. We'll first have a look at all the individual building blocks, so that we then can also combine them all into one amazing application by the end of the course.

This course also doesn't stop after the basics - instead, you'll also learn how to add file upload, authentication, authorization and how to deploy your application in different ways to different hosting services.

This course is taught by two instructors - Max (React.js, Node/ Express) and Manuel (MongoDB) who have years of experience of working with these technologies and teaching them to other people. We took and combined our experiences to deliver you the best possible MERN stack course you can find out there.

In detail, this course offers:

  • Brief refreshers on the core technologies (React, Node, Express, MongoDB)

  • Project sections for each technology where the theoretic knowledge is applied

  • Detailed theory about the MERN stack and the different ways of combining the technologies

  • A complete course project where all the technologies come together into one application

  • File (image) upload in both React.js (sending the file) and Node/ Express (receiving the file)

  • User authentication (signup + login)

  • User authorization (controlling access to certain resources)

  • Detailed deployment instructions - including different ways of deploying the application

  • Tons of quizzes and extra resources.

By the end of this course, you'll feel comfortable building your own MERN stack applications and you can build up on all the knowledge taught throughout this course to dive into your own projects and use-cases.

What are the requirements for taking this course?

  • NO prior MERN stack knowledge is required

  • Basic React.js knowledge is strongly recommended - a refresher is provided as part of the course but this course is NOT meant to teach React from the ground up

  • Basic Node + Express knowledge is recommended but not a must-have

As always, this course comes with a 30-day money-back guarantee.

We'd love to dive into this course together with you.

Enroll now

What's inside

Learning objectives

  • Learn how to connect reactjs with nodejs, express & mongodb
  • Build an entire project from scratch!
  • Refresh the basics about reactjs, nodejs, express and mongodb
  • Learn how to implement authentication & authorization
  • Add file upload to reactjs + node/ express applications

Syllabus

Introduction
What is the "MERN Stack"?
MERN - A First Overview
Join our Online Learning Community
Read more
Course Outline
How To Get The Most Out Of The Course
Using the Course Resources
The MERN Stack - Theory
Module Introduction
Understanding the Big Picture
Diving Into the Frontend
Understanding the Backend
REST vs GraphQL
Connecting Node & React
MERN - Essentials
Creating our Development Environment & the Development Servers
Diving Deeper Into the Code
Useful Resources & Links
Planning the App
Understanding the General App Idea
Sketching out the Frontend
Data & API Endpoints used in our App
Required SPA Pages for the Frontend
React.js - A Refresher
What is React?
A Note About The NodeJS Version
React 18
Setting Up a Starting Project
Understanding JSX
Understanding Components
Working with Multiple Components
Using Props to pass Data between Components
Rendering Lists of Data
Handling Events
Efficient Child<=>Parent Communication
Working with "State"
More on State
Fetching User Input (Two-way Binding)
React.js Basics
Wrap Up
React.js - Building the Frontend
Starting Setup, Pages & Routes
Adding a UsersList Page / Component
Adding a UserItem Component
Styling our App & More Components
Presentational vs Stateful Components
Adding a Main Header
Adding Navlinks
Implementing a Basic Desktop & Mobile Navigation
Understanding Portals
Handling the Drawer State
Animating the Sidedrawer
Rendering User Places & Using Dynamic Route Segments
Getting Route Params
Adding Custom Buttons
Adding a Modal
Rendering a Map with Google Maps
Continuing without a Credit Card
Optional: More on the useEffect() Hook
Adding a Custom Form Input Component
Managing State in the Input Component
Adding Input Validation
Sharing Input Values & Adding Multiple Inputs
Managing Form-wide State
Finishing the "Add Place" Form
Starting Work on the "Update Place" Page
Adjusting the Input Component
Creating a Custom Form Hook (useForm)
Optional: More on (Custom) React Hooks
Adjusting the Form Hook
Fixing Minor Issues
Showing a Deletion Warning
Adding an "Auth" Page & Login Form
Adding Signup + "Switch Mode" Button
Adding Auth Context for App-wide State Management
Listening to Context Changes
Adding Authenticated & Unauthenticated Routes
More Auth Context Usage
Node.js & Express.js - A Refresher
What is Node.js?
Writing our First Node.js Code
Sending Requests & Responses
What is Express.js?
Adding Express.js
Understanding the Advantages of Express.js
How Code Execution Works
Node & Express Basics
Node.js & Express.js - Building our REST API
Setting up our Project
Implementing Basic Routing

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Develops React.js, Node.js, Express.js, and MongoDB skills, which are core to becoming a full-stack developer
Covers essential full-stack development concepts, such as user authentication and authorization
Taught by experienced instructors with in-depth knowledge of the MERN stack
Requires basic React.js knowledge, which some students may not have
Uses Node.js version 16, which is slightly outdated, but still widely used
Does not provide hands-on labs or interactive materials, which may be preferred learning tools

Save this course

Save React, NodeJS, Express & MongoDB - The MERN Fullstack Guide to your list so you can find it easily later:
Save

Reviews summary

React, nodejs, express & mongodb - the mern fullstack guide

This comprehensive course provides a well-structured and engaging journey into the MERN stack, guiding learners from the basics to building a complete full-stack application. The instructors, Max and Manu, excel in explaining complex concepts clearly and effectively, making them easy for beginners to grasp. The course covers a wide range of MERN topics, including React, NodeJS, Express, and MongoDB. It strikes a good balance between theory and practice, ensuring that learners not only understand the concepts but also gain practical experience through hands-on projects and real-world examples. One of the strengths of this course is its focus on modern and industry-standard practices. The instructors emphasize the use of best practices and proven techniques, equipping learners with the skills they need to succeed in the real world. They also regularly mention alternative approaches and discuss the pros and cons of each, helping learners make informed decisions. The course is well-paced, with ample time given for learners to practice and absorb the concepts. Max and Manu provide clear explanations and demonstrations, making it easy to follow along. They also encourage learners to experiment and try things on their own, fostering a sense of independence and confidence. While the course is thorough and covers a lot of ground, it's important to note that it's not intended to be a deep dive into each individual technology. Instead, it provides a solid foundation and overview of the MERN stack, allowing learners to build a complete application while gaining a comprehensive understanding of the core concepts. Overall, this course is highly recommended for anyone looking to gain a comprehensive understanding of the MERN stack. Whether you're a beginner or an experienced developer, you'll find valuable insights and practical skills that will empower you to build robust and modern full-stack applications.
Emphasizes the use of modern and industry-standard practices, equipping learners with skills for the real world
"One of the strengths of this course is its focus on modern and industry-standard practices. The instructors emphasize the use of best practices and proven techniques, equipping learners with the skills they need to succeed in the real world. They also regularly mention alternative approaches and discuss the pros and cons of each, helping learners make informed decisions."
Provides ample time for practice and absorption, with clear explanations and demonstrations
"The course is well-paced, with ample time given for learners to practice and absorb the concepts. Max and Manu provide clear explanations and demonstrations, making it easy to follow along. They also encourage learners to experiment and try things on their own, fostering a sense of independence and confidence."
Provides a solid foundation and overview of the MERN stack, without deep-diving into individual technologies
"While the course is thorough and covers a lot of ground, it's important to note that it's not intended to be a deep dive into each individual technology. Instead, it provides a solid foundation and overview of the MERN stack, allowing learners to build a complete application while gaining a comprehensive understanding of the core concepts."
learners say instructors explain complex concepts clearly, making it easy for beginners to grasp
"The instructors, Max and Manu, excel in explaining complex concepts clearly and effectively, making them easy for beginners to grasp."
Combines theory with practice through hands-on projects and real-world examples
"The course covers a wide range of MERN topics, including React, NodeJS, Express, and MongoDB. It strikes a good balance between theory and practice, ensuring that learners not only understand the concepts but also gain practical experience through hands-on projects and real-world examples."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in React, NodeJS, Express & MongoDB - The MERN Fullstack Guide with these activities:
Read 'The Road to React' by Robin Wieruch
Gain in-depth knowledge about React and its ecosystem, complementing the concepts covered in the course.
View The Road to Firebase on Amazon
Show steps
  • Purchase or borrow a copy of the book.
  • Read through the chapters, taking notes and highlighting important sections.
  • Complete the exercises and quizzes provided in the book.
  • Discuss the book's content with peers or online communities.
Review the basics of React, Node, Express, and MongoDB
Strengthen your foundation and ensure you have a solid understanding of the core technologies used in the course.
Browse courses on React
Show steps
  • Go through the course materials and make notes on the key concepts.
  • Review online tutorials and documentation for each technology.
  • Attempt practice exercises or coding challenges to test your understanding.
Collaborate with peers on a MERN stack project
Enhance your teamwork and communication skills while learning from others and sharing knowledge.
Show steps
  • Find a study group or online community where you can connect with other students taking the course.
  • Identify a project idea that you can work on collaboratively.
  • Divide the responsibilities and tasks among team members.
  • Communicate regularly with your team to discuss progress and resolve issues.
  • Present the final project to the group and receive feedback.
Five other activities
Expand to see all activities and additional details
Show all eight activities
Solve coding challenges related to React, Node, Express, and MongoDB
Strengthen your problem-solving abilities and reinforce the concepts learned in the course.
Browse courses on React
Show steps
  • Find coding challenges platforms or resources that offer exercises related to the MERN stack.
  • Select challenges that cover a range of topics and difficulty levels.
  • Attempt to solve the challenges on your own, referring to course materials or documentation when needed.
  • Analyze your solutions and identify areas for improvement.
Follow along with tutorials for React, Node, Express, and MongoDB
Reinforce the concepts learned in the course and deepen your understanding of each technology.
Show steps
  • Identify trusted resources for tutorials, such as official documentation or reputable online courses.
  • Select tutorials that cover specific topics or skills relevant to the course.
  • Follow the instructions in the tutorials carefully, taking notes and experimenting with the code.
  • Troubleshoot any errors or issues that arise during the tutorials.
Develop a personal project using the MERN stack
Apply your skills and solidify your knowledge by building a tangible project that showcases your proficiency.
Show steps
  • Brainstorm project ideas that align with your interests and the course content.
  • Plan the project's architecture, including the database schema, API endpoints, and frontend components.
  • Implement the project using the MERN stack, ensuring proper code organization and documentation.
  • Test and debug the project thoroughly, ensuring it meets functional and non-functional requirements.
  • Deploy the project to a hosting platform and share it with others for feedback.
Create a blog post or article about your experience building a MERN stack application
Reflect on your learning journey, share your knowledge, and build a portfolio of your work.
Show steps
  • Choose a topic related to your MERN stack project or the course content.
  • Outline the main points you want to cover in your blog post or article.
  • Write your content, ensuring it is clear, concise, and engaging.
  • Edit and proofread your content.
  • Publish your blog post or article on a relevant platform.
Contribute to an open-source project related to React, Node, Express, or MongoDB
Gain practical experience, showcase your skills, and give back to the community by contributing to real-world projects.
Show steps
  • Find open-source projects on platforms like GitHub that are related to the MERN stack.
  • Identify issues or features that you can contribute to.
  • Fork the project and make changes to the codebase.
  • Submit a pull request with your proposed changes.
  • Collaborate with the project maintainers to get your changes merged.

Career center

Learners who complete React, NodeJS, Express & MongoDB - The MERN Fullstack Guide will develop knowledge and skills that may be useful to these careers:
Web Developer
A Web Developer is responsible for the design, development, and maintenance of websites and web applications. They work with a variety of programming languages and technologies, and they are able to work independently or as part of a team to bring a project to life. This course is a great fit for aspiring Web Developers as it teaches the entire MERN stack, which is a popular choice for building web applications.
Full Stack Software Engineer
A Full-Stack Software Engineer is a versatile developer who works on both the front-end and back-end of a web application. They are proficient in a variety of programming languages and technologies, and they are able to work independently or as part of a team to bring a project to life. This course is a great fit for aspiring Full-Stack Software Engineers as it teaches the entire MERN stack, which is a popular choice for building full-stack web applications.
Database Administrator
A Database Administrator is responsible for managing and maintaining databases. They work with a variety of database technologies to ensure that data is accessible, reliable, and secure. This course may be useful, as it provides a solid foundation in MongoDB, a popular database technology used in many web applications.
IT Project Manager
An IT Project Manager is responsible for planning, managing, and delivering IT projects. They work with a variety of stakeholders to ensure that projects are completed on time, within budget, and to the required quality standards. This course may be useful, as it provides a foundation in the technologies used by IT Project Managers, such as React.js, Node.js, Express, and MongoDB. You will learn how to connect React.js with Node.js, Express, and MongoDB, which will help you build and manage software applications.
Information Security Analyst
An Information Security Analyst is responsible for protecting an organization's computer systems and networks from unauthorized access, use, disclosure, disruption, modification, or destruction. This course may be useful, as it provides a foundation in the technologies used by Information Security Analysts, such as Node.js and Express. You will learn how to connect React.js with Node.js, Express, and MongoDB, which will help you build secure web applications.
Product Manager
A Product Manager is responsible for managing the development and launch of new products. They work with a variety of stakeholders to define product requirements, set product strategy, and manage product marketing. This course may be useful, as it provides a foundation in the technologies used by Product Managers, such as React.js, Node.js, Express, and MongoDB. You will learn how to connect React.js with Node.js, Express, and MongoDB, which will help you build and manage software products.
Business Analyst
A Business Analyst is responsible for analyzing business processes and identifying opportunities for improvement. They work with a variety of stakeholders to gather requirements, define business goals, and develop and implement solutions. This course may be useful, as it provides a foundation in the technologies used by Business Analysts, such as React.js, Node.js, Express, and MongoDB. You will learn how to connect React.js with Node.js, Express, and MongoDB, which will help you build and implement business solutions
DevOps Engineer
A DevOps Engineer is responsible for bridging the gap between development and operations teams. They work to ensure that software is deployed and maintained in a reliable and efficient manner. This course may be useful, as it provides a foundation in the technologies used by DevOps Engineers, such as React.js, Node.js, Express, and MongoDB. You will learn how to connect React.js with Node.js, Express, and MongoDB, which will help you build and deploy software applications.
Cloud Engineer
A Cloud Engineer is responsible for designing, building, and maintaining cloud-based applications. They work with a variety of cloud computing technologies to ensure that applications are scalable, reliable, and secure. This course may be useful, as it provides a solid foundation in Node.js and Express, which are popular cloud computing technologies. You will learn how to connect React.js with Node.js, Express, and MongoDB, which will help you build cloud-based applications.
Technical Writer
A Technical Writer is responsible for creating user manuals, technical documentation, and other written materials that explain complex technical concepts. This course may be useful, as it provides a foundation in the technologies used by Technical Writers, such as React.js, Node.js, Express, and MongoDB. You will learn how to connect React.js with Node.js, Express, and MongoDB, which will help you write technical documentation for software applications.
Systems Analyst
A Systems Analyst is responsible for analyzing, designing, and implementing software systems. They work with a variety of stakeholders to gather requirements, define system specifications, and develop and test software applications. This course may be useful, as it provides a foundation in the technologies used by Systems Analysts, such as React.js, Node.js, Express, and MongoDB. You will learn how to connect React.js with Node.js, Express, and MongoDB, which will help you build and implement software systems.
Front-End Web Developer
A Front-End Web Developer is responsible for the aesthetic and functional elements of a website or web application. They collaborate with other developers to bring ideas and designs to life on the internet. This course may be useful, as it provides a solid foundation in React.js, a popular front-end development framework. You will learn how to connect React.js with Node.js, Express, and MongoDB, which will help you build full-stack web applications.
Back-End Web Developer
A Back-End Web Developer is responsible for the server-side logic of a website or web application. They work with databases, servers, and application programming interfaces (APIs) to ensure that the website or web application functions properly. This course may be useful, as it provides a solid foundation in Node.js, Express, and MongoDB, which are popular back-end development technologies. You will learn how to connect React.js with Node.js, Express, and MongoDB, which will help you build full-stack web applications.
Data Engineer
A Data Engineer is responsible for designing, building, and maintaining data pipelines. They work with a variety of data sources and technologies to ensure that data is accessible, reliable, and secure. This course may be useful, as it provides a solid foundation in MongoDB, which is a popular database technology. You will learn how to connect React.js with Node.js, Express, and MongoDB, which will help you build data-driven applications.
Software Engineer
A Software Engineer is responsible for the design, development, and maintenance of software applications. They work with a variety of programming languages and technologies, and they are able to work independently or as part of a team to bring a project to life. This course may be useful, as it provides a solid foundation in React.js, Node.js, Express, and MongoDB, which are popular software development technologies. You will learn how to connect React.js with Node.js, Express, and MongoDB, which will help you build full-stack software applications.

Reading list

We've selected seven books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in React, NodeJS, Express & MongoDB - The MERN Fullstack Guide.
Provides a comprehensive guide to Node.js, covering topics such as asynchronous programming, networking, and web development. It valuable resource for anyone who wants to learn more about Node.js and build web applications.
Provides a comprehensive guide to Express.js, covering topics such as routing, middleware, and error handling. It valuable resource for anyone who wants to learn more about Express.js and build web applications.
Provides a comprehensive guide to building serverless architectures on AWS, covering topics such as design principles, best practices, and security. It valuable resource for anyone who wants to learn more about serverless architectures and build scalable applications on AWS.
Provides a comprehensive guide to designing data-intensive applications, covering topics such as data modeling, scalability, and fault tolerance. It valuable resource for anyone who wants to learn more about designing and building scalable applications.
Provides a comprehensive guide to microservices patterns, covering topics such as service decomposition, communication, and fault tolerance. It valuable resource for anyone who wants to learn more about microservices and build scalable applications.
Provides a comprehensive guide to building MEAN stack applications, covering topics such as setting up the development environment, building user interfaces, and handling data. It valuable resource for anyone who wants to learn more about MEAN stack and build web applications.
This course provides a comprehensive guide to building React Native applications, covering topics such as building user interfaces, handling data, and debugging. It valuable resource for anyone who wants to learn more about React Native and build mobile applications.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to React, NodeJS, Express & MongoDB - The MERN Fullstack Guide.
MERN Stack Front To Back: Full Stack React, Redux &...
Most relevant
React Front To Back
Most relevant
Building Data-driven React 17 Applications with Relay,...
Most relevant
Developing Cloud Apps with Node.js and React
Most relevant
Set up your dev environment for MERN developers on Linux
Most relevant
Secure Full Stack MEAN Developer
Most relevant
Build a Full Stack App using React and Express
Most relevant
Building a Full Stack App with React 16 and Express 4
Most relevant
Node with React: Fullstack Web Development
Most relevant
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser