Overview
Rookie GUI is a modern fullstack chess interface built with React and Node.js. It communicates in real time with Rookie Engine through a WebSocket‑powered UCI bridge, allowing moves, evaluations, and engine output to flow seamlessly between frontend and backend.
Goal
Build a clean, responsive GUI and a lightweight backend that make it easy to interact with a native C++ engine — while keeping the architecture modular, understandable, and easy to extend.
Tech Stack
- React: Frontend UI, board rendering, game state.
- Node.js: Backend server, UCI routing, engine process management.
- WebSockets: Real‑time communication between GUI and backend.
Frontend Architecture
The GUI is built in React with a focus on clarity and responsiveness. The board, move list, evaluation bar, and engine output are all updated in real time through WebSocket messages from the backend.
- Board rendering: Lightweight component with SVG pieces.
- Game state: Centralized state for moves, history, and engine output.
- Live updates: WebSocket messages trigger UI changes instantly.
- Move input: User moves are validated and sent to backend.
Backend Architecture
The backend acts as a bridge between the GUI and Rookie Engine. It manages the engine process, sends UCI commands, and streams output back to the frontend.
- Engine process: Spawns and manages the C++ engine.
- UCI routing: Sends commands like position and go.
- Output parsing: Converts engine output into structured JSON.
- WebSocket server: Pushes updates to all connected clients.
Integration
The GUI and backend form a clean pipeline: user input → backend → engine → backend → GUI. This architecture keeps the engine isolated while giving the frontend full control.
- Real‑time flow: Moves and evaluations update instantly.
- Loose coupling: GUI and engine communicate only through backend.
- Modularity: Easy to swap engines or extend UI features.
Results
Rookie GUI provides a fast, responsive interface for interacting with Rookie Engine. The architecture is simple, modular, and ideal for experimentation, teaching, and future expansion.
What I Learned
Building the GUI deepened my understanding of real‑time communication, fullstack architecture, and how to bridge native engines with modern web technologies.