Visual Thinking
Rebuilding a legacy Svelte 4 application in Svelte 5, with a focus on speed, accessibility and a connection to the Hygraph API.
The question
The Visual Thinking website ran on outdated code and loaded slowly. It was also missing interactive features, such as filtering without reloading the page and a working like button.
My role
I worked in a team as a frontend developer. I was responsible for the move to Svelte 5, improving loading speed, reviewing code through pull requests on GitHub and building the connection that saves likes in Hygraph.
Design & development
We worked according to the Development Lifecycle, with a project board on GitHub, MoSCoW prioritisation and daily stand-ups.
I started with a big clean-up: I moved the code from Svelte 4 to Svelte 5, including the new runes.
During a performance audit with Lighthouse and WebPageTest, I found that a single Adobe font slowed the site down by five seconds. In consultation with the client, I replaced it with a faster solution.
For the like button I first made Crazy 8 sketches in Procreate. Through an HTML breakdown I turned them into a wireframe in Figma, and then built it in code.
The result
A fast, accessible Svelte 5 application with clean code conventions. The new font took the PageSpeed score from 74 to 99. The like button works and talks to the Hygraph API using GraphQL.
What I learned
Updating legacy code and untangling dependencies during a framework upgrade takes a lot of digging. But when you see how much faster the site becomes for users, that detective work is absolutely worth it.