Full-Stack AI Product

UrSalon Preview

A production-oriented AI hair visualization platform with a Next.js/Vercel backend, SwiftUI iOS client, Clerk auth, Neon Postgres, private media storage, Gemini image generation, and dual web/iOS billing rails.

Visit Website Download iOS App

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 features and achievements

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

Next.js 16 App RouterReact 19TypeScriptVercelVercel Workflow DevKitVercel BlobClerkNeon PostgresDrizzle ORMGoogle Gemini Image GenerationSwiftUIClerk iOS SDKStoreKit 2Stripe CheckoutApple App Store Server APIZodVitestFastlane

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.

View on GitHub