Given the impact of COVID19 on the hospitality sector and the changing nature of the dining out experience we wanted to provide an easy to use 'order at the table' solution for restaurants that requires no technical expertise on behalf of the restauranteur and minimal setup time.
What it does
With TapTable restaurant owners can sign up and connect their account to an existing Square POS account. As long as they have a Restaurant PoS system setup with Square, their menu and locations will be automatically pulled into the TapTable system.
The system automatically generates unique QR codes and NFC URLs for each table in a restaurant and our team is able to manufacture and encode table top promotional materials (e.g. table talkers) that are sent to the restaurant owner after sign up.
When people visit the restaurant they can interact with the table talker by tapping it with an NFC smartphone, scanning the QR code with their phone's camera or by visiting https://order.taptable.io and scanning the QR code with the built-in camera widget. The user will then see the restaurant's menu where they can select items, add items to their order, and complete checkout. The table number will be automatically selected and the user can pay with credit or debit card, Google Pay or Apple Pay.
The order is then forwarded to the Square Restaurant PoS to be picked up by restaurant staff and the order brought to the users table.
How we built it
The frontend is built on Angular, for both the portal and the order pages. We use MongoDB for persistent storage and NodeJS as an API layer to query MongoDB and the Square API.
We've built the system using Square OAuth, allowing a restaurant to link their Square account with their TapTable account so that we can make queries to Square on the users behalf.
The menu is then listed using the Square Catalog API. Orders are created using the Orders API and then paid with using the Payment API. We have queries and checks on the serverside to ensure orders are paid for and relay this state to the user.
Challenges we ran into
Time constraints have meant we weren't able to polish the portal, and more features are required on the order frontend to make it complete.
There are also some limits to the Square API (it can't be amazing for everything!) which we'll need to work into the system, such as re-ordering positions for categories and items provided by the Catalog API.
Accomplishments that we're proud of
- Hitting a point where we're very pleased with the UX and speed of the order frontend when creating an order.
- Creating a nice brand to showcase the solution
- Testing the solution end to end and seeing a very smooth ordering process
- Getting QR scanning working in the browser
What we learned
How to get QR scanning working in the browser
Animations and route animations in Angular.
Deep dive into a variety of Square APIs, and finding they're pleasantly easy to work with!
What's next for TapTable
- Complete features for the order page
- Add payment subscription functionality to the portal
- Build additional features and functionality to the platform based on feedback from beta users