Working with Code

Clay is built on a well-known web technology stack: Gatsby React TypeScript Effector Storybook This section aims to guide you through the code structure of Clay.

Top Level Files gatsby-* - These are Gatsby configuration files. postcss.config.js - PostCSS is used as the processor for Tailwind CSS, and this is its configuration file.

The following describes the process that occurs when a user loads a Clay page in their browser: SiteLayout Gatsby is configured to wrap the entire website within a specific component:

Based on the fetched Lana shop data, Gatsby generates a collection of pages. The Gatsby configuration accommodates the configured shop languages and will produce a multi-language page structure if the shop has additional languages set up. If there is only one language, the

Clay employs effector for state management. The decision aligns with the fact that the @lana-commerce/core library of Lana also provides several effector-based logic modules, many of which are used in Clay.