Content
Product and editorial information is maintained as structured content in Sanity.
Project / 02
Completed
SMHC
A content-driven digital catalog for an artisan home collection brand.
A production-oriented catalog built with Next.js and Sanity, separating the product experience from structured content management.
Visual / 02Product view
Product / InterfaceProduct view
Project system
SMHC
Status
Completed
Domains
04
Knowledge Nodes
09
Cross-domain
04
01 / System Context
Why this
system exists.
Stephany Manzano Home Collection is a digital catalog created for an artisan home collection brand. The project needed to present products through a refined visual experience while allowing catalog and editorial content to evolve independently from the application code.
Problem
The brand needed a maintainable digital catalog where product and editorial content could evolve without coupling every content change to application code.
02 / Architecture
System
structure.
The system uses Next.js as the presentation layer and Sanity as a headless content source. Structured content, portable editorial data and managed imagery flow from the CMS into a responsive product-oriented interface.
01Sanity CMS
02Content Models
03Content Queries
04Next.js
05Interface
06Catalog
03 / Runtime Flow
From input
to outcome.
Content Model
Sanity schemas define the structure of catalog and editorial records.
Query
The application retrieves the content required by each catalog experience.
Next.js
Next.js composes content and application structure into the public-facing site.
Media
Sanity image tooling provides the product imagery consumed by the interface.
Catalog
The final interface presents brand, editorial and product content as one cohesive experience.
04 / Decisions
Decisions,
not defaults.
01
Separate content from presentation
Using a headless CMS allows catalog content to change without requiring every editorial update to become an application-code change.
02
Use structured content
Products and editorial sections benefit from explicit content models instead of being embedded directly inside React components.
03
Keep the frontend product-oriented
The application layer focuses on presentation, navigation and product experience while Sanity remains responsible for content management.
04
Preserve brand hierarchy
The interface uses restrained typography, imagery and spacing so the product photography remains the primary visual signal.
05 / Knowledge Evidence
Knowledge,
applied.
Engineering Domains
FEFrontend
BEBackend
DAData
QAQuality
DLDelivery
TLTooling
Validated Knowledge Nodes
09ReactNext.jsTypeScriptTailwind CSSSanity CMSMotion / Framer MotionGitGitHubVercel
06 / Quality
Built to
hold up.
The project uses a typed Next.js application structure with dedicated content tooling and a production-oriented separation between interface and CMS responsibilities.
Framework
Next.js 16
Frontend
React 19
CMS
Sanity
Styling
Tailwind 4
01
TypeScript application code
02
Headless CMS architecture
03
Portable Text rendering
04
Managed image pipeline through Sanity tooling
05
Responsive product presentation
06
Motion-based interface refinement
07 / Outcome
System
result.
The result is a production catalog where the brand experience and the content-management system remain intentionally separated: product and editorial information can evolve through Sanity while the Next.js application remains focused on presentation and interaction.