This is a submission for the DEV Weekend Challenge: Community
The Community
I built because of two communities I'm a part of—specifically the Pickleball weekend groups at our local high school and our annual family Cornhole tournament.
In these communities, we care about competitive balance, but we hate friction. Nobody wants to download a heavy app, remember a password, or look up their official DUPR rating just to play a few games on a Sunday afternoon. We needed a "right here, right now" way to track who’s winning and who should play next.
What I Built
Backyard Ladder is a session-based ranking and matchmaking web app. It’s designed to be launched by a host in seconds.
- Zero-Account Onboarding: Players scan a QR code, enter a nickname, and they are in.
- Smart Matchmaking: Uses a custom Elo algorithm to suggest the most balanced 2v2 matches from the available pool.
- Weighted Results: Winning 21-0 (a "skunk") boosts your rating more than a 21-20 nail-biter, thanks to a Margin of Victory (MOV) multiplier.
Demo
I’ve recorded the experience from both the host and player perspectives:
- The Host Experience: Starting a session and managing the "Smart Matchmaker" queue.
- The Player Experience: Scanning into the game and seeing the live leaderboard update.
Code
The project is open-source and designed to be "One-Click Deployable" so any local league can fork it.
amallah
/
backyard-ladder
pickleball and cornhole elo matching system
Backyard Ladder
A zero-friction ranking and matchmaking app for local community sports (Pickleball, Cornhole, etc.). A host starts a session, players join by scanning a QR code — no accounts required — and the app manages a live leaderboard with Elo-based matchmaking.
How it works
- Host creates a session and picks a sport. A QR code is displayed.
- Players scan the QR, enter a nickname, and are added to the available pool instantly.
- Matchmaker suggests balanced 2v2 matches based on Elo ratings.
- Scores are entered after each game; Elo ratings update in real-time on the leaderboard.
Tech stack
- Framework: Next.js 15 (App Router)
- Styling: Tailwind CSS + Radix UI
- Database: Supabase (Postgres + real-time subscriptions)
-
QR generation:
react-qr-code
Prerequisites
- Node.js 18+
- A Supabase project
Getting started
1. Install dependencies
npm install
2. Configure environment variables
Copy the example below into a .env.local file at the project root:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
Both…
How I Built It
I have been tuning a Claude Code/Ralph Loop workflow (inspired by snarktank/ralph on github), with Gemini as my project consultant. I left the skills in the repo and I'm really enjoying tuning it.
- Framework: Next.js 15 (App Router)
- Backend: Supabase for real-time Postgres subscriptions.
- Styling: Tailwind CSS + Shadcn/UI for a clean, professional aesthetic.
- The Math: I implemented a custom Doubles-Average Elo system. It calculates the expected win probability ($E_A$) for a team: $$E_A = \frac{1}{1 + 10^{(R_B - R_A)/400}}$$ Then, it applies a log-based Margin of Victory multiplier so dominant wins are rewarded more heavily.
Top comments (0)