DEV Community

Cover image for cricket-scorecard-app🏏
Vivek Dudhatra
Vivek Dudhatra

Posted on

cricket-scorecard-app🏏

Hey devs and cricket fans! πŸ‘‹

I’m excited to share my latest personal project β€” a Cricket Scorecard Dashboard App that brings the thrill of live match scoring to the browser, built using Angular and JSON Server. If you’ve ever wanted to simulate a cricket match or build your own scoring app, this might be just the inspiration you need!


βš™οΈ What Is It?

This app is a real-time, match scoring dashboard designed for cricket match admins and scorers. From setting up teams to selecting players, scoring ball by ball, and generating commentary β€” it does everything you'd expect from a professional scoring system.


✨ Key Features

βœ… Match Setup & Player Selection

  • Create a new match
  • Choose striker, non-striker, and opening bowler

βœ… Score Updates

  • Update runs using buttons (0, 1, 2, 3, 4, 6, OUT)
  • All stats update in real-time

βœ… Dismissal Handling

  • Support for various OUT types
  • Select the fielder for catches or runouts

βœ… Live Commentary Generator

  • Automatically generates commentary for each delivery
  • Feels like Cricbuzz/Cricinfo πŸ˜„

βœ… Innings Transition

  • Alert appears after 1st innings
  • Lets you switch bowler and batsmen for the next team

βœ… Match Predictions

  • 1st Innings: Predict final score from current run rate
  • 2nd Innings: Show required run rate to win

βœ… Partnership Tracker

  • Shows the current runs added by the batting pair

πŸ›  Tech Stack

Layer Technology
Frontend Angular 16+
Backend JSON Server (Mock API)

⚠️ Important Detail

To begin every match fresh, you have to clear all previous match/player data from db.json(just clear the value for example you can see other teams data). This ensures no leftover stats affect the new game.


πŸ“¦ How to Run It

  1. Clone the repo
git clone https://github.com/vivek1384/cricket-scorecard-app.git
cd cricket-scorecard-app
npm install
npm i -g json-server
json-server --watch db.json --port 3001
ng s
Enter fullscreen mode Exit fullscreen mode

Then open your browser at: http://localhost:4200

πŸ’‘ Why I Built This

As a cricket fan and frontend developer, I wanted to mix my two passions into something fun and useful. This project helped me strengthen my component communication, service integration, and reactive programming skills in Angular β€” while building something exciting and real-world.

πŸš€ What's Next?

Ball-by-ball timeline history
Match history with login
Export match reports as PDF/CSV
Firebase or MongoDB backend
Real-time multiplayer scoring
Public spectator view (read-only)

πŸ“₯ Try It Out

πŸ§‘β€πŸ’» GitHub Repo:
πŸ‘‰ https://github.com/vivek1384/cricket-scorecard-app

Would love your feedback β€” drop a ⭐️ or fork it if you're interested in extending it!

Top comments (1)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.