Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Life Purpose Meditation Personal Transformation Neuroscience Emotional Intelligence
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
2021-01-14 09:50:52
30-Day Money-Back Guarantee
Development Web Development MERN Stack

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

Build fullstack React.js applications with Node.js, Express.js & MongoDB (MERN) with this project-focused course.
Rating: 4.7 out of 54.7 (3,671 ratings)
21,342 students
Created by Academind by Maximilian Schwarzmüller, Maximilian Schwarzmüller, Manuel Lorenz
Last updated 11/2020
English
English [Auto], Spanish [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • 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
Curated for the Udemy for Business collection

Course content

14 sections • 206 lectures • 18h 51m total length

  • Preview01:47
  • Preview07:31
  • Preview02:11
  • Join our Online Learning Community
    00:21
  • Preview02:13
  • Preview02:54
  • Using the Course Resources
    00:33

  • Module Introduction
    01:18
  • Understanding the Big Picture
    08:04
  • Diving Into the Frontend
    04:06
  • Understanding the Backend
    05:10
  • REST vs GraphQL
    07:54
  • Connecting Node & React
    05:50
  • MERN - Essentials
    7 questions
  • Creating our Development Environment & the Development Servers
    11:24
  • Diving Deeper Into the Code
    09:45
  • Useful Resources & Links
    00:13

  • Module Introduction
    04:50
  • Understanding the General App Idea
    02:35
  • Sketching out the Frontend
    09:37
  • Data & API Endpoints used in our App
    05:19
  • Required SPA Pages for the Frontend
    02:56

  • Module Introduction
    01:12
  • What is React?
    03:13
  • Setting Up a Starting Project
    04:03
  • Understanding JSX
    05:31
  • Understanding Components
    02:50
  • Working with Multiple Components
    07:04
  • Using Props to pass Data between Components
    06:52
  • Rendering Lists of Data
    04:30
  • Handling Events
    07:24
  • Efficient Child<=>Parent Communication
    04:38
  • Working with "State"
    05:54
  • More on State
    04:20
  • Fetching User Input (Two-way Binding)
    05:52
  • React.js Basics
    5 questions
  • Wrap Up
    02:11
  • Useful Resources & Links
    00:11

  • Module Introduction
    02:32
  • Starting Setup, Pages & Routes
    17:21
  • Adding a UsersList Page / Component
    09:29
  • Adding a UserItem Component
    03:41
  • Styling our App & More Components
    07:17
  • Presentational vs Stateful Components
    03:22
  • Adding a Main Header
    09:46
  • Adding Navlinks
    05:05
  • Implementing a Basic Desktop & Mobile Navigation
    04:21
  • Understanding Portals
    03:00
  • Handling the Drawer State
    04:07
  • Animating the Sidedrawer
    05:14
  • Rendering User Places & Using Dynamic Route Segments
    16:12
  • Getting Route Params
    02:16
  • Adding Custom Buttons
    02:53
  • Adding a Modal
    17:26
  • Rendering a Map with Google Maps
    14:36
  • Continuing without a Credit Card
    00:57
  • Optional: More on the useEffect() Hook
    01:21
  • Adding a Custom Form Input Component
    09:42
  • Managing State in the Input Component
    11:51
  • Adding Input Validation
    08:02
  • Sharing Input Values & Adding Multiple Inputs
    08:11
  • Managing Form-wide State
    09:11
  • Finishing the "Add Place" Form
    03:19
  • Starting Work on the "Update Place" Page
    08:45
  • Adjusting the Input Component
    02:38
  • Creating a Custom Form Hook (useForm)
    11:02
  • Optional: More on (Custom) React Hooks
    00:55
  • Adjusting the Form Hook
    11:19
  • Fixing Minor Issues
    04:32
  • Showing a Deletion Warning
    05:27
  • Adding an "Auth" Page & Login Form
    09:05
  • Adding Signup + "Switch Mode" Button
    11:18
  • Adding Auth Context for App-wide State Management
    07:04
  • Listening to Context Changes
    02:11
  • Adding Authenticated & Unauthenticated Routes
    05:49
  • More Auth Context Usage
    02:44
  • Wrap Up
    01:08
  • Useful Resources & Links
    00:11

  • Module Introduction
    01:40
  • What is Node.js?
    02:55
  • Writing our First Node.js Code
    08:20
  • Sending Requests & Responses
    13:34
  • What is Express.js?
    01:15
  • Adding Express.js
    11:39
  • Understanding the Advantages of Express.js
    08:32
  • How Code Execution Works
    03:16
  • Node & Express Basics
    5 questions
  • Useful Resources & Links
    00:12

  • Module Introduction
    02:17
  • Setting up our Project
    02:29
  • Implementing Basic Routing
    11:21
  • Adding Place-Specific Routes
    09:39
  • Getting a Place By User ID
    04:37
  • Handling Errors
    10:51
  • Adding our own Error Model
    04:45
  • Adding Controllers
    06:42
  • Adding a POST Route & Using Postman
    13:21
  • Handling Errors for Unsupported Routes
    02:13
  • Adding Patch Routes to Update Places
    08:03
  • Deleting Places
    04:07
  • Finalizing the "Get Places by User ID" Resource
    02:44
  • Setting Up the User Routes (Signup, Login, Get Users)
    13:23
  • Validating API Input (Request Bodies)
    10:19
  • Validating Patch Requests & User Routes
    06:14
  • Using Google's Geocoding API to Convert an Address Into Coordinates
    16:20
  • Wrap Up
    01:27
  • Useful Resources & Links
    00:12

  • Module Introduction
    01:15
  • What is MongoDB?
    01:26
  • SQL vs NoSQL
    03:41
  • Connecting React to a Database?
    01:44
  • Setting Up MongoDB
    05:26
  • Creating a Simple Backend & Connecting it to the Database
    05:50
  • Creating a Document with MongoDB
    07:52
  • Getting Data from the Database
    06:11
  • Installing Mongoose
    01:31
  • Understanding Models & Schemas
    03:51
  • Creating a Product
    03:23
  • Connecting to the Database & Saving the Product
    07:28
  • Getting Products
    04:12
  • Understanding the ObjectID
    03:18
  • Wrap Up
    01:42
  • Useful Resources & Links
    00:09

  • Module Introduction
    01:27
  • Installing Mongoose & Connecting our Backend to MongoDB
    06:32
  • Creating the Place Schema & Model
    06:34
  • Creating & Storing Documents in the Database
    07:26
  • Getting Places by the PlaceID
    08:07
  • Getting Places by the UserID
    05:53
  • Updating Places
    06:10
  • Deleting Places
    03:43
  • How Users & Places are Related
    01:34
  • Creating the User Model
    06:27
  • Using the User Model for Signup
    11:43
  • Adding the User Login
    04:19
  • Getting Users
    05:37
  • Adding the Relation between Places & Users
    05:03
  • Creating Places & Adding it to a User
    13:59
  • Deleting Places & Removing it From the User
    07:47
  • Getting Places - An Alternative
    05:38
  • Cleaning Up our Code
    02:32
  • Wrap Up
    01:43
  • Useful Resources & Links
    00:09

  • Module Introduction
    01:31
  • Initial Setup
    01:01
  • Sending a POST Request to the Backend
    10:30
  • Optional: The fetch() API
    00:35
  • Handling CORS Errors
    06:58
  • Getting Started with Error Handling
    07:59
  • Proper Error Handling in the Frontend
    05:05
  • Sending a Login Request
    03:35
  • Getting Users with a GET Request
    10:22
  • Creating a Custom Http Hook
    10:50
  • Improving the Custom Http Hook
    08:29
  • Using the Http Hook to GET Users
    03:47
  • Adding Places (POST)
    13:06
  • Loading Places by User Id
    07:59
  • Updating Places
    12:23
  • Deleting Places
    07:40
  • Fixing NavLinks & "My Places"
    01:06
  • Final Adjustments
    03:42
  • Useful Resources & Links
    00:10

Requirements

  • Basic knowledge about ReactJS is required
  • ReactJS Hooks knowledge is recommended
  • Basic knowledge about Node, Express and MongoDB is recommended but not a must-have
  • NO expert React knowledge or MERN knowledge is required

Description

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!

Who this course is for:

  • Developers who got basic React knowledge and now want to build a fullstack app
  • Advanced React developers who are interested in connecting React apps to Node/ Express
  • Node/ Express developers who want to learn how to add a modern frontend to their backend

Featured review

Christopher Inman
Christopher Inman
46 courses
17 reviews
Rating: 5.0 out of 5a year ago
Really great knowledge is provided here. Max and Manu do a great job in explaining concepts in great detail and showing how to implement. I like how unexpected errors are encountered and explained, then solved. Great job guys!

Instructors

Academind by Maximilian Schwarzmüller
Online Education
Academind by Maximilian Schwarzmüller
  • 4.6 Instructor Rating
  • 314,854 Reviews
  • 1,329,304 Students
  • 25 Courses

Bundling the courses and know how of successful instructors, Academind strives to deliver high quality online education. 

Online Education, Real-Life Success - that's what Academind stands for. Learn topics like web development, data analyses and more in a fun and engaging way.

Currently, you can find courses published by Maximilian Schwarzmüller and Manuel Lorenz, more instructors to come!

Keep learning!

Maximilian Schwarzmüller
Professional Web Developer and Instructor
Maximilian Schwarzmüller
  • 4.6 Instructor Rating
  • 568,893 Reviews
  • 1,348,624 Students
  • 35 Courses

Experience as (Web) Developer

Starting out at the age of 13 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. Besides web development I also explored Python and other non-web-only languages. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.

Starting web development on the backend (PHP with Laravel, NodeJS, Python) I also became more and more of a frontend developer using modern frameworks like React, Angular or VueJS in a lot of projects. I love both worlds nowadays!

As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.

Experience as Instructor

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enables me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students on Udemy as well as a successful YouTube channel is the best proof for that.

Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding experience is to see how people find new, better jobs, build awesome web applications, acquire amazing projects or simply enjoy their hobby with the help of my content.

Together with Manuel Lorenz, I founded Academind to offer the best possible learning experience to our more than 1,000,000 students.

Manuel Lorenz
Professional Business Analyst and Instructor
Manuel Lorenz
  • 4.6 Instructor Rating
  • 58,665 Reviews
  • 541,147 Students
  • 5 Courses

Having worked as a business analyst in both a major consultancy and an investment bank, I always found myself confronted with both various and complex problem sets and challenging client demands. The rapid development of technology and business requirements forces everyone to constantly adapt and to continue learning.

Being an early adopter of new and quickly evolving tools, I always enjoyed both learning these tools and passing on my knowledge to my colleagues and fellow students. 

Since working as a business analyst implies a high affinity to programming, I also enjoy working as a web developer. It's that combination of self-taught knowledge and its application in a highly competitive consulting environment for various clients which gave me the ability to evaluate solutions from an industry perspective as well as from a learner's perspective. The latter also allows me to identify the pain points students might hit when learning these tools.

Since I always found it hard to find high quality, understandable and comprehensive learning materials, I decided to create such materials on my own. Together with Maximilian Schwarzmüller I founded Academind to offer the best possible learning experience on web development and data science to our more than 600,000 students.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.