Mern Stack
Home Courses Offering Mern Stack
- Introduction
- What is the "MERN Stack"?
- MERN - A First Overview
- Join our Online Learning Community
- Course Outline
- How To Get The Most Out Of The Course
- Using the Course Resources
- Module Introduction
- Understanding the Big Picture
- Diving Into the Frontend
- Understanding the Backend
- REST vs GraphQL
- Connecting Node & React
- Creating our Development Environment & the Development Servers
- Diving Deeper Into the Code
- Module Introduction
- Understanding the General App Idea
- Sketching out the Frontend
- Data & API Endpoints used in our App
- Required SPA Pages for the Frontend
- Module Introduction
- What is React?
- A Note About The NodeJS Version
- 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)
- Module Introduction
- 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
- Module Introduction
- 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
- Module Introduction
- 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
- Module Introduction
- 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
- Module Introduction
- Installing Mongoose & Connecting our Backend to MongoDB
- Creating the Place Schema & Model
- Creating & Storing Documents in the Database
- Getting Places by the PlaceID
- Getting Places by the UserID
- Updating Places
- Deleting Places
- How Users & Places are Related
- Creating the User Model
- Using the User Model for Signup
- Adding the User Login
- Getting Users
- Adding the Relation between Places & Users
- Creating Places & Adding it to a User
- Deleting Places & Removing it From the User
- Getting Places - An Alternative
- Cleaning Up our Code
- Module Introduction
- Initial Setup
- Sending a POST Request to the Backend
- Optional: The fetch() API
- Handling CORS Errors
- Getting Started with Error Handling
- Proper Error Handling in the Frontend
- Sending a Login Request
- Getting Users with a GET Request
- Creating a Custom Http Hook
- Improving the Custom Http Hook
- Using the Http Hook to GET Users
- Adding Places (POST)
- Loading Places by User Id
- Updating Places
- Deleting Places
- Fixing NavLinks & "My Places"
- Final Adjustments
- Module Introduction
- Building an ImageUpload Component
- Finishing & Using the ImageUpload Component (in a Form)
- On the Backend: Using Multer to Save Files
- Filtering Files on the Backend (Images Only!)
- Wiring Frontend and Backend Up
- Connecting Users to Images
- Serving Images Statically
- Uploading Images for New Places
- Deleting Images When Places Get Deleted
- Module Introduction
- How Authentication Works (in a MERN App)
- Hashing the User Password
- Logging Users In (with Hashed Passwords)
- Generating Tokens (JWT) on the Backend
- Optional: More on JSON Web Tokens
- Backend Route Protection with Auth Middleware
- Using & Attaching JWT (Tokens) in React
- Using Tokens to Update and Delete Places
- Adding Authorization
- Authorization on "Delete Places"
- Storing the Token in the Browser Storage
- Adding Auto-Login (Basic Version)
- Managing the Token Expiration Date
- Finished Auto-Login & Auto-Logout
- Creating a Custom Authentication Hook
- Authentication - Summary
- General App Improvements
- Module Introduction
- Deployment Steps Overview
- Using Environment Variables (Node.js)
- Environment Variables in React Apps
- Preparing API Keys & Credentials
- Building the React App
- Adding Code Splitting to React
- Understanding Possible Deployment Alternatives
- Deploying a Standalone REST API (Example: Heroku)
- Deploying a Standalone React SPA (Example: Firebase Hosting)
- Fixing Style Issues
- Deploying a Combined App
- Storing Files/ Uploads
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
