
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.
Install node.js on your system by downloading the Windows installer from nodejs.org, accepting the license, and completing the installation; verify by running npm -v.
Install the create-react-app package using npm, verify the installation globally, then create and begin a new React project.
Create a React application using Create React App or npm, install required libraries, and start the project to learn setup, templating, and basic development workflow.
Install visual studio code on windows, linux, or macos by downloading the 64-bit version and creating a desktop icon. Open your project in code to view node_modules and package.json.
Explore the React project structure, including the entry file, dependencies, scripts, and configuration like eslint and browserlist, and understand gitignore and live reload during development.
Learn to build a React component from scratch, including class-based structure, constructor with props, render output, and exporting default for reuse in an app.
Discover how to build a simple to-do application using HTML and React, featuring a header, a single form, inputs, and an add button, while keeping a single parent element.
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.
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.
Pass data from a parent to a child component using props in a React to-do list example, showing how items flow into a to-do list component and render.
Create your first API by setting up an Express project with npm, writing a simple get route, and testing data on localhost.
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.
Install Postman on Windows and open the application. Create a new request, add it to a collection, and send it to view the response.
Learn to build a get api with a parameter, parse the id, match it to a stored object, and return the object or a not found message, with Postman testing.
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.
Demonstrates using a put request to update a book by id, using the body to change the title and return the updated record.
Learn how to perform delete requests in a RESTful API by locating the exact object with indexing, removing it from a list, and confirming the deletion with Postman.
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.
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.
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.
Learn to find documents in MongoDB Compass, project fields such as name and salary, and hide _id. Sort by salary with 1 or -1 and apply limits with collation.
Apply MongoDB Compass to build aggregation pipelines using the $match stage, filter records by fields, and explore querying data from a sample collection.
Learn how to use MongoDB Compass with $project to output only selected fields, such as name, username, email, phone, company, and website, while excluding _id.
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.
Master MongoDB Compass aggregation by using the sort stage to arrange data in ascending or descending order, using 1 and -1, and preview upcoming grouping concepts.
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.
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.
Create a MongoDB aggregation pipeline in Compass, using match and project, then export to NodeJS and Python code. Copy, install the driver, and run.
Connect Node.js with MongoDB using Express, set up a get endpoint to fetch documents from a collection, and manage the database connection and localhost port.
Learn to insert records into MongoDB using Node.js by creating a post endpoint, building a book object from the request body, performing the insert, and handling responses.
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.
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.
the lecture introduces swagger for api documentation and testing, demonstrates setting up swagger ui with express, defining open api specs, and viewing live request responses at localhost.
Learn to create a Swagger based API document by defining a get endpoint with a clear description and a 200 response, and verify it using Swagger UI.
Learn how to fetch data from an API, document the endpoints with Swagger, and define a books schema, then test the get books endpoint and its 200 response.
Learn how to document a get request with a parameter using swagger, validating an integer id input and its response for a single resource.
Explore documenting post requests in the api documentation project, define a required request body with content-type json and schema, and capture the added successfully response.
Learn to build and document a PUT API endpoint with swagger, including parameter handling, request body, and update responses, and verify updates with example calls.
Explore the delete api doc: implement the delete method for books, supply necessary parameters, observe data deletion, and verify responses with ids like 103 and 108 in a swagger-like interface.
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 a user interface for a books app, connect it to an existing api, run the project on port 3000, and explore the project structure.
Build a crud user experience in a React project by creating books component, wiring get books, and rendering a table with hash, title, and actions like edit and delete.
Fetch all books from an API and display them in the user interface, register new books, and manage results in state using the fetch API and local endpoints.
Resolve CORS issues in a full-stack setup by configuring an express API, installing dependencies, and enabling cross-origin requests to fetch and display data from a React and MongoDB project.
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.
learn to install and integrate bootstrap into a React and MongoDB project, include bootstrap CSS in index, and apply bootstrap classes to buttons and tables.
Learn to integrate a bootstrap modal (pop-up) in a React app using a bootstrap example, wiring it to a component, and adding input fields with state and a submit handler.
Learn how to send a post request to an API, including setting the URL and headers, using fetch, and sending a JSON body with content-type: application/json.
Learn to fetch a single record and implement update and delete flows in a full-stack app, including passing data, preloading a single book, and applying updates with the same model.
Learn to update a book record with PUT request in a React and MongoDB app, controlling the is updated flag and conditionally calling update or fetch flows to reflect changes.
Learn to implement a delete operation in a card app by passing the item id to the API, processing the response, and refreshing the list using a component lifecycle method.
Learn how to add Google reCAPTCHA in a React JS form by installing the package, configuring site keys for testing, and verifying user input before submission.
Implement otp authentication in a React app with Firebase, including phone number input, reCAPTCHA verification, sending OTP, and verifying the user after submission.
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.