About the Project: Student Expense Tracker
Inspiration:
Managing money is a challenge for many students. Even small, everyday expenses like snacks, transport, or study materials can add up quickly, and most students don’t have a clear way to track or understand their spending habits. We were inspired to build a solution that teaches financial awareness and helps students develop responsible money habits, making budgeting and expense management easy, interactive, and fun.
What We Built:
Our project, Student Expense Tracker, is a web application that allows students to: Add, edit, and delete expenses in real-time Visualize spending with analytics and category-wise charts Set budgets for categories like food, transport, and study materials Interact with a chatbot to answer quick financial questions, e.g., “How much did I spend on snacks this week?” The app is student-focused, designed to be intuitive, visually clean, and practical.
Learning and Skills Gained: Through this project, we learned:
Full-stack development: integrating frontend, backend, and database State management & CRUD operations for dynamic dashboards Data visualization: displaying insights with graphs and charts User experience design: designing for clarity and accessibility AI/logic integration: building a simple chatbot for natural queries Problem-solving & iterative development: testing features and improving them based on feedback
How We Built It
Frontend: Built using React for dynamic UI components Responsive dashboard with category summaries and analytics
Backend & Database: Firebase Firestore for storing expenses securely Real-time updates for instant dashboard refresh
Features & Logic: CRUD operations for expenses (Add, Delete, Update) Budget alerts for overspending Category-wise analytics for spending insights Chatbot using simple query matching logic for student queries
Design: Clean, student-friendly interface Charts for spending trends using libraries like Chart.js Challenges Faced Real-time updates: Ensuring the dashboard reflected changes instantly required careful state management.
Data visualization: Displaying meaningful insights for students without overwhelming them was tricky. Budget tracking: Setting limits per category and alerting users dynamically needed careful backend logic. Chatbot integration: Making the chatbot respond to student queries naturally while keeping it simple. Despite these challenges, we iterated rapidly, tested features, and focused on usability, resulting in a practical and impactful tool.
Impact
This project helps students build financial awareness, understand their spending habits, and avoid unnecessary expenses. Even small improvements in budgeting and tracking can have a significant long-term impact on financial literacy for young students. Optional Math / Metrics We track spending efficiency using a simple formula: Remaining Budget (%)=Budget−SpentBudget×100 Remaining Budget (%)=Budget−Spent×100
This allows students to quickly see which categories are nearing overspending.
Built With
- css
- figma
- firebase
- firestoregit/github
- for
- html
- javascript
- next.js
- node.js
- postman
- python
- sqlreact.js
- typescript
- ui
- vs-code
Log in or sign up for Devpost to join the conversation.