Freelancer Invoice Management System

As a software engineer taking on part-time and contract roles, managing billing and sending professional invoices can quickly become a repetitive and time-consuming chore. I built this Invoice Management System to automate the invoicing pipeline, track payments, and maintain a professional image with clients—all from a centralized, easy-to-use dashboard.

🎯 The Problem

When working with multiple clients, freelancers often face several administrative pain points:

• Repetitive Data Entry: Creating invoices in traditional word processors or spreadsheets requires manually re-entering client details, addresses, and rates every single time.
• Inconsistent Formatting: Keeping a professional, unified, and branded look across all invoices is difficult when formatting manually.
• Scattered Tracking: Remembering which invoices are drafts, pending, paid, or overdue is messy without a dedicated system of record.
• Complex Billing Models: Managing the math for different contract types (hourly vs. fixed weekly/monthly) is prone to human error.
• Friction in Delivery: Exporting a document to PDF, opening an email client, attaching the file, and writing a standardized email is a tedious multi-step process.

💡 The Solution

This project is a custom-built, full-stack web application tailored specifically for the needs of contractors and freelancers. It solves the problems above by providing:

Key Features

• Client Management: Save client details (company name, contact info, default currency) once. Future invoices auto-populate this data, saving time and reducing errors.
• Flexible Billing Models: Built-in support for multiple contract types (Hourly, Fixed Weekly, Fixed Bi-weekly, Fixed Monthly). The system automatically calculates total amounts based on hours worked or fixed rates.
• Global & Per-Client Profiles: Set up a global "From" profile (logo, name, website, address) for your brand, with the flexibility to override these details for specific clients when operating under different aliases or partnerships.
• Instant PDF Generation: Converts web-rendered invoices into high-quality PDFs instantly using client-side rendering (html2canvas and jsPDF).
• Integrated Email Delivery: Send invoices directly to clients from within the dashboard using integrated email providers (via Resend or Nodemailer).
• Lifecycle Tracking: Keep track of the status of every invoice at a glance (Draft, Pending, Paid, Overdue).

🛠️ Technology Stack

• Framework: Next.js 16 (App Router) for Server-Side Rendering and API routes.
• Frontend: React 19, Tailwind CSS 4, and accessible components (Base UI / Radix UI).
• Database: PostgreSQL for robust relational data storage.
• ORM: Prisma for type-safe database queries and schema management.
• Forms & Validation: React Hook Form paired with Zod for strict schema validation.
• PDF Generation: html2canvas + jsPDF for seamless browser-to-PDF conversion.

🚀 Getting Started

First, clone the repository and install the dependencies:

npm install

Set up your environment variables by creating a .env file (you can copy from .env.example if available) and fill in your database and email credentials:

# Example .env variables
DATABASE_URL="postgresql://user:password@localhost:5432/invoice_system"
SMTP_HOST="smtp.example.com"
SMTP_PORT="587"
SMTP_SECURE="false"
SMTP_USER="your_smtp_username"
SMTP_PASS="your_smtp_password"
SMTP_FROM="\"Your Name\" <no-reply@example.com>"

Generate the Prisma client and push the schema to your database:

npx prisma generate
npx prisma db push

Seed the database with initial data (optional):

npx tsx prisma/seed.ts

Run the development server:

npm run dev

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