EnterpriseB2B SaaS

Focus Graphics Platform

Year2024–present

RoleSolo Engineer

StatusLive

B2B quote-to-order platform for a commercial graphics company. The differentiators: a real-time collaborative proof review surface (live cursors via Pusher) and an AI-assisted proof comparison engine that diffs uploaded designs against approved proofs at the pixel level.

View Live Site

260+

API Routes

80+

Database Models

Active Integrations

View Live Site

Focus Graphics Platform — Marketing site at focusgraphics.net (admin and customer portal behind login)

Overview

Built and self-host a comprehensive B2B platform for Focus Graphics, a commercial graphics and printing company. The system handles the full customer journey (lead capture, quoting, invoicing, payments, and production) and adds two pieces most print shops do not have: real-time collaborative proof review with live cursors and comments via Pusher, plus an AI-assisted proof comparison engine that diffs uploaded designs against approved proofs at the pixel level. Deployed on a self-managed Hetzner VPS via Coolify with Prisma migrations running automatically on every release.

Customer Portal

A self-service portal where customers manage their entire relationship with Focus Graphics:

Magic Link AuthenticationPasswordless login via email for frictionless access

Quote ManagementView, accept, or request revisions on quotes

Invoice & PaymentsView invoices and pay directly via Stripe with webhook reconciliation

Production TrackingReal-time job status from design through delivery

Live Proof ReviewAnnotate proofs with comments while seeing other reviewers cursors live (Pusher)

Proof Comparison Engine

A proof-checking pipeline that compares incoming customer files against approved proofs to catch artwork drift before it goes to print:

PSD File ParsingExtracts layer structure and rasterized previews from Photoshop files

Pixel-Level DiffPer-pixel comparison via pixelmatch surfaces unintended artwork changes

AI-Assisted ReviewClaude analyzes diffs in plain language so admins can flag real issues fast

Parametric Previewreplicad and three.js render packaging dielines and 3D mockups in-browser

Versioned HistoryEvery proof iteration is stored with author, timestamp, and approval state

Admin Dashboard

A back-office system for running the business end-to-end:

CRM SystemCompanies, contacts, and custom fields with full activity history

Quote BuilderLine-item quotes with PDF export and PO upload acceptance flow

Production JobsMulti-stage workflow tied directly to quote and proof state

Role-Based AccessGranular permissions across CRM, quotes, invoices, and production

Business AnalyticsLead, proof, and revenue funnels backed by Umami event tracking

Technical Architecture

Self-hosted on a single Hetzner VPS for cost control and full ownership of the data pipeline:

FrontendNext.js 16 App Router, React 19, MUI 9, TanStack Query

Backend260+ Next.js API routes on a single container

DatabasePostgreSQL with Prisma 7 (80+ models, automated migrations on deploy)

File StorageBackblaze B2 (S3-compatible) with presigned upload URLs

RealtimePusher for live cursors and proof annotations

PaymentsStripe with idempotent webhook handling

EmailResend with delivery tracking via webhooks

AIAnthropic Claude API for proof comparison narratives

Bot ProtectionCloudflare Turnstile on contact and quote forms

ObservabilitySentry for error tracking, Umami for privacy-first analytics

HostingSelf-managed Hetzner VPS via Coolify, auto-deploy from main

Business Impact

Eliminated Manual Processes

Replaced spreadsheet-based quote and invoice tracking with end-to-end automated workflows

Faster Payment Collection

Stripe-native invoicing lets customers pay immediately from the portal

Catches Proof Drift

Pixel-diff plus AI narration surface unintended artwork changes before press

Self-Service Portal

Reduces support load by giving customers direct visibility into quotes, invoices, and proofs

Key Learnings

Self-Hosting Without Vendor Lock-inDesigned and operate the full stack on a single Hetzner VPS via Coolify: Postgres, file storage on Backblaze B2, automatic Prisma migrations, queue dedup at the deploy layer. Trade managed-service convenience for complete control over cost, data residency, and infrastructure.

Pixel-Level Proof ComparisonBuilt a comparison pipeline that parses Photoshop files, rasterizes them, runs per-pixel diff via pixelmatch, and asks Claude to summarize meaningful changes in plain language. The hard part is filtering false positives from anti-aliasing while still catching real artwork drift.

Real-Time B2B CollaborationWired Pusher into the proof review flow so multiple reviewers see each others cursors and annotations live. Reduced approval cycles from days of back-and-forth email to a single shared session.

Stripe Webhook ReliabilityImplemented idempotent webhook handling with Stripe event dedup tracked in Postgres so payment status stays correct under retries, partial payments, and out-of-order events.

More Projects

Need something like this for your business?

I build custom software that solves real business problems, from quote systems to customer portals.

View Services Get in Touch