Tic Tac Toe Pro Game 🕹️

Welcome to the Tic Tac Toe Pro Game! This is a comprehensive, full-stack application featuring multiplayer Tic Tac Toe gameplay, AI integration, user profiles, leaderboards, and more. The backend is built with Node.js, Express, and MongoDB, while the frontend leverages React and Material-UI for a polished, responsive user interface.

Tech Stack: MERN-T (MongoDB, Express, React, Node.js with TypeScript)

Table of Contents

• Overview
• Live Deployment
• Features
• Technologies
• User Interface
• File Structure
• API Endpoints
• Setup Instructions
• Containerization
• Contributing
• License
• Author

Overview

The Tic Tac Toe Pro Game offers a modern and engaging experience for players to:

• Compete in multiplayer matches (online PvP or local PvP on your machine) or against an AI trainer.
• Track their performance on a global leaderboard (using a comprehensive ELO system).
• Manage their profiles with personalized information and social links, along with profile search system.
• Enjoy a seamless UI with light and dark modes.

The app integrates a robust backend API with a dynamic frontend, providing real-time updates and ensuring data security with JWT authentication.

Live Deployment

The Tic Tac Toe Pro Game is live and accessible at the following URLs:

• Frontend: Tic Tac Toe Pro Game
• Backend: Tic Tac Toe Pro API
• Backup: Netlify Deployment

Feel free to explore the app, play a few games, and check out the leaderboard!

Note: The app's backend is hosted on Render's free tier, which may experience cold start delays. It may take up to 2 seconds to process backend requests, such as login, registration, online PvP, and/or leaderboard functionalities. Please be patient if you encounter any initial delays.

Deployment Statuses

Features

Frontend

• Dynamic Gameplay: Play against friends locally on your own device or AI with varying difficulty levels.
• Online PvP: Compete in real-time multiplayer matches against players worldwide with matchmaking support.
• Leaderboard: View top-ranked players and search for specific users.
• Profile Management: Update your profile with a bio, social media links, and more.
• Responsive Design: Optimized for mobile, tablet, and desktop screens.
• Dark Mode Support: Smooth toggling between light and dark themes.

Backend

• User Authentication: Secure registration, login, and password reset.
• ELO System: Dynamic player rankings based on game results and difficulty.
• Swagger Documentation: Interactive API documentation for developers.
• OpenAPI Specification: Standardized API schema for easy integration.
• Game Stats: Record game results and track wins, losses, and draws.
• Socket.io Integration: Real-time updates for multiplayer matches and AI moves.

AI Integration

• Minimax Algorithm: AI opponent with optimal move selection.
• Difficulty Levels: Choose from easy, medium, and hard AI modes.
• Real-Time Updates: Instant feedback on AI moves and game results.

Technologies

Frontend

• React
• Material-UI
• Axios
• React Router
• React Hook Form
• Local Storage for theme persistence

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose ODM
• Socket.io
• JWT Authentication
• Swagger UI
• dotenv
• CORS Middleware

CI/CD

• GitHub Actions: Automated workflows for linting, testing, and deployment.
• Jest & React Testing Library: For unit and integration testing of React components.
• ESLint & Prettier: Linting and code formatting for maintaining code quality.
• Jenkins: Continuous integration and deployment for backend services.
• Docker & Kubernetes: Containerization and orchestration for scalable deployments.

User Interface

The Tic Tac Toe Pro Game frontend features an intuitive and visually appealing UI, offering a seamless experience across devices. Below are placeholders for screenshots of the app:

Landing Page

The landing page showcases the game's features, including multiplayer gameplay, AI difficulty levels, and global leaderboards.

Light Mode

Dark Mode

Game Page

The game page allows users to play Tic Tac Toe against friends or AI, with real-time updates and game results.

Light Mode

Dark Mode

Game Play

The game page features a responsive game board with real-time updates for player moves and game results.

Player vs AI Mode

The game page allows users to play against an AI opponent with varying difficulty levels (easy, medium, hard).

Local Player vs. Player Mode

The game page also allows users to play against friends locally on the same device.

Example of multiple board sizes: 8x8

Online Player vs. Player Mode

The game page also enables users to play against other players online in real-time matches.

Demo GIF:

Our apologies for the low quality of the GIF. Please visit the live app to experience the real-time online gameplay! 🎮

Pre-Matchmaking

Matchmaking in Progress (Finding Opponent)

Matchmaking Success (Found Opponent)

