🎮 Checkers Game - Full Stack Application

A complete checkers game with FastAPI backend and modern frontend, featuring real-time multiplayer gameplay with WebSocket connections.

🚀 Live Demo

Play Now: https://app-production-af65.up.railway.app

📦 Standalone Repository Status

The Checkers/ directory is intentionally self-contained so it can be split into its own repository without code changes.

To create a standalone repository history from this monorepo:

git subtree split --prefix=Checkers -b checkers-standalone

🏗️ Architecture

.
├── backend/            # FastAPI backend with authentication
│   ├── main.py        # FastAPI application
│   ├── routers/       # API endpoints (auth, game, websocket)
│   ├── services/      # Game logic and security
│   ├── models/        # Database models
│   └── database.py    # Database configuration
├── frontend/          # React + TypeScript frontend
│   ├── src/           # Source code
│   ├── public/        # Static assets
│   └── package.json   # Dependencies
├── checkers-frontend/ # Alternative React implementation
├── Dockerfile         # Production deployment
├── docker-compose.yml # Local development
└── railway.toml       # Railway deployment config

🚀 Features

Backend (FastAPI)

• JWT Authentication - Secure user login/signup
• REST API - Game management endpoints
• WebSocket - Real-time multiplayer communication
• Database - SQLite with SQLAlchemy ORM
• Game Logic - Complete checkers rules implementation

Frontend (HTML/CSS/JS)

• Modern UI - Tailwind CSS styling
• Interactive Board - Click-to-move gameplay
• Real-time Updates - WebSocket integration
• Authentication - Login/signup forms
• Responsive Design - Works on all devices

🛠️ Setup Instructions

Prerequisites

• Python 3.8+
• Node.js (for frontend dependencies)

Backend Setup

cd backend
pip install -r requirements.txt
python -m uvicorn main:app --host 127.0.0.1 --port 8000

Frontend Setup

cd frontend
npm install
python -m http.server 3000

🎯 How to Play

1. Open http://localhost:3000 in your browser
2. Sign up for a new account or login with existing credentials
3. Create a game or join an existing game using the game ID
4. Play checkers - click pieces to select, click destination to move
5. Real-time multiplayer - both players see moves instantly

🔧 API Endpoints

Authentication

• POST /auth/Signup - Create new user
• POST /auth/Login - User login

Game Management

• POST /game/create_game - Create new game
• POST /game/join_game/{game_id} - Join existing game

WebSocket

• WS /ws/{game_id}?player_id={id}&token={token} - Real-time gameplay

🎮 Game Rules

• Red pieces move first
• Diagonal movement only on dark squares
• Must capture if possible
• Kings can move in any diagonal direction
• Win by capturing all opponent pieces

🔒 Security Features

• JWT Tokens for authentication
• Password hashing with bcrypt
• WebSocket authentication via tokens
• CORS protection for API security

🎨 Frontend Features

• Beautiful UI with Tailwind CSS
• Interactive board with hover effects
• Visual feedback for selected pieces
• Possible move indicators
• King piece symbols (♔)
• Responsive design for mobile/desktop

🚀 Development

Backend Development

cd backend
python -m uvicorn main:app --reload --host 127.0.0.1 --port 8000

Frontend Development

cd frontend
npm run dev  # For Tailwind CSS compilation
python -m http.server 3000

📱 Browser Support

• Chrome/Edge (recommended)
• Firefox
• Safari
• Mobile browsers

🐛 Troubleshooting

Common Issues

1. Port conflicts - Make sure ports 8000 and 3000 are available
2. CORS errors - Backend includes CORS middleware
3. WebSocket connection - Check firewall settings
4. Authentication - Clear localStorage if token issues occur

Debug Mode

• Open browser DevTools (F12)
• Check Console for errors
• Monitor Network tab for API calls
• WebSocket messages in Console

🎉 Enjoy Your Game!

Your checkers game is now fully integrated with:

• ✅ Authentication system
• ✅ Real-time multiplayer
• ✅ Modern UI/UX
• ✅ Complete game logic
• ✅ WebSocket communication

Happy gaming! 🎮