Modular
E-Commerce Store
Designed in Figma and developed using Next.js and Sanity. The goal was to create a scalable, content-managed shopping experience with reusable UI components and clean, responsive layouts across devices.
My Role
- UI Implementation from Figma designs
- Component system architecture
- Sanity CMS schema design
- Dynamic product and category rendering
- Responsive layout implementation
The Problem
Most small e-commerce sites struggle with:
- Rigid content structures
- Poor scalability
- Hardcoded product layouts
- Inconsistent UI patterns
The aim was to build a storefront that:
- Allows non-technical content updates
- Scales with new product types
- Maintains visual consistency
- Prioritizes performance and clarity
Design System
This project began in Figma with a structured design system including:
- Defined spacing scale
- Consistent typography hierarchy
- Component variants (buttons, cards, badges)
- Responsive breakpoints
- Product card and gallery patterns
The development process focused on faithfully translating the design system into reusable React components while preserving spacing, hierarchy, and interaction details.
UI System and Reusability
The interface was built using a modular component structure, allowing:
- Reusable ProductCard components
- Dynamic category filtering
- Configurable content blocks via CMS
- Scalable layout patterns
- Consistent spacing and alignment
This approach ensures the storefront can expand without compromising design integrity.
CMS Integration
Sanity was used to create structured content models including:
- Products
- Categories
- Variants
- Image galleries
Content is fetched dynamically using GROQ queries, allowing non-technical users to manage products without touching code.
This makes the storefront scalable for client use.
Ongoing Development
The next phase includes checkout flow and Stripe integration, extending the storefront into a full transactional platform.