Game in Progress (Online Match)

Leaderboard Page

The leaderboard page displays the top-ranked players globally. Users can view their own ranking and search for other players.

Light Mode

Dark Mode

Profile Page

The profile page allows users to view and update their profile information, including a bio, social media links, and date of birth.

Light Mode

Dark Mode

Profile Search

The profile page also features a search bar to find other users by their username.

Login Page

The login page allows users to sign in with their email and password, with options for password recovery and new user registration.

Light Mode

Dark Mode

Registration Page

The registration page enables new users to create an account with their email, username, and password.

Light Mode

Dark Mode

Forgot Password Page

The forgot password page allows users to recover their account by verifying their email address.

Light Mode

Dark Mode

Responsive Design

Mobile View

The app is fully responsive, providing an optimal experience on mobile devices with smooth transitions and interactive elements.

Mobile Drawer

The mobile drawer allows users to navigate between pages and access their profile, leaderboard, and settings.

File Structure

Tic-Tac-Toe-Fullstack-Game/
├── backend/
│   ├── models/
│   │   ├── Match.js
│   │   ├── User.js
│   │   ├── LeaderboardEntry.js
│   │   ├── Token.js
│   ├── routes/
│   │   ├── auth.js
│   │   ├── profile.js
│   │   ├── leaderboard.js
│   ├── middleware/
│   │   ├── authMiddleware.js
│   ├── swagger/
│   │   ├── config.js
│   ├── server.js
│   ├── package.json
│   ├── Dockerfile
│   ├── .env
├── frontend/
│   ├── public/
│   │   ├── favicon.ico
│   │   ├── manifest.json
│   │   ├── sitemap.xml
│   │   ├── robots.txt
│   │   ├── index.html
│   ├── src/
│   │   ├── components/
│   │   │   ├── Board.tsx
│   │   │   ├── Cell.tsx
│   │   │   ├── Navbar.tsx
│   │   │   ├── Footer.tsx
│   │   │   ├── Leaderboard.tsx
│   │   │   ├── Profile.tsx
│   │   │   ├── ForgotPassword.tsx
│   │   │   ├── Login.tsx
│   │   │   ├── Register.tsx
│   │   │   ├── Settings.tsx
│   │   ├── pages/
│   │   │   ├── Home.tsx
│   │   │   ├── LandingPage.tsx
│   │   ├── utils/
│   │   │   ├── api.ts
│   │   │   ├── ai.ts
│   │   │   ├── helpers.ts
│   │   ├── App.tsx
│   │   ├── index.tsx
│   │   ├── index.css
│   │   ├── styles.css
│   │   ├── App.test.tsx
│   │   ├── reportWebVitals.ts
│   ├── package.json
│   ├── tsconfig.json
│   ├── Dockerfile
│   ├── .env
├── kubernetes/
│   ├── configmap.yaml
│   ├── backend-deployment.yaml
│   ├── backend-service.yaml
│   ├── frontend-deployment.yaml
│   ├── frontend-service.yaml
├── nginx/
│   ├── nginx.conf
│   ├── Dockerfile
├── images/
│   ├── landing.png
│   ├── leaderboard.png
│   ├── profile.png
│   ├── game.png
│   ├── mobile-view.png
├── README.md
├── LICENSE
├── .gitignore
├── Dockerfile
├── Jenkinsfile
├── jenkins_cicd.sh
├── openapi.yaml
├── docker-compose.yml
├── package.json

API Endpoints

Endpoint	Method	Description
/auth/register	POST	Register a new user with email, password, and username.
/auth/login	POST	Login a user and generate a JWT token.
/auth/forgot-password	POST	Verify if a user with the given email exists.
/auth/reset-password	POST	Reset the password for a user.
/profile	GET	Fetch the authenticated user's profile.
/profile	PUT	Update the authenticated user's profile (bio, date of birth, and social media links).
/profile/games	PUT	Increment the number of games played by the user.
/profile/search	GET	Search for a user by username.
/leaderboard	GET	Fetch the global leaderboard, sorted by ELO.
/leaderboard/match	POST	Report a match result between two players and update their ELO ratings.
/leaderboard/ai-match	POST	Report a match result against AI and update the player's ELO rating.
/leaderboard/search	GET	Search for a user in the leaderboard by username.
/leaderboard/matchmaking	POST	Put the player in matchmaking mode to find an online opponent.
/leaderboard/match/move	POST	Report a move in an online match and update the game state.
/leaderboard/match/finish	POST	Finish an online match and update the game result.
/leaderboard/matchmaking/status	GET	Check the status of the player's matchmaking request.
/leaderboard/match/timeout	POST	Handle a timeout in an online match and update the game result.
/leaderboard/match/state	GET	Fetch the current game state for an online match.
/leaderboard/matchmaking/cancel	POST	Cancel the player's matchmaking request.

