Clean Eats

Logo
Menu Page
Cart Page
Checkout/Payment Screen
Instructions Page & Table QR Code
QR code demo on restaurant table
Google Firebase
Restaurant view of customer table
Restaurant page to edit menu
Restaurant Dashboard with Metrics
Octobuzz
NCR API access via Postman

Inspiration:

With the challenges of COVID today, public health and safety has never been a bigger priority which inspired us to rethink modern dining experiences. Many restaurants face the issue of interacting with numerous people everyday and risking the health of both the workers and the customers. With our web app we have created a contactless dining interaction to ensure safety and efficiency. This is important to us because many businesses especially small businesses have suffered due to the reduced amounts of people dining in which was a motivator for us to bridge the gap between keeping people connected digitally while ensuring safety is a priority. Furthermore, on the restaurant side, we will help merchants reduce cost of shipments and how many employees are working at a time because the analytics feature on our dashboard can track the busiest times, restaurants can use this data to adjust accordingly. This monitoring will optimize the performance and save money for restaurants and prioritize safety of workers by having only the necessary amount of people working at a time.

What it does:

Clean Eats aims to reimagine dining experiences by eliminating as much contact to ensure safety as well as optimize restaurant shipments and scheduling my analyzing trends in the data as to busy times and days of weeks as well as most popular food items. With Clean Eats, restaurants can keep track of multiple tables and orders in real time. Likewise, customers can simply scan the QR code on a table and begin their dining experiences completely paperless and contactless. Users can place orders after pursuing the menu and add notes for dietary restrictions and allergies. On the restaurant's end, they will confirm the order and the user will see the stages of their food’s preparation going from Order Pending, Order Received, Food Ready, Meal Complete, and Table Sanitized. Once the customers have their food, they will be able to request refills, a waiter, order more food, or finish their dining experience all at their fingertips. Want to dine in while ensuring your and others safety? Want to continue supporting local restaurants but not risking your health? No problem with Clean Eats!

How I built it:

For the frontend, we used ReactJS combined with Bootstrap for styling. We created two separate React apps, one to be utilized by a customer, and the other to be utilized by a participating restaurant. We did this because the two types of users have completely different functionalities, but we had to connect them somehow, which is where the backend comes in. For the backend database, we used Google Firebase (the same database across both React apps) to hold various restaurants and their menus, which update in real-time as restaurants change their items and also to store requests from different tables of customers. We also used Express.js for the backend server in conjunction with NodeJS and Firebase. Lastly, we used NCR's APIs with Postman in order to keep track of our catalogs and transactions.

Challenges I ran into:

The primary challenge was getting familiar with NCR’s APIs and determining how we wanted to utilize POST requests through the frontend rather than through a backend server. However, we eventually realized that this was not the way the API was built to function, and therefore, although we already had the code for it, we had trouble accessing data from the API. We had to devise a plan that would enable us to thoroughly understand how the APIs worked so that we could properly utilize them without having previous experience with them. Two of our four members did not have previous experience with React and Bootstrap so the next challenge was balancing learning and developing the project. Before we could make a lot of leeway on the first night, we had to learn a lot about React as well as the documentation for the APIs so that we could create the most efficient solution.

Accomplishments that we're proud of:

We are extremely proud of implementing NCR’s APIs effectively and seamlessly so that we could effectively create a solution to the problems pertaining to dining. We are very proud of our execution of our idea since we worked tirelessly to create the most complete project based on our initial idea that we could. Overall, the interface for both the restaurant view and customer view looks very clean and consistent and the user experience is intuitive and efficient.

What we learned:

We learned a ton about the NCR APIs and how to effectively incorporate them into frameworks and tools we already knew. We learned a lot about React and Bootstrap so that we could make the user experience very sleek as well as learning more about Firebase to store the state of a restaurant. Moreover, we learned how to collaborate more effectively as a team so that we could all utilize the skills we previously knew to maximize time and efficiency.

What's next for Clean Eats:

We want to use Clean Eats on a large scale and enable any restaurant to use this platform. We are currently using one restaurant, Olive Garden, as an example, but ideally every restaurant will work and can upload their restaurant. Furthermore, we hope to continue developing to expand the use and make it more applicable to more restaurants.