0
SUBTOTAL :
empty cartcheckout
MERN Stack Developer

MERN Stack Developer

Size
Price:
Add to CartProduct Added View Cart Checkout
Product Tags:

Read more

 3 Month/30 Hours                                                  Price65,000

                                                                                      60,000

MERN Stack Developer


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.

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 Server


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 Fronten


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 AP

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

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

International Student FEE: USD 500 | 665 CAD | 1,875 AED



Learn More About MongoDB

About MongoDB
Who use MongoDB
What is NoSQL
Try MongoDB Free




0 Reviews

Contact form

Name

Email *

Message *