Sano
2025Custom jewelry artisan · E-commerce / Brand
A CMS-driven marketing and inquiry-cart site for an independent jewelry maker, built end-to-end from design through deploy.
- React
- TypeScript
- Vite
- Sanity CMS
- TailwindCSS
- shadcn/ui
- TanStack Query
- Vercel
- Resend
- Airtable
Sano is a brand site for a custom jewelry artisan. The client needed a presentable, low-maintenance storefront that they could update without engineering involvement — but with enough polish to compete with established e-commerce brands. The result is a single-page React app whose content (hero, story, collection, portfolio, team, testimonials, blog) is entirely managed through a Sanity Studio instance, with updates publishing instantly via the Sanity CDN.
The frontend is React 18 + TypeScript bundled by Vite, with a custom Tailwind theme defining jewelry-specific design tokens (jewelry-gold, jewelry-silver, jewelry-ivory). UI primitives come from shadcn/ui on top of Radix UI, with TanStack Query handling data fetching against the Sanity API via GROQ queries. Typed content hooks in src/hooks/useSanityContent.ts provide a single point of access for each content type.
Commerce is intentionally inquiry-based rather than transactional: a cart drawer lets visitors collect pieces they’re interested in and submit a purchase inquiry. The submission flows through Vercel serverless functions, lands in an Airtable base for the client’s pipeline, and triggers an email notification via Resend. A Shopify integration was scoped and removed in favor of this lighter model — better fit for one-of-a-kind work where each sale is a conversation, not a checkout.
Deployment is Vercel-managed on push to main, with the Sanity Studio deployed separately on Sanity’s own hosting. Coverage includes Vitest unit tests and Playwright end-to-end tests.