# rajesh18112006/ipl-ace-league architecture

> Architecture diagram of the GitHub repository rajesh18112006/ipl-ace-league, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/rajesh18112006/ipl-ace-league
- Repository: https://github.com/rajesh18112006/ipl-ace-league

## Overview

#### Purpose and Entry Points
This is a client-side TypeScript application for IPL match tracking: match entry, today’s schedule, player views, leaderboard, and analytics. The bootstrap path is `src/main.tsx`, which renders the application root in `src/App.tsx`; `index.html` is the browser document entry point.

#### Application Shell and Navigation
`src/components/AppLayout.tsx` provides the shared page shell, while `src/components/NavLink.tsx` centralizes navigation-link behavior. Page-level screens are organized under `src/pages/`, including `src/pages/Home.tsx`, `src/pages/TodayMatches.tsx`, and `src/pages/NotFound.tsx`. `src/App.css` and `src/index.css` provide application/global styling boundaries.

#### Match and Schedule Domain
The match workflow is centered on `src/pages/MatchEntry.tsx`, which likely captures or updates match outcomes/scores. Domain calculations belong in `src/lib/match-scoring.ts`, and IPL fixture/schedule data is isolated in `src/lib/ipl-schedule.ts`. Shared domain contracts are defined in `src/lib/types.ts`, separating UI pages from scoring and schedule representations.

#### Data Persistence and Firebase Boundary
`src/lib/firebase.ts` is the external-service integration boundary for Firebase. `src/lib/storage.ts` provides a separate persistence abstraction, likely for browser-local state or cached data. Pages and analytics logic should consume these modules rather than directly coupling to Firebase or browser storage.

#### Analytics and Ranking Views
`src/pages/Analytics.tsx` presents derived performance/reporting data, with calculations or event handling centralized in `src/lib/analytics.ts`. `src/pages/Leaderboard.tsx` represents comparative rankings, while `src/pages/Players.tsx` provides player-focused views. These screens depend on the shared scoring, types, and persistence layers rather than owning domain logic.

#### UI Component System
Reusable interface primitives reside in `src/components/ui/`, including controls, overlays, tables, charts, and navigation elements such as `src/components/ui/chart.tsx`, `src/components/ui/table.tsx`, and `src/components/ui/sidebar.tsx`. Feature pages compose these primitives; the UI library should remain presentation-oriented and avoid IPL-specific rules.

#### Runtime and Delivery
The repository is a Vite-based frontend, configured through `vite.config.ts`, with TypeScript configuration in `tsconfig.app.json`. Tailwind/PostCSS styling infrastructure is represented by `tailwind.config.ts` and `postcss.config.js`. `vercel.json` indicates deployment configuration for Vercel. Browser testing is configured via `playwright.config.ts`, and unit-test setup via `vitest.config.ts`.

Main entry points: [`src/App.tsx`](https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/App.tsx) (App root), [`src/pages/MatchEntry.tsx`](https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/pages/MatchEntry.tsx) (Match entry), [`src/pages/Analytics.tsx`](https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/pages/Analytics.tsx) (Analytics, leaderboard & players), [`src/main.tsx`](https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/main.tsx) (Application bootstrap)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Browser Runtime"]
  node_browser["Browser document<br/>HTML entry<br/>[index.html]"]
  node_main["Application bootstrap<br/>React entry<br/>[main.tsx]"]
end

subgraph group_app["Application"]
  node_app_root["App root<br/>route composition<br/>[App.tsx]"]
  node_layout["Shared app shell<br/>layout<br/>[AppLayout.tsx]"]
  node_navigation["Navigation links<br/>navigation behavior<br/>[NavLink.tsx]"]
  node_screens["Core screens<br/>page views<br/>[Home.tsx]"]
  node_match_entry["Match entry<br/>match workflow<br/>[MatchEntry.tsx]"]
  node_insight_views["Analytics, leaderboard &amp; players<br/>derived views<br/>[Analytics.tsx]"]
end

subgraph group_domain["IPL Domain &amp; Data"]
  node_contracts["Domain contracts<br/>TypeScript models<br/>[types.ts]"]
  node_scoring["Match scoring<br/>domain calculations<br/>[match-scoring.ts]"]
  node_schedule["IPL schedule<br/>fixture data<br/>[ipl-schedule.ts]"]
  node_analytics_logic["Analytics logic<br/>derived calculations<br/>[analytics.ts]"]
  node_persistence["Persistence abstraction<br/>storage gateway<br/>[storage.ts]"]
  node_firebase[("Firebase integration<br/>external service boundary<br/>[firebase.ts]")]
end

subgraph group_ui["UI System"]
  node_ui_primitives["Reusable UI primitives<br/>presentation components<br/>[chart.tsx]"]
  node_styles["Application styles<br/>CSS boundary<br/>[App.css]"]
end

subgraph group_delivery["Build &amp; Delivery"]
  node_vite["Vite build<br/>frontend tooling<br/>[vite.config.ts]"]
  node_vercel["Vercel deployment<br/>deployment configuration<br/>[vercel.json]"]
end

