Rapid prototyping with Firebase and VueJs to Slow the Spread



The new normal in a post-coronavirus world is very different. As I sat a restaurant having dinner, I struggled to speak with my waiter because of their mask. Thinking about this problem I decided to create a prototype for an application which solves this issue, and would allow for retraunt waiters to communicate with patrons from a distance using their cell-phones. I decided to call this idea, Air-Dine, and bought Air-dine.com.

The Idea: Create an application where a restaurant patron can open a chat-room and order items from the waiter. Or request refills, new utensils, etc. I knew I could quickly build an application with this functionality. After wire framing something on pencil and paper. I felt confident I could implement it in JavaScript. 

Looking at open-source, I found a messaging application written for VueJs and cloned that repository. Reading the source code I knew I could tailor it to fit my idea. I spun up a new Firebase project and linked it to this repo. I took some time to think about the database design for Cloud Firestore, and came up with a clever structure. I needed to design a database where every restraunt has a unique revloving hash that can be attributed to a table. Authentication would be role based, with two available roles, Patron and Waiter. Both users can login to the application, when a patron opens the application and creates a chatroom they do so without creating any accounts and can only chat with their watitor. When a waiter signs into the application they can select and chat with any patron at their restraunt.

Chatroom database design






Air-dine.com landing page. Patron enters their Venue/Table code which is printed on the table. This then creates a private chatroom where they can communicate with their waiter.



 


After entering the chatroom, the patron is greeted with a page where they can message their waiter. Additionally they can click the FAB to add menu items to their table.