FairPlayr
FairPlayr is a mobile-first matchday assistant for grassroots football. It is built for volunteer coaches, parent coaches, and team managers who need fast decisions on the sideline without digging through heavy admin tools.
The product focuses on practical matchday flow: squad selection, starting lineup, bench/field overview, substitutions, and fair playtime distribution. It is designed for quick use on a phone, with a modern UI, low friction navigation, and a clear in-match workflow.
Today, FairPlayr combines local matchday state (for speed and reliability during a game) with cloud-backed team and integration data (for persistence and collaboration). Norwegian and English are both first-class locales, and the app is web-first with a future app packaging direction.
FairPlayr is intentionally a sideline tool, not a full club ERP or elite analytics platform.
Why FairPlayr
In youth and grassroots football, matchday decisions are often made under time pressure by volunteers. That leads to inconsistent substitutions, uneven playtime, and unnecessary cognitive load.
FairPlayr exists to make fair rotation and match organization easier in real time. The goal is simple: fewer spreadsheets, fewer ad hoc decisions, and more predictable fairness for players.
Core Features
- Team and player management (local guest mode and cloud mode)
- Multi-team workspace with active team preference
- Match setup flow with format, formation, duration, squad, and starters
- Live match control with timer, score, substitutions, and fairness suggestions
- Dedicated lineup builder view
- Match planner with manual match creation (cloud)
- Match details view for imported/manual matches
- Auth with Google OAuth, magic link, and email/password
- Locale support for English and Norwegian via route-aware i18n
- Theme and language settings
- Spond integration (beta): connect account, fetch groups, link group to team, import members, fetch events, import event to match, RSVP snapshot sync
Product Principles
- Mobile first: optimized for one-hand, in-the-moment usage
- Fast in match situations: minimal taps and clear state transitions
- Low cognitive load: clear sections, direct actions, concise feedback
- Fairness over complexity: practical rotation support, not over-modeled tactics
- Modern but practical: polished UI choices that stay operationally useful
Tech Stack
- Framework: Next.js 16 (App Router)
- Language: TypeScript (strict mode)
- UI: React 19, Tailwind CSS v4, custom UI components, Framer Motion
- Icons: lucide-react
- Internationalization: next-intl
- Theming: next-themes
- Backend/BaaS: Supabase (Auth + Postgres + RLS)
- Data access: @supabase/ssr and @supabase/supabase-js
- iOS packaging: Capacitor 8 (server URL mode wrapping the Vercel deployment)
- Linting: ESLint 9 + eslint-config-next
Architecture Overview
Frontend
- App routes are under src/app/[locale]
- Main product surfaces:
- /team for team/player and Spond beta management
- /match for planning and import flow
- /match/setup for lineup and squad prep
- /match/live for in-game control
- /lineup for dedicated lineup editing
- /settings for auth status, theme, and language
- Bottom navigation is persistent across core pages for mobile-first movement
Backend and BaaS
- Supabase handles auth, relational data, and RLS enforcement
- API routes under src/app/api encapsulate server-side operations for matches and Spond
- Server-side integration service/provider layers under src/lib/server/integrations/spond
Auth
- Client auth state is managed in AuthProvider
- Supabase session cookies are refreshed in middleware (src/proxy.ts + src/lib/supabase/middleware.ts)
- Auth callback route exchanges OAuth/magic-link code for session
Data model
- Core entities: profiles, teams, team_members, players
- Match entities: matches, external_event_links
- Integration entities: integration_connections, external_team_links
- RSVP snapshot entities: match_rsvp_snapshots, match_rsvp_snapshot_entries
Runtime state strategy
- Team data is repository-driven:
- guest-local repository for non-authenticated users
- Supabase repository for authenticated users
- Match setup/live runtime is currently local storage driven for speed during active use
Project Structure
.
├─ src/
│ ├─ app/
│ │ ├─ [locale]/
│ │ │ ├─ page.tsx # Home
│ │ │ ├─ team/ # Team manager + Spond beta card
│ │ │ ├─ match/ # Match planner, setup, live, details
│ │ │ ├─ lineup/ # Dedicated lineup builder
│ │ │ ├─ settings/ # Theme/language/auth status
│ │ │ └─ auth/ # Sign-in, sign-up, callback
│ │ ├─ manifest.ts # PWA manifest (/manifest.webmanifest)
│ │ ├─ serwist/[path]/route.ts # Builds and serves the service worker (/serwist/sw.js)
│ │ └─ api/
│ │ ├─ matches/ # Match CRUD/read endpoints
│ │ └─ integrations/spond/ # Spond connect/sync/import endpoints
│ ├─ components/
│ │ ├─ match/
│ │ ├─ team/
│ │ ├─ lineup/
│ │ ├─ auth/
│ │ ├─ providers/
│ │ └─ ui/
│ ├─ sw/ # Service worker: routing rules, caches, update gate
│ ├─ domain/ # Match/live/team domain logic
│ ├─ i18n/ # next-intl routing and request config
│ └─ lib/
│ ├─ server/ # Server modules (matches, integrations)
│ ├─ supabase/ # Browser/server/middleware clients
│ ├─ teamData/ # Local vs cloud repository abstraction
│ └─ storage/ # Local storage state for match/runtime
├─ supabase/
│ ├─ config.toml
│ └─ migrations/
└─ messages/ # en.json / no.json translations
Authentication
Implemented auth methods:
- Google OAuth
- Email/password sign-in and sign-up
- Magic link sign-in
- Guest mode (no account), with local team data storage
Key behavior:
以上為 README 的開頭部分。其餘內容請閱讀原文。 檢視完整 README ↗
