MERN
Training Includes
Get Mentored by the MERN Experts
Work on Live Project
Get Hired Quickly
Job Oriented Courses
Students
Courses
Placed Students
MERN Training Course
MERN Stack is one of the most popular and in-demand Full Stack Web Development Technologies today. It simplifies and improves application enhancement. MERN Stack includes both back-end and front-end components and allows you to use only one programming language, JavaScript. Full Stack MERN Developer is a highly sought-after title, with a 206% increase in demand for MERN Developers and continued growth after that. This course will help you master MongoDB, Express, React, and Node.js by first covering the fundamentals of Web Programming, User Interface, and Application Layer.
Interested In MERN Training Course
MERN COURSE CONTENT
INCLUDE ALL MODULES
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.
The MERN Stack -Theory
Module Introduction
Understanding the Big Picture
Diving into the Frontend
Understanding the Backend
REST vs GraphQL
Connection Node & React
Creating our Development Environment & the Development servers
Diving deeper into the code
Planning the App
Module Introduction
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
Module Introduction
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”
React.Js - Building the Frontend
Module Introduction
Starting Setup, Pages & Routes
Adding a UserList 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
Adding an “Auth” Page & Login Form
Adding Signup + “Switch Mode” Button
Adding Auth Context for App-wide State Management
Listening to Context Changes
Node.Js & Express.Js - A Refresher
Module Introduction
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.Js & Express.Js -Building our REST API
Module Introduction
Setting up our Project
Implementing Basic Routing
Adding Place-Specific Routes
Getting a Place By User ID
Handling Errors
Adding our own Error Model
Adding Controllers
Adding a POST Route & Using
PostmanHandling Errors for Unsupported Routes
Adding Patch Routes to Update Places
Deleting Places
Finalizing the “Get Places by User ID” Resources
Setting Up the User Routes (Signup, Login, Get Users
Validating API Input (Request Bodies)
Validating Patch Requests & User Routes
Using Google’s Geocoding API to Convert an Address into coordinates
Working with MongoDB & Mongoose - A Refresher
Module Introduction
What is MongoDB?
SQL vs NoSQL
Connecting React to a Database?
Setting Up MongoDB
Creating a Simple Backend & Connecting it to the database
Creating a Document with MongoDB
Getting Data from the Database
Installing Mongoose
Understanding Models & Schemas
Creating a Product
Connecting to the Database & Saving the Product
Getting Products
Understanding the ObjectID
Connecting the Backend to the Database-MongoDB and Mongoose
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
Connecting the React.Js Frontend to the Backend
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
Adding File Upload
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
Adding Authentication
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
Application Deployment
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
Ashish Kumar Patel
——–EXPERT TEAM
Meet Our Team
“Power is Gained By Sharing
Your Knowledge, Not Hoarding it”
