Overview
- What It Is: A cross-platform AI hair visualization product with a Next.js 16 web app on Vercel, a native SwiftUI iOS client, shared authenticated APIs, private image storage, and Gemini-backed hairstyle generation.
- Goal: Provide a secure Star Photo and Style-up workflow where users can preview hair color, style, or both while the backend owns identity, credits, billing, media lifecycle, generation history, account export, and deletion.
Key Achievements & Features
- Web and API Architecture
- Built around Next.js App Router route handlers, Server Components, protected app routes, and a shared API boundary used by both the browser app and native iOS client.
- Uses Clerk as the identity authority, with private routes resolved through bearer-token auth and app-level route helpers.
- Validates request payloads with Zod, centralizes environment validation, and separates public marketing pages from authenticated creation, gallery, account, and billing surfaces.
- AI Generation Workflow
- Uses Google Gemini image generation for color-only, style-only, and style-plus-color modes, with prompts constrained to preserve identity, body, clothing, lighting, and background.
- Runs generation through a durable Vercel Workflow sequence that reserves quota or credits, calls Gemini, persists the resulting image, records the event, and reverses credits on handled failures.
- Stages subject and reference inputs in private Blob storage so long-running generation work does not depend on large request bodies staying in memory.
- Data, Storage, and Audit Model
- Stores durable application state in Neon Postgres through Drizzle ORM, with tables for Star Photos, saved looks, credit ledger entries, generation events, App Store transactions, and professional-interest leads.
- Uses Vercel Blob for private Star Photo, reference, workflow-input, and generated-look media, with image bytes served back through authenticated API routes instead of exposing raw blob URLs.
- Models credits as an append-only ledger with idempotency keys so Stripe, StoreKit, manual grants, free monthly quota, and generation debits converge on one balance.
- Billing and Purchase Fulfillment
- Supports Stripe Checkout on the web using active style-up pack lookup keys and webhook-backed fulfillment.
- Supports StoreKit 2 purchases on iOS, verified server-side through Apple's App Store Server Library before credits are granted.
- Keeps purchase history, credit balance, free monthly quota, and generation history shared across web and iOS surfaces.
- Native iOS Client
- Ships a SwiftUI client targeting modern iOS, with Clerk session handling, StoreKit 2 purchase flows, Studio, Gallery, Home, Auth, and Settings/Profile screens.
- Uses the deployed web API for Star Photo upload, generation, saved looks, private image retrieval, account export, account deletion, and Apple purchase fulfillment.
- Compresses images client-side before upload and avoids direct database, storage, or Stripe access from the device.
- Operational Readiness
- Includes Vitest API and library coverage for generation, credits, Stripe, Apple fulfillment, account deletion, Blob behavior, metadata routes, auth checks, and billing reconciliation.
- Uses Fastlane, Xcode test targets, screenshot automation, StoreKit configuration, and documented sandbox/production environment modes for iOS release workflows.
- Adds structured logging, support IDs for critical routes, cron-protected quota reset behavior, and optional outbound alerting for production operations.
Technologies & Skills Demonstrated
- Next.js 16 App Router
- React 19
- TypeScript
- Vercel
- Vercel Workflow DevKit
- Vercel Blob
- Clerk
- Neon Postgres
- Drizzle ORM
- Google Gemini Image Generation
- SwiftUI
- Clerk iOS SDK
- StoreKit 2
- Stripe Checkout
- Apple App Store Server API
- Zod
- Vitest
- Fastlane
Big-Picture Vision
- Shared Product Core: The web app, native iOS app, billing systems, media storage, and generation engine all converge on one authenticated backend and one durable data model.
- Trustworthy Consumer AI: The architecture is designed around constrained edits, private media access, account-level data controls, and recoverable generation/billing workflows.
- Production-Minded Mobile AI: The project demonstrates how an AI image product can combine native mobile UX with server-owned credits, workflow orchestration, private blobs, and auditable purchase fulfillment.