Project — Contact Book | Development Standards

WeWeb + Xano ~8 Hours Beginner–Intermediate

What You Are Building

Build a workspace-based contact book using Xano as backend and WeWeb as frontend.

This project teaches

Xano CRUD endpoints
Reusable permission function
WeWeb list page
WeWeb form page
Search
Filters
Pagination
Loading, empty, and error states

Flow Design

Example Flow

flowchart TD
    Login[User logs in]
    Select[Selects workspace]
    Contacts[Opens Contact Book]

    Login --> Select --> Contacts

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

    Owner --> OwnerList[View all workspace contacts]
    OwnerList --> OwnerSearch[Search / filter / paginate]
    OwnerSearch --> OwnerView[Open contact detail]
    OwnerView --> OwnerManage[Create / edit / delete contact]
    OwnerManage -. cannot access other owners' workspaces .-> OwnerBlocked[Blocked by workspace permission rules]

    Admin --> AdminList[View assigned workspace contacts]
    AdminList --> AdminSearch[Search / filter / paginate]
    AdminSearch --> AdminView[Open contact detail]
    AdminView --> AdminManage[Create / edit / delete contacts in assigned workspace]
    AdminManage -. cannot access another workspace .-> AdminBlocked[Blocked by workspace permission rules]

    Member --> MemberList[View allowed contacts]
    MemberList --> MemberSearch[Search / filter / paginate]
    MemberSearch --> MemberView[Open contact detail]
    MemberView --> MemberRead[Read contact details only]
    MemberRead -. create, edit, and delete actions are not part of member scope .-> MemberBlocked[Blocked actions hidden and denied]

Required Screens

Contact List Page

Should include:

Contact name, company, email, phone, tags, and created date.
Search bar for name, email, phone, or company.
Filters for company and tags in the base project.
Pagination with total contacts and current page.
View button or row click to open full contact details.
Add Contact button only for Owner and Admin roles.
Loading, empty, no-result, and error states.

Contact Detail Page

Should include:

Full contact information, notes, related company, and tags.
Created by and last updated date.
Edit and delete actions only for Owner and Admin users in the base project.
Back to list navigation.
Not-found handling if the URL is changed to an unauthorized or missing contact.

Add/Edit Contact Form

Fields:

Name, email, phone, company, job title, tags, and notes.
Shared form for add and edit mode.
Validation for required fields and proper email/phone formats.
Tag selector should be consistent and workspace-safe.
Submit loading state and inline validation feedback.

Delete Confirmation

Should include:

Confirmation modal before deletion.
Contact name in the warning text.
Success feedback after delete and immediate list refresh.
No hard delete UI for unauthorized members.

Xano Backend Expectations

Create endpoints for:

Endpoint	Purpose
`GET /contacts`	List contacts with workspace filter.
`GET /contacts/{id}`	Get one contact.
`POST /contacts`	Create contact.
`PATCH /contacts/{id}`	Update contact.
`DELETE /contacts/{id}`	Delete contact.

Every endpoint must call a reusable permission function before returning or changing data.

Reusable Permission Function

Create a Xano function similar to:

can_access_workspace(user_id, workspace_id, required_roles)

It should check:

Is user authenticated?
Is user part of this workspace?
Does user have required role?
Is user status active?

Permission Rules

Actor	Allowed
Owner	Manage all contacts in owned workspaces.
Admin	Manage contacts in assigned workspace.
Member	View contacts in the shared workspace. Members are read-only in the base project and cannot create, edit, or delete contacts.
Non-member	No access.

Acceptance Checklist

All contacts have workspace_id.
List endpoint only returns contacts from allowed workspace.
Search works by name, email, company, and phone.
Pagination works correctly.
Admin cannot access another workspace by changing URL parameter.
Empty state appears when no contacts exist.
Error state appears when backend fails.
Delete action requires confirmation.