*Friday CLOSED

Timings 10.00 am - 08.00 pm

Call : 021-3498-6664, 0312-216-9325 DHA 021-35344-600, 03333808376, KSA 0502283468

Or log in to access your purchased courses
by gharis
Price: 60,000
3 Months
0 Lessons

Mern Stack Developer Course

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 

Join FREE – Big Data Workshop 


 

[/vc_column_text]

KEY FEATURES

Flexible Classes Schedule

Online Classes for out of city / country students

Unlimited Learning - FREE Workshops

FREE Practice Exam

Internships Available

Free Course Recordings Videos

Register Now

[/vc_column][/vc_row]

Print Friendly, PDF & Email

Lessons

Or log in to access your purchased courses
ABOUT US

OMNI ACADEMY & CONSULTING is one of the most prestigious Training & Consulting firm, founded in 2010, under MHSG Consulting Group aim to help our customers in transforming their people and business - be more engage with customers through digital transformation. Helping People to Get Valuable Skills and Get Jobs.

Read More

Contact Us

Get your self enrolled for unlimited learning 1000+ Courses, Corporate Group Training, Instructor led Class-Room and ONLINE learning options. Join Now!
  • Head Office: A-2/3 Westland Trade Centre, Shahra-e-Faisal PECHS Karachi 75350 Pakistan Call 0213-455-6664 WhatsApp 0334-318-2845, 0336-7222-191, +92 312 2169325
  • Gulshan Branch: A-242, Sardar Ali Sabri Rd. Block-2, Gulshan-e-Iqbal, Karachi-75300, Call/WhatsApp 0213-498-6664, 0331-3929-217, 0334-1757-521, 0312-2169325
  • ONLINE INQUIRY: Call/WhatsApp +92 312 2169325, 0334-318-2845, Lahore 0333-3808376, Islamabad 0331-3929217, Saudi Arabia 050 2283468
  • DHA Branch: 14-C, Saher Commercial Area, Phase VII, Defence Housing Authority, Karachi-75500 Pakistan. 0213-5344600, 0337-7222-191, 0333-3808-376
  • info@omni-academy.com
  • FREE Support | WhatsApp/Chat/Call : +92 312 2169325
WORKING HOURS

  • Monday10.00am - 7.00pm
  • Tuesday10.00am - 7.00pm
  • Wednesday10.00am - 7.00pm
  • Thursday10.00am - 7.00pm
  • FridayClosed
  • Saturday10.00am - 7.00pm
  • Sunday10.00am - 7.00pm
WhatsApp Us