Multi-Step Onboarding & Team Setup Engine (Next.js 14 + Supabase SSR)

A premium, fully responsive, and generic multi-step onboarding wizard for Next.js 14 App Router projects.

Features

• Multi-step wizard: User preferences, household setup, and final setup review.

• Dynamic household size calculator: Supports adding custom family members with age group dropdowns.

• Supabase Integration: Updates profiles, triggers onboarding status, deletes/updates family relations, and uses built-in Row-Level Security (RLS).

• Onboarding Gate Middleware: Authenticated users are automatically redirected to onboarding setup before visiting dashboard pages.

Directory Structure

Ensure the files are placed in your Next.js project according to the following tree structure:

Getting Started

Step 1: Database Setup

Run the SQL queries in supabase/schema.sql using your Supabase project's SQL Editor. This will:

1. Create the public.profiles table.

2. Setup RLS policies so users can only access their own profile.

3. Setup an automatic trigger handle_new_user on auth.users to provision a blank profile upon user sign-up.

4. Create the public.family_members table for storing household details.

Step 2: Environment Variables

Add the following key-value pairs to your .env.local file:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Step 3: Copy Files

1. Copy the components/profile files to your project's components directory.

2. Copy the lib helper files to your project's lib directory.

3. Copy the routes (app/profile/setup/page.tsx and app/api/profile/route.ts) to your Next.js app folder.

Step 4: Middleware Configuration

Incorporate the logic from middleware-snippet.ts into your existing middleware.ts. This ensures users who have not completed onboarding are restricted from accessing protected paths (e.g. /dashboard) and are instead redirected to /profile/setup.

Customize Styling & Preferences

• Cuisine and Dietary Options: Modify options inside lib/profile-options.ts to add or remove options tailored to your application's focus.

• Theme/Colors: The styles use standard Tailwind CSS classes. You can swap amber/orange gradients and accents with your application's default branding palette.