Online Chess Game

This is a full-stack online chess application that allows two users to play against each other in real-time.

Features

• Real-time Gameplay: Play chess with another person seamlessly.
• Create Game Rooms: Create a private game room and share the ID with a friend to play together.
• Simple UI: A clean and intuitive user interface for a great playing experience.
• Move Validation: All moves are validated on the server-side.
• Game Notifications: Receive notifications for important game events like game start, check, and game over.

Tech Stack

Backend

• Node.js: A JavaScript runtime for the server.
• TypeScript: For type-safe JavaScript.
• WebSockets (ws): For real-time, bidirectional communication between the client and server.
• chess.js: For chess logic and move validation.

Frontend

• React: A JavaScript library for building user interfaces.
• Vite: A fast build tool and development server for modern web projects.
• TypeScript: For type-safe JavaScript.
• Tailwind CSS: A utility-first CSS framework for styling.
• react-router-dom: For client-side routing.

Getting Started

Prerequisites

• Node.js and npm installed on your machine.

Installation and Running the Application

1. Backend Setup

# Navigate to the backend directory
cd backend

# Install dependencies
npm install

# Start the development server
npm run dev

The backend WebSocket server will be running on ws://localhost:8080.

2. Frontend Setup

# Navigate to the frontend directory
cd frontend

# Install dependencies
npm install

# Start the development server
npm run dev

The frontend development server will start, and you can access the application in your browser at http://localhost:5173 (or the address shown in your terminal).

Important: For local development, you need to update the WebSocket URL in the frontend code.

1. Open frontend/src/hooks/useSockets.ts.
2. Change the WS_URL to ws://localhost:8080.

// frontend/src/hooks/useSockets.ts
const WS_URL = "ws://localhost:8080";

Project Structure

.
├── backend/
│   ├── src/
│   │   ├── Game.ts         # Core chess game logic
│   │   ├── GameManager.ts  # Manages games and players
│   │   ├── index.ts        # WebSocket server setup
│   │   └── messages.ts     # WebSocket message types
│   └── package.json
└── frontend/
    ├── src/
    │   ├── components/
    │   │   └── ChessBoard.tsx # The chessboard component
    │   ├── hooks/
    │   │   └── useSockets.ts  # WebSocket connection hook
    │   ├── pages/
    │   │   ├── Game.tsx      # The main game page
    │   │   └── Landing.tsx   # The landing page
    │   └── App.tsx           # Main application component
    └── package.json