MessBuddy

Project report submitted in partial fulfillment

Bachelor of Technology
in
Computer and Communication Engineering

by

Saransh Gupta - 19UCC110

Under Guidance of
Dr. Harsh C Trivedi

Department of Computer and Communication Engineering

May 2022
 The LNM Institute of Information Technology
Jaipur, India

CERTIFICATE

This is to certify that the project entitled “MessBuddy” ,submitted by Saransh

Gupta(19ucc110), Pranjal(19ucc127) and Kartik Srivastava(19ucc143) in partial fulfillment

of the requirement of a degree in Bachelor of Technology (B. Tech), is a Bonafide record of

work carried out by them at the Department of Electronics and Communication

Engineering, The LNM Institute of Information Technology, Jaipur, (Rajasthan) India, during

the academic session 2022-23 under my supervision and guidance and the same has not

been submitted elsewhere for the award of any other degree. In my opinion ,this report is of

the standard required for the award of the degree of Bachelor of Technology (B. Tech).

………………….. ….......…………………………

Date Adviser: Dr. Harsh C Trivedi

Page - 2
 Acknowledgement

We want to express our deepest gratitude to our BTP supervisor Dr Harsh Trvedi, Department

of Mathematics, The LNM Institute of Information Technology, for his inspiration, idea and

guidance for half completion of this project. Regards to our batchmates for their support

throughout the whole work. We are highly thankful to the IT department of The LNM Institute of

Information Technology for helping enormously to complete this work .

Page-3
 Abstract

As a part of our BTech Project, we aim to build this website in two phases - Frontend submodule
and the Backend submodule and then finally integrating the two submodules to make a
full-fledged mess-management application. In this phase, we have documented the process of
Front-end development via this report.

The app will have two user-ends : one for the users and the other for the mess authority to
access the information logged in by the users. We aim to build a fully responsive web-app that
can easily be accessed through smartphones and laptops. After an initial sign-up, students will
be able to log into their account every day and check the mess menu for the dinner/lunch.
Based on the menu displayed, they will decide whether or not to have the meal.

This data will be collected from all the students and sent to the mess administration and then
can utilize the data to make an informed decision about the amount of raw materials to be used
to prepare the meals for the students.

This report is focused on documenting the work done in making the web-app; starting from
planning, framework, and environment selection,along with the coding of the frontend and
backend of the website, and their integration. Successful website development would allow us
to reduce food-wastage in the mess to a large extent.

Page - 4
 Table of contents

Chapter 1 Introduction ……………………………………………………………………

1.1 Area of Work …………………………………………………………………….. 6

1.2 Problem Statement ………………………………………………………………. 6

1.3 Objective ………………………………………………………………………….. 7

Chapter 2 Website Overview ……………………………………………………………… 8

Chapter 3 Overview of the website ………………………………………………………. 12

Chapter 4 Backend and Database ………………………………………………………. 16

Chapter 4 Conclusion …………….………………………………………………………. 22

Page - 5
 Chapter 1

Introduction

1.1 Area of work

For any Project ,we should optimize the technique and resources which we are using. So
To get the best output from any process or task it is very important to compare the
resources which we are going to use in our project. Through this project we are trying to
find the best suitable technologies to implement our idea to give a hassle-free platform which
can reduce food wastage.

1.2 Problem Statement

The problem of food waste is a relatively modern one. Despite adequate food production, the
UN has reported that about 190 million Indians remain undernourished. It is further estimated
that the value of food wastage in India is around ₹92,000 crores per annum.

These are some bleak statistics, but they should help us realize the magnitude of the
problem of food waste, as much as inequity, in India. Nearly 40 per cent of the food produced in
India is wasted every year due to fragmented food systems and inefficient supply chains — a
figure estimated by the Food and Agricultural Organization (FAO). This is the loss that occurs
even before the food reaches the consumer.

The world recognises that no truly sustainable and developed country can exist without
tackling the issue of food waste, and while the challenge in front of us may be monumental,
some steps need to be taken sooner than others.

Page - 6
 The Food Waste Index Report 2021, from the United Nations Environment Programme
