Build a design system, not just screens
Tokens, a UI library and dark-mode theming are shared across every module, so one change reaches all of them.
The cost: That work takes time and never shows up as a feature on its own.
Ledgers
One front-end developer, one AI-powered operating system for startup founders, on web, desktop and mobile.
- 3
- platforms: web, desktop, mobile
- 1
- front-end developer
- Public
- beta, live now
The project
Ledgers is an AI-powered operating system for startup founders, based in New York and Dubai. It brings a CRM, real-time chat, invoicing, planning and dashboards into one product. I'm the only front-end developer on it, so I work with the founder from scoping a feature through to its release.
The problem
Ledgers covers a CRM, real-time chat, invoicing, planning and dashboards, and it has to work on the web, on the desktop and on a phone. All of that front end has one developer. If every module and platform needed its own UI work, I would spend my time repeating myself instead of shipping.
The decisions
Wrap the Vue app in Electron for desktop
The desktop app and the web platform run the same code, so a feature ships to both.
The cost: An Electron app is heavier than a native one, and things like Google sign-in need their own desktop handling.
Write mobile separately in React Native
The phone app gets real native screens and its own layouts instead of a shrunken web page.
The cost: It is a second codebase to keep in step with the web. It has since moved ahead of the web app on layout.
Remove my own glass navigation bar
I built it with SVG filters and a Safari workaround, and I was happy with it. The finished mobile app doesn't use it.
The cost: Good work got thrown away. The product comes first.
Where it landed
Ledgers is in public beta on the web with a Mac desktop download, and the mobile app is in App Store review.
What I did
- Own front-end delivery across a multi-module B2B platform: CRM, real-time chat, invoicing, planning and dashboards.
- Built the design system from scratch: UI library, design tokens, dark-mode theming and shared styling primitives, used across every module.
- Built the macOS desktop app with Electron, running the same Vue codebase as the web platform.
- Built the iOS and Android app in React Native.
- Built the CRM, the largest module, including an optimistic-update pipeline with native drag-and-drop and automatic rollback on failed requests.
- Built the Tiptap rich-text layer for Rooms, the real-time collaboration module, with custom Markdown serialization.
- Led the mobile redesign and built a custom glass navigation bar with SVG filters and a Safari-specific rendering workaround.
- Designed screens and flows, and made layout, navigation and product decisions with the founder.