Inspiration
The inspiration for TrackStack came from a simple realization: managing personal finances should be as intuitive and stress-free as possible. Many people struggle with keeping track of their expenses and understanding their financial habits. We wanted to create a tool that not only simplifies this process but also makes it visually engaging.
What it does
TrackStack is a web based application that helps users track and manage their personal finances effectively. Users can input their income and expenses, categorize them under various heads like food, travel, entertainment, etc., and view their total balance, income, and expenses in real-time. The centrepiece is a dynamic pie chart that updates with each transaction. It visually breaks down how expenses are distributed across categories.
How we built it
We built TrackStack using HTML, CSS, and JavaScript to ensure a responsive and user-friendly interface. We also used the Chart.js library for the dynamic pie chart that visually represent users' financial data. For the back-end component, we decided to use local storage to ensure user data remains accessible even after the browser is closed.
Challenges we ran into
One of the main challenges was integrating Chart.js effectively to update the pie chart dynamically with each new transaction. Ensuring that the pie chart accurately reflects real-time data after each entry, edit, or deletion required a lot of attention to detail in how data flows and updates within the app.
Accomplishments that we're proud of
One thing that we are really proud about is how seamless and intuitive the user interface is. The fact that we were able to add in a dynamic pie chart, which updates in real time as transactions are added, was really a significant achievement for us. This feature not only enhances the user experience but also makes financial tracking more interactive and informative. Throughout the development of TrackStack, we experienced a significant learning curve. We not only deepened our knowledge of client-side data storage and advanced JavaScript functionalities, but we also successfully used external libraries like Chart.js in a short amount of time.
What's next for TrackStack
Moving forward, we plan to introduce more advanced features, such as multi-currency support, and budget forecasting. We also want to develop an mobile app to provide users with the ability to manage their finances on the go.
NOTE: To run the application, run index.html
Built With
- chart.js
- css
- html
- javascript
- local-storage
Log in or sign up for Devpost to join the conversation.