Skip to content

README.md

Latest commit

 

History

History
244 lines (182 loc) · 8.23 KB

README.md

File metadata and controls

244 lines (182 loc) · 8.23 KB
Raw

💰 Expense Tracker

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.

✨ Features

  • 🔐 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

🚀 Tech Stack

Frontend

  • 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

Backend & Database

  • Supabase - PostgreSQL database with built-in auth and real-time subscriptions
  • @supabase/ssr - Server-side rendering support for Next.js

Data Visualization

  • Recharts - Composable charting library for React
  • Lucide Icons - Beautiful, customizable icon library

Additional Libraries

📦 Installation

  1. Clone the repository
git clone https://github.com/yourusername/expense-tracker.git
cd expense-tracker
  1. Install dependencies
npm install
  1. 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
  1. 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
  1. Run the development server
npm run dev

Open http://localhost:3000 to see the application.

🏗️ Project Structure

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

🗄️ Database Schema

The application uses PostgreSQL via Supabase with the following tables:

Core Tables

  • profiles - User profile information (extends auth.users)
  • categories - Expense/income categories with icons and colors
  • transactions - Individual transactions with amount, date, and description
  • budgets - Monthly budget limits
  • budget_categories - Budget allocation per category (optional)

Database Features

  • ✅ Row Level Security (RLS) on all tables
  • ✅ Automatic profile creation on user signup
  • ✅ Automatic updated_at timestamp updates
  • ✅ Default categories seeded for new users
  • ✅ Analytics views for reporting
  • ✅ Helper functions for common queries

Migration Files

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

Generating TypeScript Types

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.ts

🛠️ Available Scripts

npm run dev      # Start development server
npm run build    # Build for production
npm start        # Start production server
npm run lint     # Run ESLint

🚢 Deployment

Deploy to Vercel (Recommended)

  1. Push your code to GitHub
  2. Import your repository on Vercel
  3. Add environment variables:
    • NEXT_PUBLIC_SUPABASE_URL
    • NEXT_PUBLIC_SUPABASE_ANON_KEY
  4. Deploy!

Or use the Vercel CLI:

npm i -g vercel
vercel login
vercel --prod

🔒 Security

  • 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

🌍 Internationalization

The app supports multiple languages (currently English and Turkish). Add more languages by:

  1. Creating a new locale file in public/locales/{locale}/common.json
  2. Adding translations for all keys
  3. The app will automatically detect and support the new language

📝 License

This project is open source and available under the MIT License.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

🙏 Acknowledgments

  • shadcn/ui for the beautiful component library
  • Supabase for the amazing backend platform
  • Vercel for hosting and deployment

Made with ❤️ and ☕