Piotr Szaran

Project Number 2

Piotr Szaran
3-4 Minutes
ai tic tac toe
Source Code: GitHub - iPior/react-tictactoe-game

Overview

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.

Goals of the Project

  • Practice using React and its key features such as:
    • Component-based architecture
    • Dynamically rendered code
    • State management
  • Deploy code with sensitive API keys to production

Technologies Used

  • React: A JavaScript library for building user interfaces.
  • JavaScript: The programming language used for game logic.
  • Tailwind CSS: 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.    

Backstory

Following the completion of my first project, I wanted to continue learning JavaScript and thought React was the obvious next step. Instead of continuing with freeCodeCamp.com, I explored other free resources and found a React 19 course on Scrimba. I watched the entire course while developing the projects locally on my laptop. Despite the instructor's claim that these projects were great for a resume, I disagreed and chose not to include them in my portfolio website. This was because I felt that simply following a series of videos and skipping ahead when stuck didn't truly test my knowledge.

To genuinely challenge myself, I decided to develop an app based on an original idea that I found interesting. I wanted something that would manage state, have a responsive design, and be hosted through a provider. After considering several game ideas, I settled on TicTacToe. To make it more interesting, I chose to prompt Anthropic’s AI to make the moves instead of writing a minimax algorithm, which would always win due to the deterministic nature of TicTacToe.

What I Learned

  • I learned a lot from this project, especially in the React department:
    • Hooks, state management, JSX components
    • Client-side code vs. server-side code
  • I learned about mobile-first design and the benefits of using Tailwind CSS
  • AI prompting and integrating AI into a web application
  • Vite and writing code for production
  • Hosting a site for production using modern tools and services like Render and Netlify. I also learned that both the frontend and backend need to be separately hosted.

What I Would Do Differently

  • If I were to code this project again as a novice to React and Tailwind, I would focus on writing mobile-first responsive design code and using Tailwind’s container class.
  • Perhaps build a different project for learning to integrate AI. A simple minimax algorithm would have made the game as challenging as possible, whereas AI prompting resulted in some very easy games.
  • Use TypeScript instead of JavaScript, especially after the last project was written in JavaScript, and I felt confident in my understanding.