Fantasy Premier League companion built with Next.js App Router. Managers can enter an FPL entry ID to fetch a server-rendered dashboard featuring profile details, totals, latest gameweek metrics, and a pitch-style card that visualises the most recent XI alongside bench points and captain badges.
- Manager lookup with persisted recent selections and dark/light theme toggle
- Summary dashboard with profile/totals cards, live-aware gameweek metrics, and deadline countdown
- Gameweek Pitch Card with player images, live match indicators, captain badges, and professional fallback icons
- Dedicated Gameweek page with navigation between gameweeks and full pitch visualization
- League standings view with rank-sorted display, smart filtering (prioritizes small/private leagues), and pagination support
- League race chart showing top 5 managers' points progression with interactive team toggles
- Fixtures page with team badges, player points display, and gameweek navigation, with clear home/away indicators
- AI-Powered Predictions (New!) - Comprehensive next gameweek insights:
- Captain Picks: Top 3 recommendations based on expected points, form, fixtures, and injury status
- Predicted Best XI: Formation optimizer analyzing 7 formations with expected points totals
- Transfer Suggestions: Budget-aware player swaps with fixture analysis for next 3 gameweeks
- Chip Strategy: Timing advice for Triple Captain, Bench Boost, and Free Hit based on team state
- Differential Picks: Low-ownership (<10%) high-upside players to gain rank advantage
- Fixture Analysis: 5-gameweek fixture difficulty ratings for all teams (target/avoid recommendations)
- Local analytics hooks (Vercel Analytics) plus accessibility-conscious UI primitives
Next.js 16 · React 19 · TypeScript · Tailwind CSS
Zod · Vitest · Testing Library · PlaywrightAdditional planning and architecture context lives in docs/:
| Document | Summary |
|---|---|
docs/plan_md_fpl_next.md |
Delivery roadmap and milestone breakdown. |
docs/architecture_md_fpl_next.md |
System architecture covering routing, caching, and observability. |
# install dependencies
pnpm install
# start the dev server
pnpm dev
# lint, type-check, format
pnpm lint
pnpm typecheck
pnpm format
# run Vitest unit suites
pnpm test
# run Playwright e2e tests (install browsers on first run)
pnpm exec playwright install
pnpm test:e2eTo surface FPL API logs while developing, prefix commands with FPL_DEBUG_LOGS=true pnpm dev.
# generate an optimized build
pnpm build
# optionally serve the build locally
pnpm startThe build step reads values from .env.production (or environment variables provided by the host). Create that file from your deployment secrets before running the command so the compiled output matches production expectations.
Deployments will target Vercel once milestone M5 is reached. Refer to docs/plan_md_fpl_next.md for the detailed deployment checklist.