uzdowski.design

← WorkLedgerPersonal · Live

Invoicer

Create invoices, send them to clients and let them pay online.

Type
Web app
Role
Design and development
Year
2024
For
Personal project
Stack
Next.js 15 · TypeScript · Clerk · Drizzle ORM · PostgreSQL · Stripe · Resend

Visit invoicer.uzdowski.design

Invoicer landing page: the product name and a sign-in button on a white page.
Live landing page

02

Context

A personal project to build the complete path of an invoice: created, sent, paid.

03

Role

Personal project. Design and development.

04

Idea

Document, then payment.

An invoice is a document with a status. The app keeps that simple: every invoice has one page for the owner and one for the client who pays it.

InvoiceNo. 0042ItemQtyAmountDesign sprint12 400.00Front-end build15 800.00Hosting setup1300.00Total8 500.00PAID
Drawing: an invoice as a ledger. Illustrative lines.

05

Experience

  • A dashboard of invoices and a form to create a new one.
  • A page per invoice, and a payment page with a success state for the client.
  • Sign-in and sign-up with Clerk.

06

System

  1. InterfaceNext.js 15 App RouterRadix UI
  2. DataDrizzle ORM on PostgreSQL
  3. ServicesClerk authenticationStripe paymentsResend with React Email

08

Output

A live app with a public sign-in page. The source is private.

09

Reflection

A good first run through payments and transactional email - both of which later became part of every product I built.