node_browser -->|"loads"| node_main
node_main -->|"renders"| node_app_root
node_app_root -->|"uses"| node_layout
node_layout -->|"hosts"| node_navigation
node_app_root -->|"routes to"| node_screens
node_app_root -->|"routes to"| node_match_entry
node_app_root -->|"routes to"| node_insight_views
node_match_entry -->|"calculates with"| node_scoring
node_match_entry -->|"uses fixtures"| node_schedule
node_match_entry -->|"reads and writes"| node_persistence
node_insight_views -->|"derives reports with"| node_analytics_logic
node_insight_views -->|"uses scoring"| node_scoring
node_insight_views -->|"reads data"| node_persistence
node_scoring -->|"uses models"| node_contracts
node_analytics_logic -->|"uses models"| node_contracts
node_persistence -->|"integrates with"| node_firebase
node_screens -->|"composes"| node_ui_primitives
node_match_entry -->|"composes"| node_ui_primitives
node_insight_views -->|"renders with"| node_ui_primitives
node_app_root -->|"styled by"| node_styles
node_vite -->|"builds"| node_main
node_vercel -->|"deploys build"| node_vite

click node_browser "https://github.com/rajesh18112006/ipl-ace-league/blob/main/index.html"
click node_main "https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/main.tsx"
click node_app_root "https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/App.tsx"
click node_layout "https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/components/AppLayout.tsx"
click node_navigation "https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/components/NavLink.tsx"
click node_screens "https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/pages/Home.tsx"
click node_match_entry "https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/pages/MatchEntry.tsx"
click node_insight_views "https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/pages/Analytics.tsx"
click node_contracts "https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/lib/types.ts"
click node_scoring "https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/lib/match-scoring.ts"
click node_schedule "https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/lib/ipl-schedule.ts"
click node_analytics_logic "https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/lib/analytics.ts"
click node_persistence "https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/lib/storage.ts"
click node_firebase "https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/lib/firebase.ts"
click node_ui_primitives "https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/components/ui/chart.tsx"
click node_styles "https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/App.css"
click node_vite "https://github.com/rajesh18112006/ipl-ace-league/blob/main/vite.config.ts"
click node_vercel "https://github.com/rajesh18112006/ipl-ace-league/blob/main/vercel.json"

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_browser,node_main toneBlue
class node_app_root,node_layout,node_navigation,node_screens,node_match_entry,node_insight_views toneAmber
class node_contracts,node_scoring,node_schedule,node_analytics_logic,node_persistence,node_firebase toneMint
class node_ui_primitives,node_styles toneRose
class node_vite,node_vercel toneIndigo
```

## Components

### Browser Runtime

- [Browser document](https://github.com/rajesh18112006/ipl-ace-league/blob/main/index.html): HTML entry · `index.html`
- [Application bootstrap](https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/main.tsx): React entry · `src/main.tsx`

### Application

- [App root](https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/App.tsx): route composition · `src/App.tsx`
- [Shared app shell](https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/components/AppLayout.tsx): layout · `src/components/AppLayout.tsx`
- [Navigation links](https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/components/NavLink.tsx): navigation behavior · `src/components/NavLink.tsx`
- [Core screens](https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/pages/Home.tsx): page views · Home, today’s matches, and fallback screens. · `src/pages/Home.tsx`
- [Match entry](https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/pages/MatchEntry.tsx): match workflow · `src/pages/MatchEntry.tsx`
- [Analytics, leaderboard & players](https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/pages/Analytics.tsx): derived views · `src/pages/Analytics.tsx`

### IPL Domain & Data

- [Domain contracts](https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/lib/types.ts): TypeScript models · `src/lib/types.ts`
- [Match scoring](https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/lib/match-scoring.ts): domain calculations · `src/lib/match-scoring.ts`
- [IPL schedule](https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/lib/ipl-schedule.ts): fixture data · `src/lib/ipl-schedule.ts`
- [Analytics logic](https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/lib/analytics.ts): derived calculations · `src/lib/analytics.ts`
- [Persistence abstraction](https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/lib/storage.ts): storage gateway · Keeps application code independent of storage implementation. · `src/lib/storage.ts`
- [Firebase integration](https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/lib/firebase.ts): external service boundary · `src/lib/firebase.ts`

### UI System

- [Reusable UI primitives](https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/components/ui/chart.tsx): presentation components · Charts, tables, sidebar, controls, and overlays. · `src/components/ui/chart.tsx`
- [Application styles](https://github.com/rajesh18112006/ipl-ace-league/blob/main/src/App.css): CSS boundary · `src/App.css`

### Build & Delivery

- [Vite build](https://github.com/rajesh18112006/ipl-ace-league/blob/main/vite.config.ts): frontend tooling · `vite.config.ts`
- [Vercel deployment](https://github.com/rajesh18112006/ipl-ace-league/blob/main/vercel.json): deployment configuration · `vercel.json`

## Connections

- Browser document → Application bootstrap: loads
- Application bootstrap → App root: renders
- App root → Shared app shell: uses
- Shared app shell → Navigation links: hosts
- App root → Core screens: routes to
- App root → Match entry: routes to
- App root → Analytics, leaderboard & players: routes to
- Match entry → Match scoring: calculates with
- Match entry → IPL schedule: uses fixtures
- Match entry → Persistence abstraction: reads and writes
- Analytics, leaderboard & players → Analytics logic: derives reports with
- Analytics, leaderboard & players → Match scoring: uses scoring
- Analytics, leaderboard & players → Persistence abstraction: reads data
- Match scoring → Domain contracts: uses models
- Analytics logic → Domain contracts: uses models
- Persistence abstraction → Firebase integration: integrates with
- Core screens → Reusable UI primitives: composes
- Match entry → Reusable UI primitives: composes
- Analytics, leaderboard & players → Reusable UI primitives: renders with
- App root → Application styles: styled by
- Vite build → Application bootstrap: builds
- Vercel deployment → Vite build: deploys build