20TwentyScore

A ball-by-ball scorecard app for Twenty20 (T20) cricket matches.

Features

• Track runs, wickets, overs, and balls for two teams
• Ball-by-ball scoring with over-by-over breakdown
• Batting and bowling player tracking
• Extras (wides, no-balls, byes, leg-byes)
• Save and load game state via localStorage
• Sign in with Google (via NextAuth) to manage your account and access cloud-backed features
• In-progress game state is auto-saved to localStorage; signed-in users can additionally save completed/in-progress games to the cloud (Postgres-backed) and reload them later
• Responsive layout built with Emotion (CSS-in-JS)

Tech stack

• Next.js — React framework and routing
• React with TypeScript
• Emotion — CSS-in-JS styling
• React Context + useReducer — state management
• Jest + React Testing Library — unit and integration tests

Getting started

Prerequisites

• Node.js 18+
• Yarn

Install dependencies

yarn install

Run the development server

yarn dev

Open http://localhost:3000 in your browser.

Build for production

yarn build
yarn start

Running tests

yarn test

To generate a coverage report:

yarn jest --coverage

Linting

yarn lint

Auto-fix lint issues:

yarn lint:fix

Format all files with Prettier:

yarn format