🎮 Multiplayer Tic-Tac-Toe

Real-time multiplayer Tic-Tac-Toe with matchmaking, leaderboards, and server-authoritative game logic.

🕹️ Play Now → · 🐛 Report a Bug · 🚀 Deploy Your Own

---

---

✨ Features

• 🔁 Real-time gameplay — moves sync instantly across both players via Firestore listeners
• 🎯 Matchmaking — join a queue or create a private game
• 🏆 Leaderboard — ranked by points (Win = 3pts, Draw = 1pt, Loss = 0pts)
• 👤 Anonymous auth — jump in immediately with just a nickname, no sign-up required
• 🛡️ Server-authoritative logic — all moves validated server-side via Firestore rules, no client-side cheating
• ♾️ Concurrent games — supports many simultaneous matches
• 📱 Responsive — works on desktop and mobile

---

🛠️ Tech Stack

Layer	Technology
Frontend	React 19 + Vite
Realtime DB	Firebase Firestore
Auth	Firebase Anonymous Authentication
Hosting	Firebase Hosting
Styling	CSS3
State	React Hooks + Firestore Listeners

---

🧱 Architecture

Frontend Components

App.jsx                     # Screen routing & auth state
├── NicknameInput.jsx       # Player nickname setup
├── Lobby.jsx               # Main menu — create or join games
├── GameScreen.jsx          # Active game container
│   └── GameBoard.jsx       # 3×3 grid UI
├── GameResult.jsx          # Win / loss / draw screen with stats
└── Leaderboard.jsx         # Player rankings

Firebase Collections

players/        # User profiles — wins, losses, draws, points
games/          # Live game state — board, players, moves, turn, status
matchmaking/    # Queue for pairing players automatically

Game Logic

• All move validation happens server-side via Firestore
• 8 winning combinations checked on each move
• Draw detected when all 9 cells are filled with no winner
• Turn alternates strictly between Player X and Player O
• Points awarded automatically on game end

---

⚡ Quick Start

Prerequisites

• Node.js 18+
• A Firebase project with Firestore and Authentication enabled

1. Clone & install

git clone https://github.com/overcastbulb/Multiplayer-Tic-Tac-Toe-game-with-React-and-Firebase.git
cd Multiplayer-Tic-Tac-Toe-game-with-React-and-Firebase
npm install

2. Configure Firebase

Create a .env file in the root (see .env.example):

VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

3. Run locally

npm run dev

Open http://localhost:5173.

4. Other commands

npm run build      # Production build
npm run preview    # Preview production build locally
npm run lint       # ESLint

---

🚢 Deployment

See DEPLOYMENT.md for full Firebase Hosting instructions.

Quick summary:

npm run build
firebase deploy

Live at tic-tac-toe-game-multi.web.app

---

🔒 Security

• Firestore rules restrict game read/write to participating players only
• Leaderboard is publicly readable (aggregate stats, no PII)
• Anonymous auth means no email or password is ever stored
• Server-side move validation prevents client-side manipulation

---

🗺️ Roadmap

• Private room codes — invite a friend directly
• Chat during games
• Game replay / move history
• Dark mode
• Sound effects

---

📄 License

This project is licensed under the MIT License.

---

Built with React + Firebase · Play live →