# gowthamvelusamy/cricket-crazies-winwizard-ipl2026 architecture

> Architecture diagram of the GitHub repository gowthamvelusamy/cricket-crazies-winwizard-ipl2026, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026
- Repository: https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026

## Overview

Cricket Crazies is a static IPL prediction dashboard. A friend enters through phone-number authentication, views real match data in a transposed team/match matrix, cycles hypothetical outcomes, and compares actual with predicted standings; predictions can be exported as a JPEG. The app.js excerpt shows data fetching, caching, mock-data processing, prediction updates and image capture. Other major capabilities are documented in the README, but their detailed implementation is not sampled, so those links cite the README.

Main entry points: [`app.js`](https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js) (Match data fetch), [`index.html`](https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/index.html) (Dashboard shell)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access and settings"]
  node_auth["Phone authentication<br/>[app.js]"]
  node_settings["API settings<br/>[app.js]"]
  node_browser_store[("Browser storage")]
end

subgraph group_data["Match data"]
  node_fetcher["Match data fetch<br/>[app.js]"]
  node_cricapi["CricAPI"]
  node_cache["Match cache<br/>[app.js]"]
  node_mock_data["Mock match data<br/>[app.js]"]
  node_processor["Match processing<br/>[app.js]"]
end

subgraph group_prediction["Predictions and standings"]
  node_matrix["Prediction matrix<br/>[app.js]"]
  node_prediction_state["Prediction state<br/>[app.js]"]
  node_standings["Standings calculation<br/>[app.js]"]
end

subgraph group_presentation["Dashboard and export"]
  node_comparison["Dual standings<br/>[app.js]"]
  node_dashboard["Dashboard shell<br/>[index.html]"]
  node_theme["Theme toggle<br/>[app.js]"]
  node_export["Image export<br/>[app.js]"]
end

node_friend(("Friend"))
node_html2canvas["html2canvas"]

node_friend -->|"enters phone"| node_auth
node_auth -->|"unlocks dashboard"| node_dashboard
node_settings -->|"saves config; refreshes"| node_fetcher
node_fetcher -->|"requests series data"| node_cricapi
node_fetcher -->|"stores response"| node_cache
node_fetcher -.->|"processes fetched matches"| node_processor
node_mock_data -->|"processes mock matches"| node_processor
node_matrix -->|"updates prediction"| node_prediction_state
node_prediction_state -->|"persists predictions"| node_browser_store
node_standings -->|"reads predictions"| node_prediction_state
node_comparison -->|"compares actual and predicted"| node_standings
node_dashboard -->|"presents match matrix"| node_matrix
node_dashboard -->|"presents standings"| node_comparison
node_theme -->|"persists theme"| node_browser_store
node_export -->|"captures dashboard"| node_html2canvas
node_friend -->|"cycles outcomes"| node_matrix

click node_auth "https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js"
click node_settings "https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js"
click node_fetcher "https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js"
click node_cache "https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js"
click node_mock_data "https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js"
click node_processor "https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js"
click node_matrix "https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js"
click node_prediction_state "https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js"
click node_standings "https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js"
click node_comparison "https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js"
click node_dashboard "https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/index.html"
click node_theme "https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js"
click node_export "https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_auth,node_settings,node_browser_store toneBlue
class node_fetcher,node_cricapi,node_cache,node_mock_data,node_processor toneAmber
class node_matrix,node_prediction_state,node_standings toneMint
class node_comparison,node_dashboard,node_theme,node_export toneRose
class node_friend,node_html2canvas toneIndigo
```

## Components

### Access and settings

- [Phone authentication](https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js): `app.js`
- [API settings](https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js): `app.js`
- **Browser storage**

### Match data

- [Match data fetch](https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js): `app.js`
- **CricAPI**
- [Match cache](https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js): `app.js`
- [Mock match data](https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js): `app.js`
- [Match processing](https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js): `app.js`

### Predictions and standings

- [Prediction matrix](https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js): `app.js`
- [Prediction state](https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js): `app.js`
- [Standings calculation](https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js): `app.js`

### Dashboard and export

- [Dual standings](https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js): `app.js`
- [Dashboard shell](https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/index.html): `index.html`
- [Theme toggle](https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js): `app.js`
- [Image export](https://github.com/gowthamvelusamy/cricket-crazies-winwizard-ipl2026/blob/main/app.js): `app.js`

### Other components

- **Friend**
- **html2canvas**

## Connections

- Friend → Phone authentication: enters phone (evidence: `README.md`)
- Phone authentication → Dashboard shell: unlocks dashboard (evidence: `README.md`)
- API settings → Match data fetch: saves config; refreshes (evidence: `app.js`)
- Match data fetch → CricAPI: requests series data (evidence: `app.js`)
- Match data fetch → Match cache: stores response (evidence: `app.js`)
- Match data fetch → Match processing: processes fetched matches (evidence: `app.js`)
- Mock match data → Match processing: processes mock matches (evidence: `app.js`)
- Prediction matrix → Prediction state: updates prediction (evidence: `app.js`)
- Prediction state → Browser storage: persists predictions (evidence: `app.js`)
- Standings calculation → Prediction state: reads predictions (evidence: `app.js`)
- Dual standings → Standings calculation: compares actual and predicted (evidence: `README.md`)
- Dashboard shell → Prediction matrix: presents match matrix (evidence: `README.md`)
- Dashboard shell → Dual standings: presents standings (evidence: `README.md`)
- Theme toggle → Browser storage: persists theme (evidence: `app.js`)
- Image export → html2canvas: captures dashboard (evidence: `app.js`)
- Friend → Prediction matrix: cycles outcomes (evidence: `README.md`)