Inspiration
This year all three of us became off campus students because of the loss of upperclassmen housing. Like many other students, we switched to a smaller meal plan and began to cook more for ourselves with our own groceries due to no longer living in a dorm environment. A problem we have faced in this situation is not having a centralized place to track both the status of our meal plan and our external expenses. While some of us have used an excel spreadsheet, it is tedious and requires tracking and maintaining everything by ourselves.
The goal of this application was to create a platform targeted towards William & Mary students that provides an easy and streamlined way for students to automate their spending tracking for both meal plans and external spending. We have automated meal plans by linking the application to the financial information provided on the school's website, and have reduced the work of tallying financial information by creating a way to automatically grab information from a receipt.
What it does
Overall, this is a financial application where users can store and view their spending information from on campus and off. Users can view the status of their meal plan, including meal swipes, dining dollars, and flex money to keep track of how much they have left. The idea of our app is that users would be able to scan receipts, which stores their information and keeps track of each purchase as well as a running total per month and overall. The off campus section supports the ability for users to create budgets and will help keep track of if they are keeping with their budget.
How we built it
We began our design process by drawing out initial ideas for what we wanted our application to look like and discussing the frameworks for functionality.
We built the backend with Flask and the front end with React.js. Additionally, within the backend, there are two additional python scripts. The first one is a web-scraper that uses Selenium that, using information from the user log in forum, automates logging into and obtaining the user's dining plan information to send it back to the front end for display and summary. The second one is a script that utilizes Python-tesseract to perform OCR in grabbing the total sum of a purchase automatically given an image of a receipt. The purpose of Flask is to connect these back end components with the React front end, which is the visual website component of the application.
Challenges we ran into
A major challenge we ran into in the beginning was finding a platform that would run on all of our personal devices. We initially wanted to create a mobile (IOS) application, but it ended up requiring more software and experience than we had access. We also had trouble completely connecting the backend to the frontend due to lack of previous experience. Specifically, we ran into a CORS issue towards the end, which prevented us for a while from getting data from Flask to our frontend.
Accomplishments that we're proud of
An accomplishment we are proud of is our ability to collaborate with our different skill sets to create a final product. Each of us have very different computer science skill sets, and instead of these differences acting as a wedge in the development process, we were able to leverage these differences in a way that was beneficial and contributed in a unique way to the final product. Additionally, despite our differences and lack of understanding of certain topics, we were able to still act as a support for our team members who did, whether that be through researching for them or helping them talk through debugging. It was our first time as a team creating a full stack application and while we were not able to fulfill every feature we wanted, we are proud of what we were able to accomplish.
One specific instance of victory was successfully passing the information from the dining information from the backend to the frontend for display. None of us had ever done this before and it took until 4 AM to successfully achieve it. But we did it!
What we learned
We learned a lot about how to develop a full stack application from the idea phase through development. Even if we weren't able to fully connect the backend and frontend, we gained a lot of valuable experience in learning how to set them up and the issues that arise when trying to connect them (as well as how to solve some of those issues).
What's next for Budget Budgie
In the future, we would develop a stronger connection between the frontend and backend, specifically for storing receipts. We would also have more features that would aid students, such as a connection to Venmo to allow roommates to split receipts easier. Lastly, we think it would be interesting to add graphs and statistics to our application to allow users to be more engaged with their spending habits and be able to keep track of their progress toward goals.
Log in or sign up for Devpost to join the conversation.