Thrift App — Case Study

Role: Full-Stack Mobile Developer
Timeline: 2025 — Present
Status: Active Production (v1.0.5)
Parent Platform: TradeflowBD — Thrift Vertical
Repo: github.com/marceldavidbaroi

At a Glance

The Problem

TradeflowBD’s Thrift vertical handles second-hand garment retail — inbound consignment shipments, unique SKU barcodes, garment measurements, landed costing, POS sales, and returns. The web admin (/:slug/app/thrift/*) covers the full lifecycle, but warehouse floor work exposed critical gaps:

Pain points on the warehouse floor

flowchart TD
    subgraph Before ["Before: Floor Operations"]
        A["Inbound shipment boxes arrive"] --> B["Walk to desktop PC"]
        B --> C["Register item one-by-one in web admin"]
        C --> D["Print barcode label separately"]
        D --> E["Paper stocktake sheets"]
        E --> F["Manual shelf reconciliation days later"]
        F --> G["Misplaced items discovered at POS checkout"]
    end

The core question

How do you let warehouse staff register garments, scan barcodes, audit shelves, and fix misplaced stock — all from a phone at the shelf — while keeping the TradeflowBD web admin in sync?

The Solution

Thrift App is a Capacitor Android companion (also runs as a responsive web SPA) that connects to the same Supabase backend as TradeflowBD’s Thrift vertical. It handles the warehouse-floor workflows the web admin was never designed for.

Five core workflows

flowchart LR
    subgraph Mobile ["Thrift App (Warehouse Floor)"]
        INSERT["Insert Stock<br/>Select shipment + box"]
        REGISTER["Register Stock<br/>Barcode + photo + metadata"]
        SCAN["Scan & Action<br/>Lookup / move / status"]
        AUDIT["Audit Mode<br/>Shelf/box stocktake"]
        LIST["Stock List<br/>Search + filter + bulk actions"]
    end

    subgraph Backend ["Supabase (Shared with TradeflowBD)"]
        RPC["Atomic RPCs"]
        DB["thrift_stocks<br/>thrift_barcodes<br/>thrift_shipments"]
    end

    subgraph Web ["TradeflowBD Web Admin"]
        ADMIN["Thrift Stock Page<br/>POS / Reports / Tag Print"]
    end

    INSERT --> REGISTER
    REGISTER --> RPC
    SCAN --> RPC
    AUDIT --> RPC
    LIST --> RPC
    RPC --> DB
    DB --> ADMIN

Architecture

System design

flowchart TB
    subgraph Device ["Android Device / Mobile Browser"]
        UI["Quasar Vue 3 UI"]
        MLKIT["Google ML Kit<br/>Barcode Scanner"]
        CAM["Capacitor Camera<br/>Product Photos"]
        FEEDBACK["Audio + Haptic<br/>Scan Feedback"]
        I18N["Vue I18n<br/>EN + BN"]
    end

    subgraph State ["Client State"]
        TQ["TanStack Query<br/>Cache + Invalidation"]
        PINIA["Pinia<br/>Auth + Locale"]
    end

    subgraph Cloud ["Cloud Services"]
        SB["Supabase<br/>Auth + PostgreSQL + RPCs"]
        CL["Cloudinary<br/>Image Storage"]
        EDGE["Supabase Edge Function<br/>Signed Upload URL"]
    end

    subgraph Ecosystem ["TradeflowBD Ecosystem"]
        WEB["Web Admin<br/>Thrift Module"]
    end

    UI --> MLKIT & CAM & FEEDBACK & I18N
    UI --> TQ & PINIA
    TQ --> SB
    CAM --> EDGE --> CL
    SB --> WEB

Mobile build pipeline

flowchart LR
    CODE["Quasar SPA<br/>src/"] --> BUILD["quasar build<br/>-m capacitor -T android"]
    BUILD --> SYNC["cap sync android"]
    SYNC --> APK["Release APK/AAB<br/>com.brandwala.thriftapp"]
    APK --> DEVICE["Warehouse Android Devices"]

Barcode Scanning Architecture

The scanning layer uses a dual-strategy approach for reliability across Android devices.

flowchart TD
    START["Operator taps Scan"] --> PERM{"Camera<br/>permission?"}
    PERM -- Denied --> ERR["Show error notification"]
    PERM -- Granted --> ML{"Google ML Kit<br/>module installed?"}
    ML -- No --> INSTALL["Install module<br/>with progress UI"]
    INSTALL --> NATIVE
    ML -- Yes --> NATIVE["Native Scan UI<br/>BarcodeScanner.scan()"]
    NATIVE -- Success --> NORM["normalizeScannedBarcode()"]
    NATIVE -- Fail --> OVERLAY["Camera Overlay Fallback<br/>BarcodeScanner.startScan()"]
    OVERLAY --> NORM
    NORM --> LOOKUP["Supabase barcode lookup"]
    LOOKUP --> FEEDBACK["Audio chime + vibration"]

Scan modes

Scan feedback system

Success → 880Hz double-tone chime + 80ms vibration
Error   → 220Hz sawtooth beep + [100, 50, 100]ms vibration pattern

Operators get instant confirmation without looking at the screen — critical in noisy warehouse environments.

Audit Mode — Stocktake Workflow

The most operationally impactful feature. Replaces paper stock checks with a structured digital workflow.

flowchart TD
    A["Select Shelf + Box"] --> B["Load expected items<br/>from database"]
    B --> C["Start audit session"]
    C --> D["Scan barcode"]
    D --> E{"Match expected<br/>list?"}
    E -- Yes --> F["Mark VERIFIED<br/>✓ success feedback"]
    E -- No --> G{"Exists in DB<br/>different location?"}
    G -- Yes --> H["Flag MISPLACED<br/>⚠ warning feedback"]
    G -- No --> I["Mark UNKNOWN<br/>✗ error feedback"]
    F & H & I --> J{"More items?"}
    J -- Yes --> D
    J -- No --> K["Review summary<br/>Verified / Missing / Misplaced"]
    K --> L["Bulk relocate misplaced items"]
    K --> M["End audit session"]

Discrepancy types

Stock Registration Flow

Full garment intake at the warehouse shelf — no desktop required.

sequenceDiagram
    participant Op as Warehouse Operator
    participant App as Thrift App
    participant Cam as Capacitor Camera
    participant CL as Cloudinary
    participant RPC as Supabase RPC
    participant Web as TradeflowBD Web Admin

    Op->>App: Select shipment + box context
    Op->>App: Scan or enter barcode
    App->>RPC: Check barcode availability
    Op->>Cam: Capture product photo
    Cam-->>App: Base64 image
    App->>CL: Upload to shipment folder
    CL-->>App: secure_url
    Op->>App: Enter brand, size, condition, weight, price
    App->>RPC: register_thrift_stock_from_app()
    RPC->>RPC: Create stock + link barcode + save image
    RPC-->>App: stock_id
    App->>App: Invalidate TanStack Query caches
    Note over Web: Web admin stock list<br/>refreshes on next query

Registration captures

• Barcode (scanned or manual)
• Product photo (camera with optional crop/edit)
• Brand, category, type, color, size, condition
• Shelf and box location
• Product weight + extra weight (for landed cost apportionment)
• Origin unit price + listed sell price
• Shipment and box context (auto-linked)

Data Sync Strategy

Note: The app does not use Supabase Realtime WebSocket channels. Sync is achieved through TanStack Query cache invalidation after every mutation.

flowchart LR
  MUTATION["Stock mutation<br/>(register, move, status)"] --> RPC["Supabase RPC"]
  RPC --> INVALIDATE["Invalidate query keys<br/>thrift/stock-list<br/>thrift/stock-detail<br/>thrift/dashboard"]
  INVALIDATE --> REFETCH["Next page load or<br/>manual refresh pulls fresh data"]
  REFETCH --> WEB["TradeflowBD web admin<br/>sees updated stock"]

Authentication

Dual-path auth for web and native Android.

flowchart TD
    LOGIN["Login Page"] --> PLATFORM{"Platform?"}
    PLATFORM -- Web --> OAUTH["Supabase OAuth<br/>Google redirect"]
    PLATFORM -- Android --> NATIVE["Native Google Picker<br/>@capgo/capacitor-social-login"]
    NATIVE --> IDTOKEN["signInWithIdToken()"]
    OAUTH --> CALLBACK["/auth/callback"]
    IDTOKEN --> BOOTSTRAP["bootstrapUserSession()"]
    CALLBACK --> BOOTSTRAP
    BOOTSTRAP --> MEMBER{"Valid Thrift<br/>membership?"}
    MEMBER -- Yes --> DASH["Dashboard"]
    MEMBER -- No --> DENY["Access denied → logout"]

Core Technical Decisions

Decision 1 — Google ML Kit over web-based decoders

Decision 2 — Continuous scan queue for batch operations

Decision 3 — Audit mode with three-tier discrepancy detection

Decision 4 — Atomic RPC registration, not client-side inserts

Decision 5 — Bilingual UI for warehouse operators

Decision 6 — Audio + haptic scan feedback

Tech Stack

Relationship to TradeflowBD

Thrift App is the mobile field layer of the TradeflowBD Thrift vertical — not a standalone product.

flowchart TB
    subgraph TradeflowBD ["TradeflowBD Platform"]
        subgraph ThriftVertical ["Thrift Vertical"]
            SHIP["Shipment Intake<br/>(Web Admin)"]
            COST["Landed Cost Engine<br/>(Web Admin)"]
            POS["POS Sales Desk<br/>(Web Admin)"]
            TAG["Barcode Tag Print<br/>(Web Admin)"]
            REPORTS["Sales Reports<br/>(Web Admin)"]
        end
    end

    subgraph ThriftApp ["Thrift App (Mobile)"]
        REG["Stock Registration"]
        SCAN["Barcode Scan & Action"]
        AUDIT["Shelf Audit"]
    end

    REG -->|"register_thrift_stock_from_app"| SHIP
    SCAN -->|"lookup + update"| SHIP
    AUDIT -->|"verify + relocate"| SHIP
    SHIP --> COST --> POS
    POS --> REPORTS
    SHIP --> TAG

What I Built

• Barcode scanning engine — ML Kit integration with module auto-install, native UI + overlay fallback, barcode normalization, and audio/haptic feedback
• Stock registration workflow — End-to-end mobile intake: barcode → photo → metadata → Cloudinary upload → atomic RPC
• Continuous scan + bulk queue — Batch shelf moves and status updates via bulk RPCs
• Audit mode — Full stocktake workflow with verified/missing/misplaced detection and bulk relocation
• Bilingual operator UI — English and Bengali across all workflows with persisted locale
• Native Android auth — Google Sign-In via ID token (no Custom Tab redirect on Android)

Visual Workflows & Mobile Wireframes

1. Mobile Warehouse Scanner & Inventory Wireframes

+-----------------------------------+    +-----------------------------------+
| [=] Thrift App  [#] [EN v]  (D)   |    | [=] Thrift App  [#] [EN v]  (D)   |
+-----------------------------------+    +-----------------------------------+
| Warehouse Overview     (?) (Sync) |    | Barcode Scanner               (?) |
| Sat, Aug 29, 2026 * Thrift        |    |                                   |
|                                   |    | [Q] Single Scan            ( o )  |
| QUICK ACTIONS                     |    | +-------------------------------+ |
| +-------------------------------+ |    | |   [#] SINGLE SCAN             | |
| | (+) Insert New Item        >  | |    | +-------------------------------+ |
| |     Register stock manually   | |    |                                   |
| +-------------------------------+ |    | Enter or scan barcode:            |
| | [#] Scan & Action          >  | |    | +--------------------------+----+ |
| |     Continuous batch scanning | |    | | 16-AA-26-000101          | [Q]| |
| +-------------------------------+ |    | +--------------------------+----+ |
| | [=] View Inventory         >  | |    |                                   |
| |     Browse full stock list    | |    | +-- SCANNED ITEM CARD -----------+|
| +-------------------------------+ |    | | [IMG] NEXT Corduroy Jacket     ||
| | [*] Inventory Audit        >  | |    | |       Sz 12 | Bust: 34" L: 22" ||
| |     Shelf & box stocktake     | |    | |       Loc: Shelf A-04 / Box 12 ||
| +-------------------------------+ |    | |       Landed: ৳2,850.00        ||
|                                   |    | +--------------------------------+|
| DAILY INVENTORY KPIs              |    |                                   |
| +-------------------------------+ |    | [ Move Shelf ]   [ Mark Damaged ] |
| | Items Added Today       [Cal] | |    |                                   |
| | 420 Pcs                       | |    |                                   |
| +-------------------------------+ |    |                                   |
+-----------------------------------+    +-----------------------------------+
| [Home]  [Scan]  [+]  [Audit] [Inv]|    | [Home]  [Scan]  [+]  [Audit] [Inv]|
+-----------------------------------+    +-----------------------------------+
        (A) Dashboard View                       (B) Scanner & Action View

2. Shelf Audit & Misplaced Item Detection Flow

flowchart TD
    subgraph ST1 ["Step 1: Session Initiation"]
        AUDIT_START["Select Warehouse Zone<br/>(e.g., Rack B / Shelf 03 / Box 14)"]
        LOAD_EXPECTED["Query Supabase for Expected SKUs<br/>(Cached via TanStack Query)"]
        AUDIT_START --> LOAD_EXPECTED
    end

    subgraph ST2 ["Step 2: Continuous ML Kit Scan Loop"]
        LOAD_EXPECTED --> SCAN_SKU["ML Kit Camera Scan / Barcode Key-in"]
        SCAN_SKU --> CHECK{"Matches expected<br/>Shelf/Box?"}
        
        CHECK -- Yes --> VERIFIED["VERIFIED ✓<br/>880Hz Audio Chime<br/>80ms Vibration"]
        CHECK -- No, Exists Elsewhere --> MISPLACED["MISPLACED ⚠<br/>Yellow Alert<br/>One-Tap Relocate Action"]
        CHECK -- No, Not in System --> UNKNOWN["UNKNOWN ✗<br/>220Hz Error Tone<br/>Flag for Quarantine"]
    end

    subgraph ST3 ["Step 3: Discrepancy Resolution & Sync"]
        VERIFIED & MISPLACED & UNKNOWN --> SUMMARY["Audit Summary Review<br/>(e.g., 48 Verified, 2 Missing, 1 Misplaced)"]
        SUMMARY --> RPC_RESOLVE["Trigger bulk_update_thrift_stock_locations()<br/>Invalidate TanStack Query Keys"]
        RPC_RESOLVE --> SYNCED["TradeflowBD Admin Stock Reconciled"]
    end

Future Roadmap

timeline
    title Thrift App Roadmap
    section In Progress
        Production Hardening : v1.0.5 on warehouse devices
    section Planned
        Offline Queue : IndexedDB sync for poor connectivity zones
        Thermal Printer : Bluetooth label printing at the shelf
        Supabase Realtime : Push stock changes to web admin without refresh
        iOS Build : Capacitor iOS with equivalent ML Kit support

Links

• Parent Platform: tradeflowbd.com
• GitHub: github.com/marceldavidbaroi

Thrift App — Scan at the shelf. Register on the floor. Audit with confidence. Syncs with TradeflowBD.