Scan receipts and visualize stuff you’re buying

We wanted a personal finance tracker that returns data in an easy-to-understand way. For example, it's difficult to imagine what $200 of food looks like without images of the food itself. So we decided to visualize personal expenditures with emojis.

We started by setting up a few basic web pages for the different features we wanted to implement, while learning how to use Firebase so that each user's information can be saved between page reloads. After connecting the two we added our visualizations (calendar and emoji grid) and made minor visual edits. Our last step was adding a receipt picture upload option.

A few challenges we faced along the way:

  • adding the automatic receipt scanner that would have made the form submission process much faster
  • allowing for more user customization
  • deciding the best visualizations
  • learning how to use Firebase and retrieving information from our database
  • adding a text-to-emoji lookup API that did not work on the client side

One lesson we learned from these challenges is that it's worth spending the time to plan the code structure more extensively before starting (e.g. if we had started with React then several features we wanted to implement would have been more doable). Another lesson is that we can't hesitate too much with trying new APIs, frameworks, etc. since we have limited time and any solution might make the rest of our project much simpler to implement.

Built With

Share this project: