How to Add Profile Customization to Your App (Copy-Paste Prompts Included)

Add a UNIQUE constraint on the `profiles.username` column in Postgres — this is the actual uniqueness enforcer. Layer a client-side availability check on top: call a debounced API route 300ms after the user stops typing, query for existing rows with that username, and return { available: boolean }. In the form submit handler, catch Postgres error code 23505 and display 'Username just taken — try another' as the fallback for the rare race condition where two users check the same username simultaneously.

Yes — add a Supabase RLS SELECT policy with `USING (true)` on the `profiles` table. This allows the anon key (used by unauthenticated visitors) to read profile rows. The public profile page at /u/[username] uses the Supabase anon client — no auth header — and renders in Next.js as a server component for fast initial load. Keep INSERT and UPDATE restricted to auth.uid() = id so only the owner can modify their profile.

The correct flow: react-dropzone handles file selection → open a modal with react-image-crop (ReactCrop component) → user drags to set crop bounds → on confirm, call canvas.toBlob() to get the cropped image as a Blob → upload that Blob to Supabase Storage → store the returned public URL in profiles.avatar_url. The critical detail is crop happens before upload, not after. AI tools sometimes wire this in the wrong order — check your implementation's flow if the crop UI opens after an image is already stored.

Store the preference in the `profiles.preferences` JSONB column as `{ accent_color: '#6366f1' }`. On login, read it from Supabase and apply it to the document root as a CSS custom property (`document.documentElement.style.setProperty('--accent', color)`). For instant apply without page reload, update the CSS property in the profile save handler before the upsert resolves. Mirror to localStorage as a fallback so the preference loads on initial page render before the Supabase fetch completes — but always treat the database value as the source of truth.

Yes — add a Next.js dynamic route at `/u/[username]`. The page reads the username parameter, queries `profiles WHERE username = [username]`, and renders the profile. Return Next.js's `notFound()` if no row exists. For SEO, call `generateMetadata()` to set the page title, description, and Open Graph image from the profile data. The username must be stored in Postgres with a UNIQUE index so routing always resolves to exactly one profile.

When avatar_url is null, render a div with a background color derived from the user's ID and display the first two characters of display_name or username as initials. To derive a stable color: convert the first 8 characters of the user UUID to a number via charCodeAt(), modulo 360, and use it as an HSL hue (e.g., `hsl(${hue}, 60%, 45%)`). This gives each user a unique but consistent color across sessions and devices.

One `profiles` table with id as a foreign key to auth.users(id), not a separate users table. Store username, display_name, bio, avatar_url, website_url, social_links as JSONB, and preferences as JSONB in the same row. Add a trigger on auth.users INSERT to auto-create the profile row on signup using the email prefix as a draft username. This avoids null reference errors on every page that expects a profile — the row always exists by the time the user first interacts with the app.