Scroll
Index / Work / 07 · Invoicr
2025 HNG Internship 14 · Stage 2 Frontend Solo React 19 · IndexedDBTanStackZod

A polished invoice manager for freelancers and studios — CRUD, multi-select status filter, Zod validation, theme toggle with no flash on first paint. Everything persists to IndexedDB through idb, so a hard refresh never loses an edit and the app keeps working with the network cut.

Client
HNG Internship 14 · Stage 2 Frontend
Role
Solo
Duration
10 / 2025 — 11 / 2025
Stack
React 19 · TypeScript · Vite · TanStack Router · TanStack Query · IndexedDB · idb · Zod · Tailwind v4
Invoicr — cover
INVOICR · 2025 · COVER PLATE
07 / 11
100%
client-side data
3
status tracks · paid · pending · draft
320 px
minimum width tested
Invoices · filter + statuses
Invoices · filter + statuses
§ 03 · Chapter

IndexedDB through idb

Every invoice lives in IndexedDB, accessed through the idb wrapper. A hard refresh, a closed tab, an offline session — none of it loses a draft. Theme preference rides in localStorage and is applied pre-paint so the first frame is always the right colour scheme.

§ 04 · Chapter

Validation with Zod

The invoice schema is a single Zod object: required fields, valid email, at least one line item, non-negative quantity and price. Field-level errors surface inline; the same schema runs on create and on edit so the two flows can never drift.

§ 05 · Chapter

A landing page that earns the dashboard

The marketing surface is its own route — typography-first, with three pieces of supporting copy and a single CTA into the dashboard. Loading and error states are explicit (skeleton invoice rows, centred error with retry), and the whole thing was tested down to 320 px in real browsers, not just devtools.

§99 · Continue

Have a brief?
Let's talk.

© 2026 · Moluno · Powered by sapa
v2.04.026 · 60Hz · 6.5244 N · 3.3792 E