Northern Ghana produces significant volumes of high-quality shea butter through women-led producer networks, but the trade chain around it is fragmented. Producers struggle to reach dependable buyers, logistics are poorly coordinated, pricing is unstable, and too much of the supply flow depends on informal intermediaries. Harmattan needed more than a brochure website. They needed a credible digital presence that could tell their story to investors and buyers, while also supporting real product discovery, ordering, and post-purchase tracking for customers across Ghana and international markets.

I built a single platform that serves two purposes: a content-rich landing experience for brand storytelling, and a functional shop for browsing, purchasing, and tracking shea butter orders. Content editors manage the homepage, product catalogue, and shop settings through Sanity CMS, including an embedded Studio at /studio, without touching code. Customers can browse products with localised pricing, add items to a persistent cart, check out as authenticated users, and follow their order through a tracking timeline in their account dashboard. The result is a production-ready site that supports Harmattan's mission: connecting trusted Northern Ghana sourcing with scalable, reliable fulfilment for wholesale and retail buyers.

• CMS-driven landing page

  Hero carousel, about, problem statement, categories, offers, distribution model, testimonials, blog, and contact, all editable in Sanity with built-in fallbacks.

• Product catalogue

  Category, price range, size, and status filters; sorting; product detail pages with size variants.

• Geo-localised pricing

  Automatic currency detection and live exchange-rate conversion, with fallback rates when APIs are unavailable.

• Shopping cart

  Drawer UI with localStorage persistence across sessions.

• User accounts

  Email/password registration and optional Google sign-in via Auth.js.

• Checkout & orders

  Authenticated checkout flow that creates orders with line items and shipping details.

• Order tracking

  Per-order timeline (ordered → processing → shipped → delivered) in the customer account area.

• Embedded content studio

  Sanity Studio built into the app and deployed alongside the storefront at /studio.

• Responsive UI

  Mobile-first layout with light/dark theme support.

• Serverless authentication

  Auth.js behind a Vite dev proxy required careful handling of changeOrigin and redirect URIs so OAuth callbacks worked locally and in production. JWT sessions for credentials provider while still using the Neon adapter for OAuth account linking.

• Resilient multi-currency display

  Built a ViewerMoney context that chains geo-IP detection, live exchange rates, and a broad fallback rate table, ensuring prices always render even when upstream APIs fail.

• CMS flexibility without breaking the site

  Landing and shop modules normalise CMS data and fall back to built-in defaults, so the storefront remains functional during setup or partial Sanity outages.

• Transactional order integrity

  Wrapped order inserts (line items + pre-seeded tracking timeline) in a PostgreSQL transaction to prevent partial orders and give customers a consistent tracking experience from checkout.

Shipped a live production platform at harmattanghana.com. Delivered a unified experience: brand storytelling, product discovery, checkout, and order tracking in one codebase. Enabled the Harmattan team to manage products and page content independently through Sanity Studio. Built for international buyers with automatic currency localisation across dozens of markets.

1. 1.Headless CMS + fallbacks, pairing Sanity with built-in default content makes a CMS-powered site much safer to operate; editors get flexibility without risking a blank production page.
2. 2.Serverless needs defensive I/O, timeouts, caching headers, and graceful degradation on third-party APIs (geo, rates) are essential when every API call runs inside a cold-starting function.
3. 3.Separate content from transactions, keeping products in Sanity and orders in Postgres gives each system the right tool: fast, editable catalogue data vs. relational integrity for purchases.
4. 4.Localised UX is a feature, not an afterthought, detecting country and formatting prices in the viewer's currency meaningfully improves trust for an export-oriented Ghanaian brand.

Live project

www.harmattanghana.com/

Demo

www.harmattanghana.com/studio