[Visit the web app!](https://intuition-auto-track.vercel.app/) 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.
Table of Contents
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 AutoTrack is divine <3
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.
Despite the challenges, the team was able to successfully create a working prototype of AutoTrack! 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.
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. We eventually switched to MUI. 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.
Through building AutoTrack!, 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.
The team plans to expand the functionality of AutoTrack! 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.
gmailapi
google-cloud
mern
trpc
mongoatlas
node.js
react
vercel
MUI