Food Ordering Application for Canteen using React Native

DOI : 10.17577/IJERTV9IS060045

Download Full-Text PDF Cite this Publication

Text Only Version

Food Ordering Application for Canteen using React Native

Joseph George1, Sreenath P2, Siddharth K G2, Jeswill Paulose2

*1 Asst Professor, Dept of CSE, Adi Shankara Institute of Engineering and Technology Kalady, Ernakulam

*2 Students, Dept of CSE, Adi Shankara Institute of Engineering and Technology Kalady, Ernakulam

Abstract- Food ordering applications have changed a lot in restaurant sectors. People order online more than dine in options. Nowadays different schools, colleges and offices consist of canteens which provide food for the people in the respective institutions. Taking advantage of the upgradation in technology, this project aims to implement a digital touch to the way canteen function, in order to increase the speed of the service provided. This project aims at replacing the traditional food ordering system in canteens by using a mobile application. The user can order the required food from the canteen through the app and pay for it. Later the user can go and takeaway the order from the canteen by scanning the QR encrypted bill. The QR code generated is scanned with another app and the data is verified with database. With this the time taken to stand in queue in canteen can be saved. The customer can rate the order depending upon his experience. The customers details and order history are saved in a main database. This solution speeds up the food ordering process and is also an attractive, error free method thanks to the digital aspects involved.

