Expense Tracker AI is a full-stack expense tracking application built by Sajal Halder with Next.js 16, React 19 and TypeScript. It uses Supabase for the database and authentication, and the Vercel AI SDK with an OpenAI key for its AI features.
It is the project on this site written in TypeScript instead of Java. It shows the same interest in applied AI from the full-stack side: a receipt photo goes in, structured expense data comes out, and the user confirms it before anything is saved.
AI receipt analysis
Typing in every expense is the part of tracking money people abandon first, so the app lets you photograph a receipt instead.
- 1. UploadUpload a photo of a receipt.
- 2. ExtractThe AI reads the amount, description and date, and suggests a category. If one receipt holds several expenses, each is detected separately.
- 3. ReviewThe extracted details are shown for confirmation, and can be corrected before saving.
- 4. SaveConfirmed expenses are written to the expenses table in Supabase.
Why there is a confirmation step
Reading text from a photo is never perfect, and a wrong amount in a finance app is worse than a missing one. The confirmation step keeps a person between the model's output and the database, so nothing is stored until the user has checked it.
Chat assistant and spending analysis
A chat assistant answers questions in natural language about the user's own spending.
- Ask about spending patterns, or analyse expenses by category or date.
- Get budget recommendations and general financial advice.
- The dashboard also shows AI-generated tips, and the AI looks for trends in spending patterns.
Dashboards and analytics
The main dashboard shows four headline numbers: total expenses, this month's spending, the number of transactions and the average transaction. The analytics page organizes the detail into four tabs, with a week-over-week comparison and summary statistics on top.
- OverviewA general spending summary.
- CategoriesCategory analysis, with a donut chart and progress bars.
- TrendsMonthly spending as a line chart, plus the top five categories as a horizontal bar chart.
- PaymentPayment method breakdown as a bar chart, with percentages.
Managing expenses
- Add, edit and delete expenses, with search and date-based filtering.
- Nine categories: food, transport, entertainment, utilities, healthcare, shopping, education, travel and other.
- Payment methods including cash, credit card, debit card, bank transfer and a digital wallet option, plus other.
- Totals and counts for whatever is currently filtered.
Authentication and data security
Sign-in uses Supabase Auth with email and password validation, password reset, protected routes and managed user sessions. The key protection is Row Level Security: access rules live in the PostgreSQL database itself, so a user can only read and change their own rows even if application code has a bug.
The expenses table holds the id, user ID, amount, category, payment method, description, date and creation time. Server Actions perform authenticated mutations, secrets stay in environment variables, and TypeScript catches type errors at compile time.
Pages
- /Landing page, which redirects to the dashboard when signed in.
- /signin, /signupAccount creation and sign-in.
- /forgot-password, /reset-passwordThe two steps of password reset.
- /dashboardOverview with headline numbers, quick actions and AI tips.
- /expensesExpense management.
- /analyticsThe analytics dashboard.
Planned next
The README lists these as future work, so they are not part of the current app: budget setting and tracking, recurring expenses, CSV and PDF export, multi-currency support, expense sharing with family or a team, a React Native mobile app, reminders and notifications, and more advanced AI insights and predictions.