showcase_

Lawfty 2.0

tools used

react, typescript, graphql, tailwind, storybook, ruby on rails, sanity.io, next.js

year

2025

front-end, ui/ux, back-end

View Project

available for freelance work

social_

twitter / instagram / facebook

Lawfty ad image

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.

Lawfty website image Lawfty website image Lawfty website image

Design system

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

Lawfty design system Lawfty design system

Lawfty CMS

I built a Sanity/Next.js project — essentially one CMS that powers multiple pages across different campaigns.

It features a schema architecture that separates environments into distinct “datasets” for production and staging.

When a new page is created in a collection, it’s automatically routed to the correct campaign based on the selected configuration.

This was my first time building a CMS designed to handle multiple page deployments from a single content source — a challenging but rewarding process. The system was built using Next.js App Router, with GraphQL, Redis, and New Relic integrations to ensure performance, observability, and scalability.

Lawfty CMS website image Lawfty CMS website image


View website | View CMS website | Contact Me

work

Case study incoming

Cimerat project image, click to view more details.

Cimerat

react native, typescript, mongo, tailwind, express

Cimerat is a flatmate finder app, built with React Native and TypeScript.

Case study incoming

Flatmately project image, click to view more details.

Flatmately

js, html, tailwind, figma

Flatmately is a flatmate finder app, built for New Zealand and Australian market. I was tasked to design and develop their website, and also helped with branding and marketing.

Case study incoming

NxtStep project image, click to view more details.

NxtStep

js, html, bootstrap, sketch, ai, psd

NxtStep is a job board for students and graduates. I was tasked to design and develop their website, and also helped with branding and marketing.

Case study incoming

Yoga With Kassandra project image, click to view more details.

Yoga With Kassandra

js, html, sass, wordpress, ai, psd

Yoga With Kassandra is a yoga teacher and content creator. I was tasked to design and develop her website and courses platform while I was working at VidApp.

Case study incoming

Tourism New Zealand project image, click to view more details.

Tourism New Zealand

js, html5, css3, sass, bootstrap, sketch

Tourism New Zealand is a website I've built to showcase my skills utilising JavaScript, HTML5, CSS3, SASS, Bootstrap, Sketch. I was tasked to design and develop their website.

Case study incoming

Renkon project image, click to view more details.

Renkon

js, html5, css3, sass, bootstrap, handlebars, sketch

Renkon is a Japanese restaurant, I've pitched the new website and design for the ordering app. I used JavaScript, HTML5, CSS3, SASS, Handlebars and Bootstrap to build the website.

Case study incoming

DotaPopQuiz project image, click to view more details.

DotaPopQuiz

js, html5, css3, sass, php, bootstrap, sketch

DotaPopQuiz is a quiz app built with JavaScript, HTML5, SASS, PHP. It was built as a fun project to make a game to increase brand awareness and to learn more about JavaScript and PHP.

Case study incoming

VidApp project image, click to view more details.

VidApp

wordpress, js, html, sass, ai, psd

VidApp is a video streaming platform. I was tasked to design and develop their website and the platform where users would publish their customised app for iOS and Android.