igorssc / tic-tac-toe

Recreation of tic tac toe

Project developed in order to improve software development skills. The project is based on the tic-tac-toe game, known worldwide.

• Technologies
• How to run
• Hygraph
• Environment variables
• Preview
• License

✨ Technologies

This project was developed with the following technologies:

• React
• Vite
• TypeScript
• CSS Modules
• GraphQl
• Apollo Client

🚀 How to run

• Clone the repository

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

cd tic-tac-toe

• Install dependencies

yarn

# or

npm init

• Put your environment variables in a file .env at the root of the project

• Start the server

yarn dev --port 3000

# or

npm run dev -- --port 3000

You can now access localhost:3000 from your browser.

🎲 Hygraph

To configure the content storage service, you must follow a few steps:

1. Go to the website https://hygraph.com and create a new project;

2. Create a schema model, named "Record", as in the image below:

3. In the project settings, copy your Master Environment Url:

It will be used in the environment variables

4. Create an Permanent Access Token:

5. Change the permissions of your permanent access token, and leave it as below:

🔐 Environment variables

In this project, environment variables are used, to connect with the content storage service hygraph.

For the correct operation of the system, the following environment variables must be used:

VITE_API_URL=your-hygraph-master-environment-url

VITE_API_ACCESS_TOKEN=your-hygraph-permanent-token

🪄 Preview

Access https://tic-tac-toe-igorssc.vercel.app

📝 License

This project is under MIT license. See the archive LICENSE to more details.

---

Made with 💜 by IGS Design - Igor Santos 👋