(UNEP) and partner organization WRAP, said that around 931 million tonnes of food waste was
generated globally in 2019. In India, the household food waste estimate is 50 kg per capita per
year, or 68,760,163 tonnes a year. It finds that in nearly every country that has measured food
waste, it was substantial, regardless of income level. It shows that most of this waste comes
from households, which discard 11 per cent of the total food available at the consumption stage
of the supply chain. Food services and retail outlets waste 5 percent and 2 percent respectively.
At a time when climate action is still lagging, 8-10 percent of global greenhouse gas emissions
are associated with food that is not consumed, when losses before consumer level are taken
into account.

The report noted that with 690 million people affected by hunger in 2019, an estimate
that is expected to rise sharply due to the COVID-19 pandemic, and three billion people unable
to afford a healthy diet, consumers need help to reduce food waste at home.

1.3 Objective

We aim to build a fully responsive web-app that can easily be accessed through smartphones
and laptops. After an initial sign-up, students will be able to log into their account every day and
check the mess menu for the dinner/lunch. Based on the menu displayed, they will decide
whether or not to have the meal. If they do not wish to eat, they could simply click on the opt-out
button.

This data will be collected from all the students and sent to the mess administration and then
can utilize the data to make an informed decision about the amount of raw materials to be used
to prepare the meals for the students.

Page - 7
 Chapter 2

Website Overview

Our website should serve the following purposes -

1. Website should have separate user ends – Students and Mess Authority.

2. Create an intuitive environment for the Mess Staff to check cancellations of a particular

meal.

3. The students should also be able to provide feedback to the mess staff.

4. Mess staff will have more access power as compared to students.

5. Website should work on both mobile and desktop.

6. Website should run on all operating systems.

7. Tech stack should be a standard one in making websites.

8. Create a fast-paced website focused on being user-friendly and security- safe.

9. Website should be dynamic and flexible.

10. It is not just a dummy website, but it can also be deployed on college servers.

Page-8
2.2 Technology Overview

We have used the Python language based Django framework to build the backend for our
project. We have also used the PostgreSQL database in our backend for storage and retrieval
of data. PostgreSQL also known as Postgres, is a free and open-source relational database
management system (RDBMS) emphasizing extensibility and SQL compliance. Both Django
and Postgresql are free and open-source. Django's primary goal is to ease the creation of
complex, database-driven websites.

We have created a React based responsive single-page web frontend. React is a free and
open-source front-end JavaScript library for building user interfaces based on UI components.

To deploy our application we will be using the Gunicorn application server. Gunicorn is one of
many WSGI server implementations, but it's particularly important because it is a stable,
commonly-used part of web app deployments that's powered some of the largest
Python-powered web applications in the world, such as Instagram. We’ll also be using Nginx as
our web server. Gunicorn as the application web server will be running behind Nginx – the front-
facing web server.

Page-9
2.3 UI/UX For the App

2.3.1 UI/UX for the proposed Web App

From the student’s point of view the function has to be kept very simple and effective.
The management end should also be very easy to access and follow, considering them to be
layman and with minimal technology understanding.

For designing the User Experience we divided the whole process into 2 phases.

Phase 1 : Students marking themselves absent for the meals they are not going to attend. For
this the requirement is a platform where students can log in and perform such action. The user
interface will be simple, displaying the menu for the upcoming meal and an option to opt out of
the meal if they do not wish to have the meal.

Phase 2 : Mess Management needs to have a person to see the number of absentees for the
next meal and accordingly adjust the quantity of the food. If the quantity of the food is lesser, the
overall production cost of the meal would decrease and there would be less food wastage.

Page-10
2.3.2 User Interface Design Tool

We used Figma to generate the prototype for the User Interface of our Web-app.
Figma is a vector graphics editor and prototyping tool which is primarily web-based, with
additional offline features enabled by desktop applications for macOS and Windows.The feature
set of Figma focuses on use in user interface and user experience design, with an emphasis on
real-time collaboration.

We focussed on keeping the user interface and the experience very minimalistic, while also
incorporating the important features of the app that we wanted to implement.

2.3.3 User Interface Design Process

We designed the interface for five screens of our application.

The landing page of our app displays our logo and consists of a sign up page where users can
register for our app by entering relevant details. Existing users can click on the login button and
move on to the sign-in page where users can enter their username and password to log into
their account.
After signing into their account, the first screen displays the time for the upcoming meal and a
button to ‘opt out’ of the meal if they do not wish to have their meal in the mess.
The app has an option to access the mess menu for the upcoming meal, hence saving them
from the hassle of checking the mail or a different app.

