This AI wardrobe app cuts clothing returns with instant virtual try-ons

Every year, online clothing retailers lose more than $816 billion to returns—most because shoppers can’t visualize fit and style before buying. StyleSense, a 72-hour hackathon project, tackles this problem head-on with an AI-powered virtual wardrobe that lets users upload a selfie, add clothes from any product page, and instantly see themselves wearing the items. Built to demo in under three days, the app combines Next.js, FastAPI, Amazon Aurora PostgreSQL Serverless v2, and Vercel to create a seamless experience from upload to try-on.

A stack engineered for speed and scale

The StyleSense team chose a modern, serverless-first architecture to maximize development velocity while keeping infrastructure costs predictable. The frontend runs on Next.js 14 with the App Router and TypeScript, deployed automatically to Vercel with zero configuration changes. The backend is powered by FastAPI (Python 3.12), exposing over 50 REST endpoints to handle user uploads, garment processing, and AI rendering tasks. Auth and real-time features are handled by Supabase, which provides JWT authentication, cloud storage, and social features like outfit sharing and chat.

The heart of the system is Amazon Aurora PostgreSQL Serverless v2, deployed in the Mumbai region (ap-south-1). Unlike provisioned databases, Aurora Serverless v2 scales to zero when idle, eliminating unnecessary costs during development and testing. It also supports IAM authentication, allowing the backend to connect to the database using short-lived tokens instead of hardcoded credentials—a critical security feature during a public hackathon where code repos are often shared.

Securing Aurora with IAM tokens and zero secrets

Storing database credentials in environment variables or code is risky, especially in collaborative environments. StyleSense solved this using AWS IAM authentication with Aurora PostgreSQL. Instead of a static DATABASE_URL with a password, the backend generates a temporary token at connection time using the AWS SDK:

import boto3

def get_iam_token():
    client = boto3.client("rds", region_name="ap-south-1")
    return client.generate_db_auth_token(
        DBHostname="stylesense.cluster-c9cswq8kqykn.ap-south-1.rds.amazonaws.com",
        Port=5432,
        DBUsername="stylesense_app",
        Region="ap-south-1",
    )

This token is passed to SQLAlchemy’s connection engine via a custom creator function that refreshes the token before each new connection. Since tokens expire every 15 minutes, this ensures continuous access without exposing credentials:

from sqlalchemy import create_engine

engine = create_engine(
    "postgresql+psycopg2://",
    creator=lambda: psycopg2.connect(
        host=AURORA_HOST,
        port=5432,
        dbname="stylesense",
        user="stylesense_app",
        password=get_iam_token(),
        sslmode="require",
    )
)

This approach ensures no passwords are stored in .env, CI pipelines, or Git repositories—only an IAM role with least-privilege access to RDS.

A lean schema for real-time virtual try-ons

The Aurora database stores only the data that benefits from SQL joins, indexing, and ACID transactions. The team designed four core tables:

• users: Stores selfie URLs, stylized avatar images, and body analysis data
• wardrobe_items: Contains clothing images, categories, colors, and source URLs
• try_on_results: Holds generated try-on images, scene descriptions, and video URLs
• outfits: Saves user-curated outfit combinations for quick access

Social features like friendships and chat threads remain in Supabase, which already includes Row-Level Security and real-time updates. This separation keeps Aurora focused on structured data while Supabase handles unstructured, social interactions.

Vercel: Deploying the frontend in minutes

The Next.js frontend deploys to Vercel with minimal setup—just three environment variables and no additional configuration files. The deployment process is streamlined thanks to Vercel’s integration with GitHub and automatic environment variable handling.

One key feature is the use of Edge middleware for authentication. Using Supabase’s SSR client, the team implemented a lightweight middleware that refreshes session cookies on every request, preventing unauthenticated content flashes:

// middleware.ts
import { createServerClient } from "@supabase/ssr";
import { NextResponse } from "next/server";

export async function middleware(request: NextRequest) {
    const response = NextResponse.next();
    const supabase = createServerClient(
        process.env.SUPABASE_URL!,
        process.env.SUPABASE_ANON_KEY!,
        { cookies: { request, response } }
    );
    await supabase.auth.getSession();
    return response;
}

Deploying both the frontend (in Vercel’s bom1 region) and Aurora (in ap-south-1) in the same geographic area kept database round-trip latency under 20 milliseconds, crucial for a responsive user experience during live demos.

The AI pipeline: From selfie to runway walk in seconds

The demo flow showcases StyleSense’s core value proposition. It begins with a user uploading a selfie. Anthropic’s Claude vision model analyzes the image to detect body type and pose. Next, a scraper extracts the clothing image from an Amazon product page, and Runway ML’s garment cleaner isolates the garment, removing backgrounds and imperfections.

The actual try-on happens via Runway’s gen4_image model, which composites the garment onto the user’s selfie in about 10 seconds, consuming around 5 credits per render. Users can then place themselves in dynamic scenes—such as a beach wedding or a city rooftop—by describing the setting. For added flair, Runway’s gen4.5 model generates a 5-second animated video of a runway walk, costing between 60 and 100 credits per clip.

Finally, a Runway Characters API avatar named Aria acts as a virtual stylist. Integrated via FastAPI, Aria answers wardrobe-related questions in real time, with her knowledge base refreshed from Aurora at the start of each session.

The entire pipeline is asynchronous. FastAPI dispatches Runway tasks and returns a unique task ID, while the frontend uses Zustand to manage state across page navigations, polling for updates without blocking the user experience.

Lessons learned and future improvements

Even in a tight 72-hour sprint, the team encountered challenges that shaped their approach. One major hurdle was managing Aurora’s IAM token refresh within SQLAlchemy’s connection pool. Connections reused tokens minted at startup, causing mid-session failures as tokens expired. The solution was to override the creator function and enforce token refresh for every logical connection, paired with a short connection pool recycle time.

Another challenge was Runway’s requirement for public HTTPS image URLs. During development, all local uploads had to be re-hosted to Supabase Storage before being passed to Runway’s API, adding an extra step but ensuring compatibility.

Credit management also required discipline. Runway’s high-quality video generation (gen4.5) costs up to 100 credits per 5 seconds. To stay within the 50,000-credit hackathon budget, the team used the faster, lower-cost gen4_image_turbo model for testing and reserved premium models for final demo recordings.

Looking ahead, the team identified two key improvements. First, using Aurora DSQL—a serverless SQL database with no instance management—could further reduce operational overhead, especially for read-heavy workloads like browsing wardrobes. Second, offloading the task queue to DynamoDB would decouple job tracking from the main backend, improving scalability and reliability during peak loads. As StyleSense evolves from hackathon prototype to production-ready app, these optimizations will be critical in delivering a seamless, real-time virtual try-on experience at scale.