CrickSnap
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.
The Problem
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.
The Solution
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.
Tech Stack
Frontend
Backend & Database
Auth & Real-time
Key Features
Role-Based Access Control System
Comprehensive authentication and authorization system with four distinct roles: Admin, Manager, Scorer, and Viewer.
- •Four clear roles (Admin, Manager, Scorer, Viewer) with scoped permissions for security and simplicity.
- •Credit-based tournament creation for managers with admin controls for allocation and monitoring.
- •Secure Google sign-in powered by Supabase Auth and database-level role checks.
Live Ball-by-Ball Scoring
Intuitive scorer interface handling all cricket scenarios with automatic calculations and real-time updates.
- •Single scorer screen for runs, extras, wickets, and free-hit logic with automatic calculations.
- •Automatic strike rotation, over management, and mid-over bowler changes handled by the engine.
- •Safe undo for the last ball with full score recalculation to fix mistakes quickly.
Tournament & Match Management
Complete tournament organization system from creation to match setup and player management.
- •Create tournaments and matches with configurable formats, overs, and team sizes.
- •Configure teams, players, batting order, and toss details in a guided flow.
- •Share tournaments instantly with auto-generated QR codes for viewers.
Public Live Scoreboards
Real-time scoreboards accessible to anyone with auto-refresh and comprehensive match statistics.
- •Auto-refreshing public scoreboard every 5 seconds for near real-time viewing.
- •Full batting and bowling cards plus ball-by-ball over history.
- •Optimized layouts for mobiles, tablets, and large display screens.
System Architecture
Frontend Architecture
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.
Backend & Database
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.
State Management
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.
Technical Challenges
Complex Cricket Rules Logic
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.
Real-time Updates Without WebSockets
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.
Mobile-First Responsive Design
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.
Credit-Based Access Control
Implemented monetization-ready credit system where managers spend credits to create tournaments/matches. Built transaction tracking and admin controls for credit allocation.
Real-World Impact
CrickSnap is actively used by cricket scorers across India, particularly in Madhya Pradesh and Chhattisgarh regions.
User Engagement
- •1.2K active users in the Dec 1, 2025 – Oct 4, 2026 report
- •18m 28s average engagement time per active user
- •48K views on the Cricket Scorecard page (788 active users and 79K events on that page)
Geographic Reach
- •Active users by city: Indore (605), Bhopal (483), Raipur (101), and Jabalpur (79)
- •The report also lists activity in other Indian cities.
- •Most active users were categorized as direct traffic in this analytics report
The application has proven its production readiness by handling real tournament scoring with complex scenarios. The report shows an average engagement time of 18m 28s per active user.
In this reporting period, most active users were categorized as direct traffic, with additional visits from Instagram, Google, GitHub, and LinkedIn.
Key Learnings
💡 Domain Knowledge is Critical
Deep understanding of cricket rules and scorer workflows was essential. Spending time observing actual scorers revealed requirements that weren't obvious from specifications.
📱 Mobile-First Design Matters
Scorers work on the field with tablets/phones, often in challenging lighting. Optimizing for touch interactions and outdoor visibility was crucial for adoption.
⚡ Simple Real-time is Often Enough
Auto-refresh with 5-second intervals provided sufficient real-time feel without WebSocket complexity. Simpler architecture meant easier maintenance and lower costs.
🔐 Security from Day One
Implementing role-based access control and database-level security (RLS) from the start prevented security issues as the user base grew.
🎯 Product-Market Fit Through Feedback
The report shows direct traffic as the largest source. User feedback drove features like undo functionality and mid-over bowler changes.
🚀 Next.js 16 + Supabase is Powerful
Modern stack enabled rapid development with excellent DX. Server Components and Server Actions reduced complexity while maintaining performance.