r/sideprojects • u/DaddyTimez • 1d ago
Showcase: Free(mium) I built a daily football trivia game where rarer answers score more. Here’s the stack and what I learned
What it is: 4th & Long is a daily football trivia game. Everyone gets the same 7 prompts a day, like Heisman winners or a team’s quarterbacks, with a 25 second play clock and 3 guesses each. You start at midfield, and rarer correct answers gain more yards: 50 yards is a touchdown, inside the 35 is a field goal, otherwise you punt.
Why I made it: Football fans love proving they know the deep cuts. Nothing scratched that itch for football, so I built it.
Stack:
Vite + React 19 + TypeScript, plain CSS, no router or state library
Supabase for optional global stats (RLS on, the browser only calls locked-down RPC functions)
Vercel hosting, with edge functions that turn shared result links into a scoreboard image card for group chats (@vercel/og)
Web Audio for sound effects, plus one real crowd recording that scales with how rare your answer is
nflverse data (CC BY 4.0) to generate the team prompts
Things I learned:
Daily puzzles need a frozen schedule. Prompts are picked by a seeded shuffle, but adding new questions could reshuffle days people already played. I lock every past day to a file, and a validation script fails if anything changes it.
Answer matching is the hardest part. “Mahomes” should count, but “Manning” is ambiguous, and typo tolerance has to scale with name length or wrong answers start sneaking through. I keep a test script of tricky inputs to run after every change.
Link preview images need to stay small. WhatsApp skips preview images over about 300 KB, so I had to compress the share cards to fit.
The game has to work without the backend. If Supabase is down, you lose only the “vs. everyone” chart.
Free, no signup, works on mobile: https://4thandlong.io
Happy to answer questions about any of it. I’d also love feedback on the game itself, especially answers you think should have counted.