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
- 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
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.