Skip to main content
Lionel Sirvel

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
Ledgerly dashboard showing revenue summaries, invoices and customer management on desktop and mobile

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.