Project — Team Member Directory | Development Standards

WeWeb + Supabase ~8 Hours Beginner–Intermediate

What You Are Building

Build a workspace-based team directory where Owners and Admins can manage members, and Members can view other people inside the same workspace.

This project teaches

Supabase table design
Row Level Security
Avatar upload with Supabase Storage
WeWeb list page
WeWeb detail page
WeWeb create/edit form
Search and filters
Loading, empty, and error states

Flow Design

Example Flow

flowchart TD
    Login[User logs in]
    Workspace[Opens assigned workspace]
    Directory[Opens Team Member Directory]

    Login --> Workspace --> Directory

    Directory --> Owner[Owner Flow]
    Directory --> Admin[Admin Flow]
    Directory --> Member[Member Flow]

    Owner --> OwnerOverview[View all owned workspaces and member counts]
    OwnerOverview --> OwnerOpen[Open any workspace directory]
    OwnerOpen --> OwnerManage[Add admin, add member, edit member, change status]
    OwnerManage --> OwnerSearch[Search, filter, paginate, open member profile]

    Admin --> AdminList[View assigned workspace directory]
    AdminList --> AdminSearch[Search, filter, paginate members]
    AdminSearch --> AdminView[Open member profile]
    AdminView --> AdminManage[Add member, edit member, upload avatar, update status]
    AdminManage -. cannot access other workspaces .-> AdminBlocked[Blocked by workspace rules]

    Member --> MemberList[View members in shared workspace only]
    MemberList --> MemberSearch[Search visible members and filter allowed results]
    MemberSearch --> MemberView[Open member profile]
    MemberView -. cannot add, edit, or remove members .-> MemberBlocked[Restricted actions hidden and denied]

Required Screens

Owner Dashboard

Owner should see:

Workspace cards with total admins, total members, and active/inactive summary.
Search by workspace name if multiple teams exist.
Create workspace button and open-directory action on every card.
Quick action to assign or review workspace admins.
Empty state when no workspace exists yet.

Workspace Directory Page

This page should show:

Member cards or table with avatar, full name, email, role, department, and status.
Search by name and email.
Filters for role, status, and department.
Pagination with member count and current page state.
View button or clickable row/card to open member profile.
Add Member button for Admin/Owner only.
Edit and remove actions hidden from normal members.
Loading, empty, no-result, and error states.

Member Detail Page

This page should show:

Full name, avatar, email, phone, role, department, workspace name, and joined date.
Bio area with fallback if no bio is added.
Status badge and activity summary if available.
Edit button for Admin/Owner only.
Back-to-directory link.
Proper not-found state if the member does not exist or is outside workspace access.

Add/Edit Member Form

Fields and behaviors:

Name, email, phone, role, department, avatar, status, and bio.
Avatar upload with type/size validation, preview, replace, and remove actions.
No direct public avatar URL storage; file path only and signed/private render access.
Duplicate email handling inside the same workspace.
Save button disabled during submit and clear success/error feedback.

Data Model

Recommended tables:

Table	Purpose
`profiles`	User profile data.
`workspaces`	Workspace records.
`workspace_members`	User-workspace-role relation.
`member_profiles`	Use this table only if extra directory fields are not stored on `profiles`; otherwise keep all member profile fields on `profiles` and do not create this extra table.
`storage.objects`	Avatar files.

Permission Rules

Actor	Allowed
Owner	Can see and manage all workspace members.
Admin	Can see and manage members only in assigned workspaces.
Member	Can see members only in shared workspace.
Non-member	Cannot see workspace members.

Important anti-pattern to avoid:

Do not fetch all users on the frontend and filter them in WeWeb. Filtering must happen at database/RLS/query level.

Acceptance Checklist

Owner can create multiple workspaces.
Owner can assign admins to workspaces.
Admin can add members only in assigned workspace.
Admin cannot see users from other workspaces.
Member can see other members only in the same workspace.
Search works by name and email.
Filters work by role/status/department.
Avatar upload works.
Empty state appears when no members exist.
Error state appears when API/database request fails.
RLS blocks unauthorized access even if API request is manually changed.