Tic-Tac-Toe

Brief Description

In this project, I created a Tic-Tac-Toe game to strengthen my abilities in React and RESTful API development. The game offers players two difficulty settings, including an unbeatable option. Additionally, it supports multiplayer functionality and features a scoreboard to track progress. Through this project, I deepened my understanding of React coding principles and gained exposure to a new algorithm, enhancing my skills along the way.

You can play the game on this link: https://alkindi17.github.io/tictactoe/.

Project Goals

• Develop a working Tic-Tac-Toe game.
• Build a Clean UI.
• Implement different difficulty levels.
• Implement the ability to compete with another player.
• All computations and calculations should run on a server, and be called through RESTful API, to allow reusability of functions by others or in other projects.

Process

In this project, I used React.js for frontend and Flask (Python Framework) for the backend.

Frontend codebase on Github: Tic-Tac-Toe Game

Backend codebase on Github: Tic-Tac-Toe API

The frontend development proved straightforward with React.js. Using JavaScript for interactions and HTML/CSS for the interface. Additionally, I employed the Tailwind CSS library to streamline styling, offering a quicker and more efficient alternative to traditional CSS.

Regarding backend development, I debated between Express.js (JavaScript Framework) and Flask (Python Framework) but chose Flask to enhance my Python skills, considering I was already working with JavaScript on the frontend. While much of the backend code was straightforward, implementing the unbeatable AI option posed a challenge. To address this, I delved into researching for algorithms and ultimately settled on the Minimax algorithm, which I'll detail in the following section.

Minimax Algorithm

The Minimax algorithm is a strategic approach aimed at maximizing the chances of winning, primarily employed in two-player, zero-sum games. It works by recursively analyzing possible moves, assuming both players play optimally. By iteratively evaluating outcomes, it identifies the move that offers the most advantageous result for the employing player.

Conclusion

In summary, this project was a valuable learning experience in React and RESTful API development. By creating a Tic-Tac-Toe game with features like different difficulty levels, multiplayer mode, and an unbeatable AI using the Minimax algorithm, I deepened my skills and knowledge. It provided an opportunity to explore both frontend and backend development while delivering an engaging gaming experience.