Built a tool – A No Touch QR Menu for Restaurants

Photo by Pixabay on Pexels.com

Covid-19 has disrupted our lives.

And restaurants have been badly hit by it.

One of the precautionary measures taken by restaurants around the world is replacing physical menus with digital menus.

Here is how it works:

Customers walk into the restaurant and find a table.

A QR code is displayed on the table.

Customers scan the code and get the menu on their phone.

I came across this idea on twitter . A developer(https://twitter.com/levelsio) had created a tool himself and shared about it.

I felt inspired by the idea and started working on one myself.

Here is the final product :

http://www.qrmenus.in/

If you are a restaurant owner you can use this tool to create a QR code for your menu.

Use the editor to add/edit menus , add logo , restaurant name and tagline.

Review the menu and click on ‘Generate’ to generate the QR code.

You can scan the generated QR code using your mobile and check the menu yourself.

This is the exact user experience which customers will experience.

You can then print the QR code. 9 copies of the QR code will be printed on a single A4 sheet paper.

You can cut them and affix them on your restaurant tables.

Technologies used:

For development:

Frontend:

HTML5, Javascript and CSS – I avoided using any UI framework to learn javascript better and also reduce the final size of the product.

Backend:

Google Firebase Realtime database – I researched for a free beginner product to store the menu details and stumbled on this . It is quite cool and easy to use. More than that it provides a free plan with a generous limit!

It is best used on desktop to create the QR code as you need to print the codes but I have also made it responsive on mobile.

Here is how it looks on desktop:

On mobile the preview section comes down for better user experience.

On clicking ‘Generate’ :

On clicking “Print”:

Please share it if you know some one who owns a restaurant or a hotel.

This is free to use.

Featured image (on home page) credits: People vector created by pikisuperstar – www.freepik.com

Posted

in

by

Tags:

Comments

Leave a Reply

Discover more from The Full Stack Developer

Subscribe now to keep reading and get access to the full archive.

Continue reading