Fullstack Developer for a National News Media
Arthur Liege
Setting up a Monorepo (NX.dev): web application & API TS-typed bundle & Branded UI design system. AAA a11y. Strong dependence on existing services.
Context ?
Belgium's largest French-speaking news channel needed a complete overhaul of its site after 12 years of existence of their current platform.
My Job ?
I worked as a front-end developer and a NextJS expert (SSR + serverside optimizations for the front-end environment). It was also necessary to create and implement a solid and tested design system, with AAA accessibility, which will be reused in future RTBF projects.
And what about the application stack ?
Front-end app : NextJS / Tanstack Query (React-Query) / Jotai.
NextJS as been chosen for its performances but also the popularity of React with the client's internal teams. The goal was to have quick MVP capable of fetching all the news of this media and be able to handle a very high user traffic.
Server Side Rendering was the first step to help us managing huge payload from an historic PHP back-end with a 20 years database (forwarded by a Laravel API, not maintained by our team).
Tanstack React Query was used to cache intelligently all data coming for this API: data was prefetch and cached serverside, then served client side, coming directly from the Tanstack cache to prevent API queries coming from client-side.
The majoirty of API queries management and Typescript typing was generated from the API's swagger, using Orval.dev.
Then, we had to handle all the user information, like cookies, tracking, session in a quite complex company ecosystem, with dozen of dependence and partners. We used Jotai to manage stores using atoms and reducers.
Design system : Storybook / TailwindCSS / Accessibility testing libraries.
NX.dev helped us a lot to setup a Branded design system.
This design system was vastly based on :
TailwindCSS. Using postCSS and CSS modules to enhance default style.
Radix-ui. Unstyled Atoms that's already are accessible.
Storybook. All the components are tested and well document using Storybook MDX documentation.
Like this project
Posted Dec 1, 2022
Setting up a Monorepo (NX.dev): web application & API TS-typed bundle & Branded UI design system. Strong dependence on existing services.
MesusaJS Plugin : Migrate your Shopify products simply !
NextJS 13 — Manage your content using StoryBlok CMS
