A modern, full-stack expense tracking application built with Next.js 16, Supabase, and shadcn/ui. Track your expenses, manage budgets, visualize spending patterns, and take control of your finances with an intuitive and beautiful interface.
- 🔐 Authentication - Secure user authentication with Supabase Auth
- 💸 Transaction Management - Create, edit, and delete income/expense transactions
- 📊 Dashboard - Visual overview of your financial status with interactive charts
- 🏷️ Categories - Organize transactions with customizable categories and icons
- 💰 Budget Tracking - Set monthly budgets and monitor spending limits
- 📈 Analytics - Monthly comparisons, category breakdowns, and spending trends
- 🌍 Internationalization - Multi-language support (English & Turkish)
- 🌓 Dark Mode - Beautiful dark/light theme toggle
- 📱 Responsive Design - Works seamlessly on desktop, tablet, and mobile
- 🔒 Row Level Security - Secure data isolation per user with Supabase RLS
- Next.js 16 - React framework with App Router and Server Components
- React 19 - Latest React with Server Actions
- TypeScript - Type-safe development
- Tailwind CSS 4 - Utility-first CSS framework
- shadcn/ui - High-quality, accessible UI components
- Radix UI - Unstyled, accessible component primitives
- Supabase - PostgreSQL database with built-in auth and real-time subscriptions
- @supabase/ssr - Server-side rendering support for Next.js
- Recharts - Composable charting library for React
- Lucide Icons - Beautiful, customizable icon library
- TanStack Table - Headless table/datagrid library
- next-themes - Perfect dark mode support
- react-i18next - Internationalization framework
- Zod - TypeScript-first schema validation
- Sonner - Toast notifications
- dnd-kit - Drag and drop toolkit
- Clone the repository
git clone https://github.com/yourusername/expense-tracker.git
cd expense-tracker- Install dependencies
npm install- Set up environment variables
Create a .env.local file in the root directory:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key- Set up Supabase database
Run the SQL migrations in order using the Supabase SQL Editor:
# Navigate to your Supabase project SQL Editor
# Run these files in order:
1. docs/migrations/001_initial_schema.sql # Creates all tables and RLS policies
2. docs/migrations/002_categories_rls.sql # Additional category security (optional)
3. docs/migrations/003_useful_views_and_functions.sql # Analytics views and helper functions
4. docs/migrations/004_seed_default_categories.sql # Default categories for new users (optional)Or run them all at once in your terminal with Supabase CLI:
# Install Supabase CLI if not already installed
npm install -g supabase
# Login to Supabase
supabase login
# Link your project
supabase link --project-ref your-project-ref
# Run migrations
supabase db push- Run the development server
npm run devOpen http://localhost:3000 to see the application.
expense-tracker/
├── actions/ # Server Actions for mutations
│ ├── auth.actions.ts
│ ├── budgets.actions.ts
│ ├── categories.actions.ts
│ └── transactions.actions.ts
├── app/ # Next.js App Router
│ ├── (protected)/ # Protected routes with auth
│ ├── login/
│ ├── signup/
│ └── layout.tsx
├── components/ # React components
│ ├── ui/ # shadcn/ui components
│ ├── dashboard/ # Dashboard-specific components
│ ├── transactions/ # Transaction components
│ ├── budgets/ # Budget components
│ └── categories/ # Category components
├── lib/ # Utility functions and configs
│ ├── supabase/ # Supabase client setup
│ ├── database.types.ts # Generated DB types
│ └── utils.ts
├── hooks/ # Custom React hooks
├── public/ # Static assets
│ └── locales/ # i18n translation files
└── docs/ # Documentation
├── migrations/ # Database migrations
│ ├── 001_initial_schema.sql
│ ├── 002_categories_rls.sql
│ ├── 003_useful_views_and_functions.sql
│ └── 004_seed_default_categories.sql
├── DB_SCHEMA.md
└── PROJECT_OVERVIEW.md
The application uses PostgreSQL via Supabase with the following tables:
profiles- User profile information (extends auth.users)categories- Expense/income categories with icons and colorstransactions- Individual transactions with amount, date, and descriptionbudgets- Monthly budget limitsbudget_categories- Budget allocation per category (optional)
- ✅ Row Level Security (RLS) on all tables
- ✅ Automatic profile creation on user signup
- ✅ Automatic
updated_attimestamp updates - ✅ Default categories seeded for new users
- ✅ Analytics views for reporting
- ✅ Helper functions for common queries
| File | Description |
|---|---|
001_initial_schema.sql |
Creates all tables with RLS policies and indexes |
002_categories_rls.sql |
Additional category security policies (optional) |
003_useful_views_and_functions.sql |
Analytics views and helper functions |
004_seed_default_categories.sql |
Seeds default categories for new users |
After running migrations, generate TypeScript types:
# Using Supabase CLI
supabase gen types typescript --project-id your-project-ref > lib/database.types.ts
# Or using npx
npx supabase gen types typescript --project-id your-project-ref > lib/database.types.tsnpm run dev # Start development server
npm run build # Build for production
npm start # Start production server
npm run lint # Run ESLint- Push your code to GitHub
- Import your repository on Vercel
- Add environment variables:
NEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEY
- Deploy!
Or use the Vercel CLI:
npm i -g vercel
vercel login
vercel --prod- Row Level Security (RLS) enabled on all Supabase tables
- Server-side authentication checks with middleware
- Secure Server Actions for all mutations
- Type-safe database queries with generated types
The app supports multiple languages (currently English and Turkish). Add more languages by:
- Creating a new locale file in
public/locales/{locale}/common.json - Adding translations for all keys
- The app will automatically detect and support the new language
This project is open source and available under the MIT License.
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
- shadcn/ui for the beautiful component library
- Supabase for the amazing backend platform
- Vercel for hosting and deployment
Made with ❤️ and ☕