Skip to content

Client Project Workspace

2026

Live Demo

ClientPortal

A client portal where a client follows one project, reviews a deliverable and approves the milestone, while the agency side runs clients, projects, tasks, quotes and invoices from the same records.

Role
Design and front-end development
Screens
Client view + 6 agency screens
Stack
Next.js · Radix UI · Recharts
Data
Fictional, saved in this browser only
clientportal.cjv.app
ClientPortal interface

Recorded from the live demoFictional data only

03 — Story

The problem.

Client work often spreads across messages, email threads, shared folders, invoices, and ad hoc updates. Clients lose visibility, and the person doing the work spends time explaining status instead of moving the project forward.

Built for
Freelancers, small agencies, consultants, and service businesses that need a clearer way to show project progress.

What I built.

I built a read-only client view on top of an agency workspace. The client sees progress, the next action, project health and billing, all calculated from the same project, task, quote and invoice records the agency uses. They can open a deliverable, then approve the milestone or ask for changes, and the milestone timeline updates straight away.

  • 01

    Client Overview

    Progress, tasks done, budget, overdue tasks and project health for one project, calculated from the agency's records instead of typed in.

  • 02

    Review a Deliverable

    Open any deliverable in the list to see its summary, review date and status before deciding.

  • 03

    Approve or Request Changes

    Approve the milestone or ask for changes in one click. The buttons and the milestone timeline update straight away.

  • 04

    Agency Workspace

    Clients, projects, tasks, quotes and invoices. On Clients and Projects, click a KPI status card or bar segment to filter the list below.

  • 05

    Request Intake

    A request form that scores readiness from four required checks and sets the first-reply time by priority.

  • 06

    Reset Demo

    Every change stays in this browser. Reset Demo restores the seeded projects, so anyone can try the workflow again.

04 — Screens

Screens that matter.

The main view, the deeper work screens, and the handoff or customer-facing state. Select any screen to see it full size.

01 / 03

Client View

The client's read-only view of one project: 25% complete, 1 of 4 tasks done, a £486 quote waiting for approval and 2 overdue tasks, with the next action to approve the dashboard wireframes.

02 / 03

Projects

The agency's projects with KPI cards for active work, work due this week, projects waiting on the client and total value. The status bar and the Waiting on Client card filter the delivery table below.

03 / 03

Agency Dashboard

The agency's overview: active clients and projects, pending quotes, unpaid invoices, overdue tasks and new requests, all counted from the demo records.

01 / 03Client View

ClientPortal: Client View

The client's read-only view of one project: 25% complete, 1 of 4 tasks done, a £486 quote waiting for approval and 2 overdue tasks, with the next action to approve the dashboard wireframes.

05 — Under the hood

How it fits together.

  1. 01

    Browser

    Read-only client view and agency workspace

  2. 02

    Next.js App Router

    React · TypeScript · Radix UI

  3. 03

    Demo state

    Seeded fictional data · this browser's localStorage

Docker container on self-hosted CoolifyThere is no server database. A reference Prisma schema maps the same models for a real one later.

Approach

  1. 01

    Kept the public demo separate from my real freelance portal, with fictional data on its own domain.

  2. 02

    Built the client view on the same project, task, quote and invoice records as the agency workspace, so every figure a client sees comes from a record.

  3. 03

    Replaced fixed, illustrative numbers with calculated ones and covered the calculations with unit tests.

  4. 04

    Redesigned the interface in teal, with KPI cards that can filter their lists, count-up figures and motion that respects reduced-motion settings.

Build notes

Project Type
Client portal demo
Primary Workflow
Client reviews a deliverable and approves the milestone
Data Mode
Seeded fictional data in browser localStorage; the Prisma schema is reference only
Deployment
Docker and self-hosted Coolify, separate from the real portal

Stack

Frontend

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Radix UI
  • Motion
  • Recharts

App Logic

  • Next.js App Router
  • Typed View Models
  • Draft Persistence

Data

  • Seeded Demo Data
  • Browser localStorage
  • Reference Prisma Schema

Testing

  • node:test
  • Playwright

Infra

  • Docker
  • Coolify
  • HTTPS Demo Domain

06 — Next project

Front Desk for a Busy Barbershop

BookingPro

Read the case study

Interested?

Want something like ClientPortal for your team?

Get in touch