Online Store
Designed in Figma and developed using Next.js and Sanity.
My Goal
My goal was to create a scalable shopping platform with reusable UI components and responsive layouts across devices that can be managed by the client without touching code.
My Role
- UI Implementation from Figma designs
- Implementation of Sanity CMS schema
- 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
The aim was to build a storefront that:
- Allows no-code 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:
- Consistent typography
- Component variants (buttons, cards, badges)
- Responsive breakpoints
- Product card and gallery structures
The development process focused on faithfully translating the design system into reusable React components while preserving spacing, hierarchy, and interaction states.
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.