Back to Projects
Done

Tic-Tac-Toe in n8n

n8nRedisVueTypeScriptBunPoCGame

This project is a fun experiment: a fully playable browser-based tic-tac-toe game where n8n is the whole backend.

There is no separate API server or hosting platform — just an n8n instance with access to Redis and a small frontend built with Vite and Vue.

Live Demo and Source Code

How It Works

The whole idea is to see how far you can push n8n as an application runtime. The architecture is intentionally simple:

  • A static webhook in n8n serves the built frontend files (HTML, JS, CSS) that were previously uploaded by a deploy script.
  • An API webhook handles the game logic: creating games, making moves, checking winners and returning the current board state.
  • Redis stores the game state between requests.
  • A Bun-based deploy script builds the frontend and uploads the assets to n8n workflow variables.

This is all wired together so that when you run bun run deploy, the latest build is pushed into n8n, and the static webhook starts serving the new version immediately.

Frontend

The frontend is a small Vite + Vue app:

  • Renders the 3×3 board and current player.
  • Talks to the n8n API webhook for every move.
  • Shows game result (win/draw) based on API responses.

The UI is intentionally minimal — the interesting part here is how the backend is built.

Backend in n8n

The workflow file (n8n/workflow.json) contains:

  • Static webhook node to serve built files.
  • API webhook node to handle game actions: start, move, get state and stats.
  • Redis nodes for reading and writing game state.
  • Logic to validate moves and detect wins.

The deploy webhook accepts a secret header (AUTH_KEY) and updates the stored assets only when the key is correct.

Why This Project Exists

This is not production architecture and should not replace a proper backend. It is a playful experiment that explores:

  • How far workflow tools like n8n can be pushed beyond the usual “automation” use case.
  • How to combine n8n, Redis and a static frontend to build something interactive.
  • A fun way to show off n8n webhooks and Redis integration.

In a real-world environment you would use:

  • A CDN or static hosting for frontend files.
  • A dedicated backend service for game logic.
  • A proper Redis client library in that backend.

But as a PoC, this project demonstrates that you can build and host a small game entirely inside n8n — just because you can.