Tic Tac Toe

A webapp developed to practice React. This project is a simple implementation of the classic Tic Tac Toe game, allowing users to play against Anthropic's Claude AI in a fun and interactive way. The game features a clean interface and provides real-time feedback on the game state.

Table of Contents

• Technologies Used
• Hosting the Application Locally
  • Clone the Repository
  • Install Dependencies
  • Insert Your Anthropic API Key
  • Start the Development Server
  • Start the Client
  • Open in Browser
• Screenshots of the game

Technologies Used

• React: A JavaScript library for building user interfaces.
• JavaScript: The programming language used for game logic.
• TailwindCSS: For styling the game components.
• HTML: For structuring the web application.
• Netlify: For hosting the client.
• Render: For hosting the server.
• Anthropic API: Choice for the AI to prompt to.

Hosting the Application Locally

To host the Tic Tac Toe application locally, follow these steps:

1. Clone the Repository:

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

2. Install Dependencies: Make sure you have Node.js installed. Then run:

   npm install

3. Insert Your Anthropic API Key: Create a .env file in the root of your project (if it doesn't exist) and add your Anthropic API key:

   ANTHROPIC_API_KEY=your_api_key_here
   

4. Start the Development Server: Navigate to the server folder and start the server by running:

   npm start dev

5. Start the Client: In another terminal window, navigate back to the client directory and run:

   npm start dev

6. Open in Browser: Navigate to http://localhost:3000 in your web browser to view the application.

Screenshots of the game

Start screen of the game

Middle of a game

Winning state of the game