Lawfty 2.0

Frontend Development

I initiated the front-end development from scratch using modern tools and frameworks:

React & Typescript

Vite: For fast and efficient project setup and bundling. GraphQL & Apollo Client: To manage API communication and real-time subscriptions.

Vitest: To establish a solid foundation for testing, ensuring the application’s stability.

Shadcn & Tailwind: To deliver a sleek, accessible, and consistent user interface

Storybook: Design system

---

Challenges & Solutions

Legacy Modernization: Migrated the legacy Ruby on Rails MVC app into a modern Single Page Application (SPA), introducing a component-driven architecture with React.

Design System: Built a scalable design system from scratch with a grid-based layout, TailwindCSS, WCAG-compliant components, and unit tests to ensure long-term maintainability and accessibility.

Real-Time Functionality: Designed subscription handling for live updates without performance degradation.

State Management: Developed a scalable architecture for managing complex states and relationships between inquiries and their secondary counterparts.

Results

The Lawfty Intake Manager significantly reduced response times for intake specialists, streamlined inquiry processing, and improved collaboration among team members. The application laid the groundwork for future enhancements, with a strong focus on scalability and usability.

Design system

I built a design system with Tailwind CSS, focusing on accessibility (WCAG compliance) and pixel-perfect React components ready for production use.

It now sits at 48 components, from the small pieces like Button, Input and Badge up to Table, MultiSelect, DatePicker, Modal and a WYSIWYG input. Each sits on a Radix primitive, so keyboard handling and screen reader behaviour come from a tested base and I am not reimplementing focus traps by hand. Variants are handled by class-variance-authority. There are 55 Storybook stories and 51 test files covering them, and Chromatic catches visual regressions on the way in.

What's in the dashboard

The app has grown into 23 feature areas. The ones that took the most work:

• Inquiry routing. Rulesets that decide which firm an inquiry goes to, with their own draft and publish flow so routing changes can be staged and reviewed before they go live.
• Campaigns and numbers. Campaigns, ad campaigns, an ad scheduler, campaign and operations phone numbers, plus a banned numbers list.
• Experiments. Where A/B experiments are created and named. The CMS reads this list over the API, so an editor picking a variant in Sanity is choosing from experiments defined here.
• Page preview. Queries Sanity directly from the dashboard, so the team can preview a CMS page without leaving admin.
• Firms, sources, distribution lists, users and the SOL report.

Forms were the other big piece. Most use react-hook-form with Zod schemas, but the ones whose shape comes from the backend are rendered with react-jsonschema-form instead, so a new field in the API shows up in the UI without a frontend change. Tables run on TanStack Table and rich text on TipTap.

Real-time and feature flags

Subscriptions go over Rails ActionCable, wired into Apollo with graphql-ruby-client's ActionCableLink. That let me keep the existing Rails backend and still push live updates into the SPA, which mattered because the migration happened one page at a time. GraphQL Codegen generates types straight from the schema, so a change on the Rails side breaks the build instead of breaking quietly in production.

Feature flags run through LaunchDarkly, which is what made the incremental migration safe. A new React page could be turned on for a few internal users, checked, then rolled out.

---

View website | View Lawfty CMS case study | Contact Me