🎮 Tic Tac Toe Game - React Edition

This is a fun and interactive Tic Tac Toe game built using React, Bootstrap, and SCSS. It supports two-player mode with customized names, dynamic turns, and a responsive animated board.

🌐 Play Now

🧩 Features

✅ Fully functional 3x3 Tic Tac Toe logic
🎨 Interactive UI with animations (Cross & Circle)
🧠 Win/draw detection with modal alerts
👨‍👩‍👧‍👦 Player name customization
💡 Responsive design using Bootstrap Grid
🎨 Styled with SCSS (custom mixins for shapes)
🌍 Hosted on GitHub Pages

📁 Project Structure

tic_tac_toe/
├── public/
│   ├── index.html          # HTML template
│   ├── manifest.json       # PWA metadata
│   └── robots.txt          # Crawler rules
├── src/
│   ├── App.js              # App root with navbar and game
│   ├── component/          # UI Components (Board, Players, Modals, Squares, etc.)
│   ├── scss/               # Styling using SCSS and mixins
│   └── index.js            # React DOM rendering
├── package.json            # Scripts, dependencies, and homepage
└── README.md               # Project documentation

🛠️ Installation & Setup

Clone the Repository

git clone https://github.com/kishandev2509/tic_tac_toe.git
cd tic_tac_toe

Install Dependencies

npm install

Run Locally

npm start

Open http://localhost:3000 to play the game locally.

🚀 Deployment

This app is deployed using GitHub Pages.

To deploy manually:

npm run deploy

Note: The homepage field in package.json is already configured.

📦 Dependencies

"react": "^18.3.1",
"bootstrap": "^5.3.3",
"react-bootstrap": "^2.10.4",
"gh-pages": "^6.1.1",
"jquery": "^3.7.1",
"popper.js": "^1.16.1",
"sass": "^1.77.6",
"web-vitals": "^4.2.1"

👨‍💻 Developed By

Kishan Dev
GitHub: @kishandev2509

⭐ Show Your Support

If you enjoyed the game, feel free to give it a ⭐ on GitHub!

kishandev2509 => tic_tac_toe