Vebryx

A custom store for organic supplements

Client
Advina Wellness & Nutrition
Industry
Retail & e-commerce
Services
Custom online shop, Custom CMS, UI/UX design, Web development, Payments
Capsules, fresh herbs, ginger, garlic and flowers laid out on white marble

The project

Advina Wellness & Nutrition sells organic supplements, superfoods and herbal blends online, from collagen and magnesium to ashwagandha and its own herbal sleep blend.

The client wanted a store with the feel of a premium wellness brand, and a back office their team can run day to day: products, stock, promotions, orders and every page of content, without a developer.

Vebryx designed the store in Figma and built it from scratch on Next.js and Node.js, with PostgreSQL, Stripe for payments and Resend for order emails, on a private server.

The challenge

What stood in the way.

  1. 01

    Helping shoppers choose

    A wellness range is easier to shop by need than by product name, so customers needed a way to browse by what they want help with.

  2. 02

    A store the team runs themselves

    Products, sizes, prices, stock, promotions, the journal and every page needed to be editable without touching code.

  3. 03

    Stock that stays right

    Every size needed an accurate count that updates itself as orders come in and are cancelled, with a warning before anything runs out.

Our solution

What we built.

A store built around how people shop for wellness, and a studio built around how the team works.

  1. 01

    Shop by goal

    Shoppers browse by health goals such as sleep, skin or energy, on the home page and as filters in the shop. The goals, their photos and wording are all managed in the admin.

  2. 02

    Advina Studio, a custom CMS

    Products with a live preview, categories, health goals, pages, FAQs and the journal, edited in one place and live as soon as they are saved. Photos are compressed on upload, so the store stays fast.

  3. 03

    Stock and orders that look after themselves

    A stock count for every size, with low-stock warnings. Orders take stock automatically and cancelled orders put it back, with every movement logged. Customers follow their order on a track-your-order page.

  4. 04

    Checkout, promotions and emails

    Stripe payments confirmed by a verified webhook, sales and discount codes with percentage or fixed discounts and usage limits, and branded order emails sent through Resend.

  5. 05

    A chat assistant that shows the gaps

    It answers questions from the store's own FAQs and catalogue, and shows the team the questions it could not answer, so they know what to add next.

Inside the product

A look at the platform.

The Advina home page: "Pure by nature, organic nutrition made simple" over a misty forest, with a product search and Advina bottles either side
01The home page: a calm, natural design with search up front.
The shop: category chips, filters for category, health goal and price, and product cards for Collagen Peptide, Magnesium Glycinate and OG Mist with ratings and prices
02The shop: categories, health-goal filters and a price range beside the products.
The Advina Studio dashboard: a greeting, a New product button, orders waiting to be dispatched, and counts of live products, sizes on sale, photos and the average price
03Advina Studio: the custom CMS dashboard, with orders to dispatch up front.
All orders in Advina Studio: orders to dispatch, awaiting payment, orders and revenue for the last 30 days, with search, date filters, status tabs and the order list
04Orders: search, filter by status or date, and dispatch from one list.
Advina Studio: "All products", a grid of the store's bottles with search, a category filter and a New product button, beside the studio's menu
05Products: the whole catalogue at a glance, ready to edit.
The Advina home page on a phone

Home page

The shop on a phone, with categories, filters and product cards

Shop

A product page on a phone

Product page

Implementation

The technology behind it.

Tech stack

  • FigmaDesign and prototypes
  • Next.jsThe store, checkout and Advina Studio
  • ReactThe interface
  • TypeScriptType-safe code throughout
  • Tailwind CSSStyling
  • Radix UIAccessible interface components
  • Node.jsThe server
  • PostgreSQLProducts, stock, orders and content
  • StripeCard payments, confirmed by webhook
  • ResendOrder emails
  • SharpPhoto compression on upload
  • VitestAutomated tests
  • GitVersion control for every change
  • GitHubCode hosting, reviews and deployments
  • VPSVPSA private server, set up and managed by Vebryx

Ready to start step one?

Book a free 30-minute call and we'll map out your journey together.

  • 30 minutes, no obligation
  • Scope and price agreed up front
  • You own everything we build
  • 4.3 on Trustpilot