Receiptable

Track your expenses with the help of your receipts! Scan them to automatically extract purchase data, and visualize your spending habits with our all-in-one mobile app.

Comment

Inspiration

As college students, it can be difficult to keep track of everything we're spending on (boba, an Uber, concert tickets, and more all add up fast!), so we thought - we can make use of receipts to track these purchases! We also thought that being able to view our spending habits in graphical form could help us better understand if we are meeting our budgets, and general patterns.

What it does

Our project is a mobile application that allows users to 1) create accounts and log in, 2) track new receipts by either scanning them, uploading a picture, or manually entering data, and 3) view insights from their receipt data.

How we built it

We first decided to make it a mobile app to utilize a camera scanning function, and chose React Native because we wanted to build off of our React experience. Next, we built a simple prototype in Figma to confirm what we wanted it to look like. We then built up our database and schema with MongoDB, a NoSQL database, and decided to make a REST API backend to communicate with it.

Challenges we ran into

We ran into a lot of challenges!

  • Connecting to MongoDB: permission errors, the wrong name for an env file
  • Debugging React Native in general: it was difficult to get it to open and load properly, fonts not loading, etc
  • React Native Navigation issues: not showing tabs (had to figure out a workaround for this)
  • Node version issues
  • Docker issues
  • Integrating OCR (text recognition) and image scanning tools into our app

Accomplishments that we're proud of

  • Creating an app that runs with React Native and Expo
  • Getting Redash to work, and access the graph from its API
  • Using text recognition with Tesseract

What we learned

  • How to collaborate on Git effectively: we made use of a "trunk-based" development approach, where we made many commits to pull from each other and keep a consistent main branch
  • How to use React Native and Expo

What's next for Receiptable

  • Increasing connection to the database/backend
  • More visualizations
  • Security with authentication
  • Better text recognition with different image formats
Share this project:

Updates