Realtime Multiplayer Bingo 🔢👥

A fun and interactive multiplayer Bingo game where you can play with a friend, no matter where you are. The game lets one person create a game and share a code with their friend, who can then join remotely. You can chat with each other, send reactions, and enjoy the game together, all in real-time. Whether you're celebrating a win or just having fun, the game keeps everything in sync so you can enjoy a smooth, interactive experience!

What is bingo?

Its is a game where two players play against each other. Both player draws a 5 by 5 grid of boxes (mostly 5 by 5, can differ). And fill it out with numbers from 1 to 25 (can increase depending on the grid size) in random positions in each cell with no repetitions. Once this is done the game starts. One player calls out a number and both players must cross out that number, then other player has to do the same and this. Whenever a full row, column, or a diagonal is fully crossed out one letter of BINGO is crossed out (the total number depends on the number of fully crossed rows, columns, or diagonals).

Once each letter of BINGO is fully crossed out, the player has to call out BINGO, who ever calls bingo first wins the game.

Read the blog here to learn more about the game and how I built it.

Table of Contents

• Motivation
• Features
• Tech Stack
  • Frontend
  • Backend
• Local Setup
  • Frontend
  • Backend
• Final Thoughts

Motivation

Once, I saw two of my friends play bingo and saw their paper, it had bingo boxes drawn all over it. You couldn't reuse boxes and needed to draw new ones to play again. and thought to myself it would be fun and much easier to play the same, but on a phone. And at the same time I was searching for my next side project. I knew I had to use websockets for this and I haven't used websockets before. So I thought this would be very interesting and it was.

When I came back to my room I created a mono repo with the backend and frontend. Initialized the frontend with react and backend in express. Both using typescript. Progress was very slow (was preoccupied with other things) I worked on this on mostly on the weekends.

Features

• Real-time Gameplay: Players can interact with the game in real-time. Actions such as marking cells and declaring a win are instantly communicated to the other player.
• Multiplayer: One player acts as the host, and the other as a guest. The game is played remotely using a generated game code.
• Chat System: Players can send messages to each other during the game.
• Reaction System: Players can react to game events using emojis.
• Responsive UI: Fully responsive front-end built with React.
• Minimalist & Clean Design: The game features a simple and modern UI

Tech stack

Frontend

• Typescript
• React.js
• Websockets for real-time communication
• Tailwindcss
• Shadcn

Backend

• Typescript
• Express.js
• Websockets

Local Setup

To locally host or develop this project;

• Clone the GitHub repo

Backend

1. Open the backend directory

   cd backend

2. Create a .env file and inside it populate with;

   PORT=3000

3. Install dependencies

   npm install

4. Start the dev server

   npm run dev

   The frontend will be available at http://localhost:3000/ (This might be different, it depends on the value of PORT in .env file)

Frontend

1. Open the frontend directory

   cd frontend

2. Install dependencies

   npm install

3. Start the dev server

   npm run dev

   The frontend will be available at http://localhost:5173/ (This might be different, if the port is unavailable)

Final Thoughts