Product Design & Full-Stack Development
Ledgerly
A modern finance CRM that helps teams manage customers, invoices, revenue and client notes from one secure, multi-tenant dashboard.
- Role
- Designer & Developer
- Client
- Personal Project
- Year
- 2026
- Tools
- Next.js · React · TypeScript · Tailwind · PostgreSQL

The problem
Small teams often manage customers, invoices, revenue and client notes across disconnected spreadsheets, invoicing tools, email threads and manual records. This makes information harder to find, increases duplication and separates financial activity from the customer context behind it. Ledgerly brings these workflows into one organised, secure workspace.
Product strategy
Ledgerly is positioned as a finance CRM, not a collection of dashboard screens. It connects customer records, invoices, revenue status and client notes so teams manage financial activity and customer relationships from the same workspace — with revenue derived directly from invoice data, keeping summaries connected to the records behind them.
UX & UI
I designed responsive landing, registration, login and dashboard experiences alongside customer, invoice and note-management workflows, with navigation that keeps core tasks accessible on desktop and mobile.
The interface prioritises clear financial summaries, familiar table patterns, straightforward forms and predictable navigation. Search and filtering support invoice discovery, while paid and pending states surface revenue status at a glance.
Design system
Ledgerly's design system is built for finance: deep navy, emerald green, soft slate backgrounds and white card surfaces, set in Inter for readable interface type. Reusable buttons, form controls, tables, status badges, cards and navigation components keep the landing page and authenticated application consistent.
Technical architecture
Built with Next.js App Router, React, TypeScript and Tailwind CSS. PostgreSQL on Neon stores users, organisations, customers, invoices and customer notes; Auth.js manages authentication and sessions, and Zod with Server Actions validate server-side operations. Version-controlled with Git and GitHub, deployed to Vercel.
Authentication & security
Ledgerly uses organisation-based multi-tenancy, so each workspace only exposes records belonging to the authenticated user's organisation. The database was extended with organisation ownership for customers, invoices and notes, with row-level security policies and server-side ownership checks protecting tenant boundaries.
Protected routes redirect unauthenticated users to login, and authenticated sessions carry the information needed to resolve the correct workspace.
Outcome
The result is a live, responsive finance CRM with secure authentication, organisation-based data isolation and connected customer, invoice, revenue and notes workflows. I took Ledgerly from positioning and visual identity through design-system creation, interface design, database architecture, authentication, multi-tenancy, server-side security, testing and deployment. This demonstrates a full-stack ownership with user experience at the centre.
Project highlights
Switch the view, or open any image full-size.







