Case study 09 / 09
Online store · tutorial-based · 2025–2026
zar
A fashion-boutique storefront that I rebranded and extended from an open-source Next.js, Sanity and Stripe tutorial, with a new design, catalogue search and pagination.
- Role
- Developer of the redesign and extensions
- Stack
- Next.js
- React
- TypeScript
- Tailwind CSS
- shadcn/ui
- Sanity
- Clerk
- Stripe
- Zustand
- Links
- Visit zar.fashion (opens in a new tab)
- Original tutorial project (opens in a new tab)github.com/noorjsdivs/shopcartyt
Credit
Built on the open-source “Shopcart” tutorial by ReactJS BD. The cart, checkout, webhook and order code come from that project; the redesign, search, pagination and catalogue data are my additions.
01
Overview
zar is an online store for women’s fashion, live at zar.fashion: traditional and bridal dresses, tunics, bags and accessories. Visitors browse by category and brand, search, keep a wishlist and pay by card.
It started from an open-source tutorial store. I gave it its own brand and design and extended the shopping experience.
02
The brief
The tutorial provided a working store. The goal was to turn it into a boutique with its own identity, and to make a growing catalogue easier to search.
03
Role and scope
- Role
- Developer of the redesign and extensions
- Scope
- Built on the open-source “Shopcart” tutorial by ReactJS BD. My work: the boutique branding and redesign, text search with pagination, a working header search and seeded catalogue data.
04
Main features
Boutique redesign
New branding, typography (Playfair Display and DM Sans) and restyled components across the store.
Search with pagination
Free-text search across product names and descriptions, combined with the category, brand and price filters, eight products per page.
Header search
A working search bar in the site header.
Catalogue data
Seed scripts for eight categories, six brands and about thirty products.
Checkout (from the tutorial)
Cart and wishlist, Clerk sign-in, Stripe Checkout and order history.
Admin experiment
An unmerged branch that moves the store to Supabase and adds a role-based admin dashboard for products, orders and users.
05
How it’s built
Search on top of filters
Text search joins the existing category, brand and price filters in one query, and results are split into pages.
Sanity as the catalogue
Products, categories, brands and orders are Sanity documents, edited in an embedded Studio.
Integrations
- Stripe Checkout
- Clerk authentication
- Sanity CMS
06
Screenshots
ScreenshotShop page with search, filters and pagination on the live store. Screenshot captured October 2026. 
ScreenshotHomepage on a phone. Screenshot captured October 2026.
07
Challenges and decisions
Making it its own
Restyling almost every component while keeping the inherited cart and checkout logic intact meant separating presentation from behaviour component by component.
08
What was delivered
- A rebranded boutique storefront, live at zar.fashion
- Catalogue search with pagination
- Seeded catalogue data
