“IISER TVM Chess Club Portal

Analyze, Compete, Connect — a unified platform for all IISER TVM chess activities, tournaments, puzzles, and analytics.

Comment

IISER TVM Chess Club Website

🧠 Inspiration

As an active member of the IISER TVM Chess Club, I noticed a recurring issue — our club’s history, announcements, and tournament data were fragmented across spreadsheets and WhatsApp messages. Nothing was centralized or permanent.

This inspired me to build a single digital home for our chess community — one that’s:

  • Easy for any club admin (even non-technical ones) to update
  • Fully data-driven, preserving our entire tournament history
  • Equipped with modern chess tools for training, analysis, and play

In essence, the goal was to create an ecosystem — not just a website — for IISER TVM chess.

♟️ What It Does

"IISER TVM Chess Club Website" is a dynamic, data-powered community platform designed to manage, analyze, and enhance the club’s activities.

Core Features:

  • Dynamic Tournament System: Supports 7+ formats (Swiss, Knockout, Team League, etc.) with real-time pairings, standings, and results loaded dynamically from Google Sheets.
  • Player Profiles: Members log in with their IISER email to access automatically generated profiles, showing tournament history, team affiliations, and performance statistics.
  • Live Game Analysis: Integrated Stockfish 17 (WASM) engine enables interactive analysis, move-by-move insights, and clickable PGN variations, just like Lichess.
  • Play vs AI (C.A.L.I.C.O): Play full games against a chess bot powered by chess.js logic and an external Stockfish API.
  • Puzzle Trainer: Fetches daily tactics from Google Sheets, validates moves in-browser, and tracks solutions.
  • Announcements Hub: Automatically updates club news from a spreadsheet, keeping members in sync.

⚙️ How We Built It

  1. Frontend: Built as a Vue 3 SPA (Composition API + Vite) with Bootstrap 5 for a clean UI.
  2. Auth: Uses Firebase Authentication restricted to @iisertvm.ac.in emails.
  3. Backend: Entirely powered by Google Sheets — a low-code backend where each tournament has a dedicated sheet with a self-describing SheetIndex.
  4. Analysis Engine: Built on vue3-chessboard, chess.js, and the Stockfish 17 WASM engine in a Web Worker for real-time feedback.
  5. Custom Logic: The Bot and Puzzle pages use a custom-built JavaScript engine for in-browser move validation.
  6. Profiles & History: The app aggregates data from multiple tournament sheets to build each player’s complete record dynamically.

🚧 Challenges We Ran Into

  • Stockfish WASM Crashes: Solved SharedArrayBuffer security restrictions by configuring proper COOP/COEP headers in vite.config.js.
  • Dynamic Data Linking: Initial hard-coded sheet IDs caused breakage — solved via the self-indexing architecture using SheetIndex.
  • Vite Cache Conflicts: Resolved dependency bundling issues using optimizeDeps.include.
  • Complex PGN Trees: Built a custom state-mapping system (MapsToState) to synchronize the board, move tree, and navigation seamlessly.
  • Engine Refactoring: Replaced unstable custom logic with chess.js for reliability while retaining flexibility in custom pages.

🏆 Accomplishments

  • Headless CMS via Google Sheets: A fully dynamic, no-code backend for structured tournament data.
  • Generic Tournament Renderer: The GenericTournament.vue component can display 7+ tournament formats from one entry point.
  • Advanced PGN Analysis Tool: Rivals Lichess-level interactivity within a self-contained Vue app.
  • Comprehensive Player History: Cross-tournament aggregation to visualize long-term club performance.
  • Custom Chess Engine: Wrote in pure JavaScript for puzzles and AI play — an educational deep dive into chess programming fundamentals.

📚 What We Learned

  • Deep Vue 3 Proficiency: Hands-on experience with Composition API and reactive state management.
  • System Architecture Design: Learned to think in modular, scalable frontend systems.
  • WebAssembly & Web Workers: Integrated high-performance native logic in a browser environment.
  • When to Build vs Use: Discovered the balance between custom logic and existing, stable libraries like chess.js.

🚀 What’s Next

This is only Phase 1 of the project.
We plan to expand it into a full-featured competitive and analytical hub for all IISER TVM players.

Next Phases:

  • Phase 2 – Database Migration: Move from Google Sheets to PostgreSQL or Firestore for faster data aggregation and live updates.
  • Phase 3 – Interactive Features: Enable in-site tournament registration, user PGN uploads, and a global ELO system.

💬 Elevator Pitch

Analyze, Compete, Connect — The IISER TVM Chess Hub.
A dynamic web platform uniting players, data, and tools to bring the entire IISER TVM chess community to one intelligent, interactive space.

Built With

  • bootstrap-5
  • chess.js
  • css3
  • firebase-authentication
  • google-sheets-api-(headless-cms)
  • html5
  • javascript-(es6+)
  • mliebelt/pgn-parser
  • stockfish-17-(wasm)
  • vite
  • vue-router
  • vue.js-(v3)
  • vue3-chessboard
  • web
Share this project:

Updates