https://github.com/hoangsonww/tic-tac-toe-fullstack-game
đšī¸ 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.
https://github.com/hoangsonww/tic-tac-toe-fullstack-game
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
Last synced: 6 months ago
JSON representation
đšī¸ 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.
- Host: GitHub
- URL: https://github.com/hoangsonww/tic-tac-toe-fullstack-game
- Owner: hoangsonww
- License: mit
- Created: 2024-11-26T18:01:02.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2025-03-17T15:36:51.000Z (7 months ago)
- Last Synced: 2025-03-27T19:39:57.002Z (7 months ago)
- 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
- Language: TypeScript
- Homepage: https://tictactoe-ai-app.vercel.app
- Size: 22.1 MB
- Stars: 21
- Watchers: 18
- Forks: 14
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
# **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](#overview)
- [Live Deployment](#live-deployment)
- [Features](#features)
- [Technologies](#technologies)
- [User Interface](#user-interface)
- [File Structure](#file-structure)
- [API Endpoints](#api-endpoints)
- [Setup Instructions](#setup-instructions)
- [Containerization](#containerization)
- [Contributing](#contributing)
- [License](#license)
- [Author](#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](https://tictactoe-ai-app.vercel.app/)
- **Backend**: [Tic Tac Toe Pro API](https://tic-tac-toe-fullstack-game.onrender.com/)
- **Backup**: [Netlify Deployment](https://tictactoe-ai-game.netlify.app)
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](https://editor.swagger.io/).
- 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](https://www.postman.com/):
- Open Postman â Import â Select `openapi.yaml`.
- Test the API endpoints directly from Postman.
- Or use [Swagger UI](https://swagger.io/tools/swagger-ui/):
- Provide the file URL or upload it to view and test endpoints.
3. **Generate Client Libraries**
- Install OpenAPI Generator:
```bash
npm install @openapitools/openapi-generator-cli -g
```
- Generate a client library:
```bash
openapi-generator-cli generate -i openapi.yaml -g -o ./client
```
- Replace `` with the desired programming language.
4. **Generate Server Stubs**
- Generate a server stub:
```bash
openapi-generator-cli generate -i openapi.yaml -g -o ./server
```
- Replace `` with the desired framework.
5. **Run a Mock Server**
- Install Prism:
```bash
npm install -g @stoplight/prism-cli
```
- Start the mock server:
```bash
prism mock openapi.yaml
```
6. **Validate the OpenAPI File**
- Use [Swagger Validator](https://validator.swagger.io/):
- 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:
```bash
git clone https://github.com/hoangsonww/Tic-Tac-Toe-Fullstack-Game.git
cd Tic-Tac-Toe-Fullstack-Game/backend
```
2. Install dependencies:
```bash
npm install
```
3. Set up environment variables in a `.env` file:
```plaintext
MONGO_URI=your-mongodb-uri
JWT_SECRET=your-jwt-secret
```
4. Start the server:
```bash
npm start
```
### **Frontend**
1. Navigate to the frontend folder:
```bash
cd Tic-Tac-Toe-Fullstack-Game/frontend
```
2. Install dependencies:
```bash
npm install
```
3. Start the React app:
```bash
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**:
```bash
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:
```bash
git checkout -b feature/your-feature
```
3. Commit your changes:
```bash
git commit -m "Add your feature"
```
4. Push to your branch:
```bash
git push origin feature/your-feature
```
5. Submit a pull request.
## **License**
This project is licensed under the **MIT License**. See the [LICENSE](LICENSE) file for details.
## **Author**
- **[Son Nguyen](https://github.com/hoangsonww)**
- Feel free to reach out with any questions or suggestions.
---
**Created in 2024 with â¤ī¸ by [Son Nguyen](https://github.com/hoangsonww)**
[đ Back to Top](#docuthinker---ai-powered-document-analysis-and-summarization-app)