Tech Stack: Vue.js, Express.js, Socket.IO, OpenAI GPT-4

A real-time multiplayer word game inspired by Scattergories, where players compete to come up with unique answers within categories.

Resource Link
Play Now categories.live
Frontend github.com/zachbroad/scatterclient
Backend github.com/zachbroad/scatterserver

Motivation#

I was obsessed with Scattergories but couldn’t always find people to play with…

I couldn’t find any similar versions of Scattergories that both supported single-player and multi-player modes and were scored automatically, so I built my own for myself and friends to play.

Implementation#

I chose Vue.js for the frontend to explore the framework and Socket.IO as an abstraction layer over WebSockets to handle real-time communication.

I had mostly used React up until this point, but wanted to see how Vue compared. (I wish React had directives like Vue!)

For the backend, I chose Node.js / Express.js as all I needed was something lightweight to handle the WebSocket connections.

With GPT-4 being brand new at the time, it was the perfect model to power the answer validation.

Core Components#

  • Game Engine: Manages game state, rounds, scoring, and letter selection
  • Room Management: Handles creation and management of game rooms, including public/private rooms
  • Socket.IO Integration: Enables real-time bidirectional communication
  • GPT-4 Integration: Provides AI-powered answer validation

Key Features#

  • Real-time multiplayer support with Socket.IO
  • Dynamic room creation and management
  • Public and private game rooms
  • Single-player mode
  • AI-powered answer validation using GPT-4
  • Live chat functionality in rooms
  • Automatic game state management
  • Configurable game settings

Tech Stack#

The server is built with:

The client is built with:

View on GitHub | Play Online