Finpal

Transforming everyday spending into insights.

Comment

Inspiration

FinPal was born out of the need to make personal finance less overwhelming. Many people struggle to see where their money goes, so we set out to design a tool that turns expense tracking into a clear, visual experience.

What it does

FinPal is a lightweight web app that helps users take control of their personal finances.

  • Users can add expenses with descriptions, amounts, and categories.
  • All expenses are displayed in a dynamic table for easy review.
  • Spending patterns are visualized through a pie chart, showing the percentage share of each category:

How we built it

  1. Designed the core interface with HTML and styled it using CSS.
  2. Implemented expense tracking logic in JavaScript, storing user inputs in arrays.
  3. Used Chart.js to generate a pie chart that visualizes spending by category.
  4. Hosted the project on GitHub Pages for easy access and sharing.

Challenges we ran into

Ensuring each category had distinct colors in the chart visualization.

  • Managing dynamic updates without overlapping charts.
  • Learning how to properly configure GitHub Pages for deployment.
  • Balancing simplicity with functionality to keep the app lightweight yet impactful.

Accomplishments that we're proud of

Successfully built a fully functional expense tracker with a clean, intuitive interface.

  • Integrated Chart.js to create dynamic visualizations that clearly show spending patterns.
  • Solved the challenge of generating distinct colors for each category in the pie chart.
  • Deployed the project live using GitHub Pages, making it instantly accessible to anyone.
  • Learned how to manage version control and collaboration through GitHub.

What we learned

How to design and build a complete web app using HTML, CSS, and JavaScript.

  • The process of integrating external libraries like Chart.js to create interactive data visualizations.
  • Deploying projects with GitHub Pages, making them accessible to anyone with a simple link.
  • Managing version control and collaboration effectively through GitHub.

What's next for Finpal

🔮 What's Next for FinPal

FinPal started as a simple expense tracker, but we see many opportunities to expand its impact:

  • Persistent Data Storage: Integrate cloud databases (e.g., Firebase, Supabase) so expenses are saved across devices.
  • User Authentication: Add secure login and personalized dashboards for multiple users.
  • Advanced Visualizations: Introduce bar charts, line graphs, and trend analysis to show spending over time.
  • Budgeting Tools: Allow users to set monthly budgets and track progress against them.
  • Currency Conversion API: Support international users by converting expenses into their preferred currency.
  • Mobile Optimization: Improve responsiveness and design for seamless use on smartphones.
  • AI Insights: Provide smart suggestions, such as identifying overspending categories or recommending savings strategies.

Built With

Share this project:

Updates