Somtozech/tic-tac-toe

A simple multiplayer tic-tac-toe game using firebase and react

Multiplayer Tic-Tac-Toe Workshop

Welcome to the Multiplayer Tic-Tac-Toe Workshop! In this workshop, we will build a real-time multiplayer tic-tac-toe game using Firebase and React

Overview

This workshop provides step-by-step guidance on building a fully functional multiplayer tic-tac-toe game. Participants will learn how to set up the project, implement the game logic, manage player turns, handle real-time updates using Firebase, and create a user interface

Prerequisites

• Familiarity with JavaScript and ES6 syntax
• Node.js and npm installed on your machine
• Basic knowledge on setting up a Firebase project

Setup

1. Clone the repository:

   git clone https://github.com/Somtozech/tic-tac-toe.git
   cd tic-tac-toe

2. Install dependencies:

   yarn install

3. Create a Firebase project:

• Go to the Firebase Console and create a new project.
• Create a real time database for the project
• Enable Anonymous Sign in in Authentication for the project
• Add an app in the project. Retrieve your Firebase configuration values (apiKey, authDomain, etc.) for the app

4. Set up environment variables:

• Create a .env file in the root directory of the project.

• Add the following environment variables to the .env file:

  VITE_FIREBASE_API_KEY=your_api_key
  VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
  VITE_FIREBASE_DATABASE_URL=your_database_url
  VITE_FIREBASE_PROJECT_ID=your_project_id
  VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
  VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
  VITE_FIREBASE_APP_ID=your_app_id
  VITE_FIREBASE_MEASUREMENT_ID=your_measurement_id

5. Start the development server:

   yarn dev

About

This project was created as part of a workshop conducted by me for Google I/O Extended 2023 Enugu. Feel free to explore the code and use it as a reference for building your own multiplayer games!

Images