Overview
- Problem: Make dart cricket matches fair and competitive between players of different skill levels.
- Solution: An intuitive calculator with roster management and three professional handicap methods.
- Outcome: Instant, explainable recommendations (points or marks) and a smooth flow from Roster → Matchup → Results → Guide.
Key Features
- Player roster with full CRUD and pre‑loaded sample players
- Real‑time handicap recommendations
- Three calculation methods for different contexts:
- 🥉 MPR‑Based — quick, beginner‑friendly (uses Marks Per Round only)
- 🥈 Multi‑Factor — adds closing speed, accuracy, points per turn
- 🥇 Advanced Dynamic — includes consistency and win rate for adaptive accuracy
- Responsive UI, dark theme with amber accents
Vibe Coding Notes
- Starting: sketched UX in prose, identified primary flow → implemented the tabs first (Roster / Matchup / Results / Guide).
- Polishing: tuned copy, added sample players, refined result explanations, and elevated contrast/spacing.
- Full‑flow thinking: features are presented progressively (beginner → expert) to onboard smoothly.
Technical Notes
- Stack: React 18, Tailwind CSS, CRA, Render
- Architecture: clean separation of concerns —
constants/,utils/,services/(handicap & player),state/(actions/reducers/context),components/(common/player/matchup/results/layout) - State: React Context with actions and reducers
- Build/Deploy: CRA build on Render
Formulas
- MPR‑Based:
|MPR₁ − MPR₂| × 3.5 - Multi‑Factor: weighted skill using MPR, close speed, accuracy, PPT ⇒
|S₁ − S₂| - Advanced Dynamic:
Base = Multi‑Factor,Adj = f(Consistency, Win Rate),Final = Base + Adj
Gallery
