01. Landing page
Background
I joined the Pro team in the fall of 2023, roughly one year after I started my code journey. The project were in the starting phase of migrating from a dated Ember application to the recently chosen Next.js framework. The choice landed on Next.js over Sveltekit as there were clear cross-team synergies and a bigger community.
The stack was not the only thing needing a bit of care — the design hadn't been updated in a long time. Booli Pro is a service which contains many tools that all serve different purpopses. The purpose of the tools may differ, but the interactive patterns didn't always have to, so that was my starting point.
Design and components
I started setting an overarching design system together with tokenization of the decisions made. As we're only two developers in the team, me being split between code and design, decisions had to be made with speed and ease-of-use in mind and as a priority. Our decision for the component library started with Radix UI but ended in Shadcn/ui for its speed in setting up tokens and flexibility – not having to spend too much time writing boiler plate code.
The speed gained from Shadcn/ui let's us keep a high development pace with a clear focus on "getting things done" without having to stress too much about the fundamental component architecture. The flexibility of the library got us on our feet quickly, but still let's us do deep customizations to our components when needed.
Where there's data, there're graphs...
As the service is data heavy, the need for a rigid yet flexible solution for both graphs and tables was clear. We started researching and working with ChartJS, but quickly hit its limitations — both in terms of styling and behaviour. We wanted very detailed control over all the parts of the charts and the heavyweight D3.js showed up on our radar.
While giving us the control we wanted, our lack of experience working with D3.js became a bottle neck and slowed our progress. D3 also gave us quite a bit of a Typescript headache — if you know, you know. Our eyes turned to Visx, a low level abstraction built on top of D3.js. It gave us everything we needed in terms of control while giving us a lot of easy-to-use tools built-in.