{"id":21826857,"url":"https://github.com/hoangsonww/tic-tac-toe-fullstack-game","last_synced_at":"2025-04-14T05:42:12.634Z","repository":{"id":265005826,"uuid":"894640356","full_name":"hoangsonww/Tic-Tac-Toe-Fullstack-Game","owner":"hoangsonww","description":"🕹️ A full-stack, MERN-Typescript stack Tic Tac Toe game featuring a responsive React frontend and a robust Node.js/Express backend. Includes multiplayer and AI gameplay, a dynamic leaderboard with ELO rankings, and user profile management, all integrated with TypeScript and MongoDB.","archived":false,"fork":false,"pushed_at":"2025-03-17T15:36:51.000Z","size":23164,"stargazers_count":21,"open_issues_count":0,"forks_count":14,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-03-27T19:39:57.002Z","etag":null,"topics":["ai","express","expressjs","full-stack-web-development","fullstack","fullstack-development","jwt","kubernetes","mern-stack","mongodb","mongoose","nginx","node","nodejs","react","reactjs","tic-tac-toe","tic-tac-toe-game","typescript","webpack"],"latest_commit_sha":null,"homepage":"https://tictactoe-ai-app.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hoangsonww.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-26T18:01:02.000Z","updated_at":"2025-03-23T03:05:44.000Z","dependencies_parsed_at":"2024-11-27T06:42:05.441Z","dependency_job_id":null,"html_url":"https://github.com/hoangsonww/Tic-Tac-Toe-Fullstack-Game","commit_stats":null,"previous_names":["hoangsonww/tic-tac-toe-fullstack-game"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FTic-Tac-Toe-Fullstack-Game","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FTic-Tac-Toe-Fullstack-Game/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FTic-Tac-Toe-Fullstack-Game/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoangsonww%2FTic-Tac-Toe-Fullstack-Game/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoangsonww","download_url":"https://codeload.github.com/hoangsonww/Tic-Tac-Toe-Fullstack-Game/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248830420,"owners_count":21168272,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","express","expressjs","full-stack-web-development","fullstack","fullstack-development","jwt","kubernetes","mern-stack","mongodb","mongoose","nginx","node","nodejs","react","reactjs","tic-tac-toe","tic-tac-toe-game","typescript","webpack"],"created_at":"2024-11-27T18:11:09.225Z","updated_at":"2025-04-14T05:42:12.624Z","avatar_url":"https://github.com/hoangsonww.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# **Tic Tac Toe Pro Game 🕹️**\n\nWelcome 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.\n\n\u003e **Tech Stack**: **MERN-T** (MongoDB, **Express**, **React**, Node.js with TypeScript)\n\n## **Table of Contents**\n\n- [Overview](#overview)\n- [Live Deployment](#live-deployment)\n- [Features](#features)\n- [Technologies](#technologies)\n- [User Interface](#user-interface)\n- [File Structure](#file-structure)\n- [API Endpoints](#api-endpoints)\n- [Setup Instructions](#setup-instructions)\n- [Containerization](#containerization)\n- [Contributing](#contributing)\n- [License](#license)\n- [Author](#author)\n\n## **Overview**\n\nThe **Tic Tac Toe Pro Game** offers a modern and engaging experience for players to:\n\n- Compete in multiplayer matches (online PvP or local PvP on your machine) or against an AI trainer.\n- Track their performance on a global leaderboard (using a comprehensive ELO system).\n- Manage their profiles with personalized information and social links, along with profile search system.\n- Enjoy a seamless UI with light and dark modes.\n\nThe app integrates a robust backend API with a dynamic frontend, providing real-time updates and ensuring data security with JWT authentication.\n\n## **Live Deployment**\n\nThe Tic Tac Toe Pro Game is live and accessible at the following URLs:\n\n- **Frontend**: [Tic Tac Toe Pro Game](https://tictactoe-ai-app.vercel.app/)\n- **Backend**: [Tic Tac Toe Pro API](https://tic-tac-toe-fullstack-game.onrender.com/)\n- **Backup**: [Netlify Deployment](https://tictactoe-ai-game.netlify.app)\n\nFeel free to explore the app, play a few games, and check out the leaderboard!\n\n\u003e **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.\n\n### Deployment Statuses\n\n![Frontend Vercel](https://img.shields.io/badge/Frontend%20Vercel-Up-brightgreen?style=flat-square\u0026logo=vercel)\n![Backend Render](https://img.shields.io/badge/Backend%20Render-Up-brightgreen?style=flat-square\u0026logo=render)\n![MongoDB Atlas](https://img.shields.io/badge/MongoDB%20Atlas-Connected-brightgreen?style=flat-square\u0026logo=mongodb)\n![Netlify Backup](https://img.shields.io/badge/Netlify%20Backup-Ready-brightgreen?style=flat-square\u0026logo=netlify)\n![Deployment Docker](https://img.shields.io/badge/Deployment%20Docker-Running-brightgreen?style=flat-square\u0026logo=docker)\n![Swagger Documentation](https://img.shields.io/badge/Swagger%20Docs-Available-brightgreen?style=flat-square\u0026logo=swagger)\n![GitHub Actions](https://img.shields.io/badge/GitHub%20Actions-Passing-brightgreen?style=flat-square\u0026logo=githubactions)\n![Jenkins Pipeline](https://img.shields.io/badge/Jenkins%20Pipeline-Active-brightgreen?style=flat-square\u0026logo=jenkins)\n\n## **Features**\n\n### **Frontend**\n\n- **Dynamic Gameplay**: Play against friends locally on your own device or AI with varying difficulty levels.\n- **Online PvP**: Compete in real-time multiplayer matches against players worldwide with matchmaking support.\n- **Leaderboard**: View top-ranked players and search for specific users.\n- **Profile Management**: Update your profile with a bio, social media links, and more.\n- **Responsive Design**: Optimized for mobile, tablet, and desktop screens.\n- **Dark Mode Support**: Smooth toggling between light and dark themes.\n\n### **Backend**\n\n- **User Authentication**: Secure registration, login, and password reset.\n- **ELO System**: Dynamic player rankings based on game results and difficulty.\n- **Swagger Documentation**: Interactive API documentation for developers.\n- **OpenAPI Specification**: Standardized API schema for easy integration.\n- **Game Stats**: Record game results and track wins, losses, and draws.\n- **Socket.io Integration**: Real-time updates for multiplayer matches and AI moves.\n\n### **AI Integration**\n\n- **Minimax Algorithm**: AI opponent with optimal move selection.\n- **Difficulty Levels**: Choose from easy, medium, and hard AI modes.\n- **Real-Time Updates**: Instant feedback on AI moves and game results.\n\n## **Technologies**\n\n### **Frontend**\n\n- React\n- Material-UI\n- Axios\n- React Router\n- React Hook Form\n- Local Storage for theme persistence\n\n### **Backend**\n\n- Node.js\n- Express.js\n- MongoDB\n- Mongoose ODM\n- Socket.io\n- JWT Authentication\n- Swagger UI\n- dotenv\n- CORS Middleware\n\n### CI/CD\n\n- **GitHub Actions**: Automated workflows for linting, testing, and deployment.\n- **Jest \u0026 React Testing Library**: For unit and integration testing of React components.\n- **ESLint \u0026 Prettier**: Linting and code formatting for maintaining code quality.\n- **Jenkins**: Continuous integration and deployment for backend services.\n- **Docker \u0026 Kubernetes**: Containerization and orchestration for scalable deployments.\n\n## **User Interface**\n\nThe **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:\n\n### Landing Page\n\nThe landing page showcases the game's features, including multiplayer gameplay, AI difficulty levels, and global leaderboards.\n\n#### Light Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/landing.png\" alt=\"Landing Page\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n#### Dark Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/landing-dark.png\" alt=\"Landing Page (Dark Mode)\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n### Game Page\n\nThe game page allows users to play Tic Tac Toe against friends or AI, with real-time updates and game results.\n\n#### Light Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/game.png\" alt=\"Game Page\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n#### Dark Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/game-dark.png\" alt=\"Game Page (Dark Mode)\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n### Game Play\n\nThe game page features a responsive game board with real-time updates for player moves and game results.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/gameplay.png\" alt=\"Game Play\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n### Player vs AI Mode\n\nThe game page allows users to play against an AI opponent with varying difficulty levels (easy, medium, hard).\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/ai.png\" alt=\"Player vs AI Mode\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/ai-dark.png\" alt=\"AI Difficulty Levels\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n### Local Player vs. Player Mode\n\nThe game page also allows users to play against friends locally on the same device.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/local.png\" alt=\"Local Player vs. Player Mode\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/local-dark.png\" alt=\"Local Player vs. Player Mode (Dark Mode)\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n**Example of multiple board sizes**: 8x8\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/8x8.png\" alt=\"8x8 Board Size\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n### Online Player vs. Player Mode\n\nThe game page also enables users to play against other players online in real-time matches.\n\n**Demo GIF**:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./images/demo.gif\" alt=\"Demo Video\"\u003e\n\u003c/p\u003e\n\n\u003e Our apologies for the low quality of the GIF. Please visit the live app to experience the real-time online gameplay! 🎮\n\n**Pre-Matchmaking**\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/pre-matchmaking.png\" alt=\"Online Player vs. Player Mode\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n**Matchmaking in Progress (Finding Opponent)**\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/matchmaking-in-progress.png\" alt=\"Online Player vs. Player Mode\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n**Matchmaking Success (Found Opponent)**\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/match-found.png\" alt=\"Online Player vs. Player Mode\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n**Game in Progress (Online Match)**\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/online.png\" alt=\"Online Player vs. Player Mode\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/online-dark.png\" alt=\"Online Player vs. Player Mode (Dark Mode)\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n### Leaderboard Page\n\nThe leaderboard page displays the top-ranked players globally. Users can view their own ranking and search for other players.\n\n#### Light Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/leaderboard.png\" alt=\"Leaderboard Page\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n#### Dark Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/leaderboard-dark.png\" alt=\"Leaderboard Page (Dark Mode)\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n### Profile Page\n\nThe profile page allows users to view and update their profile information, including a bio, social media links, and date of birth.\n\n#### Light Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/profile.png\" alt=\"Profile Page\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n#### Dark Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/profile-dark.png\" alt=\"Profile Page (Dark Mode)\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n#### Profile Search\n\nThe profile page also features a search bar to find other users by their username.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/profile-search.png\" alt=\"Profile Search\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n### Login Page\n\nThe login page allows users to sign in with their email and password, with options for password recovery and new user registration.\n\n#### Light Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/login.png\" alt=\"Login Page\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n#### Dark Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/login-dark.png\" alt=\"Login Page (Dark Mode)\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n### Registration Page\n\nThe registration page enables new users to create an account with their email, username, and password.\n\n#### Light Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/register.png\" alt=\"Registration Page\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n#### Dark Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/register-dark.png\" alt=\"Registration Page (Dark Mode)\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n### Forgot Password Page\n\nThe forgot password page allows users to recover their account by verifying their email address.\n\n#### Light Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/forgot-password.png\" alt=\"Forgot Password Page\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n#### Dark Mode\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/forgot-password-dark.png\" alt=\"Forgot Password Page (Dark Mode)\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n### Responsive Design\n\n#### Mobile View\n\nThe app is fully responsive, providing an optimal experience on mobile devices with smooth transitions and interactive elements.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/mobile-view.png\" alt=\"Mobile View\" width=\"50%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n#### Mobile Drawer\n\nThe mobile drawer allows users to navigate between pages and access their profile, leaderboard, and settings.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/mobile-drawer.png\" alt=\"Mobile Drawer\" width=\"50%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n## **File Structure**\n\n```\nTic-Tac-Toe-Fullstack-Game/\n├── backend/\n│   ├── models/\n│   │   ├── Match.js\n│   │   ├── User.js\n│   │   ├── LeaderboardEntry.js\n│   │   ├── Token.js\n│   ├── routes/\n│   │   ├── auth.js\n│   │   ├── profile.js\n│   │   ├── leaderboard.js\n│   ├── middleware/\n│   │   ├── authMiddleware.js\n│   ├── swagger/\n│   │   ├── config.js\n│   ├── server.js\n│   ├── package.json\n│   ├── Dockerfile\n│   ├── .env\n├── frontend/\n│   ├── public/\n│   │   ├── favicon.ico\n│   │   ├── manifest.json\n│   │   ├── sitemap.xml\n│   │   ├── robots.txt\n│   │   ├── index.html\n│   ├── src/\n│   │   ├── components/\n│   │   │   ├── Board.tsx\n│   │   │   ├── Cell.tsx\n│   │   │   ├── Navbar.tsx\n│   │   │   ├── Footer.tsx\n│   │   │   ├── Leaderboard.tsx\n│   │   │   ├── Profile.tsx\n│   │   │   ├── ForgotPassword.tsx\n│   │   │   ├── Login.tsx\n│   │   │   ├── Register.tsx\n│   │   │   ├── Settings.tsx\n│   │   ├── pages/\n│   │   │   ├── Home.tsx\n│   │   │   ├── LandingPage.tsx\n│   │   ├── utils/\n│   │   │   ├── api.ts\n│   │   │   ├── ai.ts\n│   │   │   ├── helpers.ts\n│   │   ├── App.tsx\n│   │   ├── index.tsx\n│   │   ├── index.css\n│   │   ├── styles.css\n│   │   ├── App.test.tsx\n│   │   ├── reportWebVitals.ts\n│   ├── package.json\n│   ├── tsconfig.json\n│   ├── Dockerfile\n│   ├── .env\n├── kubernetes/\n│   ├── configmap.yaml\n│   ├── backend-deployment.yaml\n│   ├── backend-service.yaml\n│   ├── frontend-deployment.yaml\n│   ├── frontend-service.yaml\n├── nginx/\n│   ├── nginx.conf\n│   ├── Dockerfile\n├── images/\n│   ├── landing.png\n│   ├── leaderboard.png\n│   ├── profile.png\n│   ├── game.png\n│   ├── mobile-view.png\n├── README.md\n├── LICENSE\n├── .gitignore\n├── Dockerfile\n├── Jenkinsfile\n├── jenkins_cicd.sh\n├── openapi.yaml\n├── docker-compose.yml\n├── package.json\n```\n\n## **API Endpoints**\n\n| Endpoint                          | Method | Description                                                                           |\n|-----------------------------------|--------|---------------------------------------------------------------------------------------|\n| `/auth/register`                  | POST   | Register a new user with email, password, and username.                               |\n| `/auth/login`                     | POST   | Login a user and generate a JWT token.                                                |\n| `/auth/forgot-password`           | POST   | Verify if a user with the given email exists.                                         |\n| `/auth/reset-password`            | POST   | Reset the password for a user.                                                        |\n| `/profile`                        | GET    | Fetch the authenticated user's profile.                                               |\n| `/profile`                        | PUT    | Update the authenticated user's profile (bio, date of birth, and social media links). |\n| `/profile/games`                  | PUT    | Increment the number of games played by the user.                                     |\n| `/profile/search`                 | GET    | Search for a user by username.                                                        |\n| `/leaderboard`                    | GET    | Fetch the global leaderboard, sorted by ELO.                                          |\n| `/leaderboard/match`              | POST   | Report a match result between two players and update their ELO ratings.               |\n| `/leaderboard/ai-match`           | POST   | Report a match result against AI and update the player's ELO rating.                  |\n| `/leaderboard/search`             | GET    | Search for a user in the leaderboard by username.                                     |\n| `/leaderboard/matchmaking`        | POST   | Put the player in matchmaking mode to find an online opponent.                        |\n| `/leaderboard/match/move`         | POST   | Report a move in an online match and update the game state.                           |\n| `/leaderboard/match/finish`       | POST   | Finish an online match and update the game result.                                    |\n| `/leaderboard/matchmaking/status` | GET    | Check the status of the player's matchmaking request.                                 |\n| `/leaderboard/match/timeout`      | POST   | Handle a timeout in an online match and update the game result.                       |\n| `/leaderboard/match/state`        | GET    | Fetch the current game state for an online match.                                     |\n| `/leaderboard/matchmaking/cancel` | POST   | Cancel the player's matchmaking request.                                              |\n\n### **Database Schemas**\n\n#### **User Schema**\n\n| Field            | Type   | Description                         |\n|------------------|--------|-------------------------------------|\n| `email`          | String | User's email address.               |\n| `username`       | String | User's display name.                |\n| `password`       | String | User's hashed password.             |\n| `elo`            | Number | User's ELO rating.                  |\n| `bio`            | String | User's profile bio.                 |\n| `dob`            | String | User's date of birth.               |\n| `gamesPlayed`    | Number | Number of games played by the user. |\n| `profilePicture` | String | URL of the user's profile picture.  |\n| `socialMedia`    | Object | User's social media links.          |\n\n#### **Leaderboard Entry Schema**\n\n| Field         | Type   | Description                     |\n|---------------|--------|---------------------------------|\n| `username`    | String | Player's username.              |\n| `elo`         | Number | Player's ELO rating.            |\n| `totalWins`   | Number | Number of wins by the player.   |\n| `totalLosses` | Number | Number of losses by the player. |\n| `totalDraws`  | Number | Number of draws by the player.  |\n\n##### **Match Schema**\n\n| Field          | Type   | Description                                    |\n|----------------|--------|------------------------------------------------|\n| `player`       | String | Player's username.                             |\n| `opponent`     | String | Opponent's username.                           |\n| `status`       | Object | Match status (waiting, in-progress, finished). |\n| `moves`        | Array  | Array of moves in the match.                   |\n| `winner`       | String | Winner of the match.                           |\n| `createdAt`    | Date   | Match creation timestamp.                      |\n| `lastMoveTime` | Date   | Last move timestamp.                           |\n\n### **API Documentation**\n\nThe backend API is documented using Swagger UI, providing an interactive interface to explore the available endpoints and test requests.\n\nHere is the Swagger UI for the **Tic Tac Toe Pro Game**:\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"images/api-docs.png\" alt=\"Swagger UI\" width=\"100%\" style=\"border-radius: 8px\"\u003e\n\u003c/p\u003e\n\n### OpenAPI Specification\n\n#### Using the `openapi.yaml` File\n\n1. **View the API Documentation**\n\n- Open [Swagger Editor](https://editor.swagger.io/).\n- Upload the `openapi.yaml` file or paste its content.\n- Visualize and interact with the API documentation.\n\n2. **Test the API**\n\n- Import `openapi.yaml` into [Postman](https://www.postman.com/):\n  - Open Postman → Import → Select `openapi.yaml`.\n  - Test the API endpoints directly from Postman.\n- Or use [Swagger UI](https://swagger.io/tools/swagger-ui/):\n  - Provide the file URL or upload it to view and test endpoints.\n\n3. **Generate Client Libraries**\n\n- Install OpenAPI Generator:\n  ```bash\n  npm install @openapitools/openapi-generator-cli -g\n  ```\n- Generate a client library:\n  ```bash\n  openapi-generator-cli generate -i openapi.yaml -g \u003clanguage\u003e -o ./client\n  ```\n- Replace `\u003clanguage\u003e` with the desired programming language.\n\n4. **Generate Server Stubs**\n\n- Generate a server stub:\n  ```bash\n  openapi-generator-cli generate -i openapi.yaml -g \u003cframework\u003e -o ./server\n  ```\n- Replace `\u003cframework\u003e` with the desired framework.\n\n5. **Run a Mock Server**\n\n- Install Prism:\n  ```bash\n  npm install -g @stoplight/prism-cli\n  ```\n- Start the mock server:\n  ```bash\n  prism mock openapi.yaml\n  ```\n\n6. **Validate the OpenAPI File**\n\n- Use [Swagger Validator](https://validator.swagger.io/):\n  - Upload `openapi.yaml` or paste its content to check for errors.\n\nThis guide enables you to view, test, and utilize the API. Feel free to explore the OpenAPI Specification and integrate it with your applications.\n\n## **Setup Instructions**\n\n### **Backend**\n\n1. Clone the repository and navigate to the backend folder:\n   ```bash\n   git clone https://github.com/hoangsonww/Tic-Tac-Toe-Fullstack-Game.git\n   cd Tic-Tac-Toe-Fullstack-Game/backend\n   ```\n2. Install dependencies:\n   ```bash\n   npm install\n   ```\n3. Set up environment variables in a `.env` file:\n   ```plaintext\n   MONGO_URI=your-mongodb-uri\n   JWT_SECRET=your-jwt-secret\n   ```\n4. Start the server:\n   ```bash\n   npm start\n   ```\n\n### **Frontend**\n\n1. Navigate to the frontend folder:\n   ```bash\n   cd Tic-Tac-Toe-Fullstack-Game/frontend\n   ```\n2. Install dependencies:\n   ```bash\n   npm install\n   ```\n3. Start the React app:\n   ```bash\n   npm start\n   ```\n\n### **Access the App**\n\n- Frontend: `http://localhost:3000`\n- Backend API: `http://localhost:4000`\n- Swagger UI: `http://localhost:4000/api-docs`\n- Live: `https://tictactoe-ai-app.vercel.app/`\n- Live API: `https://tic-tac-toe-fullstack-game.onrender.com/`\n\n## **Containerization**\n\nThe **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:\n\n1. **Build and Run the Docker Image**:\n\n   ```bash\n   docker-compose up --build\n   ```\n\n2. **Access the App**: Visit `http://localhost:3000` to access the frontend and `http://localhost:4000` for the backend API.\n\n## **Contributing**\n\n1. Fork the repository.\n2. Create a new branch:\n   ```bash\n   git checkout -b feature/your-feature\n   ```\n3. Commit your changes:\n   ```bash\n   git commit -m \"Add your feature\"\n   ```\n4. Push to your branch:\n   ```bash\n   git push origin feature/your-feature\n   ```\n5. Submit a pull request.\n\n## **License**\n\nThis project is licensed under the **MIT License**. See the [LICENSE](LICENSE) file for details.\n\n## **Author**\n\n- **[Son Nguyen](https://github.com/hoangsonww)**\n- Feel free to reach out with any questions or suggestions.\n\n---\n\n**Created in 2024 with ❤️ by [Son Nguyen](https://github.com/hoangsonww)**\n\n[🔝 Back to Top](#docuthinker---ai-powered-document-analysis-and-summarization-app)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoangsonww%2Ftic-tac-toe-fullstack-game","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoangsonww%2Ftic-tac-toe-fullstack-game","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoangsonww%2Ftic-tac-toe-fullstack-game/lists"}