Gambaran Umum
Sebagai bagian dari platform web builder internal di Emisell, aku berkontribusi dengan membangun section-section UI yang dapat digunakan merchant untuk menyusun halaman storefront mereka — mulai dari alur checkout, tampilan koleksi produk, produk favorit, navigasi header, layout blog, halaman kebijakan, section kontak, dan masih banyak lagi.
Masalah
Dalam platform builder, section tidak bisa dikodekan secara statis — semuanya harus beradaptasi secara dinamis terhadap konfigurasi merchant sambil tetap konsisten secara visual dan responsif. Tantangannya: satu section bisa dipengaruhi oleh settingnya sendiri sekaligus global setting seperti palet warna dan tipografi, secara bersamaan.
Fitur Utama
- Rendering section dinamis yang dikendalikan oleh nilai dari form control merchant
- Section mencakup: Checkout, Collections Showcase, Favorite Products, Header, Blog, Policies, Contact, dan lainnya
- Integrasi global settings (warna, font, spacing) yang memengaruhi style per-section
- Layout responsif dengan ketepatan pixel-perfect di semua breakpoint
Highlight Teknis
Setiap section adalah komponen React berbasis konfigurasi — tampilannya ditentukan oleh nilai yang berasal dari layer form control, bukan style yang dikodekan langsung. Ini membutuhkan pemetaan yang cermat antara setting yang dikonfigurasi pengguna dan utility class Tailwind, agar nilai dinamis tidak merusak desain.
Tantangan paling menarik adalah resolusi style berlapis: global settings (warna brand, tipografi) dan setting spesifik per-section sama-sama memengaruhi output akhir. Menghubungkan kedua layer ini dengan benar — agar perubahan di global settings terpropagasi ke section yang relevan tanpa konflik — menjadi inti masalah arsitektur yang harus diselesaikan.
SWR digunakan untuk fetching data yang efisien dengan caching, sementara Zod menangani validasi runtime terhadap skema konfigurasi section untuk mendeteksi ketidaksesuaian lebih awal. TypeScript memastikan typing yang ketat di seluruh props section, membuat kontrak antara konfigurasi dan UI menjadi eksplisit dan mudah di-maintain.