Whisperer — Multi-tier AI Voice Agent & Transcription Platform

1. Overview#

Whisperer is a commercial-grade, full-stack AI voice agent and automated speech-to-text transcription platform tailored for modern businesses and professionals. The platform couples high-accuracy AI audio processing models with a specialized prompt library to transform raw spoken audio into structured meeting summaries, action items, and domain-specific transcripts.

The platform is engineered with a complete end-to-end commercial workflow: seamless authentication via LINE Login and Email Auth, a multi-tier role-based access control (RBAC) system with dynamic quota enforcement, automated order generation with dynamic PromptPay QR codes, and real-time bank transfer slip verification using webhook-driven OCR with high-security guards.

2. Stories & Visual Tour#

3. Architecture & Workflows#

1
flowchart TB
2
    subgraph Client["Client Tier (Next.js 16 App Router)"]
3
        UI_HOME["Landing & Audio Studio\n(Audio Uploader / Waveform Preview)"]
4
        UI_AUTH["Auth Layer\n(LINE Login OAuth 2.0 / Supabase Auth)"]
5
        UI_SUB["Subscription & Checkout\n(Dynamic PromptPay QR / Slip Ingestion)"]
6
        UI_MGMT["Prompt & Agent Studio\n(Prompt Injection & Output Formatter)"]
7
    end
8

9
    subgraph Edge["Gateway & Edge (Vercel Edge sin1)"]
10
        GATEWAY["API Gateway & Webhook Router\n(HMAC-SHA256 Signature Verification)"]
11
        IDEM_GUARD["Idempotency Guard & Rate Limiter\n(Atomic DB Key Lock)"]
12
    end
13

14
    subgraph Core["Backend & AI Pipeline (Next.js Server Actions)"]
15
        AUDIO_SVC["Audio Transcription Service\n(Chunking / Speech-to-Text Pipeline)"]
16
        PAY_SVC["Payment & SlipOK Ingestion\n(Webhook OCR & Payload Parser)"]
17
        QUOTA_SVC["Quota & Tier Manager\n(Atomic Balance Adjustment)"]
18
    end
19

20
    subgraph Storage["Database & Storage Tier (Supabase sin1)"]
21
        DB[(PostgreSQL Database\nProfiles, Orders, Quotas, Subscriptions)]
22
        FILES["Supabase Storage\n(Encrypted Audio Chunks & Transcripts)"]
23
    end
24

25
    Client --> GATEWAY
26
    GATEWAY --> IDEM_GUARD
27
    IDEM_GUARD --> Core
28
    Core --> DB
29
    Core --> FILES

1
sequenceDiagram
2
    autonumber
3
    actor User as User
4
    participant Client as Whisperer Client
5
    participant Edge as Edge Webhook Gateway
6
    participant Core as Payment Service (Next.js)
7
    participant SlipOK as SlipOK / Webhook OCR
8
    participant DB as Supabase PostgreSQL
9

10
    Note over User, DB: 1. Order Creation & Dynamic PromptPay QR
11
    User->>Client: Select Subscription Tier
12
    Client->>Core: Request Order Creation
13
    Core->>DB: Persist Pending Order with Unique Order Ref
14
    Core-->>Client: Return PromptPay Payload & Render Dynamic QR
15
    User->>Client: Pay via Mobile Banking & Upload Transfer Slip
16

17
    Note over Client, DB: 2. Webhook Ingestion & Security Guards
18
    Client->>Edge: Post Slip to Inbound Webhook Pipeline
19
    Edge->>Edge: Verify HMAC-SHA256 Signature Header
20
    Edge->>Core: Forward Validated Payload
21
    Core->>DB: Check Idempotency Key (Double-credit & Replay Guard)
22

23
    alt Idempotency Key Exists (Duplicate Event)
24
        Core-->>Client: Return Cached Order Status (Reject Redundant Execution)
25
    else Valid New Inbound Transaction
26
        Core->>SlipOK: Forward Slip Image for OCR Verification
27
        SlipOK-->>Core: Return Parsed Data (Amount, Timestamp, Receiving Account)
28
        Core->>Core: Validate Amount against Order
29
        Core->>DB: Mark Order "Paid" + Allocate Tier Quotas (Atomic Transaction)
30
        Core-->>Client: Real-time Confirmation & Instant Feature Unlock
31
    end

4. Key Engineering Highlights#

• Automated Slip Verification with Webhook OCR: Deep integration with SlipOK OCR to parse transfer slips, verifying transaction amounts, timestamps, and receiving accounts in real time. Secured with strict HMAC-SHA256 Signature Verification on all incoming webhooks to ensure origin authenticity.
• Idempotency Guard & Replay Attack Protection: Engineered deterministic database-level idempotency locks that prevent double-crediting, race conditions, or replay attacks when duplicate webhooks or retries occur.
• Multi-tier Subscriptions & Dynamic QR Generation: Configurable tier models with dynamic EMVCo-compliant PromptPay QR Code synthesis, tightly coupled with atomic quota calculation for audio minutes and word counts.
• High-throughput Audio Ingestion Pipeline: Architected audio chunking and non-blocking streaming handlers capable of processing lengthy audio recordings without encountering serverless execution timeouts.
• 100% Green Test Suite with Vitest: Built with rigorous test coverage, achieving 68/68 Vitest test suites passing (100% green) across HMAC security validations, idempotency logic, slip parsing, and quota management.

5. My Role & What I Built#

As the Full-stack Developer, I led the end-to-end design and engineering:

• Frontend Architecture: Crafted clean, responsive user interfaces using Next.js 16 (App Router), Tailwind CSS v4, and TypeScript, building the audio studio, subscription flow, and management consoles.
• Backend & Security Engineering: Developed the inbound webhook ingestion pipeline, cryptographic HMAC validator, PromptPay QR generator, and OCR verification connectors.
• Database & Multi-tier RBAC: Designed the relational data model on Supabase (PostgreSQL sin1), establishing robust user roles, atomic quota allocations, and transaction auditing tables.
• Automated Testing & CI: Authored 68 comprehensive unit and integration test cases using Vitest, mocking payment gateways, verifying edge cases, and ensuring zero-defect financial workflows.

6. Result & Current State#

• Test Suite Status: 68/68 Vitest test suites passing with 100% green status across all core services.
• Production Ready: Fully optimized for deployment on Vercel Edge with Supabase Singapore Region (sin1), achieving ultra-low latency for Southeast Asian users and resilient scalability.

7. Demo & Code#

• Production Live: whispererr.tech
• GitHub (Private Repository): Manchinn/whisperer
• Architecture: Next.js 16 (App Router) + Supabase (PostgreSQL sin1) + Tailwind CSS v4 + Vitest
• Deployment Target: Vercel Production Environment