SaaS & Infrastructure · Est. $18k – $20k
ClubPulse

Matchday media control for amateur rugby clubs

Coralsoft designed, built and shipped this product for the client.

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.

Estimated Timeline
6 months
Estimated Team
5 people
Estimated Budget
$18k – $20k
Platforms
2
Stack
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)
Delivery story

ClubPulse: a product foundation built for reliable delivery

01

Challenge

ClubPulse is a matchday media control platform for amateur rugby union clubs. The main delivery challenge was to give users a maintainable interface and architecture that could absorb new requirements without slowing delivery, while keeping Auth & club tenancy, Logo Cleanup Studio, and Fixtures & squad consistent across the complete journey. We framed the engagement around the smallest production-worthy flow first, then expanded the scope without weakening the underlying component and data model.

02

How we built it

We first separated the core product rules from external services, then defined typed boundaries for every integration. The team delivered Auth & club tenancy, Logo Cleanup Studio, and Fixtures & squad as end-to-end flows, adding retries, idempotent operations, validation, and observable failure states before polishing the interface. This kept third-party behaviour from leaking into the product experience and made later integrations easier to add. The implementation was anchored by Next.js 15 (App Router), React 19, shadcn/ui (Radix), and Tailwind CSS, with shared TypeScript contracts across the frontend and service layer.

03

Delivery

The delivered scope brought Auth & club tenancy, Logo Cleanup Studio, Fixtures & squad, and Live Match Control into one coherent production-ready product experience. Live updates, recovery states, and operational feedback are part of the core flow rather than late-stage patches. For ClubPulse, the practical result is a product that communicates its value quickly while giving the team a maintainable base for continued delivery in saas & infrastructure.

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

Measured outcomes.

37
Figma-aligned graphics templates — preview → PNG → download/publish
3
Social platforms published to — Instagram, Facebook Pages, and X
13
Delivery areas from auth and tenancy through live match control to social publishing
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

Estimated delivery sequence.

6 months
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 covers a product Coralsoft designed, built, and shipped for a client.

Estimate your projectRead the reviews