Skip to main content

ROVIK / WORK / 03

SURRR

CRAFTED WITH PURPOSE.

WORN WITH SOUL.

SURRR is a contemporary handcrafted fashion platform rooted in the craftsmanship of Thar, Sindh.

The project brings together editorial storytelling, product discovery and production-ready e-commerce into one digital experience — turning handcrafted clothing from a marketplace listing into a complete brand story.

From craft and culture to contemporary fashion and commerce.

thesurrr.com

← All work

Executive overview

What was wrong, what ROVIK did, and what changed — then implementation, validation, and technology in the sections below.

01

Challenge

Narrative digital products require coherent story, interaction, and technical delivery without breaking immersion or maintainability.

  • Story and product experience must work as one system
  • Engineering constraints shape how content and interaction ship
  • Quality matters for release confidence on interactive surfaces

02

Approach

The Surrr is engineered as an interactive narrative product — balancing creative direction with structured implementation and validation.

  • Product and engineering aligned to narrative experience goals
  • Technical architecture supporting interactive delivery
  • Disciplined verification before release

03

Outcome

An interactive narrative product delivered as a connected digital experience — documented as a ROVIK engineering and product case study.

  • Coherent story-led product surface
  • Implementation structured for iteration
  • Release-oriented quality practices

CONTEXT & CONSTRAINTS

HANDCRAFTED FASHION NEEDED MORE THAN A PRODUCT GRID.

Traditional handcrafted fashion products are often presented through marketplace-style listings.

  • Products can feel generic
  • Craftsmanship can become secondary to price
  • Product stories can become disconnected from shopping
  • Traditional clothing can be presented as costume rather than contemporary fashion
  • Inconsistent product imagery
  • Brand identity can depend on marketplace presentation
  • Discovery, product information, checkout and storytelling can feel fragmented

Build a contemporary fashion experience where craftsmanship, identity, storytelling and commerce exist within the same system.

BRAND STRATEGY

THAR → CRAFT → PEOPLE → CLOTHING → MODERN LIFE

Contemporary handcrafted clothing rooted in the craftsmanship of Thar, Sindh.

  • Contemporary
  • Minimal
  • Editorial
  • Premium
  • Handcrafted
  • Rooted
  • Human
  • Inclusive

Craftsmanship, clothing, people and story — technology supports the experience behind the scenes.

BRAND STORY

FROM THAR TO THE WORLD.

SURHAAN represents the woman at the heart of the SURRR story.

  1. 01Where it began
  2. 02Hands that taught her
  3. 03First piece
  4. 04Leaving
  5. 05London
  6. 06SURRR / Finding her place
She left with very little. Except everything that mattered.

SURHAAN — From Thar to the world.

The character is part of the brand's visual storytelling — not presented as an AI character.

EXPERIENCE

DISCOVERY → STORY → COMMERCE

The product page is designed as product catalogue, editorial story and commerce interface together.

INFORMATION ARCHITECTURE

Navigation structure

Verified routes form the storefront and operational structure.

PRODUCT SYSTEM

A CATALOGUE BUILT FOR DISCOVERY.

SURRR uses structured catalogue data rather than hardcoded individual product pages.

  • Product IDs
  • Slugs
  • Categories
  • Departments
  • Collections
  • Variants
  • Pricing
  • Product media
  • Descriptions
  • Product stories
  • Care information
  • Shipping information
  • SEO
  • Reviews

Discovery

  • Shop
  • New Arrivals
  • Men's
  • Women's
  • Unisex
  • Scarves
  • Collections
  • Product cards
  • Product pages

A dedicated scarf category demonstrates proper product taxonomy within the catalogue.

PRODUCT EXPERIENCE

THE PRODUCT PAGE IS PART CATALOGUE, PART STORY.

Product identity

  • Product name
  • Price
  • Category
  • Variant

Product imagery

  • Product photography
  • Lifestyle / model photography
  • Image alt text
  • Responsive presentation

Product information

  • Description
  • Product story
  • Details
  • Materials
  • Care
  • Highlights

Commerce

  • Variant selection
  • Add to Bag
  • Cart
  • Checkout

Trust

  • Shipping
  • Returns
  • Reviews
  • Verified purchase information

Discovery

  • Related products
  • Collection navigation
  • Category navigation

CONTENT QUALITY

EVERY PRODUCT SHOULD ANSWER THE CUSTOMER'S QUESTIONS.

