Sports Facility Booking Prototype

I need a small, live web application that simulates the core “select-hold-confirm” booking flow for a single sports court, with real-time slot availability for multiple concurrent users. This prototype will help us evaluate your technical skills and communication before expanding into the full booking platform.

Core Requirements
1. Authentication
• Simple mocked login (e.g. “Login as User A,” “Login as User B”).
• No full user-management system required.
2. Availability View
• Display one court’s slots for a single day (e.g. 6:00–10:00 in 30-minute intervals).
• Show each slot’s state: Available (green), Held (yellow), Booked (red).
3. Hold Mechanism
• When a user clicks an Available slot, create a “hold” with a 5-minute TTL.
• UI shows a countdown timer on the held slot.
• While held, other users see that slot as “temporarily unavailable.”
4. Confirmation Flow
• A “Confirm Booking” button converts a hold into a permanent booking.
• On confirm, slot state updates to Booked for everyone.
• If the user does not confirm before TTL expires, the slot reverts to Available.
5. Real-Time Sync
• Other users’ views must update when holds are placed, expired, or confirmed—via polling or WebSockets.
6. Error Handling & Edge Cases
• If two users race to hold/confirm the same slot, only the first succeeds; the other sees an error and is prompted to choose again.
• Handle backend failures gracefully in the UI.

⸻

Deliverables
• Live Demo URL (deployed on Heroku, Vercel, Railway, etc.)
• GitHub Repository with well-structured code and a clear README containing:
• Setup instructions (npm install && npm start or equivalent)
• How to run locally
• Any environment variable requirements
• Brief Architecture Doc (in the repo’s README) explaining:
• Tech stack choices (frameworks, Redis vs in-memory store, polling vs sockets)
• API endpoints and data models
• Demo Instructions: how to open two browser windows and test hold/confirm behavior.

⸻

Tech Stack (You Choose)
• Frontend: React, Vue, or similar
• Backend: Node.js/Express, Python/FastAPI, or similar
• Store for Holds: Redis preferred; in-memory JS store acceptable for prototype
• Real-Time Updates: WebSockets (Socket.io) or client polling
• Deployment: Free tier hosting (Heroku, Vercel, Railway)

⸻

Timeline & Budget
• Duration: 1–2 weeks
• Milestones:
1. Basic UI + availability view
2. Hold TTL implementation + countdown
3. Confirm booking flow + DB/unique constraint
4. Real-time sync across two clients
5. Deployment + documentation