₹ TrackIt AI

An AI-powered expense tracking web application built with Next.js 15, featuring intelligent categorization, real-time analytics, and personalized financial insights.

✨ Features

🤖 AI-Powered Intelligence

• Smart Categorization: AI automatically suggests expense categories based on descriptions
• Financial Insights: Personalized recommendations and spending pattern analysis
• Interactive AI Chat: Get detailed explanations and advice for any insight

💼 Core Functionality

• Expense Tracking: Add, edit, and delete expenses easily
• Real-time Charts: Beautiful visualizations using Chart.js
• Statistics Dashboard: Comprehensive spending analytics
• Expense History: Transaction history with search and filter options

🎨 Modern UI/UX

• Light & Dark Mode: Smooth theme switching
• Fully Responsive: Works on all devices
• Beautiful Animations: Smooth hover and click interactions
• Gradient Cards: Modern blur-glass design for dashboards

🔐 Authentication & Security

• Clerk Authentication: Secure and easy user login
• Google/Email Login options
• User Profiles: Personalized dashboards per user

🛠️ Tech Stack

Frontend

• Next.js 15 – App Router + Server Actions
• React 19 – Latest concurrent React
• TypeScript – Type-safe development
• Tailwind CSS – Modern, utility-first styling
• Chart.js – Interactive charts

Backend & Database

• Neon DB – Serverless PostgreSQL
• Prisma – Type-safe ORM
• Server Actions – Fast API endpoints

AI & Authentication

• OpenRouter API – Free OpenAI-compatible API
• Clerk – User authentication and session management

Deployment

• Vercel – Serverless hosting for modern web apps

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm / yarn / pnpm

Installation

git clone https://github.com/mnvarts/expense-tracker-ai.git
cd expense-tracker-ai
npm install

Environment Setup

Create a .env file in the root directory:

DATABASE_URL="your-neon-db-url"

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="your-clerk-publishable-key"
CLERK_SECRET_KEY="your-clerk-secret-key"

OPENROUTER_API_KEY="your-openrouter-api-key"

NEXT_PUBLIC_APP_URL="http://localhost:3000"

Database Setup

npx prisma generate
npx prisma db push

Run Development Server

npm run dev

Then visit 👉 http://localhost:3000

📊 Database Schema

• User → Clerk user info
• Record → Expense transactions (amount, category, date)

🌐 Deployment (Vercel Recommended)

1. Push project to GitHub
2. Import to Vercel
3. Add .env variables in dashboard
4. Deploy 🚀

📎 Useful Links

• Neon Database
• Clerk Authentication
• Next.js Docs
• Tailwind CSS
• Vercel Deployment

Built with ❤️ by MNV ROHITH