React, NodeJS, Express & MongoDB – The MERN Fullstack Guide
-
Introduction
-
The MERN Stack – Theory
-
Planning the App
-
React.js – A RefresherModule Introduction0sWhat is React?0sA Note About The NodeJS VersionReact 18Setting Up a Starting Project0sUnderstanding JSX0sUnderstanding Components0sWorking with Multiple Components0sUsing Props to pass Data between Components0sRendering Lists of Data0sHandling Events0sEfficient ChildParent Communication0sWorking with “State”0sMore on State0sFetching User Input (Two-way Binding)0sReact.js BasicsWrap Up0sUseful Resources & Links
-
React.js – Building the FrontendModule Introduction0sImportant: Use React Script v5Starting Setup, Pages & Routes0sAdding a UsersList Page / Component0sAdding a UserItem Component0sStyling our App & More Components0sPresentational vs Stateful Components0sAdding a Main Header0sAdding Navlinks0sImplementing a Basic Desktop & Mobile Navigation0sUnderstanding Portals0sHandling the Drawer State0sAnimating the Sidedrawer0sRendering User Places & Using Dynamic Route Segments0sGetting Route Params0sAdding Custom Buttons0sAdding a Modal0sRendering a Map with Google Maps0sContinuing without a Credit CardOptional: More on the useEffect() HookAdding a Custom Form Input Component0sManaging State in the Input Component0sAdding Input Validation0sSharing Input Values & Adding Multiple Inputs0sManaging Form-wide State0sFinishing the “Add Place” Form0sStarting Work on the “Update Place” Page0sAdjusting the Input Component0sCreating a Custom Form Hook (useForm)0sOptional: More on (Custom) React HooksAdjusting the Form Hook0sFixing Minor Issues0sShowing a Deletion Warning0sAdding an “Auth” Page & Login Form0sAdding Signup + “Switch Mode” Button0sAdding Auth Context for App-wide State Management0sListening to Context Changes0sAdding Authenticated & Unauthenticated Routes0sMore Auth Context Usage0sWrap Up0sUseful Resources & Links
-
Node.js & Express.js – A Refresher
-
Node.js & Express.js – Building our REST APIModule Introduction0sSetting up our Project0sImplementing Basic Routing0sAdding Place-Specific Routes0sGetting a Place By User ID0sHandling Errors0sAdding our own Error Model0sAdding Controllers0sAdding a POST Route & Using Postman0sHandling Errors for Unsupported Routes0sAdding Patch Routes to Update Places0sDeleting Places0sFinalizing the “Get Places by User ID” Resource0sSetting Up the User Routes (Signup, Login, Get Users)0sValidating API Input (Request Bodies)0sValidating Patch Requests & User Routes0sUsing Google’s Geocoding API to Convert an Address Into Coordinates0sWrap Up0sUseful Resources & Links
-
Working with MongoDB & Mongoose – A RefresherModule Introduction0sWhat is MongoDB?0sSQL vs NoSQL0sConnecting React to a Database?0sSetting Up MongoDB0sCreating a Simple Backend & Connecting it to the Database0sCreating a Document with MongoDB0sGetting Data from the Database0sInstalling Mongoose0sUnderstanding Models & Schemas0sCreating a Product0sConnecting to the Database & Saving the Product0sGetting Products0sUnderstanding the ObjectID0sWrap Up0sUseful Resources & Links
-
Connecting the Backend to the Database – MongoDB & MongooseModule Introduction0sInstalling Mongoose & Connecting our Backend to MongoDB0sCreating the Place Schema & Model0sCreating & Storing Documents in the Database0sGetting Places by the PlaceID0sGetting Places by the UserID0sUpdating Places0sDeleting Places0sHow Users & Places are Related0sCreating the User Model0sUsing the User Model for Signup0sAdding the User Login0sGetting Users0sAdding the Relation between Places & Users0sCreating Places & Adding it to a User0sDeleting Places & Removing it From the User0sGetting Places – An Alternative0sCleaning Up our Code0sWrap Up0sUseful Resources & Links
-
Connecting the React.js Frontend to the BackendModule Introduction0sInitial Setup0sSending a POST Request to the Backend0sOptional: The fetch() APIHandling CORS Errors0sGetting Started with Error Handling0sProper Error Handling in the Frontend0sSending a Login Request0sGetting Users with a GET Request0sCreating a Custom Http Hook0sImproving the Custom Http Hook0sUsing the Http Hook to GET Users0sAdding Places (POST)0sLoading Places by User Id0sUpdating Places0sDeleting Places0sFixing NavLinks & “My Places”0sFinal Adjustments0sUseful Resources & Links
-
Adding File UploadModule Introduction0sBuilding an ImageUpload Component0sFinishing & Using the ImageUpload Component (in a Form)0sOn the Backend: Using Multer to Save Files0sFiltering Files on the Backend (Images Only!)0sWiring Frontend and Backend Up0sConnecting Users to Images0sServing Images Statically0sUploading Images for New Places0sDeleting Images When Places Get Deleted0sWrap Up0sUseful Resources & Links
-
Adding AuthenticationModule Introduction0sHow Authentication Works (in a MERN App)0sHashing the User Password0sLogging Users In (with Hashed Passwords)0sGenerating Tokens (JWT) on the Backend0sOptional: More on JSON Web TokensBackend Route Protection with Auth Middleware0sUsing & Attaching JWT (Tokens) in React0sUsing Tokens to Update and Delete Places0sAdding Authorization0sAuthorization on “Delete Places”0sStoring the Token in the Browser Storage0sAdding Auto-Login (Basic Version)0sManaging the Token Expiration Date0sFinished Auto-Login & Auto-Logout0sCreating a Custom Authentication Hook0sAuthentication – Summary0sGeneral App Improvements0sAuthentication & AuthorizationUseful Resources & Links
-
Application DeploymentModule Introduction0sDeployment Steps Overview0sUsing Environment Variables (Node.js)0sEnvironment Variables in React Apps0sPreparing API Keys & Credentials0sBuilding the React App0sAdding Code Splitting to React0sUnderstanding Possible Deployment Alternatives0sDeploying a Standalone REST API (Example: Heroku)0sDeploying a Standalone React SPA (Example: Firebase Hosting)0sFixing Style Issues0sDeploying a Combined App0sStoring Files/ Uploads0sWrap Up0s
-
Roundup & Next Steps
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
We’d love to dive into this course together with you!
What's included
- 18.5 hours on-demand video
- 22 articles
- 235 downloadable resources
- Access on mobile and TV
- Certificate of completion