源
Matcha Gensen
Launch Project
Project Case Study

Where Traditional Tea Rituals Meet Generative AI

A high-fidelity minimalist e-commerce platform dedicated to ceremonial-grade Matcha. Seamlessly integrates live AI brewing companions, raw PCM voice synthesis, decoupled backend architectures, and unified payment processing gateways.

Role Lead Architect & Developer
Stack Vite / React / Vercel
AI Modality Gemini 3.5 Flash & 3.1 TTS
E-Commerce Headless Medusa SDK
Core Capabilities

Completed Integrations

🍵

AI Grandmaster Chat

Powered by Google Gemini 3.5 Flash. Provides real-time guidance on traditional whisking techniques (Chasen angles), temperature calibration (80°C limit), and regional origins (Uji, Kyoto).

🗣️

Wise Elder Voice Synthesis

Integrates Gemini 3.1 Flash Text-To-Speech. Synthesizes wise elder tea master readouts as raw 24kHz linear PCM data. Clients parse little-endian 16-bit sound buffers locally for instant audio responses.

📦

Headless Medusa SDK

A Decoupled store management portal. Runs operations for catalog synchronizations, inventory locks, customer profiles, product reviews, and request transaction logging (HUD).

🛡

Interactive Control Panel

Features a central workspace for administrative management (low-stock alarms, category sales breakdowns, review moderation approval boards, and order dispatch pipelines).

💳

Unified Credit Cards & Amazon

Consolidated payment form integrating Stripe Elements (Credit Cards, Apple Pay, Google Pay) and Amazon Pay with A-to-z buyer protection guarantee.

📋

Aesthetic Profile Quiz

A multi-step preference diagnostic that helps users select their ideal ceremonial package (Usucha, Koicha, or Whisks) based on tasting preferences and target goals.

Under the Hood

Technical Specifications

Frontend Framework

  • Vite & React 18 SPA Architecture with smooth luxury transition curves.
  • Vanilla CSS / Tailwind Curated HSL color palette themed around forest greens, linen whites, and gold accents.
  • Lucide Icons High-performance vector symbols for minimalist menus.

Serverless Backend

  • Vercel Serverless Functions Node.js serverless functions routing core API payloads securely.
  • Medusa Commerce Engine Headless backend proxy governing products, checkouts, and customer database logs.

Audio & Machine Learning

  • Gemini 3.5 Flash API Generative text context model acting as the Wise Tea Master companion.
  • Gemini 3.1 TTS Preview Custom 24kHz PCM speech synthesis generator model.
  • Web Audio API Context Client-side raw PCM parser streaming live synthesized voice responses.

Security & Infrastructure

  • Docker & Compose Deployment blueprints for hosting the Medusa server and Redis event bus.
  • Caddy Server Automatic Let's Encrypt SSL reverse proxy.
  • Supabase Persistent PostgreSQL storage provider with SSL encryption enforcement.
Infrastructure Blueprints

Self-Hosting Deployment

Decoupled Deploy Blueprint

The production topology leverages a containerized approach for self-hosting on a free Oracle Cloud compute instance while enforcing database persistence on a separate PostgreSQL layer.

  • 1

    Dockerized Medusa & Redis Node

    Medusa application server and a Redis cache event bus container are managed via Docker Compose on the host instance.

  • 2

    Supabase PostgreSQL Cluster

    Medusa connects to a remote managed Supabase database, securing customer credentials and products data with mandatory SSL/TLS.

  • 3

    Caddy Automatic HTTPS SSL Proxy

    Caddy container maps traffic on ports 80/443, auto-submits Let's Encrypt SSL validations, and proxies API endpoints to Medusa.

docker-compose.yml configuration
services: medusa-server: image: node:20-alpine restart: always ports: - "9000:9000" environment: - DATABASE_URL=supabase://...sslmode=require - REDIS_URL=redis://redis:6379 medusa-redis: image: redis:7-alpine restart: always volumes: - redis_data:/data medusa-ssl-proxy: image: caddy:2-alpine ports: - "80:80" - "443:443" volumes: - ./Caddyfile:/etc/caddy/Caddyfile