Index Terms- Android, Food Ordering System, QR Code, React Native


    The canteens in different institutions mainly follow pay and use method. That is we need to first pay for the things we want and then they deliver the items we ordered. Most of the people in different institutions depend on the canteens for their meals and snacks because of their busy life. To keep up with the busy and tight schedule, they need fast,quick,reliable, & anytime-anywhere assistance for different tasks they do daily. They don't have time & energy to cook. Due to this reason there is heavy rush in canteen during breakfast, lunch and dinner time. These hours are mainly peak hours in canteen schedule. Since the canteen uses pay and use method, the people need to wait in heavy queues to order food items and there are situations in which the desired food would not be available even after waiting in long queue. Also, one important factor is time, intervals in different institutions have fixed time. Within this time they have to take refreshments/meals and come back. As mentioned above a lot of time will be wasted if there is rush in bill counter for ordering food. This study aims in reducing the time taken to order the food in canteen standing in queues and also to digitalize the food ordering system. First the user needs to install FOODTOPIA application in the mobile and the user can see different food items available in their institution canteens. The user can order food through the application and

    the payment can be done online. After the payment a bill will be generated using with a QR code and this bill need to be scanned in the canteen to redeem the food ordered. Since everyone uses smartphone and internet in it this can be easily implemented. The food items need to be updated by canteen authority as needed. This project deals with food ordering system for canteens. This topic includes scope of the project, existing environment, proposed environment and design and implementation constraints.


    Swiggy is application which can be used in smartphone to order food from restaurants near you. If the restaurant is far away then the delivery charge increases. In swiggy there is no QR code generation. However, when an order is placed, the ordered item is delivered at your doorstop. Payment can be done through online as well as offline mode. In swiggy, the customer needs to first order the required food from the hotel, once the order is placed, the order notification is given to restaurant and they starts preparing the food, meanwhile a swiggy delivery partner is assigned to deliver the prepared food step. This application based on a chain of restaurants who are registered under swiggy[5][6].

    The next advancement was QORDER. It is a portable ordering system for Android devices. Here the waiter approaches the customers table with the QOrder, a hand held device, rather than the traditional notepad. He uses the touch screen to enter the order information and then sends it to the kitchen in real time for processing. Simultaneously, the POS system receives the sales information for the purpose of billing. QOrder uses WIFI to easily access every corner of the restaurant, encompassing all the tables establishes within. Once the customer wishes to leave, the waiter uses his belt printer to print the receipt and processes payment with the handheld unit much like he would on the POS system. But there are still many areas which require serious attention. Changes in the menu card to urge obviate the heap of paper based records, to assure the customer that hell be served with what he has ordered, to record the customer feedback. In order to establish this, the institution needs to create an external WIFI network which is not connect with institutions asset, data and all.


    An Application is developed for the users to order the food items. Users first need to install the application FoodTopia and the user need to register using a mobile number. The mobile number is verified with the help of the onetime password. Once the user is verified, they can access the food menu and place order. After selecting the desired food item, the user needs to do the payment for the selected items. Once the payment is done, the order is placed and a QR code is generated for the user which is needed to be shown in the canteen to redeem the order.

    The flow of ordering is depicted in figure 3.1.

    Figure 3.1: Order Placing Flow

    FoodTopia application has a user-friendly layout. Apart from the main menu of food items, there are other sections. Cart section allows to update or modify the products that are added to cart. The Order History sections list the past orders placed

    by the particular user. The Screenshot of ordering food and generation of QR code in the application is shown in the figure 3.2 and figure 3.3

    Figure 3.2: Ordering in FoodTopia Application

    Figure 3.3: QR Code Generation after payment

    After adding items to cart, the user after payment will receive a QR Code as shown in figure 3.3

    QRCS is an application which is used by canteen employees to scan the system generated QR code to verify the order and approve the order so that the delivery status is updated in the database.

    On scanning QR code the details of order can be viewed as shown in figure 3.4

    Figure 3.4: Details after scanning QR Code

    Both the applications are developed using React Native [1]. Here we use React Native which is an open source mobile app development framework. It uses JavaScript. The main advantage of using this framework is the ease of rebuilding the code for different platforms like IOS, Web etc.

    On the Server side there are two administrators,

    1. Super Admin

    2. Branch Admin

    Super Admin is the one who create branches and assign a branch head for each. Branch head is called the Branch Admin who is responsible for the activities of their branch. He can add items to the menu, update the stock and price, approve order and view order history.

    The administration is handled usin a website. There are separate login for Super and Branch Admins. This website is developed using React at front-end and Node at back-end. The Server is hosted in Google Cloud (App Engine). Development of this website required additional libraries which can be integrated easily using App Engine. Command Line is used for deploying web server on App Engine.

    Firebase Authentication is used to manage the users and for OTP verification [2][4]. MongoDB is used to store the details of food items. MongoDB Atlas provides server-less deployment[3]. Once the user loads the application the server updates the menu in a real time basis.


    The developed application and the website are working perfectly with the Realtime database. The time which was wasted in ordering the food item standing in queues are been removed and digitalized. Before a user wasted anywhere between 5-10 mins for standing in queue and placing order. It has been reduced to an average of about 3 mins.


    Since the digital transformation is updating regularly, there would be many updates in application development in future. Technologies would also change simultaneously and bring up major changes in every sector. The system can be further expanded on to IOS and Web platforms easily since React Native framework is used. The order history of each user can be saved and can be fed as training set for a suggestion system which suggests food items based on past order history. Machine Learning can be integrated to do the same.


    This paper discusses about developing an application for users within an institution which can be used to order food items from the canteens within an institution. The advantage of the system is that the people does not need to stand in queues to order food items in canteen. Since there is no queues social distancing can be maintained. With this application the users can be able to view food items available rather than going into the canteen or food court and checking it. This app also supports online payment hence we can do cashless transactions. It also contributes to the digitalization of the world and technology. A QR code is used as a bill which can be shown in canteen for food delivery by doing so the paper used for printing the bills is saved. It is therefore concluded that the proposed food ordering system is time saving and error free as compared to the traditional system.


  1. Kaushik, Vipul & Gupta, Kamali & Deepali, Gupta. (2019). React Native Application Development.

  2. Khawas, Chunnu & Shah, Pritam. (2018). Application of Firebase in Android App Development-A Study. International Journal of Computer Applications. 179. 49-53. 10.5120/ijca2018917200.

  3. Bialek B. (2019) MongoDB: The Journey from a Relational to a Document-Based Database for FIS Balance Sheet Management. In: Liermann V., Stegmann C. (eds) The Impact of Digital Transformation and FinTech on the Finance Professional. Palgrave Macmillan, Cham

  4. Moroney L. (2017) Using Authentication in Firebase. In: The Definitive Guide to Firebase. Apress, Berkeley, CA

  5. Dr.Vijaya lakshmi Kanteti(2018), A study on online food delivery companies in India, IRJMST Vol 9 Issue 3 [Year 2018]ISSN2250 1959(online)23489367(Print), id=6578.pdf.

  6. Bagla, R. K., Khan, J. (2017). Customers expectations and satisfaction with online food ordering portals. Prabandhan: Indian Journal of Management, 10(11), 3144

Leave a Reply