💰 Finance Clone - Full Stack SaaS Platform

A fully functional Finance SaaS Platform built with modern web technologies. Track your income and expenses, categorize transactions, connect to bank accounts via Plaid, and monetize with Lemon Squeezy subscriptions.

Credit: This project is based on the tutorial by Antonio Erdeljac (Code With Antonio)

✨ Features

• 📊 Interactive Financial Dashboard

  • Real-time transaction tracking
  • Income and expense visualization
  • Customizable chart types (Area, Bar, Line)
  • Account and date range filters

• 💳 Bank Integration

  • Connect real bank accounts via Plaid
  • Automatic transaction syncing
  • Secure bank disconnection
  • Multiple account support

• 📝 Transaction Management

  • Add, edit, and delete transactions
  • Bulk delete operations
  • CSV file imports
  • Advanced search and filtering
  • Category assignment

• 💎 Premium Features

  • Subscription management via Lemon Squeezy
  • Payment processing
  • Webhook integration
  • Test mode for development

• 🔐 Authentication & Security

  • Clerk authentication (Core 2)
  • Secure session management
  • Protected API routes
  • User settings customization

• 📱 Fully Responsive Design

  • Mobile-first approach
  • Optimized for all screen sizes
  • Modern UI with Shadcn UI components

🛠️ Tech Stack

• Frontend:

  • Next.js 15 - React framework with App Router
  • React 18 - UI library
  • TailwindCSS - Styling
  • Shadcn UI - Component library
  • TypeScript - Type safety

• Backend:

  • Hono.js - Fast API framework
  • PostgreSQL - Database
  • Drizzle ORM - Type-safe ORM
  • Neon - Serverless Postgres

• Authentication & Payments:

  • Clerk - Authentication (Core 2)
  • Plaid - Bank account integration
  • Lemon Squeezy - Payment processing

• State Management & Data Fetching:

  • Tanstack React Query - Server state management
  • Zustand - Client state management

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18 or higher)
• npm or yarn
• Git
• Accounts for:
  • Clerk (Authentication)
  • Neon or PostgreSQL (Database)
  • Plaid (Bank integration)
  • Lemon Squeezy (Payments)

🚀 Getting Started

1. Clone the repository

git clone https://github.com/git-adventures/finance-clone.git
cd finance-clone

2. Install dependencies

npm install

3. Setup Environment Variables

Create a .env.local file in the root directory and add the following:

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your-clerk-publishable-key
CLERK_PUBLISHABLE_KEY=your-clerk-publishable-key
CLERK_SECRET_KEY=your-clerk-secret-key

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

# Database (Neon PostgreSQL)
DATABASE_URL=your-postgresql-connection-string

# App URL
NEXT_PUBLIC_API_URL=http://localhost:3000

# Plaid
PLAID_CLIENT_TOKEN=your-plaid-client-token
PLAID_SECRET_TOKEN=your-plaid-secret-token

# Lemon Squeezy
LEMONSQUEEZY_STORE_ID=your-store-id
LEMONSQUEEZY_PRODUCT_ID=your-product-id
LEMONSQUEEZY_API_KEY=your-api-key
LEMONSQUEEZY_WEBHOOK_SECRET=your-webhook-secret

4. Setup Database

# Generate Drizzle schema
npm run db:generate

# Push database schema
npm run db:push

# (Optional) Open Drizzle Studio
npm run db:studio

5. Setup Webhooks (for Lemon Squeezy)

For local development, use ngrok to expose your webhook endpoint:

# Install ngrok
npm install -g ngrok

# Start ngrok
ngrok http 3000

# Use the ngrok URL in Lemon Squeezy webhook settings:
# https://your-ngrok-url.ngrok-free.app/api/subscriptions/webhook

6. Start the development server

npm run dev

Open http://localhost:3000 in your browser to see the application.

📦 Available Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run lint	Run ESLint
npm run db:generate	Generate Drizzle schema
npm run db:push	Push schema to database
npm run db:studio	Open Drizzle Studio

📚 Resources

• Next.js Documentation
• React Documentation
• TailwindCSS Documentation
• Shadcn UI Documentation
• Hono.js Documentation
• PostgreSQL Documentation
• Drizzle ORM Documentation
• Neon Documentation
• Clerk Documentation
• Plaid Documentation
• Lemon Squeezy Documentation
• Tanstack React Query Documentation
• Zustand Documentation

🙏 Acknowledgments

• YouTube - Tutorial reference
• Vercel - Deployment platform (CD)
• GitHub - Code hosting and version control (CI)

---

⭐ If you found this project helpful, please give it a star!