User Profile

Editable profiles with avatar upload

Complete profile management React component: avatar upload to Supabase Storage with progress bar, display name and bio editing, social link fields, Zod validation via React Hook Form, and account deletion. Includes uploadAvatar() helper, RLS policies for private storage, and signed URL generation.

Time saved

193

Lines of code

100%

TypeScript

#profile#avatar#storage#settings

Dependencies

@supabase/supabase-jsreact-hook-formzod

Code preview

blocks/profile/index.ts

1const url = await uploadAvatar(userId, file)
2var(--text-3);font-style:italic">// Uploads to Supabase Storage → profile_pictures/{userId}/avatar.{ext}
3var(--text-3);font-style:italic">// Returns public signed URL, updates profiles.avatar_url

Short excerpt. Full block includes SQL migrations, error handling, RLS policies, and complete file structure.

One-time · Instant GitHub access

✓Instant GitHub repo access

✓Own the code forever

✓Free updates

✓30-day refund if it breaks