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.
- 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.
- 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.
- 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.
- React
- Material-UI
- Axios
- React Router
- React Hook Form
- Local Storage for theme persistence
- Node.js
- Express.js
- MongoDB
- Mongoose ODM
- Socket.io
- JWT Authentication
- Swagger UI
- dotenv
- CORS Middleware
- 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.
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:
The landing page showcases the game’s features, including multiplayer gameplay, AI difficulty levels, and global leaderboards.
The game page allows users to play Tic Tac Toe against friends or AI, with real-time updates and game results.
The game page features a responsive game board with real-time updates for player moves and game results.
The game page allows users to play against an AI opponent with varying difficulty levels (easy, medium, hard).
The game page also allows users to play against friends locally on the same device.
Example of multiple board sizes: 8×8
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)
The leaderboard page displays the top-ranked players globally. Users can view their own ranking and search for other players.
The profile page allows users to view and update their profile information, including a bio, social media links, and date of birth.
The profile page also features a search bar to find other users by their username.
The login page allows users to sign in with their email and password, with options for password recovery and new user registration.
The registration page enables new users to create an account with their email, username, and password.
The forgot password page allows users to recover their account by verifying their email address.
The app is fully responsive, providing an optimal experience on mobile devices with smooth transitions and interactive elements.
The mobile drawer allows users to navigate between pages and access their profile, leaderboard, and settings.
