Google Gemini – Invoice Extractor app

Hey Ma, Look What I Vibe-Coded: Ever wanted to automate the filing of your receipts and invoices? Yesterday, I made it happen by “vibe-coding” a web app with Google Gemini Pro.

❌ Problem: Our purchase receipts come in varying paper and digital formats, and it is a pain to compile the data in a spreadsheet. When filing expense claims, we usually have to type the details into Excel manually.

✅ Solution: Create a web app that can:
1️⃣ Read multiple images or PDFs of receipts.
2️⃣ Extract key data – Brand, product details, date of purchase, final purchase price.
3️⃣ Paste the extracted data into a spreadsheet table in a consistent format.

Here’s the app, you can try uploading your own receipts and invoices: https://gemini.google.com/share/c2479043da05

You can also click on “Copy Canvas” to make your own copy and adapt it for your own needs in Gemini. You can add data fields, change the name of the app, and so on.

It’s a long story how I managed to get this app working, but it was a three-hour process that really tested my patience.

I first tried Claude and ChatGPT, and they kept making duds. Gemini failed initially, but I iterated my prompts and the app started to sputter to life. I tested the app with multiple files until I ironed the kinks out. What amazed me was that it could extract the correct data from badly-faded receipts.

Then I put the finishing touches by adding my profile links and a nice color gradient to the background. Voila!

FYI, I have very little coding ability but I managed to work with Gen AI to make a truly useful app for myself. You can do it too! The implications of this – that anyone can now design their own app to fix their pain points – are massive.