https://github.com/chen-abudi/tic-tac-toe-realtime
🕹️ Challenge your friends in real-time Tic Tac Toe! Smooth turns, live updates, and a slick UI inspired by Figma — All in one fun little package.
https://github.com/chen-abudi/tic-tac-toe-realtime
design-system express javascript modular-architecture monorepo nextjs nodejs react socket-io storybook tailwindcss test-client typescript vite websocket yarn-workspaces zustand
Last synced: 6 months ago
JSON representation
🕹️ Challenge your friends in real-time Tic Tac Toe! Smooth turns, live updates, and a slick UI inspired by Figma — All in one fun little package.
- Host: GitHub
- URL: https://github.com/chen-abudi/tic-tac-toe-realtime
- Owner: Chen-Abudi
- Created: 2025-04-12T16:17:08.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-04-23T20:09:51.000Z (6 months ago)
- Last Synced: 2025-04-23T20:40:59.219Z (6 months ago)
- Topics: design-system, express, javascript, modular-architecture, monorepo, nextjs, nodejs, react, socket-io, storybook, tailwindcss, test-client, typescript, vite, websocket, yarn-workspaces, zustand
- Language: JavaScript
- Homepage:
- Size: 2.84 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎮 ⭕❌ tic-tac-toe-realtime
A real-time multiplayer Tic Tac Toe game powered by **Node.js**, **Socket.IO**, and a cool UI inspired by a Figma design.
This monorepo is build with a modular mindset and includes both the **backend server**, the upcoming **frontend app**, and a **shared design system** with Storybook.
---
## ✨ Features
- Real-time multiplayer game via **`WebSockets`**
- Game rooms and dynamic player sessions
- Turn-based game logic with win/draw detection
- Smooth gameplay with state synchronization
- Modular monorepo powered by **`Yarn Workspaces`**
- Shared Design System using **`Storybook`** (in progress)
- Inspired by [this Figma design](https://www.figma.com/design/ajH9a7AsS7F58ysatXikmv/tic-tac-toe)
---
## 🧱 Tech Stack
### Backend
- ⚙️ Node.js + Express
- 🔌 Socket.IO (WebSockets)
- 🧠 Game logic in-memory (scalable later)
- 🔤 TypeScript, ts-node-dev
### Frontend (In Progress)
- ⚛️ React + Next.js
- ⚡ Vite for ultra-fast development
- 🎨 TailwindCSS + Custom animations
- 💾 Zustand for local state management
- 🧩 Component-driven with reusable UI
- 📕 Storybook for Design System (coming soon)
- 🧼 ESLint + Prettier (planned to be added later)
### Dev / Tooling
- 🧶 Yarn Workspaces
- 🗂️ Monorepo Layout
- 📁 Modular architecture
- 🧪 `test-client` for local socket testing
- 📦 GitHub + Feature branch workflow
---
## 📁 Project Structure
```txt
apps/
├── server/ # Backend API & Socket.IO server
├── client/ # Frontend app
└── test-client/ # Simple socket.io client for testing
packages/
└── shared
└── ui/ # Shared UI components (Storybook)
```
---
🛣️ Roadmap
- [x] Setup monorepo with Yarn Workspaces
- [x] Build backend with room management + game logic
- [x] Add test-client for real-time testing
- [x] Create frontend app and hook up sockets
- [x] Add responsive styles and transitions for gameplay
- [x] Fix game state / UI sync across clients
- [**In Progress**] Build out UI with Tailwind & match Figma
- [**In Progress**] Create design system with Storybook
- [ ] Add game animations and sound effects
- [ ] Add persistent database (optional)
- [ ] Add lobby / room browser (later on)
- [ ] Finalize design system in Storybook
---