What it does

Royal Chess allows users to play a full game of chess against an AI opponent. The bot makes real-time decisions based on the current board state, simulating a human-like chess experience. It provides a clean interface for gameplay, with legal move validation, turn tracking, and check/checkmate detection.

challenges we ran into

AI malfunctioning at the start: The chess bot initially didn’t work — it made invalid moves or froze the game. Debugging the AI logic took significant effort.

Move validation issues: Making sure both player and AI only made legal moves required careful integration between the frontend and engine.

Game state syncing: Keeping the board state updated correctly after each move was harder than expected, especially when managing asynchronous responses.

Accomplishments that we're proud of

Successfully got the AI to play full legal games and respond with smart moves.

Designed a simple but elegant chessboard UI that users enjoy.

Built a fully playable chess game from scratch, combining both passion and technical skill.

What we learned

How to integrate and debug AI logic in a real-world web app.

Deeper understanding of chess engines and move evaluation.

How to work through bugs with patience — just like in a game of chess.

The importance of good UX in making a game enjoyable.

Built With

  • captures
  • check
  • etc.-development-tools-eslint-code-linting-and-quality-postcss-&-autoprefixer-css-processing-react-hooks-state-management-(usestate
  • inter)-backdrop-blur-modern-glass-morphism-effects-chess-logic-&-ai-custom-chess-engine-built-from-scratch-in-typescript-minimax-algorithm-ai-decision-making-with-position-evaluation-web-audio-api-sound-effects-for-moves
  • playfair-display
  • react
  • tailwind
  • typescript
  • useeffect
  • vite
Share this project:

Updates

posted an update

Built With

Frontend Technologies React 18 - Component-based UI framework TypeScript - Type-safe JavaScript with static typing Vite - Fast build tool and development server Tailwind CSS - Utility-first CSS framework for styling Lucide React - Icon library for UI elements Styling & Design CSS Grid & Flexbox - Layout systems CSS Gradients - Background effects and theming CSS Animations - Hover effects and transitions Google Fonts - Custom typography (Cinzel, Playfair Display, Inter) Backdrop Blur - Modern glass morphism effects Chess Logic & AI Custom Chess Engine - Built from scratch in TypeScript Minimax Algorithm - AI decision making with position evaluation Web Audio API - Sound effects for moves, captures, check, etc. Development Tools ESLint - Code linting and quality PostCSS & Autoprefixer - CSS processing React Hooks - State management (useState, useEffect, useCallback) Deployment Netlify - Static site hosting and deployment platform Key Features Implemented Complete chess rule validation (castling, en passant, pawn promotion) AI opponent with 4 difficulty levels Game timer with increment support Move history with algebraic notation Multiple visual themes Sound effects Responsive design for all screen sizes Local storage for theme persistence

Log in or sign up for Devpost to join the conversation.