venkat-training

Posted on Mar 1

# ⚽ PeakPlay: I Built a Community Football Hub to Replace WhatsApp Chaos

#devchallenge #weekendchallenge #showdev

DEV Weekend Challenge: Community

This is a submission for the DEV Weekend Challenge: Community

Every Sunday morning, 30 parents scroll through 120+ WhatsApp messages just to find out: "Is the game still on?"

I built PeakPlay — a mobile-first web app that replaces that chaos with a clean, no-login-required hub for schedules, RSVPs, and club announcements.

Built with Next.js + Supabase in one focused weekend.

🌐 Live: peakplay-eta.vercel.app
📁 Code: github.com/venkat-training/peakplay

The Community

Peakhurst Stars FC is a volunteer-run community football club in the St George area of Sydney, NSW. Around 200 families, U6 through U18, with coaches and team managers who are almost all working parents — squeezing training sessions and match-day logistics around day jobs.

It's the kind of club that runs on goodwill. And it was slowly being strangled by WhatsApp.

Here's what a typical Saturday evening looked like for a team manager:

Post training reminder in the group chat
Watch it get buried under 40 emoji replies
Direct-message 6 parents individually asking if their kid is coming
Get two conflicting field allocation updates from the club
Wake up Sunday unsure if you have enough players to field a team

The problem isn't the people — it's the tool. WhatsApp is built for friends, not for operational coordination.

What I Built

PeakPlay is a minimal, fast, no-login-required coordination hub built specifically for grassroots sports clubs.

Core features:

Feature	What it solves
🏠 Team Dashboard	Coach, manager, training days/times at a glance
📅 Schedule + Match Info	Date, opponent, jersey colour, field number, Maps link
✅ Parent RSVP	"Going" / "Can't Make It" — manager sees headcount live
📢 Announcements Board	Cancellations, photo day, registration — no chat noise
📱 Mobile-first, no login	Parents open a URL. That's it. No account required.

The goal wasn't feature overload. It was clarity and speed — the app should be faster to use than sending a WhatsApp message.

Demo

🎬 Watch the 90-second demo →

🌐 Try the live app →

Flow to try:

Open the app → you see three teams (U10, U12, U14)
Click Peakhurst United Falcons (U10)
See the dashboard: announcements, upcoming matches, training schedule
Click a match → see full match details with Maps link
RSVP "I'm Going!" — no login, just your name and player's name
Watch the headcount update instantly

Code

venkat-training / peakplay

Community Football Hub app

⚽ PeakPlay – Community Football Hub

Important: the application code lives inside the peakplay/ subdirectory. When cloning the repo for the challenge you only need the peakplay/ folder – everything else at the root is Codespaces scaffolding. See the “Quick Setup” section below for details.

Built for volunteer managers and parents at Peakhurst Stars FC in the St George area, Sydney.

This repository is a submission for the DEV Weekend Challenge 2026-02-28.

A Next.js + Supabase app that replaces WhatsApp chaos with a clean, centralised hub for schedules, RSVP, and announcements.

🚀 Quick Setup (30 minutes)

Note: when cloning the repo for the challenge you only need the peakplay/ directory – everything else in the workspace is setup scaffolding. All build and source code lives under peakplay.

Step 1 – Create your Supabase project

Go to supabase.com → New Project
Name it peakplay, choose a region close…

View on GitHub

Key files:

peakplay/
├── app/
│   ├── page.tsx                 # Home: team selector
│   ├── dashboard/[teamId]/      # Team dashboard (schedule + announcements)
│   └── rsvp/[eventId]/          # RSVP page per event
├── components/
│   ├── RSVPForm.tsx             # Client-side RSVP with upsert
│   └── AnnouncementCard.tsx     # Colour-coded announcement types
├── lib/supabase.ts              # Supabase client + TypeScript types
└── supabase-schema.sql          # Full DB schema + sample data — run this first

How I Built It

Tech Stack

Layer	Choice	Why
Framework	Next.js 14 (App Router)	SSR by default, fast deploys on Vercel
Database	Supabase (Postgres + RLS)	Auth + DB in one; free tier handles 200 families easily
Styling	Tailwind CSS	Ship UI fast without fighting CSS
Icons	Lucide React	Clean, consistent
Hosting	Vercel	Zero-config Next.js — deployed in under 2 minutes

Architecture Decisions

No login for parents — This was the single most important product decision. The moment you add a signup screen, you've lost half your users. Parents just need to RSVP. A name field and two buttons is enough.

Supabase RLS policies — Row-Level Security let me skip building a traditional auth system for admins without making the data public-write. Parents can RSVP (insert/update), but can't modify other teams' data.

-- Anyone can read events
CREATE POLICY "Public read events" ON events FOR SELECT USING (true);

-- Anyone can RSVP (upsert handles duplicate prevention)
CREATE POLICY "Public insert rsvp" ON rsvp FOR INSERT WITH CHECK (true);

-- Only authenticated users (admins) manage events
CREATE POLICY "Auth insert events" ON events 
  FOR INSERT WITH CHECK (auth.role() = 'authenticated');

Upsert for RSVPs — Parents sometimes change their mind. Instead of blocking duplicate RSVPs, we upsert on (event_id, player_name) — submit again to update your response.

await supabase
  .from('rsvp')
  .upsert(
    { event_id, parent_name, player_name, status },
    { onConflict: 'event_id,player_name' }
  )

Dynamic routes — /dashboard/[teamId] and /rsvp/[eventId] keep the codebase simple. No client-side routing complexity, no state management library needed.

Database Schema

Four tables. That's it.

teams        -- name, age_group, coach, manager, training schedule
events       -- type (training/match), datetime, location, opponent, jersey, notes
announcements -- title, body, type (info/warning/success)
rsvp         -- event_id, parent_name, player_name, status

The UI Approach

Mobile-first throughout. The green header pattern evokes a football pitch. Colour-coded badges (amber for matches, blue for training, green for "going", red for "out") let parents scan at a glance without reading every word.

Announcement types use distinct tinted backgrounds — a rain cancellation shows as an amber alert card, a registration reminder is blue info. Managers never need to scroll past irrelevant messages.

Lessons Learned

What worked well:

Building for a real, specific community made every product decision easier. When you know the actual person who's going to use this — a volunteer manager chasing RSVPs at 10pm on a Saturday — you make better choices.
Supabase RLS is genuinely underrated for this use case. It replaced what would have been days of auth work.
Next.js App Router + server components meant the dashboard loads fast without any client-side data fetching complexity.

What I'd build next:

📲 Push notifications 24 hours before each event (the auto-reminder feature)
🔐 Manager login for posting announcements and adding events via UI (not just Supabase dashboard)
🌤️ Weather widget on match-day cards
📊 Attendance analytics — which players miss training most?
📤 CSV export for committee reporting

Why This Matters

Across Australia, thousands of grassroots sports clubs coordinate via chat apps that were never designed for operational logistics. It's not just football — it's netball, rugby, cricket, swimming clubs. All of them have the same problem.

Volunteer sports clubs are the backbone of community life. But volunteer coordinators are burning hours every week doing work that a simple, well-designed tool could eliminate.

If PeakPlay saves a team manager 2 hours a week, that's 2 hours back to coaching kids. That's the whole point.

This weekend build proved the concept works. The next step is putting it in front of real clubs and iterating from feedback.

Built in one focused weekend (Feb 28–Mar 1, 2026) for the DEV Weekend Challenge.

If you run a grassroots sports club and want to set this up — drop a comment below. Happy to help. ⚽

DEV Community