Tic-Tac-Toe in React!

This is an implementation of Tic-Tac-Toe written using the ReactJS framework.

Table of contents

• General info
• Screenshots
• Technologies
• Features
• Status
• Setup
• Control Flow
• Documentation
• Contact

General info

This app is a one-player game of Tic-Tac-Toe. The computer opponent uses a Minimax Algorithm to determine its move. In keeping with how this game is typically played in real world, the initial move is assigned randomly to either the player or the computer. The 'X' and 'O' delimiters are also assigned randomly. This project was written for the following reasons:

• Demonstrate my ability to ...

  • ... use the React framework.
  • ... integrate type-checking in React applications.
  • ... integrate Node, ESLint, and Webpack into my React projects.
  • ... implement a recursive algorithm.

• Give myself the opportunity to ...

  • ... construct a build scaffold to stream-line production of future React projects.
  • ... learn and implement best-practices in my code.
  • ... keep myself up-to-date on skills that have already been acquired (Node, Webpack, ESLint, Sass, etc).
  • ... provide a foundation for learning other React technologies (React Router, Redux, and React-Native).

Screenshots

Technologies

• React - version 16.8.6
• Webpack - version 4.32.0
• Node - version 10.15.3
• ESLint - version 5.16.0
• Sass - version 3.6.0
• Bootstrap - version 4.3.1
• Babel - version 7.4.6

See the 'package.json' file in the root directory for complete and detailed information on all technologies used as well as versioning.

Features

• Randomized selection of 'X' and 'O' mimics how the game is played in the real world.
• Randomized Intelligence - Computer can play the game perfectly, but has a random chance to blunder a move depending on its intelligence.
• Initial move is randomly assigned to mimic how the game is typically played in the real world.
• Score is tracked and can be cleared as desired.
• Game can be reset as desired. (Reset results in a loss!)

Status

This project is currently being actively maintained and is ready for publishing. A live version can be accessed via my portfolio page.

Setup

You can find a live version of this project on my portfolio page or you can alternatively click here to go directly to the project. If you'd like to install a local copy of this program, follow the steps below:

• Open your Command Prompt / Terminal and navigate to the location you'd like to create the folder with the associated files.
• Clone this git repository to that location by typing in the following command into your terminal: git clone https://github.com/Adil-Iqbal/tic-tac-toe-react.git
• Once the repository is downloaded, you will need to install the node modules required to run and develop this app further. Type this command into your terminal: npm install
• The previous command may take a while, but after all node modules are done downloading, you can now run the app easily by typing this command into your terminal: npm start

Control Flow

When perusing the code for this project, it may be helpful to have this guide handy. It pertains in particular to the .\src\scripts\App.jsx file.

Documentation

Most of the business logic of this web app can be found in the .\src\scripts\App.jsx file and the .\src\scripts\utility.js file. I've provided documentation on both which you will see when perusing the code.

If you'd like, a markdown version of the documentation has been provided below:

• App
• utility

Contact

Created by Adil Iqbal.

E-mail: main@adil-iqbal.com

---

© 2019 Adil Iqbal