Cricket Analytics Dashboard - Project Showcase

Technology Stack

Backend

Node.js + Express.js

JSON File Storage

Morgan Logging

UUID Generation

Frontend

Angular 17 + TypeScript

Tailwind CSS + DaisyUI

Flowbite Charts

Responsive Design

How Data Flows

1. Upload JSON

User uploads cricket match data in JSON format via drag & drop interface

2. Process Data

Backend processes raw data, calculates statistics, and generates match ID

3. Store Data

Processed data is stored in JSON file with unique match ID for retrieval

4. Display Analytics

Frontend fetches data and displays interactive scorecards with charts

Data Storage Structure

Raw JSON

Match deliveries,
overs, players

Processing

Calculate stats,
batting/bowling figures

Stored Data

matches.json
with matchId

Deployment

Backend on Render

Node.js/Express API hosted on Render with automatic deployments

https://cricket-analytics-backendd.onrender.com/

Frontend on Cloudflare

Angular SPA deployed on Cloudflare Pages with global CDN

https://cf953cb4.cricket-analytics-frontend.pages.dev/

Note: Backend is hosted on Render's free tier. It may take 30-60 seconds to load on first request. Please wait patiently.

API Endpoints

POST /api/addMatchInfo

Upload and process cricket match data

Input: Raw JSON match data
Output: Success response with matchId

GET /api/getMatchInfo/:matchId

Retrieve processed match scorecard

Input: Match ID
Output: Complete scorecard with statistics

GET /api/matches

Get list of all matches

Input: None
Output: Array of all match summaries

GET /api/rawMatch/:matchId

Get raw JSON data for a match

Input: Match ID
Output: Original uploaded JSON data

External APIs & Features

UI Avatars API

Dynamic player avatars generated from names

VK

MS

RS

Flag CDN

Country flags for teams and players

20 Themes

DaisyUI theme system with real-time switching

Download Source Code

Complete Project

Full-stack cricket analytics application with both backend and frontend

Includes:

Backend (Node.js/Express):

• Express.js server setup
• API controllers & routers
• Data models & processing
• Package.json with dependencies

Frontend (Angular 17):

• Angular components & services
• Tailwind CSS + DaisyUI setup
• Theme system & routing
• Package.json with dependencies

Note: Frontend is pre-configured to use the deployed Render backend. You can omit the backend setup if you only want to test the frontend.

Download Complete Project

Setup Instructions

After downloading, extract the zip file and follow the README instructions to set up the project locally.

Quick Start:
1. Extract cricket-analytics-complete.zip
2. Backend: cd backend → npm install → npm run dev
3. Frontend: cd frontend → npm install → ng serve
4. Frontend Only: Skip backend setup - frontend is pre-configured with Render API