← cd ../work

case 01 / 06 · Client work · new build

role

Solo developer: spec, architecture, build and deployment

year

2026 · 1 week

stack

Next.js 16 · TypeScript · Netlify with Cloudflare R2 · Resend and Turnstile · Vitest and Playwright · GSAP and Lenis motion

drag or use arrows →
Superb Nutrition — 02 — research board
Superb Nutrition — 03 — wireframes
Superb Nutrition — 04 — shipped UI

A premium catalogue site and self-serve admin for a Penang nuts and dried-fruit brand, rebuilt in 2026 from my 2022 version.

## 01

Problem

SuperB Nutrition has sold healthy nuts and dried fruit for over 20 years, but only through supermarkets and convenience stores, with no online checkout. They needed a premium website that turns browsing into store visits or enquiries. The owner also had to be able to change products, sections and even colours without calling a developer.

## 02

Research

The audience is health-conscious adults and young professionals who read labels and buy for a reason, like heart health, energy, baking or gifting. So the site is organised around needs and ingredients rather than price: shop-by-need tiles, a side-by-side label comparison, and prices hidden by default. The owner keeps the product list in a spreadsheet, so bulk editing in Excel was a must.

## 03

Design

A heritage intro counts from 2003 to today, followed by a hero where a spotlight reveals the kernels (it roams on its own on phones). The home page is built from 11 sections the owner can reorder, and each one hides itself when it has no content, so the page never looks empty. In the admin, a theme editor checks colour contrast and warns before saving a combination that fails accessibility.

## 04

Build

One Next.js app with Payload CMS and Postgres serves the public site, the admin and the API. Cached pages refresh the moment content changes, so edits go live without a redeploy. It runs on Netlify with Cloudflare R2 for images, Resend for email and Turnstile for spam, and every deploy runs database migrations automatically. 228 automated tests cover the catalogue, contact form, theme rules and data migrations.

5

public pages, plus sitmap

13

collections content types editable in admin

228

automated tests passing

11

homepage section blocks

“Chic design, smooth web performance quality. Outstanding work.”
— Vivien, Marketing Manager
$ open next →Sprint Verdict for Jira