I recently worked on a project involving a platform with multilingual content, where it was necessary to model page contents with a component system that could handle high-level art direction and experience, preserve a clean outline and accessibility as well as a top notch performance level.

I believe that sharing my journey on this realization could be beneficial to other people in charge of design system.

Technical choices

In view of the objectives, a web app coupled with a headless CMS with a server-side page generation seemed to be the appropriate solution.

As usual, I went with my favorite front-end stack, Nuxt/Apollo, which provides a powerful caching system as well as an easy server side rendering implementation. Nuxt/Apollo also offers a better level of performances than React/Next — but this point might be subject to controversy 😅.

After a quick benchmark between Contenful and Prismic for the CMS solution, I opted for Contenful, providing an easier set-up for the GraphQl API, and coupling perfectly with Apollo without the addition of any extra scripts. Response time, image API and distribution are also good.

The following principles can easily be applied to a Svelte or React app.

Principles

The first task was to create the contents’ models in Contenful, starting with each components and pages where we could reference them:

#graphql #design #webdev #javascript