MERN Stack Developments
MERN stack is the name given to a set of JavaScript based technologies used in developing web applications. MERN is the acronym name given to the set of technologies including Mongo DB, Express JS, React JS/ Redux and Node JS.
Course Objective
- Uderstaning for MERN Stack
Syllbus
- What is the "MERN Stack"?
- MERN - A First Overview
- Course Outline
- Understanding the Big Picture
- Diving Into the Frontend
- Understanding the Backend
- REST vs GraphQL
- Connecting Node & React
- MERN - Essentials
- 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
- What is React?
- 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)
-
>
- 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
- 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
- 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 Postman
- Handling Errors for Unsupported Routes
- Adding Patch Routes to Update Places
- Deleting Places
- 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
- 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
- Sending a POST Request to the Backend
- 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
- 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
- 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
- Backend Route Protection with Auth Middleware
- Using Tokens to Update and Delete Places
- Adding Authorization
- Authorization on "Delete Places"
- Storing the Token in the Browser Storage
- Managing the Token Expiration Date
- Finished Auto-Login & Auto-Logout
- Creating a Custom Authentication Hook
- Authentication - Summary
Assesmment Details
- -Online Test (MCQ) : 50 marks
- - Weekly Assesment:20 Marks
- - Project Work : 30 marks
Certificate Sample
