Centsible

Inspiration

Our key inspiration behind Centsible lies in a problem that many of us have: we often spend impulsively and then fail to save money towards future financial needs. Sometimes, we even spend beyond what we can afford. Centsible is a budgeting app that can help visualize how much we are spending so we can make better financial decisions.

What it does

Centsible allows a user to make an account for logging their spendings with their email, name, and password. After making an account, the user would be prompted to log into their account. After successful log in, the user will have the ability to add their transactions into the app. The user can input the cost of their purchase and relevant notes, either by typing it in or by voice commands (eg. “I spent 5 dollars on groceries”). With the transactions inputted into Centsible, the user can view their spending visually in a pie chart. They can also access the detailed log of their purchases belonging to each category.

How we built it

We set up a Firebase Firestore database to store user and transaction information and used their authentication features for seamless sign up and logins. We used React and Tailwind CSS for our frontend to create a user friendly UI.

Challenges we ran into

A challenge we faced was Integrating the Web Speech API along with allowing the user to manually enter transaction details. There was an issue in setting categories correctly for both methods. To resolve this we utilised console.log statements and different approaches such as having useEffects, useRefs, useStates to try and fix this issue. Moreover, since half of our team were beginners to web app development and hackathons, they faced challenges with learning the frontend technologies that we were using for this project.

Accomplishments that we're proud of

We are proud of being able to create a product under such tight time restrictions and being able to work together to create this product. There was a new learning component for all of us despite having different backgrounds which made this weekend a success.

What we learned

Over the course of the hackathon, we have learnt a lot about using React and Firebase together to create a web app and modifying the UI with Tailwind CSS. Moreover, we learnt to integrate Web Speech API in order for the user to extract information from voice commands and use that information with Firebase.

What's next for Centsible

For Centsible, our next steps would be having features such as receipt scanning, smart reminders and more user customization to ensure user satisfaction.