Peer-to-Peer Tic-Tac-Toe

A comprehensive Tic-Tac-Toe game built with React, based on the official React Tutorial. This project implements all suggested extensions from the tutorial and extends it into a peer-to-peer multiplayer game. WebRTC was chosen for this purpose to minimize infrastructure requirements.

Demo

You can try out the app on this repository's GitHub page.

Please note that the initial connection to the signaling server may take up to a minute, as it might need to wake from suspension due to free hosting limitations.

Technologies Used

• React - Frontend framework
• JavaScript (ES6+) - Programming language
• HTML5 - Markup
• CSS3 - Styling
• WebRTC - Peer-to-peer communication
• Node.js - Backend runtime for signaling server
• Socket.io - Signaling server and client for WebRTC

Project Structure

The project is organized into two subpackages using npm workspaces (see root package.json):

• ./app: The frontend react app

• ./signaling-server: The backend for WebRTC signaling

Getting Started

Prerequisites

• Node.js (developed using v22)
• npm

Running the Project

1. Clone the repository:

   git clone https://github.com/crochethk/tictactoe-react.git
   cd tictactoe-react

2. Install dependencies for both workspaces:

   npm start install:all

3. Start the signaling server:

   npm run start:server

4. Start the React development server in a second terminal:

   npm run start:app

5. If your browser did not open automatically, navigate manually to http://localhost:3000/tictactoe-react.

6. You should now see something similar to this:

   

How to Play

1. Upon loading the application, you will see a shareable link for multiplayer games.
2. Either open the link in a new tab or share it with another player.
3. Once your opponent has connected, player symbols ('X', 'O') are automatically assigned via random negotiation.
4. The player with the 'X' symbol takes the first turn.
5. On your turn, you can either:
   • Click on one of the free squares to place your assigned symbol, or
   • Navigate in the move history by clicking one of the respective buttons.

Adjusting Configuration

There are several environment dependent options. You can configure them, for example, using .env files. Refer to the example files — app/.env-example and signaling-server/.env-example — for details.

Deploying

Before deploying you probably will need to adjust the following values (see Adjusting Configuration):

• Backend

  • CORS_ORIGINS: Include the origin from where the frontend will be hosted.

• Frontend

  • REACT_APP_SIGNALING_SERVER: Set this to the signaling server's public address.

If .env files are not supported, you might need to configure these values in your hosting provider's settings panel.

Frontend

This repo uses GitHub pages to host the frontend application. To deploy the current state the following command is used, which will build and push to the gh-pages branch:

npm run deploy:app

Backend

Deploy the Node App (./signaling-server) using a service provider of your choice (I use Render for the demo).

Tutorial Extensions Implemented

As mentioned, all optional extensions from the React tutorial have been implemented:

• Show appropriate text for the currently selected move in history list instead of a button
• Rewrite Board component to use loops instead of hardcoding squares
• Add toggle button to sort moves in ascending or descending order
• Highlight winning squares when game ends and display draw message if there is no winner
• Show the location (row, col) for each move in the history list

Contributing

This is a learning project, but feel free to:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

License

This project is open source and available under the MIT License.

Acknowledgments

• Built following React's official tutorial
• Created as part of learning React fundamentals and WebRTC technology