Play Tic-Tac-Toe with other players online including a handy chat box with which to exchange pleasantries (and smack talk!) during your games. It's powered by a combination of Ably (for real-time pub/sub communication), Next.JS (for front-end React and a simple serverless API), and Vercel KV (Redis) for state persistence.
Play Tic-Tac-Toe on the deployed version.
(If you don't have anyone else to play with, you can be your own opponent by opening up the URL in a separate browser or a private/incognito window/tab.)
This project was created for a series of blog posts, so it has five permanent branches to represent steps along the way.
To follow along with the posts, you should create a new fork, being sure to uncheck the default "Copy the main branch only" field so that you get all branches. Then checkout 1-initial-game to get started.
To deploy your own version, you'll need a few things:
- Node.js
- An Ably account
- The Next.JS CLI
- A Vercel account
Armed with those dependencies, you'll need to:
- Create an app in Ably for your project
- Fork this repo and create a project in Vercel with the URL to your new repo
- Create a new KV Database in Vercel and connect it to your project
- Make a copy of the env.template file named
.envand populate the values of those keys with the values from Ably and Vercel KV.
cp env.template .envABLY_API_KEY=
KV_URL=
KV_REST_API_URL=
KV_REST_API_TOKEN=
KV_REST_API_READ_ONLY_TOKEN=
Once you have the prerequisites and setup, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
This is a Next.js project bootstrapped with create-next-app.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!