CREATION OF WEB APP USING REACT, NODEJS AND MONGODB

Overview

The Ace Handyman Services Company wanted to create a web app that allowed customers to request services and handymen to accept and complete the requests. They decided to use ReactJS for the frontend of the app, NodeJS for the backend, and MongoDB for the database.

Requirements

Our client wanted following features in the app:

Customers should be able to request services, such as plumbing,
electrical work, and carpentry, and specify the details of the
request.
Handymen should be able to view the requests and accept or
reject them.
Customers should be able to view the status of their requests and
leave reviews for the handymen who completed them.
The app should have secure authentication and authorization
features.

Solution

The development team decided to use ReactJS for the frontend of the app because of its reusable components and virtual DOM. They also decided to use NodeJS for the backend because of its scalability and the availability of numerous libraries. They chose to use MongoDB as the database because of its flexibility and scalability.

For the service request feature, the team implemented a ReactJS component that displayed a form for customers to request services and specify the details of the request. The form was connected to the backend using an API that stored the request data in the database.

The handymen acceptance feature was implemented using another ReactJS component that displayed a list of the requests and allowed handymen to accept or reject them. The component was connected to the backend using an API that updated the request data in the database.

The request status and review feature was implemented using another ReactJS component that displayed the status of the requests and allowed customers to leave reviews for the handymen. The component was connected to the backend using an API that stored the review data in the database.

For secure authentication and authorization, the team implemented JSON Web Tokens (JWTs) on the backend. When a user logs in, the backend generates a JWT and sends it to the frontend, which stores it and includes it.

For the handyman app, the development team chose to use Google Cloud Platform (GCP) for cloud hosting. They used Google App Engine to host the web app and Google Cloud Functions for the backend APIs. They also used Google Cloud Storage for storing images and other static assets and Google Cloud Pub/Sub for real-time messaging between the frontend and the backend.

The use of GCP provided several benefits to the development team:

Scalability: GCP allowed the development team to scale the app easily as the number of users and requests increased. They could easily increase the number of instances of the web app and the backend APIs and allocate more resources as needed.

Security: GCP provided several security features, such as encryption at rest, secure communication using SSL, and identity and access management. This helped the development team to ensure the security of the app and protect the confidentiality of the user data.

Integration with other Google services: GCP allowed the development team to easily integrate the app with other Google services, such as Google Maps and Google Payments. This added value to the app and made it more convenient for users

Here are some technical details of the APIs implemented in the handyman app:

API architectur the development team implemented a microservices-based API architecture for the app, with each feature of the app being implemented as a separate API. This allowed them to scale the app easily and made it easier to maintain. They used Google Cloud Functions to host the APIs and connected them to the database using MongoDB.

The service request API was implemented using NodeJS and MongoDB. It included a POST endpoint that allowed customers to request services by sending a request body containing the details of the request, such as the type of service, the location, and the description. The API stored the request data in the database and returned a response indicating the success or failure of the request.

The handyman acceptance API was implemented using NodeJS and MongoDB. It included a PUT endpoint that allowed handymen to accept or reject requests by sending a request body containing the status of the request. The API updated the request data in the database and returned a response indicating the success or failure of the update.

The request status and review API was implemented using NodeJS and MongoDB. It included GET and POST endpoints that allowed customers to view the status of their requests and leave reviews for the handymen. The GET endpoint returned a response containing the status of the requests, and the POST endpoint stored the review data in the database and returned a response indicating the success or failure of the request.

The development team implemented security measures to protect the confidentiality and integrity of the user data. They used JSON Web Tokens (JWTs) for secure authentication and authorization, encrypting the user data in transit and at rest using SSL and MongoDB's encryption features. They also implemented rate limiting to prevent excessive requests and abuse of the APIs.

For the handyman app, the development team used MongoDB as the database. They designed the database to store the following data:

The users collection stored the data for the customers and handymen who used the app. It included fields such as the name, email, password, and role of the user.

Example document:

Copy code
{
“_id”: ObjectId(“5f32caa86b746f1234509876”),
“name”: “John Doe”,
“email”: “john.doe@example.com”,
“password”:
“$2a$10$O8eVb/N/6.uV.R/hr6U/M.G3f3AmZk6UZW2X9G
Kl5lqf5if5D5ZW”,
“role”: “customer”
}

The services collection stored the data for the different types of services offered by the handyman company. It included fields such as the name, description, and price of the service.

Example document:

Copy code
{
“_id”: ObjectId(“5f32cab86b746f1234509877”),
“name”: “Plumbing”,
“description”: “Fixing leaks, unclogging drains, and
installing pipes.”,
“price”: 100
}

The requests collection stored the data for the service requests made by the customers. It included fields such as the type of service, the location, the description, the status, and the handyman who accepted the request.

Example document:

Copy code
{
“_id”: ObjectId(“5f32cac86b746f1234509878”),
“service”: ObjectId(“5f32cab86b746f1234509877”),
“location”: “123 Main St, Anytown, USA”,
“description”: “There is a leak in the kitchen sink.”,
“status”: “accepted”,
“handyman”: ObjectId(“5f32caa86

Industry - : Transportation

Technology Leveraged

React
Node
MongoDB
Google Cloud Platform(GCP)

After the project was finished, the client was thrilled with the performance and outcome.

It was a delightful experience made possible by the jai infoway team's superb comprehension of the requirements. They were also a lot of talkers and grabbers of attention. All of our expectations were surpassed by Jai Infoway.