Tic Tac Toe - Full Stack Application

A full-stack Tic Tac Toe game built with Spring Boot backend and Angular frontend.

Features

• ✅ Two-player turn-based gameplay (X and O)
• ✅ Real-time game state management
• ✅ Win detection (rows, columns, diagonals)
• ✅ Draw detection
• ✅ Input validation on both frontend and backend
• ✅ Reset game functionality
• ✅ Start new game
• ✅ Beautiful, responsive UI
• ✅ RESTful API architecture
• ✅ CORS configuration for local development

Technology Stack

Backend

• Java 17
• Spring Boot 3.1.5
• Maven (Build tool)
• Spring Web (REST API)
• Spring Validation (Input validation)

Frontend

• Angular 17
• TypeScript 5.2
• RxJS 7.8
• Node.js & npm (Package management)

Prerequisites

Before running the application, ensure you have the following installed:

For Backend:

• Java JDK 17 or higher

  • Download from: Oracle JDK or OpenJDK
  • Verify installation: java -version

• Maven 3.6 or higher

  • Download from: Apache Maven website
  • Verify installation: mvn -version

For Frontend:

• Node.js 18 or higher (includes npm)

  • Download from: Node.js official website
  • Verify installation: node -v and npm -v

• Angular CLI 17

  • Install globally: npm install -g @angular/cli@17
  • Verify installation: ng version

Project Structure

.
├── backend/                           # Spring Boot Backend
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/com/tictactoe/
│   │   │   │   ├── Application.java           # Main Spring Boot application
│   │   │   │   ├── config/
│   │   │   │   │   └── WebConfig.java         # CORS configuration
│   │   │   │   ├── controller/
│   │   │   │   │   └── GameController.java    # REST API endpoints
│   │   │   │   ├── model/
│   │   │   │   │   ├── Game.java              # Game model
│   │   │   │   │   ├── GameResponse.java      # API response model
│   │   │   │   │   └── Move.java              # Move model
│   │   │   │   └── service/
│   │   │   │       └── GameService.java       # Business logic
│   │   │   └── resources/
│   │   │       └── application.properties     # Configuration
│   │   └── test/
│   └── pom.xml                        # Maven dependencies
│
├── frontend/                          # Angular Frontend
│   ├── src/
│   │   ├── app/
│   │   │   ├── models/
│   │   │   │   └── game.model.ts      # TypeScript interfaces
│   │   │   ├── app.component.ts       # Main component logic
│   │   │   ├── app.component.html     # Game UI template
│   │   │   ├── app.component.css      # Component styles
│   │   │   ├── app.module.ts          # App module
│   │   │   └── game.service.ts        # HTTP service
│   │   ├── index.html                 # HTML entry point
│   │   ├── main.ts                    # TypeScript entry point
│   │   └── styles.css                 # Global styles
│   ├── angular.json                   # Angular configuration
│   ├── tsconfig.json                  # TypeScript configuration
│   ├── tsconfig.app.json              # App TypeScript config
│   ├── tsconfig.spec.json             # Test TypeScript config
│   └── package.json                   # npm dependencies
│
└── README.md                          # This file

Steps to Run the Application Locally

Step 1: Clone or Download the Repository

If you have this code in a repository:

git clone <repository-url>
cd <repository-folder>

Step 2: Start the Backend (Spring Boot)

1. Navigate to the backend directory:

   cd backend

Steps to Run the Application Locally

2. Build the project using Maven:

   mvn clean install

3. Run the Spring Boot application:

   mvn spring-boot:run

   Or alternatively:

   java -jar target/tictactoe-backend.jar

4. Verify the backend is running:

   • You should see: "Tic Tac Toe Backend is running on http://localhost:8080"
   • Test the health endpoint: Open browser to http://localhost:8080/api/game/health

Backend will run on: http://localhost:8080

Step 3: Start the Frontend (Angular)

1. Open a NEW terminal window (keep the backend running)

2. Navigate to the frontend directory:

   cd frontend

3. Install npm dependencies (first time only):

   npm install

   This will install all Angular dependencies listed in package.json

4. Start the Angular development server:

   ng serve

   Or:

   npm start

5. Wait for the compilation to complete. You should see:

   ** Angular Live Development Server is listening on localhost:4200 **
   

Frontend will run on: http://localhost:4200

Step 4: Play the Game!

1. Open your web browser
2. Navigate to: http://localhost:4200
3. You should see the Tic Tac Toe game board
4. Click on any cell to make a move
5. Players X and O take turns automatically
6. The game detects wins and draws
7. Use "Reset" to restart the current game
8. Use "New Game" to start a fresh game

API Endpoints

The backend provides the following REST API endpoints:

Method	Endpoint	Description
POST	/api/game/new	Create a new game
GET	/api/game/{gameId}	Get game state
POST	/api/game/{gameId}/move	Make a move
POST	/api/game/{gameId}/reset	Reset the game
DELETE	/api/game/{gameId}	Delete a game
GET	/api/game/health	Health check

Example API Request (Make a Move):

curl -X POST http://localhost:8080/api/game/{gameId}/move \
  -H "Content-Type: application/json" \
  -d '{"row": 0, "col": 0}'

Game Rules & Validations

Backend Validations:

• ✅ Row and column must be between 0 and 2
• ✅ Cell must be empty before making a move
• ✅ Cannot make moves after game is over
• ✅ Game ID must exist

Win Conditions:

• Three in a row (horizontal)
• Three in a column (vertical)
• Three in a diagonal

Draw Condition:

• All 9 cells are filled with no winner

Troubleshooting

Backend Issues:

Port 8080 already in use:

# Find and kill the process using port 8080
# On Windows:
netstat -ano | findstr :8080
taskkill /PID <PID> /F

# On Mac/Linux:
lsof -ti:8080 | xargs kill -9

Java version error:

• Ensure Java 17 or higher is installed: java -version

Frontend Issues:

Port 4200 already in use:

# Angular will automatically suggest another port
# Or kill the process:
# On Mac/Linux:
lsof -ti:4200 | xargs kill -9

npm install fails:

# Clear npm cache and try again
npm cache clean --force
rm -rf node_modules package-lock.json
npm install

Cannot connect to backend:

• Ensure backend is running on port 8080
• Check CORS settings in WebConfig.java
• Verify API URL in game.service.ts is http://localhost:8080

Development Notes

• Backend uses in-memory storage (ConcurrentHashMap) for game state
• Games are stored per session and will be lost when backend restarts
• CORS is configured to allow requests from http://localhost:4200
• Frontend uses Angular HttpClient for API communication
• All API responses are in JSON format

Future Enhancements

• Add database persistence (PostgreSQL/MySQL)
• Implement user authentication
• Add multiplayer support with WebSockets
• Add game history and statistics
• Implement AI opponent
• Add sound effects and animations
• Mobile responsive improvements

License

This project is open source and available for educational purposes.

---

Enjoy playing Tic Tac Toe! 🎮