We have also included a feedback tab where students can provide feedback about the food they
are being served. This could be very beneficial as students can directly report their grievances
to the mess authorities themselves, making scope for improved food quality.

Page-11
 Chapter - 3

Overview of the Website

We are attaching all the pictures of our website including all its functionalities-

Pictures of Students side portal -

4.1 This is home page for student side portal it contains all options related to students such as -

1.Register 2.Login

Page - 12
4.2 This page allows login to the website.

4.3. This page gives the user access to opt out for the meal if they want to.

Page-13
4.4. This page shows the mess menu for the upcoming meal.

Page - 14
3.2 Salient Features

1. Fully interactive and user-friendly website made for Mess management for our college.

2. Two separate logins – student and Mess Staff.

3. Separate web pages for giving feedback, checking the mess menu, and opting out of the

meal.

4. Wastage of food will be reduced and students can also give feedback, all of this can be

done alone through our website.

5. The website can be used across devices like mobile phones, laptops, tablets, etc.

6. React.js framework is used for website development.

7. The backend is developed using Django.

8. It has an easy to use interface that will encourage students to log their data into the

website.

Page-15
 Chapter - 4

Backend and Database

4.1 Backend

4.1.1 Django

The Backend of this project is built using the popular python framework, Django. Django
is a high-level Python Web framework that encourages rapid development and clean pragmatic
design. A Web framework is a set of components that provide a standard way to develop
websites fast and easily.

It is also called batteries included framework because Django provides built-in features
for everything including Django Admin Interface, default database – SQLlite3, etc. When you’re
building a website, you always need a similar set of components: a way to handle user
authentication (signing up, signing in, signing out), a management panel for your website, forms,
a way to upload files, etc. Django gives you ready-made components to use and that too for
rapid development.

For example, Object-Relational Mapping(ORM), a programming technique for converting

Page - 16
4.1.2 Django REST Framework

To understand the work of the django REST framework, first we need to understand
what an API is.

API - Application Programming Interface(APIs) are mechanisms that enable two software
components to communicate with each other using a set of definitions and protocols. For
example, the weather bureau’s software system contains daily weather data. The weather app
on your phone “talks” to this system via APIs and shows you daily weather updates on your
phone.

There are different ways that APIs can work depending on when and why they were created, the
two most common are REST and SOAP :-

1. SOAP APIs These APIs use Simple Object Access Protocol. Client and server
exchange messages using XML. This is a less flexible API that was more popular in the
past.
2. REST APIs These are the most popular and flexible APIs found on the web today. The
client sends requests to the server as data. The server uses this client input to start
internal functions and returns output data back to the client. Let’s look at REST APIs in
more detail below.

Page - 17
REST APIs offer four main benefits:

1. Integration - APIs are used to integrate new applications with existing software systems. This
increases development speed because each functionality doesn’t have to be written from scratch.
You can use APIs to leverage existing code.

2. Innovation - Entire industries can change with the arrival of a new app. Businesses need to
respond quickly and support the rapid deployment of innovative services. They can do this by
making changes at the API level without having to re-write the whole code.

3. Expansion - APIs present a unique opportunity for businesses to meet their clients’ needs
across different platforms. For example, maps API allows map information integration via websites,
Android,iOS, etc. Any business can give similar access to their internal databases by using free or
paid APIs.

4. Ease of maintenance - The API acts as a gateway between two systems. Each system is
obliged to make internal changes so that the API is not impacted. This way, any future code changes
by one party do not impact the other party.

Our project uses the Django REST framework to build the REST API for the backend.

Django Rest Framework (DRF) is a package built on the top of Django to create web APIs. It
provides the most extensive features of Django, Object Relational Mapper (ORM), which allows
the interaction of databases in a Pythonic way.Hence the Python object can't be sent over the
network, so we need to translate Django models into the other formats like JSON, XML, and
vice-versa. This process is known as serialization, which the Django REST framework made
super easy.

DRF allows us to represent their functionality in the Django application in the form of REST
APIs. It is quite easy to do.If you like to get in-depth knowledge of DRF, you can read about how
to create REST API with the core Django framework.

