MERN Stack Developer (Mongo DB, Express.js, React.js and Node.js)
Course Summary :
MERN stands for MongoDB, Express, React, and Node, after the four key technologies that make up the stack. MongoDB (a document database), Express.js (a Node.js web framework), React.js (a client-side JavaScript framework) and Node.js (the premier JavaScript webserver).
The combination means that JSON data flows naturally from front to back, making it fast to build on and reasonably simple to debug. Plus, you only have to know one programming language, and the JSON document structure, to understand the whole system. MERN is the stack of choice for today’s web developers looking to move quickly, particularly for those with React.js experience. Like any web stack, you can build whatever you want in MERN, though it’s ideally suited for cases that are JSON heavy, cloud-native, and have dynamic web interfaces. A few examples might be. Workflow management, news aggregation, to-do apps and calendars, interactive forums, or social products. And whatever else you can dream up.
What you’ll learn:
Throughout this comprehensive course, we cover a massive amount of tools and technologies, including:
- Be able to build ANY website you want.
- Craft a portfolio of websites to apply for junior developer jobs.
- Build fully-fledged websites and web apps for your startup or business.
- Work as a freelance web developer.
- Master backend development with Node
- Master front-end development with React
- Learn the latest frameworks and technologies, including React.js, Node.js, Express.js, MongoDB.
- Learn professional developer best practices
Requirements
-
Advance JavaScript Knowledge Including ES6 Features Is Required Basic knowledge about Node, Express, and MongoDB is recommended but not a must-have
- NO expert React knowledge or MERN knowledge is required
Course Content :
The Mern Stack – Theory
- Module Introduction
- 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
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 – Building A front-end
- 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 the Main Header
- Adding Nav links
- 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
Node.js And 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 And 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 Postman
- Handling Errors for Unsupported Routes
- Adding Patch Routes to Update Places
- Deleting Places
- Finalizing the “Get Places by User ID” Resource
- 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
MongoDB and 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
- 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
Connecting The React.js Front-End To the Back-end
- 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 A 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 To Our App
- 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
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
Who this course is for:
- Developers who got basic React knowledge and now want to build a fullstack app
- Advanced React developers who are interested in connecting React apps to Node/ Express
- Node/ Express developers who want to learn how to add a modern frontend to their backend
International Student FEE : USD 500 | 665 CAD | 1,875 AED
Learn More About MongoDB
Related Courses
Digital Banking Certificate Course
Complete Web development Bootcamp with React JS
Full Stack Web development With E-commerce Project
Full Stack Web Developer Training (Python and Django)
Fundamentals Of Web Development
[/vc_column_text]
