Architecture overview
The client portal is a separate frontend from the internal PM dashboard but shares the same Supabase database. Deploy it on a subdomain: portal.gabochiedesign.com. Both apps read from the same projects, invoices, and comments tables — clients see read-only views of their own project only, enforced via Supabase Row Level Security (RLS).
Access code system
- Each project record in Supabase has an
access_code field (e.g. GD-2025-001) generated at project creation
- On login, query Supabase:
SELECT * FROM projects WHERE access_code = $code — if a match, store the project_id in sessionStorage and show the portal
- No Supabase Auth needed for clients — the access code IS the authentication
- Optional: also match client name against the project record for a second factor
- Gideon generates and copies codes from the internal PM dashboard (Phase 2 feature)
Supabase RLS policy
Add a comments table: id, project_id, author_name, author_role (client|architect), body, created_at. RLS: only allow SELECT/INSERT where project_id matches the session's project_id. Use Supabase Realtime on the comments table so new messages appear instantly without refresh.
Build phases
Phase 1 — MVP (can go live with Phase 1 of main PM tool)
- Static HTML/CSS portal (no framework needed) with hardcoded project data
- Access code login against a JSON config file —
{"GD-001": {name:"Asante", project:"..."}}
- Show project phase, progress %, and milestones (read-only)
- Invoice list display (read-only, no payment action)
- Simple comment box — store in
localStorage per code (MVP only)
- Deploy to Vercel or Netlify on
portal.gabochiedesign.com
Phase 2 — Live data (alongside PM tool Phase 2)
- Wire to Supabase — all data live from DB
- Comments stored in
comments table with Realtime subscription
- Gideon sees client comments in the internal PM dashboard (notification dot)
- Gideon can reply from the PM tool; client sees reply in portal
- Access codes managed from PM dashboard: generate, copy, revoke
- Email notification to client when Gideon posts a new update or comment (use Resend or SendGrid)
Important design notes
- Portal is client-facing — no GHS amounts visible unless invoice is confirmed. Show "fee agreed" status only until invoice is formally issued
- Mobile-responsive from day one — clients will mostly use phones
- Brand colours identical to the PM tool: teal
#0e5c63, cream #f7f3ee, gold #c8a96a
- Do NOT show other clients or projects — RLS enforces this at the DB level
- Keep language simple and reassuring — clients are not technical