!! Exclusive Special Offers Until April 30th !!
  info@vedait.in
  +91 - 7733880344
  • 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
Chat on WhatsApp