From d4f42205200813126c37bd1b46938a05ba2bf028 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C4=B0pek?= <yusufipek@protonmail.com>
Date: Sat, 28 Feb 2026 10:31:57 +0300
Subject: [PATCH 1/2] fix(onboarding): handle completion API failure instead of
 silently redirecting

Check res.ok and catch network errors in completeOnboarding; surface a
toast and bail early rather than pushing to /dashboard on failure,
preventing a redirect loop back to /onboarding.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/onboarding/onboarding-wizard.tsx | 624 +++++++++++++++++++++++++++
 1 file changed, 624 insertions(+)
 create mode 100644 app/onboarding/onboarding-wizard.tsx

diff --git a/app/onboarding/onboarding-wizard.tsx b/app/onboarding/onboarding-wizard.tsx
new file mode 100644
index 0000000..2ff8488
--- /dev/null
+++ b/app/onboarding/onboarding-wizard.tsx
@@ -0,0 +1,624 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import {
+    Video,
+    Building2,
+    FolderPlus,
+    PlayCircle,
+    Bell,
+    ChevronRight,
+    Loader2,
+    Lock,
+    UserPlus,
+    Globe,
+    Youtube,
+    Upload,
+    Mail,
+    AlertCircle,
+    Info,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { cn } from '@/lib/utils';
+
+type Visibility = 'PRIVATE' | 'INVITE' | 'PUBLIC';
+
+const TOTAL_STEPS = 5;
+
+const visibilityOptions: { value: Visibility; label: string; description: string; icon: React.ReactNode }[] = [
+    {
+        value: 'PRIVATE',
+        label: 'Private',
+        description: 'Only workspace members and project members can access',
+        icon: <Lock className="h-5 w-5" />,
+    },
+    {
+        value: 'INVITE',
+        label: 'Invite Only',
+        description: 'Share with specific people via email',
+        icon: <UserPlus className="h-5 w-5" />,
+    },
+    {
+        value: 'PUBLIC',
+        label: 'Public',
+        description: 'Anyone with the link can view',
+        icon: <Globe className="h-5 w-5" />,
+    },
+];
+
+function ToggleButton({
+    enabled,
+    onToggle,
+    label,
+    description,
+}: {
+    enabled: boolean;
+    onToggle: () => void;
+    label: string;
+    description?: string;
+}) {
+    return (
+        <button
+            type="button"
+            onClick={onToggle}
+            className={cn(
+                'flex items-center justify-between w-full p-3 rounded-lg border transition-colors text-left',
+                enabled ? 'border-primary/50 bg-primary/5' : 'border-border hover:bg-accent/50'
+            )}
+        >
+            <div className="flex-1 min-w-0 pr-4">
+                <span className="text-sm font-medium">{label}</span>
+                {description && (
+                    <p className="text-xs text-muted-foreground mt-0.5">{description}</p>
+                )}
+            </div>
+            <div className={cn('w-10 h-6 shrink-0 rounded-full relative transition-colors', enabled ? 'bg-primary' : 'bg-muted')}>
+                <div className={cn('absolute top-1 w-4 h-4 rounded-full bg-white transition-transform', enabled ? 'translate-x-5' : 'translate-x-1')} />
+            </div>
+        </button>
+    );
+}
+
+// ─── Step 1: Welcome ───────────────────────────────────────────────────────────
+
+function StepWelcome({ userName, onNext }: { userName: string; onNext: () => void }) {
+    return (
+        <div className="text-center space-y-8">
+            <div className="mx-auto w-24 h-24 rounded-full bg-primary/10 flex items-center justify-center">
+                <Video className="h-12 w-12 text-primary" />
+            </div>
+            <div className="space-y-3">
+                <h2 className="text-3xl font-bold tracking-tight">Welcome to OpenFrame, {userName.split(' ')[0]}!</h2>
+                <p className="text-base text-muted-foreground max-w-md mx-auto">
+                    OpenFrame is your collaborative video review platform. Collect timestamped feedback, manage versions, and streamline approvals — all in one place.
+                </p>
+            </div>
+            <Button onClick={onNext} size="lg" className="w-full sm:w-auto px-10 h-12 text-base">
+                Get Started
+                <ChevronRight className="h-5 w-5 ml-1" />
+            </Button>
+        </div>
+    );
+}
+
+// ─── Step 2: Create Workspace ──────────────────────────────────────────────────
+
+function StepWorkspace({
+    onNext,
+    onWorkspaceCreated,
+}: {
+    onNext: () => void;
+    onWorkspaceCreated: (id: string) => void;
+}) {
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState('');
+    const [formData, setFormData] = useState({ name: '', description: '' });
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsLoading(true);
+        setError('');
+        try {
+            const res = await fetch('/api/workspaces', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(formData),
+            });
+            const data = await res.json();
+            if (!res.ok) {
+                setError(data.error || 'Failed to create workspace');
+                return;
+            }
+            onWorkspaceCreated(data.data.id);
+            onNext();
+        } catch {
+            setError('Something went wrong. Please try again.');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className="space-y-7">
+            <div className="text-center space-y-3">
+                <div className="mx-auto w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-3">
+                    <Building2 className="h-8 w-8 text-primary" />
+                </div>
+                <h2 className="text-2xl font-bold tracking-tight">Create your workspace</h2>
+                <p className="text-base text-muted-foreground">
+                    Workspaces organize your projects and team members.
+                </p>
+            </div>
+
+            <form onSubmit={handleSubmit} className="space-y-5">
+                <div className="space-y-2">
+                    <Label htmlFor="ws-name" className="text-sm font-medium">
+                        Workspace Name
+                    </Label>
+                    <Input
+                        id="ws-name"
+                        placeholder="e.g., My Studio"
+                        value={formData.name}
+                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                        required
+                        disabled={isLoading}
+                        className="h-11"
+                    />
+                </div>
+                <div className="space-y-2">
+                    <Label htmlFor="ws-desc" className="text-sm font-medium">
+                        Description <span className="text-muted-foreground font-normal">(optional)</span>
+                    </Label>
+                    <Textarea
+                        id="ws-desc"
+                        placeholder="What is this workspace for?"
+                        value={formData.description}
+                        onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                        rows={3}
+                        disabled={isLoading}
+                        className="resize-none"
+                    />
+                </div>
+
+                {error && (
+                    <div className="flex items-center gap-2 rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+                        <AlertCircle className="h-4 w-4 shrink-0" />
+                        {error}
+                    </div>
+                )}
+
+                <div className="flex flex-col gap-2 pt-1">
+                    <Button type="submit" className="w-full h-11" disabled={isLoading || !formData.name.trim()}>
+                        {isLoading ? (
+                            <>
+                                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                                Creating...
+                            </>
+                        ) : (
+                            'Create Workspace'
+                        )}
+                    </Button>
+                    <Button type="button" variant="ghost" onClick={onNext} disabled={isLoading} className="w-full text-muted-foreground">
+                        Skip this step
+                    </Button>
+                </div>
+            </form>
+        </div>
+    );
+}
+
+// ─── Step 3: Create Project ────────────────────────────────────────────────────
+
+function StepProject({
+    workspaceId,
+    onNext,
+    onProjectCreated,
+}: {
+    workspaceId: string | null;
+    onNext: () => void;
+    onProjectCreated: (id: string) => void;
+}) {
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState('');
+    const [formData, setFormData] = useState({
+        name: '',
+        description: '',
+        visibility: 'PRIVATE' as Visibility,
+    });
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!workspaceId) return;
+        setIsLoading(true);
+        setError('');
+        try {
+            const res = await fetch('/api/projects', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ ...formData, workspaceId }),
+            });
+            const data = await res.json();
+            if (!res.ok) {
+                setError(data.error || 'Failed to create project');
+                return;
+            }
+            onProjectCreated(data.data.id);
+            onNext();
+        } catch {
+            setError('Something went wrong. Please try again.');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <div className="space-y-7">
+            <div className="text-center space-y-3">
+                <div className="mx-auto w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-3">
+                    <FolderPlus className="h-8 w-8 text-primary" />
+                </div>
+                <h2 className="text-2xl font-bold tracking-tight">Create your first project</h2>
+                <p className="text-base text-muted-foreground">
+                    Projects hold your videos and collected feedback.
+                </p>
+            </div>
+
+            {!workspaceId ? (
+                <div className="space-y-4">
+                    <div className="flex items-start gap-3 rounded-lg border border-dashed p-4 text-sm text-muted-foreground">
+                        <Info className="h-4 w-4 shrink-0 mt-0.5" />
+                        <span>You skipped workspace creation. Projects require a workspace — you can create both from the dashboard later.</span>
+                    </div>
+                    <Button onClick={onNext} className="w-full h-11">
+                        Continue
+                        <ChevronRight className="h-4 w-4 ml-1" />
+                    </Button>
+                </div>
+            ) : (
+                <form onSubmit={handleSubmit} className="space-y-5">
+                    <div className="space-y-2">
+                        <Label htmlFor="proj-name" className="text-sm font-medium">
+                            Project Name
+                        </Label>
+                        <Input
+                            id="proj-name"
+                            placeholder="e.g., Product Demo Q1"
+                            value={formData.name}
+                            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                            required
+                            disabled={isLoading}
+                            className="h-11"
+                        />
+                    </div>
+                    <div className="space-y-2">
+                        <Label htmlFor="proj-desc" className="text-sm font-medium">
+                            Description <span className="text-muted-foreground font-normal">(optional)</span>
+                        </Label>
+                        <Textarea
+                            id="proj-desc"
+                            placeholder="Brief description of what this project is about..."
+                            value={formData.description}
+                            onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                            rows={3}
+                            disabled={isLoading}
+                            className="resize-none"
+                        />
+                    </div>
+
+                    <div className="space-y-2">
+                        <Label className="text-sm font-medium">Who can access?</Label>
+                        <div className="grid gap-2.5">
+                            {visibilityOptions.map((option) => (
+                                <button
+                                    key={option.value}
+                                    type="button"
+                                    onClick={() => setFormData({ ...formData, visibility: option.value })}
+                                    disabled={isLoading}
+                                    className={cn(
+                                        'w-full flex items-center gap-4 p-4 rounded-xl border-2 text-left transition-all',
+                                        formData.visibility === option.value
+                                            ? 'border-primary bg-primary/5 ring-1 ring-primary/20'
+                                            : 'border-border hover:border-border/80 hover:bg-accent/50'
+                                    )}
+                                >
+                                    <div className={cn(
+                                        'shrink-0 w-10 h-10 rounded-lg flex items-center justify-center',
+                                        formData.visibility === option.value
+                                            ? 'bg-primary text-primary-foreground'
+                                            : 'bg-muted text-muted-foreground'
+                                    )}>
+                                        {option.icon}
+                                    </div>
+                                    <div className="flex-1 min-w-0">
+                                        <div className="font-medium">{option.label}</div>
+                                        <div className="text-sm text-muted-foreground">{option.description}</div>
+                                    </div>
+                                    <div className={cn(
+                                        'shrink-0 w-5 h-5 rounded-full border-2 flex items-center justify-center',
+                                        formData.visibility === option.value ? 'border-primary bg-primary' : 'border-muted-foreground/30'
+                                    )}>
+                                        {formData.visibility === option.value && (
+                                            <div className="w-2 h-2 rounded-full bg-primary-foreground" />
+                                        )}
+                                    </div>
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
+                    {error && (
+                        <div className="flex items-center gap-2 rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+                            <AlertCircle className="h-4 w-4 shrink-0" />
+                            {error}
+                        </div>
+                    )}
+
+                    <div className="flex flex-col gap-2 pt-1">
+                        <Button type="submit" className="w-full h-11" disabled={isLoading || !formData.name.trim()}>
+                            {isLoading ? (
+                                <>
+                                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                                    Creating...
+                                </>
+                            ) : (
+                                'Create Project'
+                            )}
+                        </Button>
+                        <Button type="button" variant="ghost" onClick={onNext} disabled={isLoading} className="w-full text-muted-foreground">
+                            Skip this step
+                        </Button>
+                    </div>
+                </form>
+            )}
+        </div>
+    );
+}
+
+// ─── Step 4: Add First Video (informational) ───────────────────────────────────
+
+function StepVideo({ onNext }: { onNext: () => void }) {
+    return (
+        <div className="space-y-7">
+            <div className="text-center space-y-3">
+                <div className="mx-auto w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-3">
+                    <PlayCircle className="h-8 w-8 text-primary" />
+                </div>
+                <h2 className="text-2xl font-bold tracking-tight">Adding videos</h2>
+                <p className="text-base text-muted-foreground">
+                    OpenFrame supports two ways to add video content to your projects.
+                </p>
+            </div>
+
+            <div className="grid gap-4">
+                <div className="rounded-xl border p-5 space-y-2">
+                    <div className="flex items-center gap-2.5 font-semibold">
+                        <Youtube className="h-5 w-5 text-red-500" />
+                        YouTube link
+                    </div>
+                    <p className="text-sm text-muted-foreground">
+                        Paste a link to any YouTube video. OpenFrame will pull in the title, thumbnail, and duration automatically — no file upload needed.
+                    </p>
+                </div>
+                <div className="rounded-xl border p-5 space-y-2">
+                    <div className="flex items-center gap-2.5 font-semibold">
+                        <Upload className="h-5 w-5 text-primary" />
+                        Direct upload
+                    </div>
+                    <p className="text-sm text-muted-foreground">
+                        Upload video files directly from your device. Files are processed and delivered via CDN for fast, reliable playback worldwide.
+                    </p>
+                </div>
+            </div>
+
+            <Button onClick={onNext} className="w-full h-11">
+                Got it, continue
+                <ChevronRight className="h-4 w-4 ml-1" />
+            </Button>
+        </div>
+    );
+}
+
+// ─── Step 5: Notification Preferences ─────────────────────────────────────────
+
+function StepNotifications({ onFinish }: { onFinish: () => Promise<void> }) {
+    const [isSaving, setIsSaving] = useState(false);
+    const [emailEnabled, setEmailEnabled] = useState(false);
+    const [events, setEvents] = useState({
+        onNewVideo: true,
+        onNewComment: true,
+        onNewReply: true,
+    });
+
+    const handleSave = async () => {
+        setIsSaving(true);
+        try {
+            await fetch('/api/settings/notifications', {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    emailEnabled,
+                    telegramEnabled: false,
+                    telegramBotToken: null,
+                    telegramChatId: null,
+                    onNewVideo: events.onNewVideo,
+                    onNewVersion: true,
+                    onNewComment: events.onNewComment,
+                    onNewReply: events.onNewReply,
+                    onApprovalEvents: true,
+                    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC',
+                }),
+            });
+        } catch {
+            // best-effort; don't block finishing
+        }
+        await onFinish();
+    };
+
+    return (
+        <div className="space-y-7">
+            <div className="text-center space-y-3">
+                <div className="mx-auto w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center mb-3">
+                    <Bell className="h-8 w-8 text-primary" />
+                </div>
+                <h2 className="text-2xl font-bold tracking-tight">Notification preferences</h2>
+                <p className="text-base text-muted-foreground">
+                    Choose when you want to be notified. Email and Telegram are both supported — you can configure Telegram anytime in Settings.
+                </p>
+            </div>
+
+            <div className="space-y-4">
+                <div className="space-y-2.5">
+                    <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+                        <Mail className="h-4 w-4" />
+                        Channels
+                    </div>
+                    <ToggleButton
+                        enabled={emailEnabled}
+                        onToggle={() => setEmailEnabled((v) => !v)}
+                        label="Email notifications"
+                        description="Receive emails to your account address"
+                    />
+                </div>
+
+                <div className="space-y-2.5">
+                    <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+                        <Bell className="h-4 w-4" />
+                        Events
+                    </div>
+                    <ToggleButton
+                        enabled={events.onNewVideo}
+                        onToggle={() => setEvents((e) => ({ ...e, onNewVideo: !e.onNewVideo }))}
+                        label="New Video Added"
+                        description="When a new video is added to one of your projects"
+                    />
+                    <ToggleButton
+                        enabled={events.onNewComment}
+                        onToggle={() => setEvents((e) => ({ ...e, onNewComment: !e.onNewComment }))}
+                        label="New Comment"
+                        description="When someone leaves a comment on your videos"
+                    />
+                    <ToggleButton
+                        enabled={events.onNewReply}
+                        onToggle={() => setEvents((e) => ({ ...e, onNewReply: !e.onNewReply }))}
+                        label="New Reply"
+                        description="When someone replies to a comment thread"
+                    />
+                </div>
+            </div>
+
+            <div className="flex flex-col gap-2 pt-1">
+                <Button onClick={handleSave} className="w-full h-11" disabled={isSaving}>
+                    {isSaving ? (
+                        <>
+                            <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                            Saving...
+                        </>
+                    ) : (
+                        'Save & finish'
+                    )}
+                </Button>
+                <Button type="button" variant="ghost" onClick={onFinish} disabled={isSaving} className="w-full text-muted-foreground">
+                    Skip
+                </Button>
+            </div>
+        </div>
+    );
+}
+
+// ─── Wizard Shell ──────────────────────────────────────────────────────────────
+
+export function OnboardingWizard({ userName }: { userName: string }) {
+    const router = useRouter();
+    const [currentStep, setCurrentStep] = useState(1);
+    const [createdWorkspaceId, setCreatedWorkspaceId] = useState<string | null>(null);
+    const [isCompleting, setIsCompleting] = useState(false);
+
+    const goNext = () => setCurrentStep((s) => Math.min(s + 1, TOTAL_STEPS));
+
+    const completeOnboarding = async () => {
+        setIsCompleting(true);
+        try {
+            const res = await fetch('/api/onboarding/complete', { method: 'POST' });
+            if (!res.ok) {
+                toast.error('Failed to complete setup. Please try again.');
+                setIsCompleting(false);
+                return;
+            }
+        } catch {
+            toast.error('Something went wrong. Please try again.');
+            setIsCompleting(false);
+            return;
+        }
+        router.push('/dashboard');
+    };
+
+    return (
+        <div className="w-full max-w-2xl">
+            {/* Top bar */}
+            <div className="flex items-center justify-between mb-8">
+                {/* Step dots */}
+                <div className="flex items-center gap-2.5">
+                    {Array.from({ length: TOTAL_STEPS }, (_, i) => i + 1).map((step) => (
+                        <div
+                            key={step}
+                            className={cn(
+                                'rounded-full transition-all',
+                                step === currentStep
+                                    ? 'w-7 h-3 bg-primary'
+                                    : step < currentStep
+                                    ? 'w-3 h-3 bg-primary/40'
+                                    : 'w-3 h-3 bg-muted'
+                            )}
+                        />
+                    ))}
+                </div>
+
+                {/* Skip button */}
+                {currentStep > 1 && (
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={completeOnboarding}
+                        disabled={isCompleting}
+                        className="text-muted-foreground text-sm"
+                    >
+                        {isCompleting ? <Loader2 className="h-3 w-3 animate-spin mr-1" /> : null}
+                        Skip setup
+                    </Button>
+                )}
+            </div>
+
+            {/* Step content */}
+            <Card className="border-border/50 shadow-lg">
+                <CardContent className="pt-10 pb-10 px-10">
+                    {currentStep === 1 && (
+                        <StepWelcome userName={userName} onNext={goNext} />
+                    )}
+                    {currentStep === 2 && (
+                        <StepWorkspace onNext={goNext} onWorkspaceCreated={setCreatedWorkspaceId} />
+                    )}
+                    {currentStep === 3 && (
+                        <StepProject workspaceId={createdWorkspaceId} onNext={goNext} onProjectCreated={() => {}} />
+                    )}
+                    {currentStep === 4 && (
+                        <StepVideo onNext={goNext} />
+                    )}
+                    {currentStep === 5 && (
+                        <StepNotifications onFinish={completeOnboarding} />
+                    )}
+                </CardContent>
+            </Card>
+
+            {/* Step label */}
+            <p className="text-center text-sm text-muted-foreground mt-5">
+                Step {currentStep} of {TOTAL_STEPS}
+            </p>
+        </div>
+    );
+}

