WARPED WISHES

2 Squirrels AI

Technology Stack

Text Generation OpenAI GPT-4o-mini
Image Generation DALL-E 3
Frontend Next.js + React
Auth Clerk
Database Supabase

Architecture Note: AI-powered greeting card generator that creates humorous, twisted jokes and matching illustrations for any occasion.

AI Creative Pipeline

🤣
Joke Generator
GPT-4o-mini Humor
🎨
Image Artist
DALL-E 3 Illustrations
📝
Prompt Crafter
Context-Aware Prompts
🗳️
Voting System
Community Curation

User Authentication Flow

%%{init: {'theme': 'dark', 'themeVariables': { 'primaryColor': '#C17852', 'primaryTextColor': '#F0F6FC', 'primaryBorderColor': '#4A5E32', 'lineColor': '#E6C98F', 'secondaryColor': '#161B22', 'tertiaryColor': '#0D1117', 'background': '#0D1117', 'mainBkg': '#161B22', 'nodeBorder': '#4A5E32', 'clusterBkg': '#161B22', 'clusterBorder': '#4A5E32', 'titleColor': '#E6C98F', 'edgeLabelBackground': '#161B22'}}}%%
flowchart LR
    subgraph Client["🖥️ Client"]
        UI["💻 Next.js App"]
        BTN["🔐 Sign In Button"]
    end

    subgraph Clerk["🔑 Clerk Auth"]
        CL["📋 Clerk Provider"]
        SU["📝 Sign Up/In"]
        TK["🎫 JWT Token"]
    end

    subgraph Session["💾 Session"]
        USR["👤 User Object"]
        CRD["🔒 Credentials"]
    end

    subgraph App["📱 Application"]
        PRO["🛡️ Protected Routes"]
        DASH["📊 Dashboard"]
    end

    UI --> BTN
    BTN --> CL
    CL --> SU
    SU --> TK
    TK --> USR
    TK --> CRD
    USR --> PRO
    PRO --> DASH

Card Builder Interface

%%{init: {'theme': 'dark', 'themeVariables': { 'primaryColor': '#C17852', 'primaryTextColor': '#F0F6FC', 'primaryBorderColor': '#4A5E32', 'lineColor': '#E6C98F', 'secondaryColor': '#161B22', 'tertiaryColor': '#0D1117', 'background': '#0D1117', 'mainBkg': '#161B22', 'nodeBorder': '#4A5E32', 'clusterBkg': '#161B22', 'clusterBorder': '#4A5E32', 'titleColor': '#E6C98F', 'edgeLabelBackground': '#161B22'}}}%%
flowchart TB
    subgraph Input["📥 User Input"]
        OCC["🎂 Occasion Type"]
        REC["👤 Recipient Name"]
        TON["😈 Humor Level"]
        CTX["📝 Context/Details"]
    end

    subgraph Build["🔧 Card Builder"]
        FRM["📋 Form State"]
        VAL["✅ Validation"]
        PRV["👁️ Preview Mode"]
    end

    subgraph Generate["🤖 AI Generation"]
        JOK["🤣 Generate Joke"]
        IMG["🎨 Generate Image"]
    end

    subgraph Output["📤 Card Output"]
        CRD["🎴 Final Card"]
        SHR["📤 Share Options"]
    end

    OCC --> FRM
    REC --> FRM
    TON --> FRM
    CTX --> FRM
    FRM --> VAL
    VAL --> PRV
    PRV --> JOK
    JOK --> IMG
    IMG --> CRD
    CRD --> SHR

AI Joke Generation Pipeline

