CRICKET SCORING APPLICATION
A full-stack cricket scoring application built with Next.js 16, TypeScript, Tailwind CSS, and Supabase. Designed for scorers to manage live cricket matches with real-time ball-by-ball scoring, while providing public access to live scoreboards.
Cricket scorers at local matches needed a simple, reliable way to record live scores that could be instantly shared with spectators, players, and remote viewers.
Existing solutions were either too complex, required desktop software, lacked real-time updates, or didn't support the full range of cricket scoring scenarios (wides, no balls, free hits, etc.).
There was a clear need for a mobile-first, intuitive application that scorers could use on tablets or phones while spectators could follow along in real-time.
CrickSnap is a comprehensive web-based scoring platform that separates scorer functionality from public viewing, implementing a robust role-based access control system.
Scorers get an intuitive interface for ball-by-ball recording with automatic score calculations, strike rotation, and over management. Public viewers receive auto-refreshing live scoreboards with complete match statistics.
The application handles all cricket scoring scenarios including wides, no balls, free hits, wickets, extras, and mid-over bowler changes—making it production-ready for real-world tournament use.
Comprehensive authentication and authorization system with four distinct roles: Admin, Manager, Scorer, and Viewer.
Intuitive scorer interface handling all cricket scenarios with automatic calculations and real-time updates.
Complete tournament organization system from creation to match setup and player management.
Real-time scoreboards accessible to anyone with auto-refresh and comprehensive match statistics.
Built with Next.js 16 App Router using React Server Components for optimal performance. TypeScript ensures type safety across the entire codebase. Tailwind CSS 4 provides utility-first styling with custom design system.
Supabase provides PostgreSQL database, authentication, and real-time capabilities. Server Actions handle data mutations with automatic revalidation. Row Level Security (RLS) policies enforce role-based access at the database level.
React Server Components eliminate need for client-side state management libraries. Server Actions provide seamless mutations with optimistic updates. Auto-refresh mechanism ensures viewers see latest scores without WebSocket overhead.
Implemented comprehensive cricket scoring rules including free hit logic after no balls, automatic strike rotation, extras handling, and wicket scenarios. Required careful state management and validation.
Designed efficient auto-refresh mechanism for public viewers using 5-second intervals instead of WebSocket connections, reducing infrastructure complexity while maintaining near-real-time experience.
Optimized interface for scorers using tablets/phones on the field. Ensured touch-friendly controls, clear visibility in outdoor lighting, and minimal data usage for remote locations.
Implemented monetization-ready credit system where managers spend credits to create tournaments/matches. Built transaction tracking and admin controls for credit allocation.
CrickSnap is actively used by cricket scorers across India, particularly in Madhya Pradesh and Chhattisgarh regions.
The application has proven its production readiness by handling real tournament scoring with complex scenarios. The high average session duration (21 minutes) indicates users are actively scoring full matches, not just browsing.
With 98% direct traffic, CrickSnap has achieved organic adoption through word-of-mouth within the cricket scoring community, demonstrating product-market fit.
Deep understanding of cricket rules and scorer workflows was essential. Spending time observing actual scorers revealed requirements that weren't obvious from specifications.
Scorers work on the field with tablets/phones, often in challenging lighting. Optimizing for touch interactions and outdoor visibility was crucial for adoption.
Auto-refresh with 5-second intervals provided sufficient real-time feel without WebSocket complexity. Simpler architecture meant easier maintenance and lower costs.
Implementing role-based access control and database-level security (RLS) from the start prevented security issues as the user base grew.
98% organic traffic validates that the application solves a real problem. User feedback drove features like undo functionality and mid-over bowler changes.
Modern stack enabled rapid development with excellent DX. Server Components and Server Actions reduced complexity while maintaining performance.
Experience live cricket scoring in action