Branded Client Portal Builder for Freelancers

AI Prompts to Build This

Copy these build prompts into Claude, Cursor, or your AI coding tool. Create a free account to unlock the full research behind them.

1. 1. Project Setup

   Build the weekend MVP of "PortalPro": a white-label client portal where a freelancer's client sees files, messages and milestones under the freelancer's own brand.
   
   Stack: Next.js (App Router), TypeScript, Tailwind, Supabase (Postgres, Row Level Security, Storage, Auth with email magic link). Each portal is served at a subdomain. Deploy on Vercel.
   
   Tables (Row Level Security on: a client's session reads only rows for its own portal_id, and a freelancer reads only rows for its own account_id):
   - accounts(id, user_id, brand_logo_url, brand_color_primary, brand_color_secondary)
   - clients(id, account_id, name, email, invite_token, status)
   - portals(id, account_id, client_id, subdomain)
   - files(id, portal_id, uploaded_by, storage_path, filename)
   - messages(id, portal_id, sender_type, body, created_at) where sender_type is freelancer or client
   - milestones(id, portal_id, title, status, approved_at) where status is one of not_started, in_progress, awaiting_approval, approved
   
   Screens: /login, /settings (logo and two colors with a live preview), /clients, and the client portal at its subdomain.
   Env vars (names only): NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY (server only).
   
   Do not build: billing, plans or the platform's own subscription, invoicing or Stripe Connect, custom domains, Google Drive, Dropbox or Calendly connections, the onboarding wizard, invite emails (copy the invite link).
   Done when: npm run dev starts, you can sign in, and the six tables exist with Row Level Security on.

2. 2. Core Feature

   Build the one feature that proves PortalPro: a branded portal the client trusts, with no trace of the platform.
   1. When a client opens their portal subdomain, render the layout on the server from the account row: logo and two brand colors applied as CSS variables, with no visible reference to the platform name anywhere in the client-facing UI.
   2. The portal has three tabs. Files lists and uploads and downloads from the files table. Messages is a simple thread scoped to portal_id, updated by polling or Supabase Realtime. Timeline shows the freelancer's milestones with a status badge.
   3. A deliverable milestone has an Approve button for the client. Approving writes approved_at and the freelancer sees it at the top of /clients.
   4. The client signs in with a magic link tied to their invite_token, with no password. The freelancer copies the invite link from /clients.
   5. /settings lets the freelancer upload a logo and pick two colors, with the portal preview updating live.
   Rules: a client can never read another portal's rows. Never expose the invite_token after it is used.
   Empty state: with no clients, show the add-client form.
   Done when: a test client signs in by magic link at their subdomain, sees the freelancer's logo and colors, uploads a file, sends a message and approves a milestone, and cannot open another client's portal.

3. 3. Landing Page

   Build a one-page landing site for PortalPro, a white-label client portal for freelancers.
   Hero: "Replace five scattered links with one portal that looks like you." Sub: "Pick a template, add your logo and colors, and give each client a single branded place for files, messages and approvals." One button: Join the waitlist.
   Sections: the problem (a client's work scattered across Drive, chat, invoices and email), how it works in four steps (pick a template and brand it, connect your tools, invite clients, manage everything from one dashboard), a mock portal in two different brands, and an FAQ on white-labeling and who can see what.
   Waitlist: store the email in a waitlist table in Supabase. No other service.
   Voice: calm and professional, written for a freelancer.
   Done when: the page renders on a phone and a submitted email appears in the waitlist table.

4. 4. Branding Package

   Use a design or image tool for this one. A coding agent cannot draw a logo.
   Brand for PortalPro: a wordmark and an icon that suggest a doorway with room for someone else's logo.
   Colors: off-white, deep ink and one neutral accent that sits well beside any client brand. Type: one clean sans for the interface.
   Deliverables: wordmark, icon, a portal shell that shows two example brands, and one launch graphic.
   Done when: each deliverable is saved in one folder and both example brands stay readable.