https://github.com/ankitsingh2105/doodlequest
Draw and guess multiplayer online game
https://github.com/ankitsingh2105/doodlequest
aws aws-ec2 canvas ci-cd docker expressjs game grafana load-balancer loki mysql-database nginx nodejs prometheus reactjs sql websockets
Last synced: 4 months ago
JSON representation
Draw and guess multiplayer online game
- Host: GitHub
- URL: https://github.com/ankitsingh2105/doodlequest
- Owner: ankitsingh2105
- Created: 2024-05-22T09:20:13.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-12-29T17:24:21.000Z (6 months ago)
- Last Synced: 2026-01-01T05:16:08.227Z (6 months ago)
- Topics: aws, aws-ec2, canvas, ci-cd, docker, expressjs, game, grafana, load-balancer, loki, mysql-database, nginx, nodejs, prometheus, reactjs, sql, websockets
- Language: JavaScript
- Homepage: http://doodlequest.games
- Size: 18.8 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DOODLEQUEST
## Description
A multiplayer online drawing and guessing game inspired by Scribble. It allows users to connect with friends, chat in real-time, and engage in a creative and interactive gameplay experience.
## Game Images
- Home, Admin Player, Regular Player, Game Start, Select words
## Features
- **Join Specific Room:** Connect and play with friends using unique room codes.
- **Real-Time Chat:** Instantly chat with other players during the game.
- **Live Whiteboard:** Draw and guess together in real-time.
- **Live Leaderboard:** Scores update instantly as players guess correctly.
- **Features:** Eraser, Custom Stroke Size, Custom Colour, Canvas clear, interactive sound on guess
---
## Technologies Used
- **WebSockets:** Enabled seamless real-time communication.
- **Express & Node.js:** Powered the backend server logic.
- **React.js:** Built a dynamic and responsive frontend.
- **Socket.io:** Simplified real-time event handling.
- **Nginx:** For load balancing
---
## Learning Highlights
- **WebSockets:** Gained hands-on experience with real-time data flow between client and server.
- **Custom Promises:** Built custom promises to manage async tasks effectively.
- **State Management:** Learned to lift state in React for smoother component communication.
- **Closures:** Applied closures to maintain variable scope in socket event handlers and timers.
- **Throttling:** Implemented throttling techniques to optimise drawing performance.
- **Caching:** Used server-side caching to avoid relatively expensive DB calls.
- **Component Design:** Gained experience designing modular and reusable React components.
- **Real-Time Architecture:** Understood how to structure backend logic for real-time multiplayer systems.
---
## Running the Server and Frontend
## Server
- Open a new terminal.
- Navigate to the `backend` directory:
```bash
cd Backend
- Run:
```bash
nodemon server.js
## FrontEnd
- Open a new terminal.
- Navigate to the `FrontEnd` directory:
```bash
cd FrontEnd
- Run:
```bash
npm run dev
---
## About the Author
- **Ankit Singh Chauhan:** [ankitsinghchauhan.in](https://ankitsinghchauhan.in).