Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Full-Stack Web Development with React and MongoDB

Name: Full-Stack Web Development with React and MongoDB
Rating: 4.2 (326 reviews)

Learn all in one course: React JS with BootStrap, MongoDB, NodeJS, ExpressJS, Swagger, OpenAPI

Created byChandan Kumar

Last updated 6/2021

English

What you'll learn

Complete React JS with API Integration, MongoDB, Swagger API Documentation
Learn API integration in ReactJS
Learn ReactJS with Classes
This is complete course with demo

Course content

7 sections • 54 lectures • 5h 40m total length

Basics of React JS8:11
Explore react basics by building reusable UI components, using props for parent-to-child data, and writing declarative interfaces with JSX that render to the browser via the virtual DOM.
Node js Installation3:38
Install create-react-app package1:56
React Project Creation4:52
Visual Studio Code installation3:53
Project structure Understanding7:15
React Components5:44
How to use HTML3:21
State4:50
Learn how to manage user input with state in a component by binding a handleChange function, using onChange to update this.state.text, and rendering with TextField and this.state.text.
Handle Function8:08
Implement a to-do form in React by handling change and submit, preventing default, updating state with new items via concat, and rendering them with map using id as key.
Props4:47

Create First API7:40
Get Request2:08
Explore how a get request retrieves data from the books endpoint and returns all records. Learn to pass parameters, build an endpoint variant, and test the api calls.
Postman Installation2:49
Get Request With Param5:14
Post Request6:16
Create and test a post request to add a book object, with auto-incremented id, sending data in the request body and returning the added book in the response.
Put Request4:09
Demonstrates using a put request to update a book by id, using the body to change the title and return the updated record.
Delete Request4:48

MongoDB Installation11:53
Learn how to install MongoDB on Windows, set up the on-premises community server, configure environment variables, start the mongod service, and create databases, collections, and documents using the mongo shell.
MongoDB Compass Installation4:19
Install MongoDB Compass, launch the app, connect to a local MongoDB server using localhost and port 27017, and create a database with a books collection and sample documents.
MongoDB Compass Basic Queries5:15
Learn to use MongoDB Compass to create databases and collections, insert and update documents, clone and delete records, and switch between list, JSON, and form views for basic queries.
MongoDB Compass Find & Sort4:19
MongoDB Compass Aggregation: $Match4:41
MongoDB Compass Aggregation: $Project2:09
MongoDB Compass Aggregation: $addFields1:40
Learn how to extract fields from an object in MongoDB Compass using $addFields, including geolocation such as latitude and longitude, and note duplication in the results.
MongoDB Compass Aggregation: $Sort1:10
MongoDB Compass Aggregation: $Group1:32
Learn how to use MongoDB Compass aggregation with the $group stage to count documents by a field, producing total counts per group for a given dataset, such as website entries.
MongoDB Compass Aggregation: $Unwind3:02
Learn to use $unwind in MongoDB compass to transform array elements into objects, then project name, email address, website, and phone number in the aggregation pipeline.
MongoDB Compass Aggregation: Pipeline for NodeJS3:13

How to fetch data from mongodb using NodeJS12:14
How to Insert data to mongodb using NodeJS5:24
How to update data to mongodb using NodeJS7:05
Update MongoDB documents with Node.js and Express by locating a book by id, building a $set dataset, and applying updateOne on the books collection, using request params and body.
How to delete data to mongodb using NodeJS4:37
Learn how to delete a document from a MongoDB collection using Node.js and Express, including deleting by id, validating existence before deletion, handling errors, and testing with Postman.

API UP and Running6:00
Learn how to spin up a books API, wire up CRUD operations (insert, update, delete, get) with MongoDB, and expose it with Swagger for front-end integration.
Create UI Project2:37
UX for CURD Application7:13
Fetch API9:30
CORS Issue4:01
Fetch and Render in UI8:29
Fetch books from an api, display the data in the ui using a for each loop or map, and render a table with book titles and actions.
CSS and Bootsrap8:43
BootStrap Model Window(Pop Up)11:22
POST request4:25
Fetch Single Record6:25
PUT Request9:11
Delete record5:07

Requirements

Basic Programming knowledge

Description

Hi Everyone,

First of all, thank you so much for reaching here. This course is designed to give you hands-on experience of real development.

In this course, I will cover front-end frameworks: React. On the server-side, you’ll learn to implement NoSQL databases using MongoDB and MongoDB Compass with aggregation and other important functions.

Then you will learn how to use MongoDB in NodeJS using ExpressJS for API development.

We will also learn how to write API documentation using Swagger Tool and OpenAPI which will help you to excel in your career.

And then we will integrate API to React application where we will implement the CRUD application.

Below are some of the topics that will be covered during the course:

Introduction to ReactJS

Basics of React JS
Node js Installation
React Project Creation
Visual Studio Code installation
Project structure Understanding
React Components
How to use HTML
State
Handle Function
Props

API Creation using NodeJS and ExpressJS

Create the First API
Get Request
Postman Installation
Get Request With Param
Post Request
Put Request
Delete Request

Introduction to MongoDB

MongoDB Installation
MongoDB Compass Installation
MongoDB Compass Basic Queries
MongoDB Compass Find & Sort
MongoDB Compass Aggregation: $Match
MongoDB Compass Aggregation: $Project
MongoDB Compass Aggregation: $addFields
MongoDB Compass Aggregation: $Sort
MongoDB Compass Aggregation: $Group
MongoDB Compass Aggregation: $Unwind
MongoDB Compass Aggregation: Pipeline for NodeJS

MongoDB integration with NodeJS

How to fetch data from MongoDB using NodeJS
How to Insert data to MongoDB using NodeJS
How to update data to MongoDB using NodeJS
How to delete data to MongoDB using NodeJS

Swagger API Documentation for NodeJS API

Introduction to Swagger & Installation
Swagger First API Doc
GET API Doc with Schema
POST API Doc
PUT API Doc
Delete API Doc

ReactJS Project Creation With API Integration

API UP and Running
Create UI Project
UX for CURD Application
Fetch API
CORS Issue
Fetch and Render in UI
CSS and Bootstrap
BootStrap Model Window(Pop Up)
POST request
Fetch Single Record
PUT Request
Delete record

Will add GIT/GitHub later.

Thank you so much, hope you will get something out of it, All the best.

Who this course is for:

Beginner React developer
Experience Web Developer
API Developer

Full-Stack Web Development with React and MongoDB

What you'll learn

Explore related topics

Course content

Introduction to React JS11 lectures • 57min

API Creation Using Node JS and Express JS7 lectures • 33min

Introduction to MongoDB11 lectures • 43min

MongoDB integration with NodeJS4 lectures • 29min

Swagger API Documentation for Node JS7 lectures • 48min

React JS Project with API Integration12 lectures • 1hr 23min

Bonus Course (Google reCAPTCHA & OTP SMS)2 lectures • 47min

Requirements

Description

Who this course is for: