Receiptify

Turn receipts into clarity. Scan, track, and understand your spending instantly so small purchases don’t turn into big surprises!

Comment

Inspiration

Every year, when tax season rolls in, my mother always has to keep track of each receipt by manually entering the totals of the receipts into her notebook and manually calculating the total amount of expenses for tax season. However, this tool is to help her with all that manual work and divide that time by 90%. Where the only 10% of work she would do is take a picture of the receipt.

Additionally, later this will go to real users, such as our school GCC, for students and faculty to use to integrate their lives with Receiptify and be able to track their spending, receipts, purchases, & travel reimbursements altogether without a sweat. One click and wala. Expense Tracking!!!!

What it does

The app takes a PNG, JPEG, or JPG image of a receipt/invoice and uses the Gemini API to extract the data of Location, Date of Receipt, and Total of the Receipt, displaying on the user interface categorized into four categories: Food, Entertainment, Utilities, Transport, or Invoice.

How we built it

We built this using VS Code as a React + Vite Project using npm modules. We first started to play around with antigravity and see how its features could help us generate and debug an app; however, due to free-credit limits, we then switched back to VS Code + Github Copilot to let us continue in our work. Github Copilot became a clutch as by being more specific with its internal chat box, we could debug and test our product more efficiently, as it also ran:

npm run lint
npm run build
npm run dev

To verify and debug for us any said changes based on our requests between the user-interface looks & interaction, logic, and SQL query editors updates for storage and processing.

Challenges we ran into

One of the first challenges we ran into was the setup of the project, which took the longest and was the most careful because of the .env.local file for the Gemini API Key and Supabase Database for SQL Query Editor, making sure that these are not pushed into the repo, otherwise chaos erupts.

VITE_SUPABASE_URL = ...
VITE_SUPABASE_ANON_KEY = ...
VITE_GEMINI_API_KEY = ...

Another challenge we ran into was deciding whether or not we would want to save the receipt image along with details extracted, because the trade-offs would be keeping track of the same items but stored in the same database, which decreases size of space. We did think to convert the image into its base64 component; however, with a string as long as that, as the receipts accumulate over time take up more space. So, our final decision was to save the image as PNG, JPEG, or JPG instead.

Accomplishments that we're proud of

As this was our first official Hackathon project, we are proud that we were able to finish the project and deploy it onto Vercel for others to use and interact with for their expenses upon physical receipts that accumulate and pile up over time, which later just become a hassle to keep track of manually.

What we learned

We learned that for any changes made that affect the data extraction or manipulation of data entered into the app must also be satisfied in the SQL Query for Supabase to make sure any deletion, manipulation, or addition is accounted for.

Perhaps this isn't an original app, perhaps this isn't the next thing to come to fruition. However, by all means, we are overjoyed to have the opportunity to build this project as a team in the allotted time of 24 hours, with the help and conducting of GitHub Copilot Chat. Nevertheless, this is our first real project where we learned how Supabase (backend) and Vercel/Codebase (frontend) speak to each other.

What's next for Receiptify

The next steps for Receiptify are to augment security and allow User Authentication via Google & Apple, as that would require OAuth 2.0 Credentials and setting up in our environment, both in the codebase and via Supabase. The next steps would also be to later integrate details from bank api's of one's account that are digital receipts and let the same principles of Receiptify be applied to said user's bank accounts that are connected.

Built With

Share this project:

Updates