Chess Robot Teaching Dashboard (Frontend)

Part of the RoboKnight Project

The Chess Robot Teaching Dashboard is a frontend application developed as part of the RoboKnight project, a smart robotics-based educational platform designed to teach and monitor chess gameplay using interactive robots. This dashboard enables teachers and administrators to manage games, track student progress, and monitor robot activity in real-time.

Built with React and styled using Tailwind CSS, the interface is responsive, modern, and designed for ease of use in classroom or lab environments. The dashboard integrates with a backend API to present live data about games, players, and robots.

---

Key Features

Dashboard Overview

• Displays high-level system metrics:

  • Total Games Played

  • Overall Win Rate

  • Connected Robots

  • Number of Students

• Offers a real-time summary of the system’s activity.

Game Management

• View a list of ongoing and completed games.

• Key details include:

  • Student and Robot Names

  • Game Status (Active, Inactive)

  • Number of Moves

  • Duration of the Game

• Links to full game history for analysis.

Game History and Replay

• Step-by-step move visualization using a chessboard.

• Highlights current move.

• Includes options for generating detailed reports for coaching and review.

Robot Management

• Displays all registered and connected robots.

• Status indicators: Active, In Game, Idle, Inactive.

• Tracks total games played and last active time for each robot.

Dark Mode Support

• Toggle between light and dark themes for better accessibility and visual comfort.

---

Project Structure

The codebase is modular and organized into the following main folders:

• src/components/: Reusable UI components.

• src/pages/: Page-level components for routing.

• src/utils/: Utility functions and helpers.

• src/services/: API service functions.

• src/assets/: Images and static files.

---

Technologies Used

Frontend

• React: Core UI framework.

• React Router: Page and component routing.

• Tailwind CSS: Utility-first CSS framework for styling.

• Heroicons: Icon set for modern UI design.

• React Chessboard: Visual rendering of chess games.

• Chess.js: Handles game logic and move validation.

Backend Integration

• The frontend fetches data from a RESTful backend API.

• API base URL is configured via .env:

  REACT_APP_API_URL=http://localhost:5000/api
  

Testing

• Jest & React Testing Library for unit and integration testing:

  • App.test.js: Basic render test.

  • setupTests.js: Jest-DOM configuration.

---

Installation and Setup

Prerequisites

• Node.js (v16 or above)

• npm or yarn

Steps

# Clone the repository
git clone https://github.com/RoboKnight-INSAT/TeacherDashboard-Frontend.git
cd frontxback

# Install dependencies
npm install

# Start the development server
npm start

• The app will be available at http://localhost:3000.

---

API Endpoints

The app communicates with the backend using these endpoints:

Endpoint	Description
GET /stats	Fetch system statistics
GET /games	Retrieve a list of games
GET /games/:id	Get detailed info for a single game
GET /games/:id/moves	Fetch move history for a game
GET /robots	List all connected robots

---

Styling and Themes

• Tailwind CSS powers the responsive and minimalist design.

• Themes configured in tailwind.config.js:

  • Dark Mode: Default theme (dark backgrounds, light text).

  • Light Mode: Alternate theme with inverted colors.

---

License

This project is licensed under the MIT License.
See the LICENSE file for details.

---

About RoboKnight

The RoboKnight project aims to blend robotics, AI, and education by building intelligent chess-playing robots that can interact with students in real-time. This dashboard serves as the bridge between educators and robots, providing a smart and intuitive interface to monitor learning and gameplay progress.