Project — Client Feedback Portal | Development Standards

Next.js + Supabase ~8 Hours Intermediate

What You Are Building

Build a workspace-based client feedback portal where internal teams collect, review, and resolve product or service feedback.

This project teaches

Next.js App Router structure
Supabase Auth and tables
Server Actions or API routes
Role-aware dashboards
Search and filters
Status workflow handling

Flow Design

Feedback Workflow

flowchart TD
    Login[User logs in]
    Workspace[Selects workspace]
    Portal[Opens Feedback Portal]

    Login --> Workspace --> Portal

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

    Owner --> OwnerDashboard[View workspace summaries]
    OwnerDashboard --> OwnerInsights[Filter by category / status / priority]
    OwnerInsights --> OwnerReview[Open feedback detail and audit responses]

    Admin --> AdminQueue[View assigned workspace feedback queue]
    AdminQueue --> AdminReview[Review new feedback]
    AdminReview --> AdminUpdate[Update status, assign reply, add note]
    AdminUpdate -. cannot access another workspace .-> AdminBlocked[Blocked by workspace permission rules]

    Member --> MemberCreate[Create feedback]
    MemberCreate --> MemberTrack[Track progress]
    MemberTrack --> MemberRead[Read responses and status updates]
    MemberRead -. hidden admin controls and denied write actions outside scope .-> MemberBlocked[Restricted actions denied]

Status Workflow

Resolution States

stateDiagram-v2
    [*] --> Open
    Open --> InReview: admin starts review
    InReview --> Resolved: issue fixed or addressed
    InReview --> Closed: not actionable / duplicate
    Resolved --> Closed: confirmation complete

Required Screens

Feedback Dashboard

Should show:

Feedback cards or table with title, category, status, priority, created by, and created date.
Search by title or message.
Filters by category, priority, and status.
Workspace counts for open, in-review, resolved, and closed items.
Permission-aware actions depending on role.
Loading, empty, no-result, and error states.

Feedback Detail Page

Should include:

Full feedback message and metadata.
Status timeline or update history.
Admin notes or public reply thread.
Workspace-safe navigation back to list.
Not-found or unauthorized handling if URL is changed manually.

Submit Feedback Form

Fields:

Title, category, priority, and full message.
Optional screenshot or reference link field in the base version.
Validation for required fields.
Submit loading state and clear success feedback.

Admin Response Panel

Should include:

Status update controls.
Reply or note text area.
Optional internal note vs visible response separation.
Audit-friendly timestamp display.

Data Model

Recommended tables:

Table	Purpose
`feedback_items`	Main feedback records.
`feedback_replies`	Replies, responses, or internal notes.
`workspace_members`	Permission checks and roles.
`workspaces`	Workspace records.

Recommended feedback_items fields:

Field	Purpose
`workspace_id`	Workspace relation.
`title`	Short feedback summary.
`message`	Full issue or suggestion description.
`category`	Bug, suggestion, service, billing, other.
`priority`	Low, medium, high, urgent.
`status`	Open, in review, resolved, closed.
`created_by`	User who submitted feedback.

Next.js Implementation Expectations

Use Next.js App Router pages for dashboard, detail, and create form.
Use server-side permission checks before returning sensitive feedback records.
Use Server Actions or route handlers for create and update operations.
Keep auth and workspace checks outside the UI layer so direct requests remain protected.
Keep components split into route-level page, form component, and feedback list/detail modules.

Permission Rules

Actor	Allowed
Owner	View and manage all feedback in owned workspaces.
Admin	Manage feedback in assigned workspace.
Member	Create feedback and view permitted feedback in shared workspace.
Non-member	No access.

Acceptance Checklist

Feedback is always scoped by workspace.
Member can create feedback successfully.
Admin can update status only in assigned workspace.
Owner can review feedback trends across owned workspaces.
Search and filters work correctly.
Unauthorized users cannot open or mutate feedback from another workspace.