Follow these steps to run the Tic-Tac-Toe project locally on your machine:
-
Clone the repository: First, open a terminal and run the following command to clone the GitHub repository:
git clone https://github.com/your-username/tic-tac-toe.git
-
Navigate to the project directory: Once the project is cloned, change into the project directory:
cd tic-tac-toe
-
Install dependencies: Install the required dependencies using
npm
oryarn
. Run one of the following commands:npm install
or
yarn install
-
Run the project: After the dependencies are installed, you can start the project using:
npm start
or
yarn start
-
Open the app: Once the project starts, it will automatically open in your default browser at:
http://localhost:3000
-
Build the project for production (optional): If you want to build the app for production, run the following command:
npm run build
This will create an optimized production build in the
/build
directory.
Dependencies:
- React: For building the UI components and managing state.
- Tailwind CSS: For styling the application with utility-first CSS.
- LocalStorage: Used to store player stats persistently.
- useState, useEffect (React Hooks): For managing state and side effects in the app.
Technology Stack:
- JavaScript (ES6+)
- React.js
- Tailwind CSS
- HTML5/CSS3
- Local Storage API
About the Game
Welcome to Tic-Tac-Toe, a classic game with a modern twist! This project is built using the latest web development technologies to ensure a smooth, responsive, and engaging gameplay experience.
- Play in both Light and Dark modes.
- Track player wins across sessions with persistent storage using LocalStorage.
- Undo moves with our handy "Time Travel" feature.
- Smooth, dynamic UI powered by React components.
- Quick and modern styling using Tailwind CSS.
- React.js: Handles the logic behind the game and ensures the app is fast and responsive.
- Tailwind CSS: Provides the elegant styling of the app.
- Local Storage: Keeps track of player statistics, so your wins (or losses) are always remembered.
- JavaScript (ES6+): Powers the game’s logic, with modern syntax and features.
- HTML5 & CSS3: Forms the structure and basic styling of the app.
- React Hooks: Manages the state and side effects like game logic, dark mode toggling, and persistent stats tracking.
This app is an open-source project and a testament to the power of modern web technologies. Feel free to explore the code and contribute on GitHub!