From 31fda8a28c2d1d75026f41c56fd02951419a02f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yusuf=20=C4=B0pek?= <yusufipek@protonmail.com>
Date: Sat, 28 Feb 2026 10:35:01 +0300
Subject: [PATCH 2/2] feat(onboarding): add onboarding wizard flow

- Add `onboardingCompletedAt` field to User model + migration
- Add AUDIO/R2_AUDIO enum values to schema
- Gate dashboard behind onboarding check; redirect to /onboarding if not completed
- Add /onboarding page + layout with 5-step wizard (welcome, workspace, project, video info, notifications)
- Add POST /api/onboarding/complete endpoint to mark onboarding done

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/(dashboard)/dashboard/page.tsx            |  8 +++++++
 app/api/onboarding/complete/route.ts          | 17 +++++++++++++
 app/onboarding/layout.tsx                     |  7 ++++++
 app/onboarding/page.tsx                       | 24 +++++++++++++++++++
 .../migration.sql                             |  1 +
 prisma/schema.prisma                          |  3 +++
 6 files changed, 60 insertions(+)
 create mode 100644 app/api/onboarding/complete/route.ts
 create mode 100644 app/onboarding/layout.tsx
 create mode 100644 app/onboarding/page.tsx
 create mode 100644 prisma/migrations/20260227120000_add_onboarding/migration.sql