The shift away from generic placeholder information toward configured store standards.

  • Delivery: £5.99
  • Standard delivery: 5–7 working days
  • Free standard delivery: orders containing 2+ items

Returns connected to the site's canonical refunds documentation.

Sizing based on actual product size options.

These reflect current configured product/store details — not universal promises for every product.

PRODUCT DATA

Product data architecture

Every public product should communicate enough information for a customer to make an informed purchase without seeing unfinished placeholder content.

  • Material
  • Care
  • Sizing
  • Shipping
  • Product-specific details
  • Product-specific highlights

CUSTOMER TRUST

REVIEWS WITH VERIFIED PURCHASE LOGIC.

  • Customer reviews
  • Ratings
  • Review titles
  • Review body
  • Display names
  • Product association
  • Customer association
  • Order association
  • Verified purchase status
  • Moderation
  • Review images
  • Helpful counts
  • Approval / rejection states

Statuses: pending · approved · rejected

Verified purchase

The review system validates purchase context server-side rather than relying only on frontend state.

  • Paid order
  • Appropriate order status
  • Product exists in order
  • Matching product ID
  • Valid order association

Sample content separation

Sample and development content is deliberately separated from real customer reviews in production.

  • Marked as samples
  • Cannot be presented as verified purchases
  • Excluded from production ratings, cards and structured data
  • Hidden when the environment is production

COMMERCE

FROM CATALOGUE TO ORDER.

Pricing is intended to remain consistent across product page, product card, cart, checkout and backend catalogue data.

PAYMENTS

A REAL CHECKOUT FLOW.

Stripe CLI supported local webhook testing during development.

AUTHENTICATION

CUSTOMER ACCESS AND ADMIN ACCESS ARE SEPARATE.

Admin authentication is separately protected from customer accounts.

  • Registration
  • Login
  • Account access
  • Order-related functionality
  • Review functionality
  • ADMIN_EMAIL
  • ADMIN_PASSWORD_HASH
  • ADMIN_AUTH_SECRET
  • Scrypt-based password hash (not plaintext credentials)

OPERATIONS

THE STORE HAS AN OPERATIONAL LAYER BEHIND THE EXPERIENCE.

  • Products
  • Reviews
  • Catalogue
  • Orders
  • Store operations

Review moderation accessible via /admin/reviews within the admin layer.

DATA

THE CATALOGUE IS BACKED BY REAL DATA.

Supabase Postgres — West EU / Ireland region

The SURRR database is deliberately separate from the IDRAAK Supabase project — schema changes remain isolated.

Catalogue changes required database-backed schema evolution applied to the SURRR project only.

Examples: product_reviews schema · Scarf category support

MEDIA SYSTEM

PRODUCT IMAGERY IS DATA, NOT DECORATION.

Media is structured and associated with catalogue records.

  • Image path
  • Product association
  • Alt text
  • Ordering

PRODUCT EXAMPLE

Documented catalogue entry

Documented product-data example — not the only SURRR product.

Pashmina Kashmiri Aari Embroidery Scarf, Embroidered Kashmiri Shawl, Winter Wrap, Christmas Gift

Price
£55.99 GBP
Colours
Beige Multi · Black Multi
Material
Pashmina
Size
28 × 80 inches
Embroidery
Traditional Aari embroidery
  • Made by The SURRR
  • Surhaan, From Thar, Sindh, Pakistan to World

VIRTUAL TRY-ON ARCHITECTURE

DESIGNED AS A SYSTEM, NOT A ONE-PRODUCT DEMO.

Designed and implemented a reusable virtual try-on architecture prepared for product-level garment assets and future provider integration.

  • Provider-agnostic
  • Product-aware
  • Asset-aware
  • Validated
  • Job-based

Generated product-specific assets are not all currently available. If a provider is not configured, the system reports an explicit unavailable or pending state. Internal assets were registered as pending rather than fabricated.

Master model

  • Full-body young woman
  • Warm beige studio
  • Calm expression
  • Long dark wavy hair
  • Ivory camisole
  • High-waisted blue straight-leg jeans
  • White low-top sneakers
  • Neutral full-body pose
  • Clean editorial lookbook style

surrr-master-model.png — 1024 × 1536

Reusable foundation — not every product currently has a generated VTO image.

ENGINEERING

