A Receipt Scanning & Expense Tracking Application
Angular 1.6
Cordova
Ionic 1
Amazon Web Services
PostgreSQL
Tesseract
D3
Express
NodeJS
Sketch
Mocha
Budgie is a cross-platform mobile application that allows users to track their food expenses using receipt scanning and data visualization. It is built on Cordova using Ionic. This is a week-long group project from quarter 3 of Galvanize's 24-week web development immersion course. My contributions included OCR image-to-text recognition, wireframing, and cross-platform styling.
I created the wireframes in Sketch. It was a helpful way visualize the project, plan routes, and account for mobile gestures.
This was my first time experimenting with OCR, and it was a lot of fun. I chose to use Tesseract because it is free and has substantial documentation.
User clicks camera icon to select receipt photo from device camera.
Device camera opens, allowing user to select a receipt photo.
Receipt entry is autopopulated with items and prices from selected photo.
The controller's takePicture() function requests access to mobile device's camera and returns selected image in base64 format. The image is then processed server-side, returning a list of receipt items and prices detected by Tesseract OCR.
On the server side, the base64 image is uploaded and written to a temporary PNG file. The image is then preprocessed with an ImageMagick script to increase accuracy, and the resulting TIF file is processed using Tesseract OCR. This returns a string of text, which is then parsed into receipt items and prices using a regular expression. The resulting lines are returned to the front-end as JSON.