Back to work

Live for a client

Citrus Aura

A live e-commerce store for a South African wellness brand. It carries a full product catalogue with an individual page per product, organised into categories, plus a working cart and checkout priced in Rands.

01 Problem

A wellness brand sells products people put on and in their bodies, so the buyer needs answers a template store never asks for: what is in this, how do I use it, what size am I buying, when does it expire, and who should not use it. Without that on the page, the buyer either guesses or does not buy.

02 My role

Lead Developer at Mo'Websites. I built and deployed the store for the client, from the catalogue to the checkout.

03 Approach

A minimal store built around the product page rather than the landing page. Every product gets its own page inside a category structure, and the detail that decides a purchase is treated as primary content instead of being folded away at the bottom.

04 Architecture

React and Next.js with Tailwind, deployed on Netlify. The catalogue is organised into categories with an individual page per product carrying ingredients, usage, sizing and expiry, plus product warnings where they apply. The cart totals in Rands against a free delivery threshold, and checkout completes through an automated order flow.

  • Full catalogue with one page per product, organised into categories
  • Cart and checkout priced in Rands, with a free delivery threshold
  • Product detail covering ingredients, usage, sizing and expiry
  • Product warnings shown where they apply
  • An automated order flow behind the checkout
The Citrus Aura home page, with Bath and Body and Teas and Herbs category panels above a row of bestselling products
The Citrus Aura shop page, filtering the full range by category with each product priced in Rands
A Citrus Aura product page showing the price, size and best before date, a suitability warning, and expandable sections covering ingredients, how to use, and size and details
The Citrus Aura cart drawer, showing quantity, a Rand subtotal, how much more is needed for free delivery, and the checkout button

05 Stack

  • React
  • Next.js
  • Tailwind
  • Netlify

06 A decision I am proud of

Taking the buyer all the way to a priced cart and a checkout, then completing the order through an automated order flow instead of pulling in a full commerce backend to settle payment on site. The buyer still sees the real total in Rands before committing, and that is the part that decides the sale. At this volume, a payment integration would add a monthly cost and put payment and customer data inside a service nobody is maintaining. This is the honest fit for where the brand is now, and it can be replaced once the volume justifies it.

07 Outcome

A live store for the client brand: the full catalogue is up, the product pages carry the detail buyers ask about, the cart totals in Rands, and checkout runs through an automated order flow.