💰 Expense Tracker

A modern, full-stack expense tracking application built with React, Express.js, and PostgreSQL. Track your income and expenses with a clean, responsive interface and secure authentication.

📋 Table of Contents

• 💰 Expense Tracker
  • 📋 Table of Contents
  • ✨ Features
  • 🛠 Tech Stack
    • Frontend
    • Backend
    • DevOps & Tools
  • 🚀 Getting Started
    • Prerequisites
    • Installation
    • Environment Setup
    • Database Setup
    • Running the Application
  • 📚 API Documentation
    • Base URL
    • Endpoints
      • Health Check
      • Transactions
      • Users
    • Example Transaction Request
  • 📁 Project Structure
  • 💖 Support
  • 🙏 Acknowledgements

✨ Features

• 🔐 Secure Authentication - User authentication powered by Clerk
• 💳 Transaction Management - Add, edit, and delete income/expense transactions
• 📊 Categorization - Organize transactions by custom categories
• 💰 Real-time Balance - Track your current financial status
• 📱 Responsive Design - Works seamlessly on desktop and mobile devices
• 🎨 Modern UI - Clean interface built with Tailwind CSS and DaisyUI
• 🔄 Real-time Updates - Instant transaction updates with optimistic UI
• 📈 Dashboard Overview - Visual representation of your financial data

🛠 Tech Stack

Frontend

• Framework: React 19 with TypeScript
• Routing: React Router v7
• Styling: Tailwind CSS v4 + DaisyUI
• State Management: Zustand
• HTTP Client: Axios
• Icons: Lucide React
• Notifications: React Hot Toast
• Build Tool: Vite
• Authentication: Clerk React

Backend

• Runtime: Bun
• Framework: Express.js
• Database: PostgreSQL
• ORM: Drizzle ORM
• Authentication: Clerk Express
• CORS: Enabled for cross-origin requests
• Logging: Morgan
• Environment: dotenv

DevOps & Tools

• Package Manager: Bun
• Database Migrations: Drizzle Kit
• Linting: ESLint
• Type Checking: TypeScript

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

• Bun (latest version) - Download here
• PostgreSQL (v12 or higher) - Download here
• Node.js (v18 or higher) - Download here

Installation

1. Clone the repository

   git clone https://github.com/yourusername/expense-tracker.git
   cd expense-tracker

2. Install dependencies for both frontend and backend

   # Install backend dependencies
   cd Backend
   bun install
   
   # Install frontend dependencies
   cd ../Frontend
   bun install

Environment Setup

1. Backend Environment Variables

   Create a .env file in the Backend directory:

   # Server Configuration
   PORT=3000
   
   # Database Configuration
   DATABASE_URL=postgresql://username:password@localhost:5432/expense_tracker
   
   # Clerk Authentication
   CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
   CLERK_SECRET_KEY=your_clerk_secret_key

2. Frontend Environment Variables

   Create a .env file in the Frontend directory:

   # Clerk Authentication
   VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
   
   # API Configuration
   VITE_API_URL=http://localhost:3000/api

Database Setup

1. Create PostgreSQL Database

   createdb expense_tracker

2. Run Database Migrations

   cd Backend
   bun run generate
   bun run migrate

3. Optional: Open Drizzle Studio

   bun run studio

Running the Application

1. Start the Backend Server

   cd Backend
   bun run dev

   The backend will be available at http://localhost:3000

2. Start the Frontend Development Server

   cd Frontend
   bun run dev

   The frontend will be available at http://localhost:5173

📚 API Documentation

Base URL

http://localhost:3000/api

Endpoints

Health Check

GET /ping

Transactions

GET    /transactions     # Get all transactions for authenticated user
POST   /transactions     # Create a new transaction
PUT    /transactions/:id # Update a transaction
DELETE /transactions/:id # Delete a transaction

Users

POST /users/sync        # Sync user data with Clerk
GET  /users/profile     # Get user profile

Example Transaction Request

{
  "type": "expense",
  "amount": "29.99",
  "category": "Food & Dining",
  "note": "Lunch at restaurant",
  "date": "2025-09-01T12:00:00Z"
}

📁 Project Structure

expense-tracker/
├── Backend/
│   ├── src/
│   │   ├── controllers/     # Request handlers
│   │   ├── db/             # Database configuration and schema
│   │   ├── routes/         # API routes
│   │   ├── utils/          # Utility functions
│   │   └── index.ts        # Server entry point
│   ├── drizzle/            # Database migrations
│   └── package.json
├── Frontend/
│   ├── src/
│   │   ├── components/     # Reusable UI components
│   │   ├── pages/          # Application pages
│   │   ├── store/          # State management
│   │   ├── lib/            # Utility libraries
│   │   └── App.tsx         # Main application component
│   └── package.json
└── README.md

💖 Support

If you find this project helpful, please consider:

• ⭐ Starring the repository
• 🐛 Reporting bugs via GitHub Issues
• 💡 Suggesting new features
• 🔗 Sharing with others

🙏 Acknowledgements

• Clerk - For seamless authentication
• Drizzle ORM - For type-safe database operations
• Tailwind CSS - For utility-first styling
• DaisyUI - For beautiful UI components
• Lucide - For beautiful icons

---