VJAI - Indian Chess Academy Operations Platform

VJAI is a strategic operations platform designed for modern chess academies. It replaces chaotic spreadsheets and WhatsApp groups with a unified, role-based system for Parents, Coaches, and Admins.

🛠️ Technology Stack

We built this using a "Purist" Performance Stack to ensure maximum speed, control, and brand alignment without bloat.

• Core Framework: React 18 (via Vite)
• Routing: react-router-dom v6
• Styling: Vanilla CSS (CSS Modules approach)
  • Why? To strictly enforce the "Strategic Elegance" design system using CSS Variables (--color-deep-blue, --font-display) without fighting framework defaults like Tailwind or Bootstrap.
• State Management: React Hooks (useState, useEffect, useContext)
• Assets:
  • Icons: Pure Unicode Chess Symbols (♔ ♕ ♖ ♗ ♘ ♙) - Zero external SVG libraries for faster load.
  • Fonts: Bodoni Moda (Display) & Figtree (Body).

---

🚀 Key Features Implemented

1. Complete Onboarding Flow

• Landing Page: Premium brand introduction with role-based value props.
• Role Selection: Interactive grid for Parents, Coaches, and Admins.
• Dynamic Registration: Custom fields based on selected role (e.g., FIDE Rating for Coaches).
• Success & Login: Polished post-registration experience with auto-redirects.

2. Role-Based Dashboards

• 👑 Admin Command Center: Central hub for financial reports (/admin/finances), student database (/admin/students), and funnel analytics.
• ♟️ Parent Portal: Access to class schedules, payment history, and the Batch Chat.
• ♞ Coach Portal: Tools for managing students and lesson plans.

3. Special Core Features

• Batch Chat Interface: A 3-way messaging system (Coach-Parent-Admin) with file sharing UI.
• Demo Outcome Modal: "Blocker" UI that forces admins to record results (Attended/No-Show) to prevent data leakage.

4. Design System Highlights

• "Strategic Elegance" Theme: Deep Blue (#003366), Ivory (#FFFEF3), and Warm Orange (#FC8A24).
• Visuals: Subtle 5% opacity "Chess Board" backgrounds, Rangoli-inspired borders, and "Knight Move" (L-shape) animations.

---

📂 Project Structure

src/
├── components/
│   ├── features/       # Complex widgets (Hackathon AI tools, Modals)
│   ├── layout/         # Sidebar, Header
│   └── ui/             # Reusable atoms (Button, Card, Input)
├── pages/
│   ├── admin/          # Admin sub-pages (Student Database, Finance)
│   ├── LandingPage.jsx
│   ├── Login.jsx
│   ├── RegistrationPage.jsx
│   └── ...
├── App.jsx             # Main routing configuration
├── index.css           # Global Design System (Variables, Reset, Utilities)
└── ...

🏁 How to Run

1. Install Dependencies:

   npm install

2. Start Dev Server:

   npm run dev

3. Open Application: Visit http://localhost:5173