Benefits of using Strapi with Typescript Storybook tandem

We are working on react components integrated with strapi and storybook. Both for me - a novice programmer and for Wojtek - a programmer with many years of experience and extensive knowledge, it brings many benefits.

Starting with strapi, we can determine the content type, decide what fields our components will need, e.g. whether a given component will contain a title, description, photo and whether, for example, it must meet a condition to be displayed. In strapi, we can manage the content that we want to include in a given component. We can also easily change it - so that a non-programmer can edit the content.

All data that we input into strapi can be obtained using GraphQL API or REST API. On top of that with the help of a graphql-codegen tool we can make the graphql response typed in typescript.

Typescript shows us what data and in what form component expects to receive. Typescript is also responsible for maintaining contract between strapi responses and components props.

By passing these props to the components, we can display them by creating a story in the storybook. The storybook shows what a given component will look like and allows you to create different variants of component. We can create stories for different themes, multiple language versions and for example show negative scenarios, for when user forgot to input some data or we have had an backend issue, showcasing display of appropriate error message and gracefully handling those scenarios as well.

This combination of strapi + sb + ts allows a front end developer to work without being strictly dependent on the backend. As long as the initial contract is maintained. But also using Strapi by itself which provides most of the CRUD operations out of the box, limits the amount of custom backend code that needs to be written significantly, which in turn speeds up the development process and amount of bugs that can be introduced.

However, it brings the most benefits for the client, who can :

• manage the content of his application in strapi without the help of a developer
• check how the components will look like, as well as all their variants in the storybook, while the application is still being worked on
• strapi is free and open-source CMS which is constantly being improved and enhanced by the community, making it a choice that in the future may support even more features