Live Match Graphics & Social Automation Platform
Visual Source was built around a clear matchday problem: football clubs often need to publish polished social updates while the match is happening, but designing graphics manually during live events is slow, stressful, and inconsistent. The platform turns that workflow into a structured system where fixtures, players, templates, captions, and publishing channels are connected.
Project type
Full Stack
Year
2026
Challenges
3
Tech used
13
What Problem It Solves
The platform solves the operational bottleneck between live match events and professional social media output. Instead of manually designing every goal, lineup, card, substitution, or full-time graphic, club staff can log the event, inject match data into branded templates, generate the graphic automatically, and publish it to connected social channels.
Why I Built It
I built Visual Source to help clubs, media teams, and volunteers manage matchday content without needing a designer available for every live moment. The goal was to make professional football graphics fast, repeatable, and data-driven while keeping the workflow simple enough for non-technical staff.
Why This Tech Stack
I chose Next.js and React for a responsive dashboard experience, TypeScript for strict full-stack type safety, and Express.js for a focused API layer. Prisma and PostgreSQL provide a structured data model for teams, users, fixtures, players, events, templates, and publishing schedules. Fabric.js, node-canvas, and Sharp power dynamic graphic rendering, while Cloudflare R2/S3-compatible storage handles media assets. Better Auth supports secure email/password auth, admin access, organizations, and team isolation.
Challenges I Faced and How I Solved Them
Generating dynamic graphics from live match data
The platform uses Fabric.js template JSON with placeholder replacement for player names, scores, logos, lineups, scorers, match times, and other event data. Server-side rendering with node-canvas and Sharp converts those templates into publishable PNG graphics that are uploaded to object storage.
Connecting match operations with social publishing
Match events, caption presets, templates, and social accounts are linked through a unified publishing workflow. Users can publish immediately during live matches or schedule pre-match content through a calendar-based publishing system.
Supporting real football data while allowing manual control
The system syncs Sportmonks data for teams, players, fixtures, standings, scores, and statistics, but also supports custom matches, manual score overrides, custom players, uploaded player images, and manual statistics for flexible real-world use.
Outcome
Visual Source demonstrates a complete SaaS-grade sports media workflow: multi-tenant team access, admin provisioning, external sports data sync, live match logging, media management, template editing, server-side graphic generation, and direct social publishing. It shows strong product thinking across real-time operations, automation, and club-facing content workflows.