BUILDING THE SYSTEM BEHIND THE BRAND.

Engineering connected brand experience with catalogue, data, payments and trust systems.

  1. 01Product information

    Prevent incomplete product information from reaching the storefront. Product-specific data → canonical mapping → product page → customer-facing information.

  2. 02Catalogue vs database

    A scarf category introduced a schema mismatch (department column not found in schema cache). Resolution: database migration, Supabase schema update, catalogue updates, product mapping, category validation, idempotent seeding and runtime verification — applied to the SURRR project only.

  3. 03Static product media

    New scarf model images initially appeared broken locally. Root cause: a long-running production server process had started before new public files were added. Resolution: restart after rebuild — symptom → investigation → root cause → verification.

  4. 04Admin authentication

    Admin login initially failed because the configured password hash was not in the expected scrypt-compatible format. Resolution: valid password hash, production environment update, hash format validation, email comparison, password verification, session creation and cookie validation.

QA / RELIABILITY

Verify the system. Not just the screen.

Do not assume a feature works because the UI looks correct. Verify the underlying state and workflow.

  • TypeScript validation
  • Production builds
  • Catalogue verification
  • Product verification
  • Product placeholder audits
  • Review verification
  • Category verification
  • Database verification
  • Media verification
  • Product-page verification
  • Authentication diagnostics
  • Local production-server testing

verify-product-page-info · audit-product-page-placeholders · verify-reviews · verify-virtual-tryon · verify-product-category · verify-catalogue-discovery · verify-pashmina-scarf · verify-scarf-wrap

Across the major development phases, the QA suite reached approximately 111 passing checks, with the exact count changing as new features were added. This reflects repeatable verification — not a permanent fixed test count or coverage claim.

TECHNOLOGY

THE STACK BEHIND SURRR.

Frontend
Next.js · React · TypeScript
Styling
CSS · Custom design tokens · Responsive layouts
Database
Supabase · PostgreSQL
Authentication
Supabase / customer authentication · Dedicated admin authentication
Payments
Stripe
Deployment
Vercel
Package management
npm
Development tooling
Cursor · Node.js · TypeScript · Supabase CLI · Stripe CLI

PRODUCTION ENGINEERING

Production-oriented infrastructure

SURRR is not simply a static portfolio mockup.

  • Product catalogue
  • Database
  • Customer accounts
  • Admin authentication
  • Cart
  • Checkout
  • Payments
  • Reviews
  • Product media
  • SEO
  • Shipping
  • Product categories
  • VTO architecture
  • Deployment

SURRR demonstrates the engineering of a real e-commerce product rather than only a visual fashion website.

DESIGN PHILOSOPHY

Three layers

Avoid a generic marketplace or Shopify-style product grid.

  1. 01

    Commerce

    Discover → Evaluate → Buy

  2. 02

    Editorial

    Where the product comes from → Why it matters → How it is made

  3. 03

    Identity

    SURRR → Thar → Craftsmanship → Contemporary fashion

DELIVERY & EVIDENCE

A DIGITAL HOME FOR CRAFTSMANSHIP AND COMMERCE.

SURRR was developed as a contemporary handcrafted fashion e-commerce platform that connects brand storytelling with a production-oriented commerce system.

  • Editorial fashion presentation
  • Structured catalogue architecture
  • Product storytelling
  • Product media
  • Shopping bag
  • Checkout
  • Stripe payments
  • Customer accounts
  • Reviews
  • Admin operations
  • Supabase database
  • Vercel deployment
  • Reusable virtual try-on architecture

CLOSING

SURRR

FROM THAR TO THE WORLD. CRAFTED WITH PURPOSE. WORN WITH SOUL.

ROVIK / CONTRIBUTION

ROVIK contribution

ROVIK contributed across the digital product experience, commerce architecture, catalogue system, payment infrastructure, customer trust systems, administration, virtual try-on architecture, QA and production hardening.

Brand / experience

  • Editorial commerce experience
  • Information architecture
  • Product storytelling

Commerce

  • Catalogue
  • Product pages
  • Bag
  • Checkout
  • Payments

Platform

  • Supabase / PostgreSQL
  • Customer accounts
  • Admin operations
  • Reviews

Engineering

  • Schema evolution
  • Authentication debugging
  • Media verification
  • Payment handling
  • VTO infrastructure
  • Automated verification
  • Production deployment

Have somethingworth building?