Tabbot Project Case Study

Mar, 07 2024

Tabbot was an iOS app that promises to help you split the dinner bill. It was inspired by a birthday dinner of 12 and a restaurant requirement of only one credit card per bill. The host was stuck with a very expensive tab and the cell phone numbers of only a few people at the table. Getting paid back was painful. Tabbot addresses this issue by using a photo of a receipt to generate a unique webpage for each tab with an interactive list of items so that your group can claim their order. What they owe is then calculated for them.

Tabbot was built with React Native CLI, React (NextJS), AWS Textract, S3, and Lambda functions with Supabase as a backend. There are two components: the web app, and the iOS app. The web app serves as a lightweight interface where users without the app are able to claim their order. The intention was to never force someone to download and sign up for an app just to pair their friend back. But, universal linking is used to deep link into the iOS app if you had it installed and clicked on a receipt's URL.

The React Native app is where most of Tabbot's features can be seen. This is where a user would upload a photo of a new receipt, view orders, and track past receipts. Once a user selects a photo of their receipt on the UI, it gets uploaded to a "to be annotated" S3 bucket. This event triggers a Lambda function which calls AWS's Textract service to perform object character recognition on the image. Side note: I was VERY impressed by Textract. It performed way better than I expected, even on handwritten tips and totals.

Once the OCR is complete, all of the line items that are detected from the photo get uploaded to the Supabase backend and assigned to a new receipt. The annotated photo is then saved in a separate S3 bucket. By using server side rendering in NextJS we are able to generate a unique URL for each receipt. A webpage with an image of the annotated receipt and all line items we detected from OCR are listed. From there, it's a very similar interface on both the iOS app and the webpage to claim your items. However, only the receipt's owner using iOS app can edit the receipt details to prevent tampering.