InvoiceApp dashboard and invoicing interface

InvoiceApp / Web App

Links

LiveDemo

Timeline

Apr 2023 - Present

Tech Stack

Next.js / React / TypeScript / Tailwind CSS / tRPC / PostgreSQL / Drizzle ORM

Overview

InvoiceApp is a modern platform to create, manage, and track invoices and estimates without friction. It replaces messy spreadsheets and complex tools with a clean, fast interface designed for real business workflows.

Businesses can manage clients, track payments, organize financial data, and generate documents in just a few clicks.

Motivation

Most invoicing tools are either too complex or too limited. Managing invoices, tracking payments, and finding data often takes more time than it should. InvoiceApp was built to remove that friction and make every action feel fast, simple, and predictable.

Goals

  • Make invoicing extremely fast and effortless
  • Reduce clicks required to complete any task
  • Provide clear visibility into business finances
  • Enable powerful workflows without complexity
  • Integrate AI in a way that feels actually useful

Design objectives

  • Clean and distraction free interface
  • Keyboard first interactions for speed
  • Consistent layouts across all flows
  • Minimal learning curve for new users
  • Scalable structure for growing businesses

Colors, Themes, Fonts

BACKGROUND

FOREGROUND

CARD

MUTED

BORDER

PRIMARY

PRIMARY TEXT

ACCENT BLUE

ACCENT BLUE SOFT

SUCCESS

WARNING

ERROR

SPACING

4px – 64px (Tailwind scale)

RADIUS

0.6rem (10px) base, rounded-xl / rounded-2xl used across UI

SHADOW

Subtle shadows (0 10px 30px rgba(0,0,0,0.08)) + layered soft shadows in UI

INTER (PRIMARY UI)

Inter (primary UI)

SOURCE SANS 3 (CONTENT / FALLBACK)

Source Sans 3 (content / fallback)

12PX - CAPTIONS

12px - captions

13PX - SMALL TEXT

13px - small text

14PX - BODY

14px - body

16PX - BASE

16px - base

18PX - SECTION TITLES

18px - section titles

24PX - HEADINGS

24px - headings

28PX+ - DISPLAY

28px+ - display

AI

Billie is the built in AI assistant that helps users interact with their data using natural language.

  • Ask questions in plain English
  • Instantly find invoices and estimates
  • View totals, taxes, and client details in chat
  • Export summaries as PDF or Excel

Features

Analytics

Track revenue, payments, and performance with detailed insights.

Invoice & Estimate Management

Create and manage professional documents with reusable templates.

Smart Search

Quickly find invoices, estimates, and clients across the workspace.

Client & Product Management

Organize clients and manage product or service catalog.

Productivity System

Keyboard shortcuts, command palette, and bulk actions designed for speed.

Guide

Basic workflow inside InvoiceApp:

  1. Create or import a client
  2. Add products or services
  3. Generate an invoice or estimate
  4. Send and track payment status
  5. Use analytics to monitor performance
Back