# Gitlytics Dashboard — Full Context

> Detailed technical information about the React dashboard frontend for Gitlytics.

## 1. Overview

The dashboard frontend is built with React, TypeScript, Vite, and Tailwind CSS. It communicates with the FastAPI backends (either the self-hosted local backend or the cloud backend) to fetch, process, and present GitHub traffic data.

## 2. Authentication Modes

The frontend supports three methods of interaction:
- **OAuth Mode** (SaaS only): Authenticates via GitHub OAuth, logging in securely through the backend.
- **PAT Mode**: Authenticates on-demand using a locally-supplied GitHub Personal Access Token (PAT).
- **Username Mode**: Fetches and displays public traffic summaries using tokenless requests.
- **CSV Upload Mode**: Allows users to import and visualize historical traffic CSV files generated by the automation action.

## 3. Core Pages & Layouts

- **Login Page** (`LoginView.tsx`): Gateway for OAuth login, PAT login, CSV uploads, and public username searches. Includes a public star history widget.
- **Dashboard Page** (`DashboardView.tsx`): Main workspace presenting metrics, top-N charts, clone leaderboards, referrers, and growth timelines.
- **Workspace Selector** (`WorkspaceView.tsx`): OAuth-specific interface to manage pinned repositories (up to 3).
- **Public Profile View** (`UsernameView.tsx`): Simplified public analytics dashboard.

## 4. Key Integration URLs

- Homepage: https://gitlytics.dev
- Documentation: https://docs.gitlytics.dev
- Cloud Dashboard: https://dashboard.gitlytics.dev
- Gitlytics Main Code Repository: https://github.com/ameyac11/gitlytics
- Gitlytics Automation Repository: https://github.com/ameyac11/gitlytics-github-traffic-automation
