Example Features

Two example features ship wired end to end so you can copy the pattern rather than invent it: a Todos CRUD list and a profile + avatar editor. Both are marked Example — working demos meant to be replaced with your own product data. Both need the Supabase tables from Supabase Setup.

Todos (Example)

Todos is the worked example of the full data path — service → TanStack Query → component. The service (app/services/todos.ts) is a set of pure functions over the typed Supabase client, with no component imports:

// app/services/todos.ts
export const listTodos = async (): Promise<Todo[]> => {
  const { data, error } = await supabase
    .from('todos')
    .select(TODO_COLUMNS)
    .order('sort_order', { ascending: true })
    .order('created_at', { ascending: false })
  if (error) throw new Error(error.message)
  return (data ?? []) as Todo[]
}
// createTodo, toggleTodo, deleteTodo …

TodosDemo (app/routes/showcase/demos/TodosDemo.tsx) consumes those services through TanStack Query — useQuery for the list, useMutation for create/toggle/ delete — and owns cache invalidation in the UI layer. RLS enforces that a user only sees their own rows (see Data Layer), so the service never filters by user id on read.

Profile + avatar (Example)

The Account page (/account, AccountPage.tsx) edits the signed-in user's profile. Two services back it:

• app/services/profile.ts — getProfile / updateProfile over the profiles table (full_name, bio, phone, location, avatar_url).
• app/services/avatar.ts — the avatar upload/read cycle against the avatars storage bucket.

The avatar flow is a useful pattern in itself:

1. Validate the picked image client-side — guardAvatarInput rejects empty files, anything over 5 MB, or a MIME type outside PNG/JPEG/WebP.
2. Upload to avatars/<userId>/avatar.<ext> with upsert: true, then store that path on the profile row.
3. Read back through getAvatarUrl, which mints a signed URL (7-day TTL) and appends a cache-busting key from updated_at, so a re-upload shows immediately.

The bucket is private; reads go through signed URLs rather than public links. Provision the bucket and its storage policies as shown in Supabase Setup.

What's intentionally not here

This is a desktop shell, not a SaaS UI kit. There is deliberately:

• no dashboard-with-charts,
• no admin panel or user-management tables,
• no CRM/content-management scaffolding.

The examples exist to demonstrate the shape of a feature — a typed service, query hooks, a page, RLS — not to be a component library. For building blocks (buttons, dialogs, forms, tables, and the rest of shadcn/ui), open the Components gallery at /showcase/components. See Showcase.

Copy the pattern

To add your own CRUD feature end to end, mirror Todos:

Related pages