Case study
Comforty — Furniture Store
Solo project · built to learn a headless CMS with Next.js.
A furniture e-commerce store I built solo to learn how a headless CMS fits into a Next.js app. Products come from Sanity, and the cart works across the whole site.
Overview
Comforty is a furniture store front end. I wanted to understand how a real content source (a CMS) connects to a Next.js app instead of hard-coding products, so I set up Sanity as the backend and built the storefront on top of it — product listing, product details, and a cart.
Problems I ran into
…and how I worked through them.
The problem
I'd never used Sanity before, so getting the product data out of it and into my pages was confusing at first.
How I solved it
I learned GROQ (Sanity's query language), set up the Sanity client, and tested my queries in Sanity's Vision tool before wiring them into the pages.
The problem
Product images from Sanity wouldn't load with Next.js's Image component and threw a config error.
How I solved it
I used Sanity's image URL builder to generate proper URLs and added Sanity's image host to the images config in next.config, which fixed the loading and let Next optimize them.
The problem
The cart kept emptying when I moved between pages or refreshed, so it didn't feel like a real store.
How I solved it
I moved the cart into a shared React Context and saved it to localStorage, so the items stay put across navigation and page reloads.
UI / UX decisions
- Stayed close to the original design so spacing, type, and colors feel consistent across pages.
- Used a responsive product grid so it reads well on phones as well as desktop.
- Kept clear cart feedback (item count in the header) so it's obvious when something's added.
What I learned
- How a headless CMS works and how GROQ queries pull structured content.
- How to manage shared state (the cart) and keep it between page loads.
- How to turn a design into a working, responsive front end.