FinPro - Finance Tracker SaaS

A comprehensive full-stack finance management SaaS platform for modern expense tracking, budget planning, and financial insights.

Overview

FinPro is a powerful, full-stack finance tracker Software as a Service designed to help users take control of their financial health. Built with cutting-edge technologies, it offers seamless expense tracking, intelligent budget allocation, bank integrations, and premium subscription features.

Key Features

• ** Interactive Dashboard** - Comprehensive financial overview with customizable charts and visualizations
• ** Transaction Management** - Manual transaction entry with smart categorization
• ** Smart Analytics** - Advanced expense categorization and spending pattern analysis
• ** Budget Management** - Set and track budgets with intelligent allocation suggestions
• ** Responsive Design** - Fully responsive interface optimized for all devices
• ** Secure Authentication** - Enterprise-grade security with Clerk authentication
• ** Data Import/Export** - CSV import functionality for transaction data migration

Demo

---

Tech Stack

Frontend

• Next.js 14 - React framework with App Router
• TypeScript - Type-safe development
• React 18 - Modern React with concurrent features
• TailwindCSS - Utility-first CSS framework
• Shadcn/UI - Beautiful, accessible component library
• Tanstack React Query - Server state management

Backend & Database

• Hono.js - Fast, lightweight web framework for API
• Neon PostgreSQL - Serverless PostgreSQL database
• Drizzle ORM - TypeScript ORM with automatic migrations
• Clerk - Authentication and user management

Integrations & Services

• Clerk - Authentication and user management
• Vercel - Deployment and hosting platform
• AWS Route53 - Custom domain management

---

Project Architecture

src/
├── app/                    # Next.js App Router
│   ├── (auth)/            # Authentication pages
│   ├── (dashboard)/       # Protected dashboard routes
│   └── api/               # API endpoints
├── components/            # Reusable UI components
│   ├── ui/               # Shadcn/UI components
│   └── charts/           # Chart components
├── lib/                  # Utility functions and configurations
├── hooks/               # Custom React hooks
├── types/               # TypeScript type definitions
└── db/                  # Database schema and migrations

---

Quick Start

Prerequisites

• Node.js 18.0 or later
• npm or yarn package manager
• PostgreSQL database (Neon recommended)

Installation

1. Clone the repository

   git clone https://github.com/27manavgandhi/Finance-SaaS-Platform.git
   cd finpro-finance-tracker

2. Install dependencies

   npm install

3. Environment Setup

   Create a .env.local file in the root directory:

   # Database
   DATABASE_URL="postgresql://username:password@host:port/database"
   
   # Authentication (Clerk)
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_..."
   CLERK_SECRET_KEY="sk_test_..."
   NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
   NEXT_PUBLIC_CLERK_SIGN_UP_URL="/sign-up"
   
   # App Configuration
   NEXT_PUBLIC_APP_URL="http://localhost:3000"

4. Database Setup

   # Generate database schema
   npm run db:generate
   
   # Run migrations
   npm run db:migrate
   
   # Seed with sample data
   npm run db:seed

5. Start Development Server

   npm run dev

6. Access the Application

   Open http://localhost:3000 in your browser.

---

📊 Database Management

Available Scripts

# Generate new migration files
npm run db:generate

# Apply database migrations
npm run db:migrate

# Seed database with sample data
npm run db:seed

# Open Drizzle Studio (Database GUI)
npm run db:studio

# Reset database (caution: destructive)
npm run db:reset

Sample Data Import

You can also import the provided Sample.csv file through the application interface for quick setup with realistic transaction data.

---

Roadmap & Features

Completed Features

• Interactive Financial Dashboard with real-time data visualization
• Customizable Chart Types (Line, Bar, Pie, Donut charts)
• Advanced Filtering by account, date range, and categories
• Comprehensive Transaction Management with detailed transaction table
• CSV Import/Export functionality for transaction data
• RESTful API built with Hono.js for scalable backend operations
• State Management using Tanstack React Query for optimal performance
• Authentication System with Clerk (Core 2) integration
• Modern UI/UX with Next.js 14 App Router and TailwindCSS
• Database Management with Neon PostgreSQL and Drizzle ORM
• Production Deployment on Vercel with custom AWS Route53 domain

Upcoming Features

• Mobile App (React Native)
• AI-Powered Insights for spending predictions
• Goal Setting & Tracking for financial objectives
• Team/Family Sharing capabilities
• Advanced Reporting with PDF exports
• Investment Portfolio tracking
• Bill Reminders and recurring transaction alerts

---

Contributing

We welcome contributions to FinPro! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Guidelines

• Follow TypeScript best practices
• Maintain consistent code formatting (Prettier)
• Write descriptive commit messages
• Add tests for new features
• Update documentation as needed