Database Schemas

User Schema

Field	Type	Description
email	String	User's email address.
username	String	User's display name.
password	String	User's hashed password.
elo	Number	User's ELO rating.
bio	String	User's profile bio.
dob	String	User's date of birth.
gamesPlayed	Number	Number of games played by the user.
profilePicture	String	URL of the user's profile picture.
socialMedia	Object	User's social media links.

Leaderboard Entry Schema

Field	Type	Description
username	String	Player's username.
elo	Number	Player's ELO rating.
totalWins	Number	Number of wins by the player.
totalLosses	Number	Number of losses by the player.
totalDraws	Number	Number of draws by the player.

Match Schema

Field	Type	Description
player	String	Player's username.
opponent	String	Opponent's username.
status	Object	Match status (waiting, in-progress, finished).
moves	Array	Array of moves in the match.
winner	String	Winner of the match.
createdAt	Date	Match creation timestamp.
lastMoveTime	Date	Last move timestamp.

API Documentation

The backend API is documented using Swagger UI, providing an interactive interface to explore the available endpoints and test requests.

Here is the Swagger UI for the Tic Tac Toe Pro Game:

OpenAPI Specification

Using the openapi.yaml File

1. View the API Documentation

• Open Swagger Editor.
• Upload the openapi.yaml file or paste its content.
• Visualize and interact with the API documentation.

2. Test the API

• Import openapi.yaml into Postman:
  • Open Postman → Import → Select openapi.yaml.
  • Test the API endpoints directly from Postman.
• Or use Swagger UI:
  • Provide the file URL or upload it to view and test endpoints.

3. Generate Client Libraries

• Install OpenAPI Generator:

  npm install @openapitools/openapi-generator-cli -g

• Generate a client library:

  openapi-generator-cli generate -i openapi.yaml -g <language> -o ./client

• Replace <language> with the desired programming language.

4. Generate Server Stubs

• Generate a server stub:

  openapi-generator-cli generate -i openapi.yaml -g <framework> -o ./server

• Replace <framework> with the desired framework.

5. Run a Mock Server

• Install Prism:

  npm install -g @stoplight/prism-cli

• Start the mock server:

  prism mock openapi.yaml

6. Validate the OpenAPI File

• Use Swagger Validator:
  • Upload openapi.yaml or paste its content to check for errors.

This guide enables you to view, test, and utilize the API. Feel free to explore the OpenAPI Specification and integrate it with your applications.

Setup Instructions

Backend

1. Clone the repository and navigate to the backend folder:

   git clone https://github.com/hoangsonww/Tic-Tac-Toe-Fullstack-Game.git
   cd Tic-Tac-Toe-Fullstack-Game/backend

2. Install dependencies:

   npm install

3. Set up environment variables in a .env file:

   MONGO_URI=your-mongodb-uri
   JWT_SECRET=your-jwt-secret
   

4. Start the server:

   npm start

Frontend

1. Navigate to the frontend folder:

   cd Tic-Tac-Toe-Fullstack-Game/frontend

2. Install dependencies:

   npm install

3. Start the React app:

   npm start

Access the App

• Frontend: http://localhost:3000
• Backend API: http://localhost:4000
• Swagger UI: http://localhost:4000/api-docs
• Live: https://tictactoe-ai-app.vercel.app/
• Live API: https://tic-tac-toe-fullstack-game.onrender.com/

Containerization

The Tic Tac Toe Pro Game can be containerized using Docker for easy deployment and scaling. Below are the steps to build and run the app in a Docker container:

1. Build and Run the Docker Image:

   docker-compose up --build

2. Access the App: Visit http://localhost:3000 to access the frontend and http://localhost:4000 for the backend API.

Contributing

1. Fork the repository.
2. Create a new branch:

   git checkout -b feature/your-feature

3. Commit your changes:

   git commit -m "Add your feature"

4. Push to your branch:

   git push origin feature/your-feature

5. Submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Author

• Son Nguyen
• Feel free to reach out with any questions or suggestions.

---

Created in 2024 with ❤️ by Son Nguyen

🔝 Back to Top