Volleyball players celebrating a point on an indoor court

// Sports & Recreation

Varsity Score

Volleyball Recording App, Live Streaming & Back Office

Built Varsity Score end to end: a native-feeling iPhone and iPad app that records volleyball matches with the live score burned into the video, one-tap live streaming that parents can watch from any browser, a back office for clubs, teams and tournaments, and the marketing site that sends families to the App Store. The API, database, video storage and streaming server run on Google Cloud.

Products: App, Back Office & Site

iPhone + iPad

Native App on the App Store

Live Streaming Destinations

Burned-in

Score Overlay, No Editing

// Product tour

Inside the Build

Marketing site

varsityscoreapp.com: the home page, feature pages and the public Watch Live page.

Next.js 16React 19Tailwind CSSVercelvarsityscoreapp.com

Varsity Score home page hero reading Record Every Match with App Store and Watch Live buttons — Home page hero with the App Store and Watch Live calls to action

Live Score Overlay feature section showing an iPad recording a volleyball match with the score on screen — Feature section for the live score overlay

Go Live Instantly section listing Watch Live, Twitch and Facebook streaming options — Live streaming to Varsity Score, Twitch or Facebook

Varsity Score home page on a phone — The home page on a phone

Back office

The admin dashboard, shown here with seed data from a local environment.

Next.jsPrimeReactExpress API on Cloud RunCloud SQL (PostgreSQL)

Varsity Score admin dashboard with user, club, game and player counts and a weekly games chart — Dashboard: users, clubs, games and players at a glance (seed data)

Tournaments list in the Varsity Score admin with status and dates — Tournaments with status, dates and search (seed data)

Teams list in the Varsity Score admin grouped by club — Teams across every club (seed data)

Mobile app (iOS)

iPhone and iPad app on the App Store, with a native Swift module for the burned-in score overlay.

React NativeExpoSwiftApp Storeapps.apple.com/us/app/varsity-score/id6755207503

Recording screen with Team A and Team B scores overlaid on an indoor volleyball match — Recording screen: the score is drawn into the video as it records

iPad held courtside recording a volleyball match with the score overlay visible — Score overlay on an iPad recording

Score-only mode on an iPad at a beach volleyball game showing a 6 to 4 score — Score-only mode for keeping score without filming

iPhone remote control screen connecting to an iPad mounted on a tripod — Remote control: score from an iPhone while the iPad records

Varsity Score app store screenshot reading Elevate Your Game with a phone showing a live match score — Record, keep score, control remotely and share

Onboarding screen reading Let's Get You Game Ready, listing camera, microphone and photos permissions — Onboarding: why the app asks for camera, microphone and photos

Allow Camera Access step showing a phone on a tripod recording a volleyball match — Camera access, step 1 of 3, for recording and live streaming

You're All Set screen with a volleyball and Record, Score, Share and Play More shortcuts — Account ready: record, score, share

// The problem · 4 pain points

The Challenge

Club volleyball families film every match on a phone, but a raw clip doesn't show the score, and adding it means editing afterward. Relatives who can't make the gym have no way to watch live, and the clubs and tournaments behind those matches need somewhere to manage teams, games and streams.

Recordings without the score

A phone recording shows the rally but not the score or set, so clips need editing before they make sense to anyone else

No way to watch from home

Grandparents and parents who can't travel to a tournament had no simple way to follow the match live

One person, two jobs

The parent holding the camera is also the one keeping score, so the app has to stay out of the way courtside

Clubs and tournaments to manage

Clubs, teams, players, games and live streams needed a back office with roles for admins, coaches and parents

// How it works

How It Works

A parent records and keeps score on one device; the match streams live and every game lands in the back office.

Courtside (iOS app)

Record and score from the same screen

Record in HD

iPhone or iPad records the match, online or offline

Keep Score

Set-based scoring with team names, logos and colors

Overlay Burned In

Score rendered into every frame as it records

Remote Control

An iPhone keeps score while the iPad films

01
Record in HD
iPhone or iPad records the match, online or offline
02
Keep Score
Set-based scoring with team names, logos and colors
03
Overlay Burned In
Score rendered into every frame as it records
04
Remote Control
An iPhone keeps score while the iPad films

Live Streaming

Family watches from anywhere

RTMP Stream

One tap sends the match to the media server

HLS Transcoding

Compute Engine media server repackages the stream for browsers

Watch Live

Viewers open varsityscoreapp.com/watch on any device

Twitch & Facebook

Or stream straight to the family's own channels

01
RTMP Stream
One tap sends the match to the media server
02
HLS Transcoding
Compute Engine media server repackages the stream for browsers
03
Watch Live
Viewers open varsityscoreapp.com/watch on any device
04
Twitch & Facebook
Or stream straight to the family's own channels

Back Office & API

Google Cloud behind every screen

Cloud Run API

Express and TypeScript API with JWT roles

Cloud SQL

PostgreSQL with migrations on every deploy

Cloud Storage

Stream recordings stored after the match ends

Admin Dashboard

Clubs, teams, tournaments, games and streams

01
Cloud Run API
Express and TypeScript API with JWT roles
02
Cloud SQL
PostgreSQL with migrations on every deploy
03
Cloud Storage
Stream recordings stored after the match ends
04
Admin Dashboard
Clubs, teams, tournaments, games and streams

// What we built

Our Solution

iPhone & iPad Recording App

React Native and Expo app with a native Swift video module that renders the score overlay onto each frame as it records, so the score is part of the video file everywhere it's shared. Set-based scoring, team names, logos and colors, score-only mode, offline HD recording, and remote control: score on an iPhone while the iPad films. Published on the App Store.

Live Streaming

One tap streams a match over RTMP to Varsity Score, Twitch or Facebook while it records locally. Varsity Score streams land on a media server that transcodes them to HLS, and viewers watch at varsityscoreapp.com/watch from any browser, grouped by tournament.

Back Office

Admin dashboard in the same Next.js app as the marketing site: clubs, teams, players, tournaments, games, streams, users and coach verification, with roles for super admins, club admins, coaches and parents, and Google sign-in.

Marketing Site

Next.js site built for search: feature and use-case pages, recording guides, comparison pages against the apps families already know, and App Store links on every page.

Google Cloud Backend

Express and TypeScript API on Cloud Run, PostgreSQL on Cloud SQL with migrations applied on every deploy through Cloud Build, stream recordings in Cloud Storage, and the RTMP-to-HLS media server on a Compute Engine VM. The web app deploys on Vercel. Varsity Score also runs as a tenant on 27ERP, the platform 27nodes operates.

// Technologies used