Back to Overview
02 / 06
CASE STUDY · 02Full-Stack Web SaaS2024–25

Vouch Keychain

Cryptographic QR item recovery & real-time telemetry.

Screen 1 of 9Auto-scrolling every 3s
https://vouchkeychain.vercel.app
Vouch Keychain — Product Landing
Product Landing

SaaS storefront with interactive 3D product preview

Application Screen Flow (Click any tag to jump to that screen)
Executive Architecture

System Overview & Engineering Longevity

A web SaaS platform connecting physical hardware QR tags with privacy-preserving communication between finders and owners. When scanned by a finder with a smartphone camera, the system captures location coordinates with browser permission, sends automated alerts (Twilio SMS/Voice + Resend Email) to the owner, and opens a masked communication channel where finders and owners communicate without directly exposing personal contact information.

Core Capabilities

Key Engineering Highlights

Privacy-preserving communication: phone & email kept masked
Location coordinate capture & reverse geocoding on scan
Two-way masked communication channel between finder and owner
Multi-channel dispatch: Twilio SMS, Voice call & Resend Email
Interactive Three.js 3D hardware visualizer for keychains
Deployed on Vercel with responsive short-link routing
Technologies & Protocols
Next.js 16React 19TypeScriptFirebase SuiteTwilio SMS/VoiceResendThree.jsTailwind CSS v4Google Maps APIStripe
Production Standard

Architected with clean domain separation, strict TypeScript contracts, and automated telemetry logging.

Parallel

Multi-Channel Alerts

Twilio SMS, Voice & Resend Email

Masked

Privacy Protocol

Contact info masked between parties

Next.js 16

Modern Framework

Production SaaS deployed on Vercel

Three.js

Interactive Hardware Store

Custom 3D WebGL material shader

Execution Pipeline

End-to-End System Data Flow

How user inputs, computer vision pipelines, and transaction protocols flow across the stack.

STEP 01

QR Scan Handshake

Finder scans physical QR token; browser handshakes with Vouch short-link router without app install.

STEP 02

Location Capture

Browser requests geolocation permission; coordinates, timestamp, and device metadata are securely recorded.

STEP 03

Alert Dispatch

Server dispatches Twilio SMS, automated Voice call, and Resend email to owner in parallel.

STEP 04

Masked Chat Session

Masked communication channel opens for owner and finder to arrange safe handover without sharing direct contact info.

STEP 05

Recovery & Status Reset

Owner confirms receipt in dashboard; chat session closes and item telemetry resets to protected state.

Module Architecture

System Capabilities & 6+ Functional Modules

6+ Integrated Modules
Telemetry & IoT

QR Telemetry & Routing Protocol

Each physical keychain contains a unique QR token. When scanned, the system performs a zero-install browser handshake, logs coordinates with user permission, timestamp, and device user-agent without requiring the finder to download an app.

Unique short-link token routing
Zero app installation required for finders
Privacy Architecture

Identity Masking Layer

Finders are presented with an anonymous recovery portal. The owner personal email and phone number are masked to prevent spam or misuse.

Contact info masked from finder scan views
Proxy routing for owner communication
Notification Infrastructure

Multi-Channel Alert Dispatch Engine

A notification engine that broadcasts parallel alerts across multiple channels upon a scan event: Twilio SMS, automated Twilio Voice call, and transactional Resend email with location coordinates.

Twilio SMS automated dispatch with instant scan alert
Twilio Voice automated phone call notification
Real-Time Communication

Two-Way Masked Messaging Channel

A secure communication channel created upon scanning. Allows owner and finder to coordinate item handover without disclosing personal phone numbers or messaging handles.

Masked messaging channel
Auto-terminating chat sessions post item recovery
3D Graphics

Three.js 3D Hardware Store Visualizer

Interactive 3D hardware visualizer built in Three.js allowing customers to inspect physical hardware tags (classic keychain, QR sticker, whistle tag) with metallic reflections and real-time lighting.

360-degree interactive 3D model rotation and zoom
Physical material simulations (matte, brushed steel, polycarbonate)
Dashboard & Analytics

Owner Dashboard & Asset Ledger

Asset management dashboard where users register tags, review recovery history, track reported locations on Google Maps, and manage protection plans.

Google Maps asset location pin tracking
Multi-item management for individuals and families
Technical Analysis

Key Engineering Bottlenecks & Solutions

Challenge 01

Zero-Install Location Capture Across Mobile Browsers

Requiring finders to download an application causes high abandonment. Engineered a lightweight web client that requests standard browser geolocation permissions directly upon scan.

Implemented & Verified
Challenge 02

Protecting Owner Privacy & Preventing Direct Exposure

Traditional tags print phone numbers directly on physical hardware, exposing owners to harassment. Vouch proxies all communication through a masked messaging bridge, keeping owner phone numbers and emails private.

Implemented & Verified
Challenge 03

Multi-Channel Alert Delivery Speed

When an item is found, owners need prompt notification. Parallelized alert dispatch using Promise.allSettled across Twilio SMS, voice, and Resend transactional email to ensure reliable notification delivery.

Implemented & Verified
Next Case Study

NutriLens AI

Multimodal vision nutrition & clinical metabolic intelligence mobile engine.

View Next System