Example Features

These are working patterns, not a prescribed product domain. Both are labeled Example and require the profiles, todos, and private avatars storage setup from Supabase Setup.

Todos — Example

src/services/todos.ts is the worked data path: small, typed Supabase service functions for listing, creating, toggling, and deleting. The Showcase Todos route consumes them through TanStack Query. It selects id, user_id, title, completed, sort_order, created_at, and updated_at; RLS—not a client-side filter—limits rows to the signed-in user.

Copy this shape for a product feature:

1. Put transport code in src/services/<domain>.ts, with no component imports.
2. Use useQuery and useMutation in the UI for reads, mutations, and cache invalidation.
3. Enforce ownership in RLS; never treat a supplied user_id as authority.
4. Design explicit loading, empty, offline, and error states.

The service is the swap point. Replacing its Supabase calls with another backend does not require your route to know about that transport change.

Profile and avatar — Example

src/services/profile.ts loads and patches the signed-in user's profiles row. src/services/avatar.ts demonstrates private-object storage:

• It validates PNG, JPEG, or WebP input up to 5 MB.
• It upserts to <userId>/avatar.<extension> in avatars, then stores that storage path in profiles.avatar_url.
• It creates a signed URL with a seven-day TTL for reads and appends updated_at as a cache key after a change.
• Removal deletes the object when present, then clears avatar_url.

Do not make the bucket public merely to simplify image rendering. The storage policies from Supabase Setup restrict each authenticated user to their own folder.

Intentionally absent

There is no dashboard-with-charts, admin panel, CRM, or generic SaaS back office. Those structures would make assumptions about your desktop product. Use the Components gallery to inspect reusable primitives; the Showcase is a removable demo layer, not your application's information architecture.