Easy Hostels

Mohit Shah Pratham Patel

Information Technology Dept., Information Technology Dept.,
Charotar University of Science & Charotar University of Science &
Technology, Technology
Changa, India Changa, India
mohitpshah03@charusat.edu.in 20it105@charusat.edu.in

Guided By:

Sanket Suthar Nita Jhadav

Information Technology Dept.,
Charotar University of Science &
Technology,
Changa, India
Sanketsuthar.it@charusat.ac.in
Information Technology Dept.,
Charotar University of Science &
Technology,
Changa, India
nitajhadav.it@charusat.ac.in
Abstract-
Easy Hostels is an online Hostel Management System
which helps the hostel to keep the track of their of their hostel
services. This website eases the task of managing the stays or
the number of students staying at hostels, their payment details
and many other things such as food and etc.
Keywords-
Easy Hostels, React JS, Firebase
Methodology:
Software Requirement: VS-CODE (64-bit)
GOOGLE
Hardware Requirement: 8 GB RAM laptop
i7 processor
Language requirement: JavaScript
I. INTRODUCTION
Easy Hostels is software developed for managing
various activities in the hostel. For the past few years the
number of educational institutions is increasing rapidly.
Thereby the number of hostels is also increasing for the
accommodation of the students studying in this institution.
And hence there is a lot of strain on the person who are
running the hostel and software’s are not usually used in this
context. This particular project deals with the problems on
managing a hostel and avoids the problems which occur
when carried manually. Identification of the drawbacks of
the existing system leads to the designing of computerized
system that will be compatible to the existing system with
the system which is more user friendly and more GUI
oriented. We can improve the efficiency of the system, thus
overcome the drawbacks of the existing system. Easy
Hostels is an online Hostel Management System which
helps the hostel to keep the track of their of their hostel
services. This website eases the task of managing the stays
or the number of students staying at hostels, their payment
details and many other things such as food and etc. This
website will be very useful to the hostels having high
capacity.
ReactJS is a declarative, efficient, and
flexible JavaScript library for building reusable UI
components. It is an open-source, component-based front
end library which is responsible only for the view layer of
the application. It was initially developed and maintained
by Facebook and later used in its products like WhatsApp
& Instagram.
The main objective of ReactJS is to develop User
Interfaces (UI) that improves the speed of the apps. It uses
virtual DOM (JavaScript object), which improves the
performance of the app. The JavaScript virtual DOM is
faster than the regular DOM. We can use ReactJS on the
client and server-side as well as with other frameworks. It
uses component and data patterns that improve readability
and helps to maintain larger apps.
To create React app, we write React components that
correspond to various elements. We organize these
components inside higher level components which define the
application structure. For example, we take a form that
consists of many elements like input fields, labels, or
buttons. We can write each element of the form as React
components, and then we combine it into a higher-level
component, i.e., the form component itself. The form
components would specify the structure of the form along
with elements inside of it.
As the administrator of any hostel opens the website they will
have to login to the website using their credentials.
After logging into the website, they will see a home which
contains various components and they will also a dashboard
on the left-hand side of the home page. Homepage also
contains he admin account details at the top right corners of
the home page. On the right corner of the homepage there is
the logo and the details about the website
On the righthand side of the page there is dashboard which
contains many useful as well as main components of the
website. The components in the dashboard are Add Food,
List Food, Add student, view student, distribution form. This
all the add items are to be added by the administrator of the
hostel of which the account is logged in.
In this way the website provides a seamless user experience
to the administrator of the hostels which helps them or can
say eases the management of the hostels. This website helps
the administrators of the hostels to move out of the
conventional way of managing the hostels
II. RESULTS
As the administrator of any hostel opens the website they will
have to login to the website using their credentials.
 Fig.1 LOGIN PAGE
After logging into the website, they will see a
home which contains various components and they will also
a dashboard on the left-hand side of the home page.
Homepage also contains he admin account details at the top
right corners of the home page. On the right corner of the
homepage there is the logo and the details about the website
Fig.2 HOME PAGE
After clicking to the login the administrator will
be redirscted to the website home page which will at first glance
show the total number of students enrolled in their hostel and on
the top left corner they will see a button which will open the dash
board for the website which will help the administrator to use the
website easily without any problems the dashboard contains
many otions.
Fig. 3 DASHBOARD
On the righthand side of the page there is
dashboard which contains many useful as well as main
components of the website. The components in the
dashboard are Add Food, List Food, Add student, view
student, distribution form. This all the add items are to be
added by the administrator of the hostel of which the account
is logged in.
If the administrator clicks on the add food then
they will see a page in which they can add food items. If the
administrator clicks on the list food then they will see a page
where they can see all the list of food items in the menu or
the items which are added by the administrator. If the
administrator clicks on the add student then they will see a
page in which they can add the student details and add the
student to their database. If the administrator clicks on the
list student then they will see a page in which they can see
all the students with their details on the page.
Fig.4 ADMIN INFORMATION
As The administrator clicks on the top right corner on the
button name or termed as Admin then they can see their i.e
the administrator information such as the Name which will be
the organization name then email address which is provided
by the administrator at the time of login. And at last there will
be the password of the account which was provided by the
administrator at the tie of login.
If the administrator clicks on the add food on the dashboard
then they will see a page in which they can add food items.
Fig.1 ADD FOOD PAGE
Onto the add food page there will
multiple details asked from the administrator for the food
products they are providing at their hostel. The details
asked are Food ID, Food Name, Food Price. After adding
the asked details then administrator have to save the
details by clicking onto the save button.
If the administrator clicks on the list food then they will
see a page where they can see all the list of food items in
the menu or the items which are added by the
administrator.
Fig.2 USER LOGIN PAGE
Onto the Food list page the
administrator can see the list of the food added by their
organizations with the details of the each food items and
they can also search the particular food iems.The details
provided by the Food list page is Food ID, Food Name,
Food price, created at i.e the date at which the food was
created and the action.
If the administrator clicks on the add
student then they will see a page in which they can add the
student details and add the student to their database.
Fig.3 ADD STUDENT PAGE
Onto the add food student there
will multiple details asked from the administrator for the
students they want to enroll. The details asked are
Student Id, Name, roll no, age, class, hall name,status.
After adding the asked details then administrator have to
save the details by clicking onto the save button.
If the administrator clicks on the list student then they
will see a page in which they can see all the students with
their details on the page.
Fig.4 STUDENT LIST PAGE
Onto the student list page the administrator can
see all the students added by them with their details such
as Student Id, Name, roll no, age, class, hall
name,status.
 III. CONCLUSION REFERENCES
The proposed paper represents a Hostel Management system [1] https://www.javatpoint.com/react-introduction
which helps the hostel to keep the track of their of their hostel [2] https://reactjs.org/
services. This website eases the task of managing the stays or the
number of students staying at hostels, their payment details and [3] https://www.w3schools.com/REACT/DEFAULT.ASP
many other things such as food and etc. We can improve the [4] www.udemy.com
efficiency of the system, thus overcome the drawbacks of the
[5] Code With Harry
existing system.
[6] www.wallpaperaccess.com
[7] www.canva.com