As college students, we're always on a tight budget. However, we're always spending money whether it's the need for a new textbook, meeting a friend for dinner, or simply grabbing the daily cup of coffee in the morning. We wanted to create a website that would allow us to visualize our expenses and digitally track what exactly we're spending and set limits for our expenditures.

What it does

Budget Up displays your expenses and divides the items up by category (e.g. food, clothing). It then stores the items and corresponding prices in a database that is updated in realtime.

How I built it

We designed the website using javascript, html, css, and react. To render the webpages, we used the Python web-frame Flask. We are also storing our data in a database using Firebase.

Challenges I ran into

Connecting the front-end and back-end as the UI was done in javascript/html while the backend was primarily done in Flask. Connecting the database to everything was also a challenge and caused us to step back and reevaluate where we were at.

Accomplishments that I'm proud of

Being able to design a nice clean interface and creating a database component. Initially we did not think we would be able to create and store our data in a database so we are happy that we accomplished that.

What I learned

Both the back-end and front-end are challenging, but connecting the two together can also be a challenge in itself. Through this challenge, we learned new technologies such as Firebase and React. For next time, we should allocate more time and develop a strategy from the beginning as to how we plan on connecting the two components together.

What's next for Budget Up

We would like to incorporate OCR features like uploading an image of a receipt and then having the items and prices automatically be recorded and stored into the database and displayed on the webpages.

Share this project: