Inspiration
Managing money is a skill nobody teaches you in school, yet it affects every aspect of your life. As a student, I constantly found myself wondering where my monthly allowance disappeared — food, subscriptions, late-night orders — it all added up invisibly. I looked at existing budgeting tools and found them either too complex, too expensive, or simply not built with students in mind.That frustration became the spark for SpendSmart. I wanted to build something that felt less like accounting software and more like a smart financial companion — something that not only tracks where your money goes but actually helps you understand your habits and make better decisions. The idea of combining clean UI with AI-driven insights felt like the right way to make personal finance approachable and genuinely useful for everyday people.
What it does
SpendSmart is an AI-powered personal budget and expense tracking web application designed for students and young adults. Here's what it offers: Expense Logging — Quickly add daily expenses by category (food, transport, entertainment, education, etc.) with date and notes Budget Setup — Set a monthly income and spending limit to establish a personal financial baseline Real-Time Dashboard — Visual charts (bar, pie, line) showing spending breakdown by category and over time AI Insights — Intelligent weekly summaries like "You spent 38% more on food this week" or "You're on track to exceed your budget by Thursday" Smart Alerts — Proactive notifications when approaching or crossing budget limits Savings Goal Tracker — Allocate money toward specific targets like a laptop, trip, or emergency fund Mobile-Responsive Design — Works seamlessly across desktop and mobile browsers The result is a tool that gives users full financial visibility without overwhelming them with complexity.
How we built it
SpendSmart was built entirely using modern web technologies with a focus on speed, simplicity, and scalability.
Frontend: React.js with Next.js (App Router) for a fast, server-side-rendered experience. Tailwind CSS for clean, responsive styling. Recharts for interactive data visualizations. Backend: Next.js API Routes as serverless backend functions, keeping the architecture lightweight and deployment-friendly. Database: MongoDB Atlas for flexible, cloud-hosted data storage. Mongoose ODM was used for schema definition and data validation. Authentication: NextAuth.js with JWT-based session handling for secure user login and registration. AI Insights Engine: A custom rule-based pattern analysis engine built in JavaScript that compares spending across time periods and generates contextual financial insights. OpenAI API was explored for natural language tip generation. Deployment: The full application was deployed on Vercel, with the database hosted on MongoDB Atlas free tier — keeping the entire stack free to run.
The development followed a component-first approach — building reusable UI blocks, then wiring them to the backend, and finally layering the insights engine on top of real data.
Challenges we ran into
- Designing the Insights Engine The hardest part was making the AI insights feel meaningful rather than generic. Simple percentage comparisons weren't enough — the logic had to account for different spending patterns, varying month lengths, and incomplete data when a user is early in the month. Getting this to feel natural took several iterations.
- Data Visualization at Scale Rendering charts that stay readable whether a user has 5 entries or 500 required careful thought around data aggregation and chart responsiveness. Recharts needed custom configuration to handle edge cases cleanly.
- Authentication Flow Setting up NextAuth.js with MongoDB as the session store introduced some tricky configuration issues, especially around securing API routes while keeping the user experience smooth and seamless.
- Solo Time Management Building the full stack alone — design, frontend, backend, database, and deployment — meant constantly switching context. Staying focused and scoping features realistically was a challenge in itself.
Accomplishments that we're proud of
Successfully built and deployed a fully functional full-stack application as a solo developer within the hackathon timeframe The AI insights engine produces genuinely useful, context-aware financial summaries — not just raw numbers Achieved a clean, intuitive UI that requires zero onboarding — users understand the app within seconds of landing on it The entire application runs on a completely free infrastructure stack — making it accessible and deployable by anyone Built something that solves a real, personal problem — and one that many others share
What we learned
Product thinking matters as much as code. Deciding what not to build was just as important as what to build. Keeping the feature set focused made the project stronger. Data design is foundational. Getting the MongoDB schema right early saved significant refactoring time later when building the insights engine. User experience is non-negotiable. A budgeting tool that feels tedious to use will simply not be used. Every design decision was made through the lens of reducing friction. AI doesn't have to mean complex. Thoughtful rule-based logic can deliver surprisingly intelligent and useful outputs without needing a full ML pipeline. Shipping beats perfection. A working, deployed product with core features is infinitely more valuable than a perfect product that never launches.
What's next for SpendSmart — AI-Powered Personal Budget & Expense Tracker
SpendSmart is just getting started. Here's the roadmap ahead:
Bank & UPI Integration — Connect directly to bank accounts or payment apps to auto-import transactions and eliminate manual logging Recurring Expense Detection — Automatically identify and flag subscriptions and recurring bills Natural Language Input — Let users log expenses by simply typing "spent ₹150 on lunch" using NLP Collaborative Budgets — Shared budgets for roommates, couples, or group trips Financial Health Score — A personalized score that tracks improvement in spending habits over time Mobile App — A React Native version for native iOS and Android experience Multilingual Support — Making SpendSmart accessible to non-English speaking student communities globally
The long-term vision is to make SpendSmart the go-to financial companion for every student entering college — so that good money habits start early and last a lifetime.
Built With
- ai
- budgeting
- fintech
- javascript
- mongodb
- nextauth
- nextjs
- openai
- personal-finance
- react
- recharts
- student
- tailwindcss
- vercel
Log in or sign up for Devpost to join the conversation.