A full-featured, mobile-responsive Expense Tracker web app built with Next.js, React, MongoDB, Shadcn/ui, and Recharts.
Track your expenses, set monthly budgets, and visualize your financial habits with clear charts and simple insights.
- Frontend: Next.js 14, React
- UI Components: Shadcn/ui, Tailwind CSS
- Charts: Recharts
- Backend: API routes (Next.js)
- Database: MongoDB
- Authentication: (optional) can be added later
- Add / Edit / Delete expenses
- Fields: amount, date, description
- 📃 Transaction list view
- 📊 Monthly expenses bar chart
- Basic form validation
- All Stage 1 features, plus:
- Predefined categories for each expense (Food, Travel, etc.)
- Category-wise Pie Chart
- Dashboard with:
- Total Expenses card
- Category breakdown
- 📅 Most recent transactions
- All Stage 2 features, plus:
- Set Monthly Budgets by category
- 📈 Budget vs Actual Comparison Chart
- Simple Spending Insights:
- Highlight over-budget categories
- Calculate total saved
- Display clear monthly financial tips
- Navbar: Navigate between pages
- Dashboard: Visual overview of your spending
- Expense History: View, edit & delete past transactions
- Add Expense Page: Quick entry with category dropdown
- Monthly Budget Setup: Define monthly budgets per category
- Monthly Expenses Page:
- Budget vs Actual chart
- Spending insights (over/under budget)