Restaurant AR Menu Web App

The Brief Overview

The idea of self service inside a restaurant came to mind, where you can simply scan a QR code, access a restaurant menu and also place an order. The efficiency and low cost solution as opposed to hiring staff would be substantial in the long term. In a nutshell, I took this idea and built a fully functional prototype, including a backend dashboard for kitchen order management.

The Features

• View menu and order dishes
• Order submission to kitchen backend
• View dishes in AR
• Table checkout through web page

The Tech

The front end is built with a new framework called Svelte and Tailwind CSS. For management of the menu items, the web app was integrated with Sanity CMS, allowing the user to easily create new menu items, update information and manage review comments.

The AR functionality was enabled with AR.js, which is a open source AR library that supports recognition of square markers.

Some may argue that recognition of images would be better, but you still need a QR code as an entry point which is more convenient than manually typing in a web address. Secondly, there were not any free web AR libraries out there that supported image tracking at the moment of writing.

Demo Link

You may face an error when accessing the demo since I have disabled access from the app to the CMS due to limitations on a free account. Nevertheless you can view the video.

To view this demo, scan the QR code with your phone camera, and hover over the QR code to trigger the AR images.