Skip to content
MW.

06B2B SaaSCybersecurity servicesDocument pipelines

BlueGoat Cyber

A role-based collaboration portal where cybersecurity clients and service providers share workspaces — structured document exchange, threaded chats, notifications, and DOCX/PDF document pipelines.

BlueGoat Cyber portal project table — progress bars, deadlines, clients and status filters
Engagement workspace — project tracking with status and deadlines01 / 03

Overview

BlueGoat Cyber's portal digitizes the engagement between a cybersecurity services firm and its clients: each engagement gets a workspace where documents are exchanged securely, conversations stay threaded per context, and both sides track status through role-specific dashboards — clients on one side, service providers on the other.

The problem

Security engagements run on sensitive document exchange — reports, evidence, remediation artifacts — and email threads fall apart under that weight. The firm needed one portal where access control is explicit (client versus provider), documents flow through a review-friendly pipeline, and nothing gets lost between inboxes.

Context

Built as the firm's client-facing operations layer: a Next.js workspace product backed by Supabase, with a document pipeline that renders, converts, and previews office documents in-browser rather than forcing downloads.

My role

Full-stack engineer on the Next.js 15 product — authentication, workspace UX, document pipelines, and the testing setup.

  • Built role-separated client and service-provider areas with session-based auth (Supabase SSR + jose JWT flows), email verification OTPs, and password reset
  • Engineered the document pipeline: TinyMCE-authored content converted to DOCX (html-to-docx), DOCX preview in-browser (docx-preview), email-safe HTML inlining (juice), and server-side PDF rendering with Puppeteer on serverless Chromium (@sparticuz/chromium)
  • Developed threaded chats and a notification center keeping client/provider conversations organized per engagement context
  • Implemented presigned uploads and secure document exchange patterns over Supabase storage with row-level security
  • Set up the quality toolchain: Vitest unit/integration suites, Testing Library component tests, and Playwright e2e scaffolding

Architecture & technical decisions

Single Next.js product
Next.js 15 App Router with React 19 — route groups for auth, client area, and provider area; server actions and route handlers for mutations; Redux Toolkit for cross-page UI state.
Supabase backend
PostgreSQL with row-level security policies, Supabase Auth with SSR session cookies, and storage buckets for document exchange — schema and bucket policies versioned in SQL migrations.
Document pipeline
Rich text (TinyMCE) → DOCX generation → in-browser DOCX preview → PDF export via headless Chromium; HTML emails inlined with juice for consistent rendering across clients.
Quality gates
Vitest with unit, integration, and component layers plus Playwright e2e specs — unusual rigor for a portal of this size, and it paid off during auth and permission refactors.

Key features

  • Role-based workspaces

    Clients and service providers see purpose-built dashboards for the same engagement — each role gets exactly the actions and documents it should.

  • Structured document exchange

    Upload, author, preview, and export engagement documents with format conversion handled server-side — no 'please download to view' dead ends.

  • Threaded communication

    Per-context chat threads and a notification center so decisions stay attached to the work they belong to.

  • Secure by default

    Email verification, OTP flows, session middleware, and database-level authorization policies under every query.

Challenges & solutions

  1. Challenge 01

    Clients needed to preview office documents without downloading them — DOCX rendering in a browser is notoriously lossy.

    Solution — Combined docx-preview for faithful in-browser rendering with a Puppeteer-on-serverless-Chromium PDF export path for print-fidelity output, keeping both flows inside the portal.

  2. Challenge 02

    Authorization had to hold at the data layer, not just in the UI — engagement documents are sensitive.

    Solution — Modeled access in Postgres with row-level security policies mirroring the client/provider roles, so a leaked client can't read another engagement's documents even if the frontend has a bug.

Outcome & what makes it interesting

The firm's client operations now run through one auditable portal instead of scattered email threads — with document previews, exports, and role separation as first-class features.

  • A full office-document pipeline (author → DOCX → preview → PDF) inside a serverless Next.js app
  • Treating authorization as a database concern with RLS, not just middleware
  • Test-layer discipline (unit + integration + component + e2e scaffolding) on a client portal