SpendSmart

• 

  SpendSmart dashboard - set monthly budget and track expenses

• 

  SpendSmart dashboard - set monthly budget and track expenses

• 

  Live donut chart showing spending breakdown by category

• 

  Real-time budget tracking with smart saving tips for students

• 

  Clean dark UI built with HTML, CSS, JavaScript and Chart.js

Inspiration

As a college student, I always struggled to keep track of where my money was going every month. Most of my friends face the same problem — we spend without realizing it and end up broke before the month ends. I wanted to build a simple tool that makes financial literacy fun and accessible for students like us.

What it does

SpendSmart is a web app that helps college students:

• Track daily expenses by category (Food, Transport, Education, Fun)
• Visualize their spending with colorful charts
• See how much they've spent vs their monthly budget
• Get simple tips to save money based on their habits

How I built it

• Frontend: HTML, CSS, JavaScript
• Charts: Chart.js library for visual graphs
• Storage: LocalStorage to save expense data in the browser
• No backend needed — works completely in the browser!

Challenges I faced

• This was my first hackathon, so managing time was tough
• Learning how to use Chart.js for the first time
• Making the UI clean and mobile-friendly

What I learned

• How to plan and build a complete project from scratch
• Importance of financial literacy for young people
• How to use browser LocalStorage effectively

What's next for SpendSmart

• Add AI-powered saving suggestions
• Support for UPI transaction import
• Multi-user support with login system

Built With

• chart.js
• css
• git
• html
• javascript
• localstorage