%%{init: {'theme': 'dark', 'themeVariables': { 'primaryColor': '#C17852', 'primaryTextColor': '#F0F6FC', 'primaryBorderColor': '#4A5E32', 'lineColor': '#E6C98F', 'secondaryColor': '#161B22', 'tertiaryColor': '#0D1117', 'background': '#0D1117', 'mainBkg': '#161B22', 'nodeBorder': '#4A5E32', 'clusterBkg': '#161B22', 'clusterBorder': '#4A5E32', 'titleColor': '#E6C98F', 'edgeLabelBackground': '#161B22'}}}%%
flowchart LR
    subgraph Input["📥 Context"]
        OCC["🎂 Occasion"]
        TON["😈 Humor Style"]
        DET["📝 Details"]
    end

    subgraph Prompt["📝 Prompt Engineering"]
        SYS["🎭 System Prompt
Twisted Comedian"]
        CTX["📋 Context Builder"]
        FMT["📐 Format Rules"]
    end

    subgraph LLM["🤖 GPT-4o-mini"]
        API["🔌 OpenAI API"]
        GEN["🧠 Generate"]
        STR["📡 Streaming"]
    end

    subgraph Output["📤 Joke"]
        TXT["🤣 Joke Text"]
        SET["📝 Setup Line"]
        PUN["💥 Punchline"]
    end

    OCC --> SYS
    TON --> SYS
    DET --> CTX
    SYS --> CTX
    CTX --> FMT
    FMT --> API
    API --> GEN
    GEN --> STR
    STR --> TXT
    TXT --> SET
    TXT --> PUN

DALL-E Image Generation

%%{init: {'theme': 'dark', 'themeVariables': { 'primaryColor': '#C17852', 'primaryTextColor': '#F0F6FC', 'primaryBorderColor': '#4A5E32', 'lineColor': '#E6C98F', 'secondaryColor': '#161B22', 'tertiaryColor': '#0D1117', 'background': '#0D1117', 'mainBkg': '#161B22', 'nodeBorder': '#4A5E32', 'clusterBkg': '#161B22', 'clusterBorder': '#4A5E32', 'titleColor': '#E6C98F', 'edgeLabelBackground': '#161B22'}}}%%
flowchart TB
    subgraph Input["📥 Generation Input"]
        JOK["🤣 Joke Text"]
        OCC["🎂 Occasion"]
        STY["🎨 Art Style"]
    end

    subgraph Prompt["📝 Image Prompt"]
        ANA["🔍 Analyze Joke"]
        VIS["🖼️ Visual Concept"]
        PRO["📝 DALL-E Prompt"]
    end

    subgraph Generate["🤖 DALL-E 3"]
        API["🔌 OpenAI Images API"]
        GEN["🎨 Generate Image"]
        MOD["🛡️ Content Moderation"]
    end

    subgraph Output["📤 Image Output"]
        URL["🔗 Image URL"]
        B64["📦 Base64 Data"]
        CARD["🎴 Card Preview"]
    end

    JOK --> ANA
    OCC --> VIS
    STY --> VIS
    ANA --> VIS
    VIS --> PRO
    PRO --> API
    API --> GEN
    GEN --> MOD
    MOD --> URL
    MOD --> B64
    URL --> CARD
    B64 --> CARD

Community Gallery & Voting

%%{init: {'theme': 'dark', 'themeVariables': { 'primaryColor': '#C17852', 'primaryTextColor': '#F0F6FC', 'primaryBorderColor': '#4A5E32', 'lineColor': '#E6C98F', 'secondaryColor': '#161B22', 'tertiaryColor': '#0D1117', 'background': '#0D1117', 'mainBkg': '#161B22', 'nodeBorder': '#4A5E32', 'clusterBkg': '#161B22', 'clusterBorder': '#4A5E32', 'titleColor': '#E6C98F', 'edgeLabelBackground': '#161B22'}}}%%
flowchart TB
    subgraph Browse["🔍 Browse Cards"]
        GAL["🖼️ Gallery View"]
        FLT["🔧 Filters
Occasion, Date"]
        SRT["📊 Sort
Popular, New"]
    end

    subgraph Card["🎴 Card Detail"]
        VW["👁️ View Card"]
        JK["🤣 Read Joke"]
        IM["🎨 View Image"]
    end

    subgraph Vote["🗳️ Voting"]
        UP["👍 Upvote"]
        DW["👎 Downvote"]
        CNT["📊 Vote Count"]
    end

    subgraph Data["💾 Supabase"]
        DB[("🗄️ Cards Table")]
        VT[("📊 Votes Table")]
        LB["🏆 Leaderboard"]
    end

    GAL --> FLT
    FLT --> SRT
    SRT --> VW
    VW --> JK
    VW --> IM
    VW --> UP
    VW --> DW
    UP --> CNT
    DW --> CNT
    CNT --> VT
    VT --> DB
    DB --> LB

Complete System Architecture

%%{init: {'theme': 'dark', 'themeVariables': { 'primaryColor': '#C17852', 'primaryTextColor': '#F0F6FC', 'primaryBorderColor': '#4A5E32', 'lineColor': '#E6C98F', 'secondaryColor': '#161B22', 'tertiaryColor': '#0D1117', 'background': '#0D1117', 'mainBkg': '#161B22', 'nodeBorder': '#4A5E32', 'clusterBkg': '#161B22', 'clusterBorder': '#4A5E32', 'titleColor': '#E6C98F', 'edgeLabelBackground': '#161B22'}}}%%
flowchart TB
    subgraph Client["🖥️ Next.js Frontend"]
        UI["💻 React UI"]
        BLD["🔧 Card Builder"]
        GAL["🖼️ Gallery"]
    end

    subgraph Auth["🔐 Authentication"]
        CLK["🔑 Clerk"]
    end

    subgraph API["🔌 API Routes"]
        JK["/api/joke"]
        IM["/api/image"]
        CD["/api/cards"]
        VT["/api/vote"]
    end

    subgraph AI["🤖 OpenAI"]
        GPT["🧠 GPT-4o-mini"]
        DALLE["🎨 DALL-E 3"]
    end

    subgraph Storage["💾 Supabase"]
        DB[("🗄️ PostgreSQL")]
        STR[("📁 Storage")]
    end

    UI <--> CLK
    BLD --> JK
    BLD --> IM
    JK --> GPT
    IM --> DALLE
    GPT --> CD
    DALLE --> STR
    CD --> DB
    GAL --> CD
    GAL --> VT
    VT --> DB