Delivered engagementSaaS & Infrastructure · $25k – $35k
ClubPulse

Matchday media control for amateur rugby clubs

Delivered engagement. Coralsoft designed and built this product end to end; figures below retain their evidence level.

WebBackendNext.js 15 (App Router)React 19shadcn/ui (Radix)
clubpulse-matchday-media.example / dashboard
ClubPulse matchday dashboard — a live match banner (Eton Manor 17–15 Westcombe Park), next-fixture card, quick actions, recent match results and recent graphics
The situation

What was in place before we started.

ClubPulse is a matchday media control platform for amateur rugby union clubs. Secretaries manage fixtures and squads, run a live scoring console, generate branded Instagram graphics from 37 templates, and publish to Instagram, Facebook, and X — all in one app. Crest and player-photo cleanup runs in the browser with ESRGAN and BiRefNet, identity-preserving and never generative.

ClubPulse is built for the club secretary or media volunteer who runs Saturday matchday socials — the person otherwise juggling a notepad, Canva, and three social apps. Instead, they run the whole cycle in one place: set up the club, build the fixture list and squad, record live events as they happen, generate branded Instagram graphics, and publish straight to Instagram, Facebook, and X.

Graphics render in the browser via html-to-image. Crest cleanup and player cutouts use in-browser ML — ESRGAN via UpscalerJS/TF.js, and BiRefNet via Transformers.js — with deterministic fallbacks. Crests are never generatively redrawn; the product improves what’s uploaded, it doesn’t redesign it.

Constraint

The product’s own framing: “we improve it, never redesign it.” Crest and player-photo cleanup is identity-preserving, not generative.

Timeline
6 months reconstructed
Team
5 people reconstructed
Budget
$25k – $35k reconstructed
Platforms
2
Stackrecorded
Next.js 15 (App Router)React 19shadcn/ui (Radix)Tailwind CSSreact-hook-form + ZodSupabase (Postgres, Auth, Storage)TypeScript (strict)html-to-imageUpscalerJS + ESRGAN-slim (TF.js)BiRefNet-lite via Transformers.jsInstagram Graph APIFacebook Pages APIX APIVercel (branch previews)
Challenges

Each constraint, and what we did about it.

Constraint

The product’s own framing: “we improve it, never redesign it.” Crest and player-photo cleanup is identity-preserving, not generative.

What we did

The graphics pipeline runs entirely client-side: select an event → buildGraphicContext() hydrates club/fixture/event/squad/sponsor data → MatchGraphicRenderer mounts the layout → MatchGraphicCanvas previews it → html-to-image captures a PNG → optional crop/pad → download and/or publish. The club crest, opponent crest, live score and minute, player name/number/photo cutout, sponsor strip, and the club’s brand colours and typography are all composed automatically into every graphic.

Results

Outcome, with the source of every figure.

37
Figma-aligned graphics templates — preview → PNG → download/publish
self-reported — Coralsoft's own figure for its own delivery, stated in cases.ts. No third-party attestation in the sources.
3
Social platforms published to — Instagram, Facebook Pages, and X
self-reported — Coralsoft's own figure for its own delivery, stated in cases.ts. No third-party attestation in the sources.
13
Delivery areas from auth and tenancy through live match control to social publishing
self-reported — Coralsoft's own figure for its own delivery, stated in cases.ts. No third-party attestation in the sources.
Showcase

How the system fits together.

2 of 2 views
clubpulse-matchday-media.example
ClubPulse Live Match Control console — score, player and event-type pickers (try, conversion, penalty, drop goal, cards, substitution), a minute clock, the match timeline and a Generate match update graphic action
clubpulse-matchday-media.example
ClubPulse sponsors settings — Fixed, Rotation and Hybrid placement modes, a club-wide sponsor list, and a locked slot layout that composes onto match graphics
Roadmap

How it was sequenced.

6 monthsreconstructed delivery
Weeks 1–4

Discovery & architecture

One account per club, gated dashboard, and a setup checklist, with a strict one-user-to-one-club tenancy model and middleware-protected routes.

  • Auth & club tenancy
Weeks 5–13

Core build

Messy crest upload → transparent colour / greyscale / circle PNGs.

  • Logo Cleanup Studio
Weeks 14–17

Integrations & data

Season fixture CRUD with shared opponent/competition directories, plus a player roster with positions, availability, photos + AI cutouts, and per-fixture Starting XV + bench selection.

  • Fixtures & squad
Weeks 18–22

Hardening & QA

A phase machine, minute clock, scoring and discipline events, and undo — the operational core of matchday, recording the game as it happens.

  • Live Match Control
Weeks 23–26

Launch & handover

37 Figma-aligned templates, multi-format export (portrait 1080×1350, square, story), preview → PNG → download/publish.

  • Match Graphics Engine

More work like this.

Every case study is a Coralsoft delivery story, with the evidence behind each figure kept visible.