Modernising a legacy administration platform

Overview#

At ToucanTech, I worked on the modernisation of a long-running administration platform used to manage data across the wider product.

I joined as the first dedicated frontend developer and worked closely with a Symfony developer to improve an interface that had evolved over many years through PHP, CodeIgniter, Bootstrap and jQuery.

My role went beyond implementing supplied designs. There was no dedicated product designer, so a significant part of the work involved identifying usability problems, establishing reusable UI patterns and deciding how existing workflows could be modernised without disrupting the underlying product.

The challenge#

The application contained a mixture of legacy interfaces and newer Symfony pages.

This created several frontend challenges:

• inconsistent interaction patterns
• duplicated markup and styling
• difficult-to-maintain JavaScript
• interfaces designed around older Bootstrap conventions
• complex data-heavy workflows that could not simply be replaced with generic components

The goal was to improve the frontend progressively while continuing to work within the existing Symfony application.

Building a reusable frontend layer#

I introduced reusable Twig components and macros for common interface patterns and used Tailwind CSS to create a more consistent visual system.

Stimulus provided lightweight client-side behaviour without requiring the application to be rewritten as a separate SPA.

This approach suited the architecture well: Symfony continued to own routing, forms and server-rendered pages while JavaScript was introduced where richer interaction was genuinely useful.

Redesigning the query builder#

One of the most substantial pieces of work was a drag-and-drop query builder used to construct complex filtering rules.

The existing implementation had become difficult to maintain and gave users limited feedback when constructing invalid combinations.

I redesigned the interaction model and rebuilt much of the frontend behaviour.

The JavaScript implementation grew to more than 4,000 lines and handled areas including:

• drag-and-drop behaviour
• nested groups
• rule ordering
• validation
• invalid action prevention
• visual feedback
• synchronisation between interface state and form data

A major focus was preventing invalid states rather than allowing users to create them and reporting errors afterwards.

What I learned#

This project changed how I think about frontend engineering.

The most difficult frontend problems are often not visual. They involve modelling state, understanding the constraints of an existing system and deciding where complexity should live.

It also gave me much more experience working incrementally inside a mature codebase rather than treating modernisation as a complete rewrite.