Skip to main content
NNguyễn Văn NguyễnFounder of NG AI Platform
VIEN
Live2026

NG Market

Transparent produce marketplace: scan a QR, see the whole journey

An e-commerce marketplace for produce from NG's AI + IoT farms: each product has a 9-step journey, plot camera and lab results; plus an AI meal planner and one-tap checkout.

Role
Founder – shopping UX design, front-end
Year
2026
Status
Live
Visit live siteSource codeVideo demo

Source lives in the ngaiplatform GitHub organisation (private).

market.ngaitechgroup.com
NG Market

01The idea

Problem

Urban buyers want clean produce but don't know whom to trust; farmers who follow good practice still sell through traders at commodity prices.

Insight

Transparency can be sold: when buyers see the garden camera, logs and lab tests, they're willing to pay a fair price.

Solution

A marketplace built around trace data, designed for Gen Z and tech-savvy shoppers: tap instead of type, QR scanning in the centre of the tab bar.

Built for

  • Urban shoppers, young families
  • Restaurants, canteens
  • Co-ops, partner farms

Goals

  • Turn trace data into a reason to buy.
  • One-tap checkout with all Vietnamese payment methods.
  • Commerce-grade SEO for organic traffic.

02Features

  • 01

    Per-product transparency

    A 9-step journey with data sources, live plot camera, full-season conditions, lab results, log hash.

  • 02

    QR scan and lot records

    Scan by camera (BarcodeDetector), from a photo or by lot code.

  • 03

    AI meal planner

    By people, budget and health goals; builds a shopping list and adds it all to the cart in one tap.

  • 04

    Checkout and tracking

    Bank QR, MoMo, ZaloPay, VNPay, COD; order tracking with cold-box temperature.

  • 05

    Membership and points

    Sprout – Bud – Leaf – Forest tiers, vouchers, points for reviews and feedback.

03Design & decisions

  1. Tap, don't type

    Why: Health goals, filters and vouchers are tappable chips – faster on phones.

  2. Accent-insensitive search

    Why: Typing 'xa lach' or 'boost immunity' still finds the right products.

  3. No real payment data in the demo

    Why: QR codes are labelled DEMO, contain no real bank data, no card fields.

04Architecture

  1. 01

    Client

    • Next.js SSG, cart state in the browser

  2. 02

    Trace data

    • From the NG platform: sensors, logs, lab tests

  3. 03

    Payments

    • Partner payment gateways (later phase)

05Tech stack

Front-end

  • Next.js 16 (App Router)
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • lucide-react
  • BarcodeDetector API
  • Notification API
  • PWA

SEO

  • JSON-LD Product + AggregateOffer (VND) + Review
  • sitemap kèm ảnh
  • noindex giỏ/thanh toán

Ops

  • Node.js 24 LTS
  • pnpm 12
  • Playwright (kiểm thử E2E)
  • Vercel
  • market.ngaitechgroup.com

06Research

  1. Young shoppers' behaviour

    Gen Z prioritise fast phone interactions and trust visual proof (cameras, QR) over text.

  2. Vietnamese payments

    Need bank QR, popular e-wallets and COD; international cards only via a gateway so no card data is stored.

  3. Commerce SEO

    Statically rendered product pages with VND prices, reviews and breadcrumbs earn rich results on Google.

07Results

pre-rendered pages
97
sample products with trace records
15
journey steps per product
9
payment methods
7
  • End-to-end tested: search, cart, checkout, tracking, review.
  • No horizontal overflow or console errors on phone and desktop.

08Demo & gallery

Demo video coming soon

09Lessons

Lessons

  • “Visible proof beats advertising copy.”
  • “A hidden cart drawer must hide its shadow too – small details signal polish.”

Next steps

  • Connect real payment gateways and inventory.
  • Sync stock from harvests on the platform.