Overview
As part of an internal web builder platform at Emisell, I contributed by building the UI sections that merchants can use to compose their storefront pages — including checkout flows, collection showcases, product highlights, blog layouts, header navigation, policy pages, contact sections, and more.
Problem
In a builder platform, sections can't be hardcoded — they must adapt dynamically to merchant configurations while staying visually consistent and responsive. The challenge: a single section can be affected by both its own settings and global design settings like color palettes and typography, all at the same time.
Key Features
- Dynamic section rendering driven by merchant-configured form controls
- Sections include: Checkout, Collections Showcase, Favorite Products, Header, Blog, Policies, Contact, and more
- Global settings integration (colors, fonts, spacing) that cascades into per-section styles
- Fully responsive layouts with pixel-perfect fidelity across breakpoints
Technical Highlights
Each section is a config-driven React component — its appearance is determined by values coming from a form control layer, not hardcoded styles. This required careful mapping between user-facing settings and Tailwind utility classes, ensuring dynamic values never broke the design.
The most interesting challenge was layered style resolution: global settings (brand colors, typography) and section-specific settings both influence the final output. Connecting these two layers correctly — so changes in global settings propagate to relevant sections without conflict — was the core architectural problem to solve.
SWR was used for efficient data fetching with caching, while Zod handled runtime validation of section config schemas to catch mismatches early. TypeScript enforced strict typing across all section props, making the config-to-UI contract explicit and maintainable.