Product
2026

Stakeholder Portal

Real-time project transparency platform for client communication, built as a subdomain experience with role-based access.

Stakeholder Portal

Hero Image

Main project showcase

1920 × 1080

Client

Cræfto (Internal)

Industry

Project Management / Agency Tools

Timeline

2 weeks

Year

2026

Services

Product Strategy · UI/UX Design · Full-Stack Development · Real-time Systems · Security Engineering

01 / The Challenge

Understanding the problem

Most agencies treat project communication as an afterthought: scattered Slack messages, email chains, and the occasional PDF report. Clients are left in the dark between milestone calls, creating trust erosion and scope anxiety. The challenge was building a dedicated transparency layer that gives stakeholders real-time visibility into project decisions, progress, and blockers without requiring them to learn complex project management tools.

Stakeholder Portal

Gallery

Project grid with status indicators and sparklines

1600 × 900

02 / The Approach

How we tackled it

Started with the core insight that stakeholders care about three things: alignment (are we building the right thing?), progress (are we on track?), and decisions (what changed and why?). Designed around these update types rather than traditional task-centric views. Used the existing craefto.com design system (Paper & Ink) to maintain brand consistency while creating a distinct portal experience on its own subdomain.

Stakeholder Portal

Gallery

Tabbed detail view with updates, tasks, team, and timeline

1600 × 900

Stakeholder Portal

Gallery

Rich text editor with file uploads and @mentions

1600 × 900

03 / The Solution

What we built

A full-stack portal running on project-portal.craefto.com with: subdomain routing via Next.js middleware; Supabase Auth with role-based access (Admin, PM, Team, Stakeholder); a rich text update composer with TipTap, file uploads, and @mentions; real-time activity feeds with slide-in animations; horizontal snap-scroll timeline for project milestones; SVG sparkline charts showing 30-day activity per project; Linear webhook integration for automatic task sync; and comprehensive security (RLS, HMAC signature verification, httpOnly cookies, CSP headers).

Tech Stack

Next.js 16React 19TypeScriptTailwind CSS 4SupabaseFramer Motion 12TipTapVercel

Stakeholder Portal

Hero Image

Full showcase view

1920 × 1080

04 / The Outcome

Results & impact

Built and deployed in 2 weeks across 5 sprints. The portal creates a tangible differentiator for Cræfto: “We don’t just build and disappear. You get a live portal.” Designed as a productised service component, it can be offered to retainer clients at $500-$2,000/month with near-zero infrastructure cost on Supabase free tier.

2 weeks

Build Time

5

Sprints

15+

Components

5

Update Types