CrowdBudget

Making cost of living expenses transparent to everyone!

Comment

Inspiration

As college students graduating and trying to find jobs in the real world, we’ve noticed that not all salaries are the same. A $50,000 salary in California does not provide the same lifestyle as the same salary does in Texas. Trying to find the cost of living for the state you want to move to is often not an easy task. CrowdBudget solves this problem by crowdsourcing budgets across the United States. Using our interactive map, users can view the average person's budget in a given location and compare it with their own.

What It Does

CrowdBudget is a browser-based application that allows users to submit and compare their current monthly budgets in their current state to average monthly budgets per state around the United States. Using the CrowdBudget form, users can submit their estimated monthly expenses, consisting of the following areas of interest: rent, bills, gas, groceries, loans, restaurants, lifestyle, savings, and other. This data is then submitted to a database that collects and averages all users’ estimated expenses and redirects the user to a map-view of the United States. Once in the map-view, users can search for any location in the country and see the average monthly budget for users in that state via a popup.

How I Built It

We built the front-end CrowdBudget main page form using HTML, CSS, and Javascript to create text input boxes for submitting the user’s total amounts and a dropdown menu to select the user’s current state. The front-end map-view was created via Microsoft Azure Map Services, HTML, CSS, and Javascript to create pop-up text boxes for viewing state budget summaries as well as moving the map to focus on the state the user is currently viewing. The back-end was created using a Python Flask server that handles the requests coming in. We used a Google Cloud Firestore database to hold all of our users’ budget information. The main page submits all of the users inputted data and stores it in the database. The interactive map then pulls the budgets from the database and displays them for each location.

Challenges I Ran Into

There was a lot of headache in trying to adapt the map-view from Azure Map Services to how we wanted it to look. This involved pouring over Microsoft’s documentation to try and find the parameters we needed to render the map-view how we wanted. We also ran into some challenges with getting the map-view webpage to communicate with the Firebase back-end as well as parsing the data we retrieved from Firebase into the map-view webpage.

What I Learned & Accomplishments

We are proud to have learned how to utilize browser cookies in our CrowdBudget submission form to send the data to our back-end Firestore database. For the backend, we were able to strengthen our knowledge in Flask and learn an entirely new database scheme with Firebase. We also learned how to communicate between the map-view frontend webpage and our Firestore database to display budget information using javascript, html, css, and http responses. This was also our first time using Microsoft Azure services, which was both interesting and fun to work with.

What's Next For CrowdBudget

We want to improve the usability and accessibility for our users. The main idea for our project is to compare the current user’s budget with other users’ budgets across the country. We would like to create useful statistics based on the comparison of the user’s budget to the average for the searched state. In the future, we would like to expand our budgeting software to be a more usable budgeting app, similar to Mint or YNAB.

Share this project:

Updates