Overview
Public brand site for a gold shop in Bangkok's Yaowaraj area (Thailand's traditional gold district). Beyond the usual brand pages, the site has a live gold-price preview and promotion-price views — so visitors see today's market rates the moment they land — alongside products, blog, and customer reviews. Backed by an admin CMS where staff publish blog posts and update inventory through a Tiptap rich-text editor.
What I built
- Live gold-price preview ("previewpriceonly") and a promotion-price view, so visitors see today's bullion rate immediately
- Product catalog with category filters and detail pages
- Blog section authored in Tiptap on the admin side — tables, images, headings, alignment, super/subscript, typography extension
- Customer reviews section with structured data and social sharing (next-share + react-share)
- About-us, motto, and contact pages — gold shops trade on trust, so the brand-story content matters
- Dark-mode support via next-themes — the jewelry photography reads differently against dark vs light
- Companion admin CMS (separate repo) for staff to publish content and manage products
Tech stack
- Frontend: Next.js 15 App Router, React 19, Tailwind CSS v4, Sass for legacy styling
- UI primitives: Radix UI (16+ primitives — alert dialog, checkbox, context menu, dropdown, popover, scroll area, slider, tabs, toggle, tooltip, ...)
- Editor: Tiptap with starter-kit + tables, image, alignment, typography, highlight, super/subscript
- Sharing + social: next-share, react-share, react-social-media-embed
- Theming: next-themes for dark mode, framer-motion for transitions
- Backend: AWS Amplify, Express + Mongoose on Lambda, MongoDB Atlas
- Misc: html2canvas + dom-to-image-more for share-card screenshots, react-hotkeys-hook for keyboard shortcuts in the admin
My role
Built the public site, the admin CMS, and the API that connects them. The live-price preview was a fun constraint — gold prices shift constantly, so the page needed to feel "now" without the staff having to update anything by hand. Worked closely with the shop's team to make sure the admin workflow matched how they actually publish — Tiptap with a curated set of extensions instead of a full kitchen-sink editor.
What I learned
Trust-driven retail sites have different content priorities than typical e-commerce — the visitor's first question isn't "what do you sell" but "can I trust you". So the brand-story pages, the reviews, the live-price transparency, and the social proof all carry more weight than the product catalog itself. I also learned that giving editors a curated Tiptap toolbar beats a comprehensive one: every extension you add is another way to produce inconsistent content, so I leaned on the typography + alignment + table extensions and skipped the kitchen-sink set.
