A system design sketch for Louna's AI-powered challenge creation platform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Louna System Design Sketch</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>
<body class="bg-gray-100 p-8">
    <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
        <div class="p-8">
            <h1 class="text-2xl font-bold mb-4">Louna System Design Sketch</h1>
            <div class="mermaid">
graph TD
    A[Client - Next.js App] -->|API Requests| B(Vercel Edge Functions)
    A -->|Health Data| C[Apple HealthKit API]
    B -->|Query/Update| D[(Database)]
    B -->|AI Requests| E[Vercel AI SDK]
    E -->|Model Queries| F[OpenAI API]
    
    subgraph Client
    A -->|Auth| G[Auth Service]
    A -->|Challenge UI| H[Challenge Components]
    A -->|Health Data Display| I[Health Dashboard]
    end
    
    subgraph Server
    B -->|User Management| J[User Service]
    B -->|Challenge Logic| K[Challenge Service]
    B -->|Health Data Sync| L[Health Data Service]
    end
    
    M[Social Sharing Service] --> B
    
    classDef default fill:#f9f9f9,stroke:#333,stroke-width:2px;
    classDef client fill:#d4edda,stroke:#28a745;
    classDef server fill:#cce5ff,stroke:#007bff;
    classDef external fill:#fff3cd,stroke:#ffc107;
    
    class A,G,H,I client;
    class B,J,K,L,D server;
    class C,E,F,M external;
            </div>
        </div>
    </div>
    <script>
        mermaid.initialize({ startOnLoad: true });
    </script>
</body>
</html>

SPARKS

Louna System Design Sketch