Rapido Delivery Application using MERN stack
MERN is the acronym for MongoDB, Express JS, React JS and Node JS. The MERN stack is a combination of the above technologies, all based on JavaScript, used to build advanced web applications. It is an open source full stack development framework i.e. it provides entire front-end to back-end development components. While MongoDB, Express JS and Node JS are the common components (between MEAN and MERN); Angular JS is replaced by React JS in MERN. I will show you how I build Rapido Delivery Application for Restaurant Owner side using MERN stack
M-MongoDB: A document-based open source database.
E-Express: A web application framework for Node.js.
R-React: A JavaScript front-end library for building user interfaces.
N-Node.js: JavaScript run-time environment that executes JavaScript code outside of a browser (such as a server).
To build enhanced websites or applications, developers have shunned the traditional JavaScript and HTML methodologies and are approaching advanced technology stacks like MEAN and MERN.
Stakeholders
First, let’s talk about the stakeholders of Rapido Delivery Application. There are major two stakeholders as shown below.
Front end side Stakeholders:
Customer — A Customer who will be able to search grocery items on the platform listed by various store owners and can order them online and get delivered at home through the platform. Customer can order from one store at a time i.e. the Cart will have items from one store only.
Grocery Store/Restaurant Owner — A grocery store owner can list grocery products on the platform, get orders from the customers, and get delivered them to customer's place through platform’s delivery personals or through delivery person of himself.
Delivery Personal — A delivery person will receive delivery orders from the platform and will deliver order to customer’s place.
Backend side Stakeholders:
Admin — The admin who will be able to manage the site from the admin panel and CMS pages as well.
From above all modules, my task was to build the software for Restaurant/Gecory store Owner
Functional Requirements of Restaurant/Gecory store Owner Side
Sign up/Login
The Restaurant owner will be able to sign up/login to there account. Only one Restaurant details can be posted by one Restaurant owner. Restaurant deatails consists of Restaurant Name,Email,Address,City,State,Country,Postal code,Contanct Number,Password. If a user already has an account then he/she can enter the credentials as email id and password. If the credentials are incorrect, users will be redirected to log in page and a message will be displayed that, username or password is not valid.
Restaurant Dashboard
The following will be the details in this section:
Profile — The Restaurant Name, Owner’s Name, Restaurant photo, Restaurant Address (City, State, Country), Location from google search suggest API, Restaurant Contact Number, Delivery postal code areas, Edit Details
Restaurant status (Open / Closed) — This status will be managed by the restaurant owner and the same will reflect in the Customer’s application. For example, if the status is set “Closed” by the owner, it will show “Closed Now” to the customer. If ‘closed now’ status, the restaurant will not receive any orders
Manage Orders
Active orders — The orders will have the details as Search by keyword, Customer Name, Customer Address, Customer Contact Number, Dish Name, Cuisine Type, Quantity, Select order status (Confirm, Order in making and order picked up), Order Status (Confirm / Order in making / Order picked up by the Delivery person/ Delivered / Cancelled. These status except ‘delivered’ will be managed by restaurant owner. As soon as the ‘order is in making’ a request is sent to the nearby Delivery person’s app. The one who accepts, his/her GPS location will be tracked), Delivery person Name, Delivery person Contact Number and Total Amount. The Delivery person name, Delivery person contact number will be visible only after the nearby Delivery person has accepted the request.
Completed orders — The orders will have the details as Search by keyword, Order id, Customer Name, Customer Address, Customer Contact Number, Delivery person Name, Delivery person Contact Number, Dish Name, Cuisine Type, Quantity, Status (delivered) and Total Amount
Received rating — The Customer name, order id, order date, Star rating (out of five).
Wallet — This section will show the Total earned amount, receivable amount and redeem the earned amount
Notification — Received an order, Received rating, Customer cancelled the order
Account setting — The user will be able to change password and manage notification.
Logout — The user can logout to there account.
Add a Dish
Each restaurant owner able change their cusine with the help of this section.They can add new dishes to there menu as well as delete the the dishes from there menu board. Which will directly affect at customer application
Implementation
Step 1 (Front-End): Create a user-friendly UI as per the customer need into front-end framework like React/Angular. There are some website which helps you to get boost start by giving you some basics layouts and components.
Home Page
Login
Dashboard
Checkout Rapido Delivery site for the whole UI and work behind it.
Step 2(Database): Design your database first, before starting creating your API. You have to keep the track of the all required field which are used in UI as well as at the backend sides.
Go to MongoDB Atlas and create the new cluster with your preferable credentials. MongoDB Atlas gives you the free 512mb storage for free, so you can at least able to create your basic model.
After setting up you cluster you have to connect your application/ API to your database.For that go to connection >>connect to application. Now you will able see the link , copy the link and change the <password> with your own password. this link will help you to create a connection between your database and API.
Step 3(Building server files): First we will create the server file which listen to the response which we are sending from the client device.
Server.js
After that we have to connect our database to this file for that I am creating app.js file which will contain the link which we have generated from Step 2.
App.js
This file also contains all other functions such as CORS Config, Error handling, Routing, Morgan dev, etc.
After that, we have to create the schema for each and every route. Then you can able to create the endpoint of your route.
You can find the entire source code for your reference in my GitHub Repository Link to the Project:
Project created by Yash Vadaria And Malhar Trivedi