Anytime Goalscorer Spin Wheel

I’m building a web feature that lets soccer fans click a vibrant “spin” button and watch an interactive wheel decide their Anytime Goalscorer pick in real time. The wheel has to feel as slick as a modern casino widget yet stay rooted in real betting data.

Frontend
– React is the framework I want throughout, so the wheel, animations, and responsive layout should be written in modern React with functional components and hooks. A lightweight animation helper (e.g., Framer-Motion or GSAP) is welcome as long as it keeps the experience buttery-smooth on mobile and desktop.

Backend
There’s no existing server code, so the API, database schema, and odds logic start from zero. A typical stack such as Node.js with Express (or a comparable framework you prefer) plus a simple PostgreSQL / MongoDB store is fine. The service needs endpoints to
• pull today’s fixtures and odds (manual entry first, external feed later)
• return a weighted list of players for the wheel segments
• accept and persist each spin result for basic stats

Core flow
1. A match is chosen (hard-coded ID is okay for v1).
2. The wheel renders with players’ names, club colors, and their implied probabilities.
3. Clicking spin calls the backend to fetch a secure, server-generated outcome so the animation can land on the correct slice.
4. The selected player and timestamp are posted back and stored.

Deliverables
• React front end with the animated wheel component
• Fresh backend (API + DB) ready to deploy on a standard VPS or serverless platform
• README detailing local setup, environment variables, and build commands
• Brief note on how randomness and weighting were implemented so the mechanic is both fair and auditable

Once these pieces are in place I’ll handle design polish and sportsbook integration, so clean, well-commented code is more valuable to me than pixel-perfect styling at this phase.