diff --git a/app/(dashboard)/dashboard/page.tsx b/app/(dashboard)/dashboard/page.tsx
index 8c1cd9f..df2476b 100644
--- a/app/(dashboard)/dashboard/page.tsx
+++ b/app/(dashboard)/dashboard/page.tsx
@@ -14,6 +14,14 @@ export default async function DashboardPage({
         redirect('/login');
     }
 
+    const userOnboarding = await db.user.findUnique({
+        where: { id: session.user.id },
+        select: { onboardingCompletedAt: true },
+    });
+    if (!userOnboarding?.onboardingCompletedAt) {
+        redirect('/onboarding');
+    }
+
     const resolvedSearchParams = await searchParams;
     const { ws, sort, page: pageParam } = resolvedSearchParams || {};
 
diff --git a/app/api/onboarding/complete/route.ts b/app/api/onboarding/complete/route.ts
new file mode 100644
index 0000000..46eba41
--- /dev/null
+++ b/app/api/onboarding/complete/route.ts
@@ -0,0 +1,17 @@
+import { auth } from '@/lib/auth';
+import { db } from '@/lib/db';
+import { apiErrors, successResponse } from '@/lib/api-response';
+
+export async function POST() {
+    const session = await auth();
+    if (!session?.user?.id) {
+        return apiErrors.unauthorized();
+    }
+
+    await db.user.update({
+        where: { id: session.user.id },
+        data: { onboardingCompletedAt: new Date() },
+    });
+
+    return successResponse({ completed: true });
+}
diff --git a/app/onboarding/layout.tsx b/app/onboarding/layout.tsx
new file mode 100644
index 0000000..19313a4
--- /dev/null
+++ b/app/onboarding/layout.tsx
@@ -0,0 +1,7 @@
+export default function OnboardingLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <div className="min-h-screen bg-background flex items-center justify-center p-4">
+            {children}
+        </div>
+    );
+}
diff --git a/app/onboarding/page.tsx b/app/onboarding/page.tsx
new file mode 100644
index 0000000..6082449
--- /dev/null
+++ b/app/onboarding/page.tsx
@@ -0,0 +1,24 @@
+import { auth } from '@/lib/auth';
+import { db } from '@/lib/db';
+import { redirect } from 'next/navigation';
+import { OnboardingWizard } from './onboarding-wizard';
+
+export default async function OnboardingPage() {
+    const session = await auth();
+    if (!session?.user?.id) {
+        redirect('/login');
+    }
+
+    const user = await db.user.findUnique({
+        where: { id: session.user.id },
+        select: { onboardingCompletedAt: true, name: true, email: true },
+    });
+
+    if (user?.onboardingCompletedAt) {
+        redirect('/dashboard');
+    }
+
+    const userName = user?.name || user?.email?.split('@')[0] || 'there';
+
+    return <OnboardingWizard userName={userName} />;
+}
diff --git a/prisma/migrations/20260227120000_add_onboarding/migration.sql b/prisma/migrations/20260227120000_add_onboarding/migration.sql
new file mode 100644
index 0000000..dd59e7a
--- /dev/null
+++ b/prisma/migrations/20260227120000_add_onboarding/migration.sql
@@ -0,0 +1 @@
+ALTER TABLE users ADD COLUMN IF NOT EXISTS "onboardingCompletedAt" TIMESTAMP;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 253ccb6..31debd5 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -21,6 +21,7 @@ model User {
   password      String?   // Hashed password for email/password auth
   createdAt     DateTime  @default(now())
   updatedAt     DateTime  @updatedAt
+  onboardingCompletedAt DateTime?
 
   // Relations
   accounts           Account[]
@@ -70,12 +71,14 @@ enum DownloadEgressSource {
 enum VideoAssetKind {
   IMAGE
   VIDEO
+  AUDIO
 }
 
 enum VideoAssetProvider {
   R2_IMAGE
   YOUTUBE
   BUNNY
+  R2_AUDIO
 }
 
 model DownloadEgressEvent {