Building a Tic-Tac-Toe Game Using React

Welcome to my version of the classic Tic-Tac-Toe game! I created a Tic-Tac-Toe game using React and SCSS, completing it in around 6 hours. The game features single-player mode against the computer, a winner announcement popup, and win counters for both players. While the grid is customizable to n x n, the current winning logic supports only 3 x 3. Future improvements include smarter computer moves and real-time multiplayer functionality.

Overview

• Total development time needed: ~6 hours
• Technologies used: JavaScript (React) + SCSS

Game Rules

1. Objective

The goal of the game is to align three of your symbols (X or O) in a horizontal, vertical, or diagonal row on a 3 x 3 grid.

2. Turn Order

• Player A always starts and plays as X.
• The computer opponent plays as O and makes its move immediately after Player A.

3. Gameplay

• Players take turns marking empty cells on the grid.
• The first player to align three symbols wins the game.

4. Winning Conditions

A player wins if they achieve:

• Three symbols in a horizontal row
• Three symbols in a vertical column, or
• Three symbols in a diagonal line

5. Draw

If all cells are filled and no player meets the winning conditions, the game ends in a draw.

6. Score Tracking

Win counters keep track of the total number of victories for both Player A and the computer.

Features Implemented (MVP)

Here’s what’s included in this version of the game:

1. Play against the computer: A fun single-player mode where you take on the computer
2. Winner announcement popup: At the end of each game, a popup reveals the winner.
3. Win counters: Track total wins for both the player and the computer.
4. Customizable grid: Create an n x n grid (though the winning logic currently supports only 3 x 3).

Possible Enhancements

Looking ahead, here are a few areas for improvement:

1. [UX] Local storage for scores: Save game scores locally so they persist after refreshing the browser.
2. [UX/Tech] Smarter computer moves: Replace random moves with an algorithm for more competitive gameplay.
3. [UX] Real-time multiplayer: Enable two players to compete in real-time using technologies like Socket.io.
4. [Tech] Advanced SCSS organization: Refactor SCSS using mixins, variables, and better structuring techniques.
5. [UX/Tech] Graceful degradation: Ensure compatibility with non-modern browsers for broader support.

Setup and Development

Prerequisites

Before diving in, ensure you have Node.js installed (recommended version: 6.4.1).

Getting Started

1. Clone the repository from GitHub.

2. Install dependencies:

npm install

3. Start the development server:

npm start

• Open http://localhost:3000 in your browser to view the app.

4. (Optional) Build the project for production:

npm run build

This creates an optimized build folder, ready for deployment.

Testing

Run tests in interactive watch mode with:

npm test

Technical Details

File Structure

The project follows the standard Create React App structure with a modular component-based approach.

src
├── index.js
├── App.css
├── App.js
├── Components
│   └── Board
│       ├── Board.scss
│       ├── Cross.jsx
│       ├── ScoreBoard.jsx
│       ├── index.jsx
│       ├── Round.jsx
│   └── Footer
│       ├── Footer.scss
│       ├── index.jsx
│   └── Header
│       ├── Header.scss
│       ├── index.jsx
├── utils
│   └── lib.js
public
├── index.html

Description and Approach

• The app was bootstrapped with Create React App for a quick MVP setup.
• The game initializes an n x n grid for gameplay.
• Each cell has a click event listener, allowing Player A (X) to make the first move.
• The computer’s turn is simulated with a random cell selection logic, which will need enhancement for custom grid sizes.
• Used SCSS for styling with a focus on speed over complexity during development.

Testing Approach

Manual Tests

• Ensure the computer makes a move after Player A finishes.
• Verify the game ends with a winner announcement banner.
• Test automated moves by the computer.

Potential Unit Tests

• Check if the computer moves after Player A.
• Validate that the game displays the correct winner.
• Test edge cases for grid initialization and user interactions.

Conclusion

Thank you for exploring my project! 

You can find the complete source code and contribute to this project on GitHub. Let’s build cool stuff together!