As college students, we are always on a budget, but it can be hard to track our spending when we're paying for so many different things. In order to help users become more conscious about their spending, we decided to create an application that would help them be able to visually see how much of their money is spent on what. With the ability to visualize their spending, users will then be able to see how much of an impact an item will have on their spending which will make them reassess if the item is worth the money or if it's just a waste of hard-earned cash.

What it does

CookieBytes is a website designed to help people, specifically college students, keep track of their spending. With this private money manager, users will be able to create an account and add "items" of what they have spent their money on along with the cost of that item, the date, the category the item belongs under (food, rent, utilities, school, clothes, entertainment, or miscellaneous), and an optional description of the item.

How we built it

  • Piskel to create our cookie mascot/logo and gifs
  • HTML, CSS, Javascript, and React.js to create the user interface
  • MongoDB Atlas to deploy a MongoDB on Microsoft Azure and MongoDB Compass to create the database and collections and to visualize the data in the database
  • Python was used to implement the back-end (manipulate the database and to retrieve the data in it)
  • Flask to respond to requests from the front-end for data in the database

Challenges we ran into

  • figuring out how to retrieve data from our database
  • creating a pie chart in react and retrieving the chart category name when selected
  • displaying all the items in a specific category when the category section on the pie chart is selected
  • calling the add items page once the user logs in with the correct username and password

Accomplishments that we're proud of

  • Our graphics
  • The login and add item page
  • Creating a database using MongoDB and deploying it on a cloud server

What we learned

-This was our first time creating and working with a database, so we've definitely learned a lot about how databases and MongoDB works. Since it was our first time working with databases, it was the first time we were able to create profiles for each user and store it. This made us think about all the things that could go wrong when a user inputs data: Is the username and password valid? What happens if it's not? and find the best ways to solve them. We also learned more about how react works and the things you can do with it such as creating a pie chart!

What's next for CookieBytes

We've learned so much in 24 hours working on this website, we'd definitely want to keep improving it. Some future changes and features we want to add:

  • use an API that will scan or take in an image of a receipt and search for important information on the receipt such as the cost and date
  • deploy our website
  • allow users to input the maximum amount they can spend in a month and send a notification/alert when the user has almost spent the monthly limit
  • add an option for the user to filter the data based on the date or title!

Built With

Share this project: