Receipt Trail

Receipt Trail is a user friendly web application that parses uploaded pictures of receipts and keeps track of your expenses! Users can view their total expenses in varying graphs

Comment 1

Inspiration

Lots of people have random paper receipts scattered around their houses or stacked in their wallets. We wanted to create a web app that will manage receipt information in one place for users to easily view later instead of having to track down a physical "paper trail" of receipts! We wanted to make it as easy as possible for people to track and view their expenses, to encourage financial responsibility.

What it does

Receipt Trail allows users to upload pictures of receipts. It then parses those receipts using the Google Vision AI API and pulls out the total price, the tax amount, and the date of transaction. Users can edit and confirm these values before submitting them to Firebase. The user can manage all their expenses and receipts in the Expenses tab. The user can analyze all the receipts they've added in various graphs (total v. tax, monthly expenses) created by Toast UI. Receipt Trail also supports user creation, user authentication and all receipt data through Firebase.

How we built it

Our frontend is React.js with the Semantic UI for basic styling and Toast UI to render graphs with our data. The backend is an express.js web server that is connected to Firebase.

Challenges we ran into

The first issue we faced we setting up Firebase with React.js. We had previous experience with Vue.js and Firebase, so figuring out how to work it with React took a couple hours and lots of google searches. The second issue we ran into was figuring out how we wanted to set up the backend. Both of us have different backend experience, so we came together and decided to use both cloud functions and a express.js server to run our routes. The main challenge of this project was figuring out how to parse the response data from the Google Vision AI API. We had to write a function that would filter through all the returned text based on it's description and coordinates, then return the appropriate values for total, tax, and date.

Accomplishments that we're proud of

We are super proud that in such a short time we were able to put together a complete single-paged web application with React.js and learn how to connect that to Firebase (something we have never done before). We were able to combine our previous knowledge into a project that uses tech that each of us is proficient and create a finished product. We also were able to use the Google Vision API for the first time and successfully parse pictures of receipts! (It's amazing how powerful this AI is!)

What we learned

  • How to design a web application (deciding frontend framework, how to set up backend routes)
  • How to connect Firebase to Express and React.js
  • How to structure Firebase to fit our needs
  • How to upload photos to Firebase Storage (backend routes using busboy library and connecting to frontend)
  • How to parse data from the Google Vision AI API

What's next for Receipt Trail

  • Improve receipt parsing that can handle more edge cases and also find individual items, sales, vendor, etc.
  • More customized UI
  • Better onboarding with a landing page
  • Mobile version to allow users to easily take and upload pictures of their receipts
  • Create a Chrome Extension to allow users to parse and store digital receipts

Built With

Share this project:

Updates