TdA Teams Statistics Dashboard

A comprehensive web application for tracking and visualizing team performance statistics in the TdA (Turnaj do Algoritmů) competition. This dashboard provides real-time insights into team test results, school participation, and evaluation phases.

🚀 Features

• Team Overview: Browse teams organized by schools with filtering capabilities
• Test Results Tracking: Monitor team performance across different test categories:
  • "How does it work?" tests
  • "Bare minimum" tests
  • "Optimal solution" tests
• School Statistics: View participation statistics and team counts per school
• Evaluation Phases: Track different phases of the competition
• Interactive Filtering: Filter teams by school and URL availability
• Responsive Design: Modern UI built with Tailwind CSS
• Real-time Data: Live updates from the TdA backend system

🏗️ Tech Stack

• Frontend: Nuxt 3 (Vue.js framework)
• State Management: Pinia
• Styling: Tailwind CSS
• Charts: Chart.js for data visualization
• HTTP Client: Axios for API communication
• Runtime: Bun (development) / Node.js (production)
• Containerization: Docker with multi-stage builds

📋 Prerequisites

• Node.js 18+ or Bun
• Docker (for containerized deployment)

🛠️ Installation

Using Bun (Recommended)

# Install dependencies
bun install

# Start development server
bun run dev

Using npm/yarn/pnpm

# Install dependencies
npm install
# or
yarn install
# or
pnpm install

# Start development server
npm run dev
# or
yarn dev
# or
pnpm run dev

The application will be available at http://localhost:3000

🚀 Production Deployment

Local Production Build

# Build for production
bun run build
# or npm run build

# Preview production build
bun run preview
# or npm run preview

Docker Deployment

The application includes Docker configuration for easy deployment:

# Build the Docker image
docker build -t tda-teams-statistics .

# Run with Docker Compose
docker-compose up -d

The application will be accessible at http://localhost:8798

📁 Project Structure

├── components/           # Vue components
│   ├── Filters/         # Filter components (checkboxes, multiselect)
│   ├── SideMenu/        # Navigation sidebar
│   ├── Statistics/      # Statistics display components
│   ├── evaluation/      # Evaluation phase components
│   └── schoolTeams.vue  # Main teams display component
├── pages/               # Nuxt pages (auto-routing)
│   ├── evaluation/      # Evaluation phase pages
│   ├── index.vue        # Home page with team overview
│   └── settings.vue     # Settings page
├── server/              # Server-side API
│   ├── api/            # API endpoints
│   └── utils/          # Server utilities
├── store/              # Pinia state management
│   ├── teamStore.ts    # Team data management
│   └── evaluationStore.ts # Evaluation data management
├── models/             # TypeScript type definitions
└── utils/              # Client-side utilities

🔌 API Endpoints

The application provides several API endpoints:

• GET /api/teams - Fetch all teams organized by schools
• GET /api/evaluation/overview - Get evaluation phases overview
• GET /api/evaluation/[state] - Get evaluation data for specific phase
• GET /api/statistics - Get general statistics

🎨 Key Components

Team Display

• School-based organization: Teams grouped by educational institutions
• Test result visualization: Performance metrics displayed on hover
• URL linking: Direct links to team pages when available
• Referral tracking: Visual indicators for team referrals

Filtering System

• School filter: Multi-select dropdown for school selection
• URL filter: Toggle to show only teams with URLs
• Real-time updates: Instant filtering without page reload

Statistics Dashboard

• Performance charts: Visual representation of test results
• Participation metrics: School and team count statistics
• Evaluation tracking: Progress through competition phases

🔧 Configuration

Environment Variables

Create a .env file in the root directory:

# API Configuration
API_BASE_URL=your_api_base_url
PORT=3000

# Add other environment variables as needed

Tailwind Configuration

The project uses a custom Tailwind configuration with TdA-specific color schemes defined in tailwind.config.js.

🧪 Development

Running Tests

# Run tests (when test suite is available)
bun test
# or npm test

Code Structure

The application follows Nuxt 3 conventions:

• Auto-imports: Components and composables are auto-imported
• File-based routing: Pages directory structure defines routes
• Server API: Server directory contains API endpoints
• Type safety: Full TypeScript support with custom type definitions