General Championship Tournament Scorecard

A dynamic, mobile-first sports scorecard platform built for real-time tournament tracking.

Access the Live Deployment

Overview

The General Championship Tournament Scorecard is a complete end-to-end web application designed to track and manage a multi-sport college festival. It provides an intuitive user interface with playful animations for live score updates, match tracking, and team management across 10 different sports (Cricket, Volleyball, Basketball, Football, Kabaddi, Kho-Kho, Badminton, Chess, Carrom, and Table Tennis).

Features

• Live Scorecards: Real-time, instant score updates powered by Server-Sent Events (SSE).
• Categorized Matches: Easily navigate between Ongoing, Upcoming, and Previous matches.
• Team Roster Management: View squad details, player lists, and captain highlights.
• Admin Dashboard: Secure role-based access control for managing matches and updating scores.
• Playful UI/UX: A mobile-first, cartoon-themed design powered by Tailwind CSS and Framer Motion for bouncy interactions.

Demo Video

UI Showcase

Tech Stack

Frontend Architecture

• Framework: React 18 with TypeScript
• Routing: Wouter (Lightweight React Router)
• State Management: TanStack React Query (Surgically updated via SSE stream)
• Styling: Tailwind CSS with a custom cartoon-themed design system
• UI Components: shadcn/ui library with Radix UI primitives
• Animations: Framer Motion
• Build Tool: Vite

Backend Architecture

• Runtime: Node.js with Express
• Language: TypeScript (ESM Modules)
• Real-Time Data: Server-Sent Events (SSE) with persistent connection management
• API Design: RESTful endpoints with Zod payload validation
• Database ORM: Drizzle ORM
• Database: PostgreSQL (with Drizzle Kit for migrations)
• Authentication: Passport.js (OIDC) with connect-pg-simple for PostgreSQL-backed session storage

Local Development Setup

To run this project locally, follow these steps:

1. Clone the repository:

   git clone <your-repo-url>
   cd Championship-Streamer

2. Install dependencies:

   npm install

3. Set up environment variables: Create a .env file in the root directory and add the required variables:

   DATABASE_URL=your_postgresql_connection_string
   SESSION_SECRET=your_session_secret
   ISSUER_URL=your_oidc_issuer_url

4. Run database migrations:

   npm run db:push

5. Start the development server:

   npm run dev

   The application will be accessible at http://localhost:5000.

Build & Production

• Create a production build (uses custom esbuild script for server and Vite for client):

  npm run build

• Start in production mode:

  npm run start

---

Built for the General Championship Tournament.

## Testing & CI/CD

• Unit Testing: Powered by Vitest and React Testing Library (using happy-dom for a fast, lightweight DOM simulation).
• CI/CD Pipeline: Automated GitHub Actions workflows ensure all tests and type checks pass cleanly on every push, maintaining code reliability.