TrackHack!

Transactions page

Inspiration

Tracking our expenditure was a common issue among our team. We found that we all struggled to remember to key in our expenses into a separate budget tracker. Hence, to improve our budgeting situation, we decided to automate this process to eliminate the human error of forgetting. To err is human, to TrackHack is divine <3

What it does

Scraping Gmail to retrieve receipts for the purpose of recording the transactions through our web app. The data will be collated and presented comprehensibly in our web app. Due to time constraints, we currently only take in PayLah. However, in future implementations, we do intend to expand and be more inclusive of payment via other apps. Thus, enabling us in better accommodating our users. Overall, our goal is to make budget tracking as effortless and accurate as possible for our users.

How we built it

The team used a combination of web scraping and data analysis techniques to extract information from Gmail and automatically record the transactions, using a Google Gmail API. Lastly, we used a variety of web development tools to create the user interface for our web app.

Challenges we ran into

Firstly, on the front end, we were experimenting with new CSS components to challenge ourselves to learn as much from this as possible. However, daisyUI, a component library built on TailwindCSS, clashed with our TailwindCSS styling. So, it took much trial and error to find a solution that worked. Secondly, for the back end, we had trouble utilising Google's Gmail API because of our in-proficiency with Google Cloud Platform's OAuth flow. Thankfully, with the help of the technical advisors, we gained more insight and managed to make it work in the end. Due to the limited time, we were only able to successfully implement PayLah. Besides, our web app records incoming transactions, but not outgoing.

Accomplishments that we're proud of

Despite the challenges, the team was able to successfully create a working prototype of TrackHack! that automates the process of tracking expenses. Especially since we were mostly new to what we were implementing, we managed to take away a lot more knowledge by venturing beyond our comfort zone. Plus, this was some of our members' first hackathon, first all-nighter or first sleepover.

What we learned

Through building TrackHack!, the team gained experience in web scraping, data analysis, and web development. They also learned about the importance of time management when working on a project. Our front end developers familiarised themselves with various components available for styling, even beginning to expand into animation to make our web app more dynamic. Our back end developers succeeded in extracting and processing large amounts of data in a timely and efficient manner. Most importantly, we learnt the importance of understanding our audience to be able to design a product for them. Hence, we decided to prototype this web app since it resonates with us.

What's next for TrackHack!

The team plans to expand the functionality of TrackHack! by adding support for more payment apps and implementing the ability to track outgoing transactions. In the future, we also hope to integrate machine learning algorithms to predict and suggest budgeting plans for users based on their spending habits. Likewise, we plan to continually improve our user interface and add additional features to boost the app's user-friendliness. Not to mention, we hope to strengthen our security as we will be storing sensitive information about our users, since we are tracking their e-payments.