MERN Stack Developer - OMNI ACADEMY & CONSULTING

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