Page - 18
4.2 Database

4.2.1 PostgreSQL

PostgreSQL is the world’s most advanced open source database and the fourth most
popular database. In development for more than 20 years, PostgreSQL is managed by a
well-organized and highly principled and experienced open source community. It is an
object-oriented database that is fully ACID compliant and highly extensible, enabling the
community to add new features and capabilities as workload demands evolve.

Because of its extensibility, PostgreSQL offers a wide variety of built-in PostgreSQL data types
including JSON, XML, HSTORE (key-value), Geo-spatial (PostGIS), IPv6; flexible indexing,
featuring composite indexes, GiST, SP- GiST, GIN; full Text Search, online index reorganization;
background workers such as a managed process known as Mongress, which accepts MongoDB
queries to interface with Postgres data; a contrib module interface: pgcrypto (data encryption),
pg_trgm (find 'similar' data), HSTORE (schema-less data); and extensive SQL support.

PostgreSQL runs on all major operating systems, including Linux, UNIX (AIX, BSD, HP-UX,
macOS, Solaris), and Windows. It offers the following programming languages: PL/pgSQL,
PL/SQL, Java, Python, Ruby, C/C+, PHP, Perl, Tcl, Scheme. Postgres also offers the following
Library interfaces: OCI, libpq, JDBC, ODBC, .NET, Perl, Python, Ruby, C/C+, PHP, Lisp,
Scheme, and Qt.

PostgreSQL databases provide enterprise-class database solutions and are used by a wide
variety of enterprises across many industries, including financial services, information
technology, government and media and communications.

Page - 19
4.2.2 Database Tables

There are 3 tables in the database of this project -

1. User - This table contains the data of all the users registered in the website.

User

- ID : Integer
- First Name : String
- Last Name : String
- Email ID : String
- Password : String
- is_Admin : Boolean

There are Six Attributes of any user, These are -

1. ID - This is an unique identifier for any particular user.

2. First Name - This attribute represents the first name of any user.

3. Last Name - This attribute represents the last name of any user.

4. Email ID - This attribute represents the registered email ID of the user.

5. Password - This attribute represents the password of the registered account of

the user.

6. is_Admin - This attribute shows YES if the corresponding user is the mess

authority, and NO otherwise.

2. User-Meal - This table maintains all the records for all the meals any user has opted

in/out.

Page - 20
 User-Meal
- User ID : Integer
- Date : Date
- Meal Type : String
- Status : Integer

There are 4 attributes in the user-meal table -

1. User ID - This attribute shows the unique ID of the corresponding User.

2. Date - This attribute shows the date of the particular entry.

3. Meal Type - This attribute shows whether the meal is Breakfast, Lunch or dinner.

4. Status - This attribute will show 1, if the user is opted in for that meal and 0, if the user is

opted out for the meal.

3. Day - Meal - This table maintains a menu for a particular meal for a particular Day.

This table can be updated.

Day-Meal

- Day : String
- Meal Type : String
- Dish : String

There are 3 attributes in this table -

1. Day - This attribute represents one of the seven days.

2. Meal Type - This attribute represents whether the meal is Breakfast, Lunch or Dinner.

3. Dish - This attribute represents the corresponding dish in the menu.

Page - 21
 Conclusion

This is a submodule of a complete MessBuddy project which we will integrate and deploy next

semester. This B.Tech. project submodule will help Mess authorities reduce food wastage by

collecting data of students who wish to opt-out of having a meal in the mess on a particular day

or time. Our website is user-friendly and easy to use. It provides an easy passage for students

in opting out of a slot of meal on the website and which is based on the date and timing of the

meal. Our website will allow the mess authorities to monitor the number of students opting out of

the meal at a particular day and a slot, which will let them plan their preparations accordingly.

Our website will also provide the mess menu to students, where they can check the menu of the

upcoming days. Another crucial thing we offer is the ability to provide feedback on food quality

and service meal-wise every day.

REFERENCES

1. Learning React, 2nd Edition by O’REILLY

2. Django- https://www.w3schools.com/django/index.php

3. MySQL- https://www.w3schools.com/mysql/default.asp

4. MySQL development by Saurabh Shukla Sir - https://youtu.be/v1otHJGlV5g

Page - 22