CS732 Project - Team Concerning Elegant Horses

🐙 About

Inky is an online Pictionary game with powerups! Up to 6 people can play, taking turns in one of two roles:

• Drawer: Draw a picture for others to guess.
• Guesser: Guess what is being drawn.

As a guesser, a series of powerups will be available to help you or hinder other players.

✨ Features

• 🖌️ Drawing-based Gameplay – One player draws while others try to guess the word.
• ⚡ Real-time Communication – Live drawing and guessing powered by Socket.IO.
• 🧠 Word Selection – Drawers choose from a random set of phrases each round.
• 💬 In-Game Chat – Players can submit guesses through an interactive chat system.
• 🎯 Powerups System – Guessers can use powerups to help themselves or sabotage others.
• 🏆 Scoring & Leaderboard – Points are awarded based on guess speed and accuracy.

🖼️ Images

🎥 Video

video.mov

🏗️ Architecture

Our project is built using the MERN stack with TypeScript. The system architecture is outlined below:

🚀 Getting Started

1. 📦 Prerequisites

Make sure you have the following installed:

• Node.js v18 or later (we use v23)
• npm (comes with Node.js)
• Git

You can check your Node version with:

node -v

2. ⬇️ Clone the Repository

git clone https://github.com/UOA-CS732-S1-2025/group-project-concerning-elegant-horses.git
cd group-project-concerning-elegant-horses

3. 🔐 Environment Variables

Place the provided .env files in both the frontend and backend directories respectively.

4. 📁 Install Dependencies

cd frontend
npm install

cd backend
npm install

4. 🚀 Start the App

Run both the frontend and backend in separate terminal tabs:

cd frontend
npm run dev

cd backend
npm run dev

Note that since this is a multiplayer game, it requires three players to function properly. To test the game locally, you should run npm run dev in three separate terminal windows/tabs for the frontend, and open them in separate browser tabs. You’ll also need three different Google accounts to sign into each frontend instance respectively.

🧪 Testing

We have used Vitest and Supertest for testing:

🖼️ Frontend Testing

To run the frontend test suite, first navigate to the frontend directory and run:

npm test

🖥️ Backend Testing

We have created test cases for our Users and Phrases endpoints. To run the test suite, navigate to the backend directory and run:

npm test

To generate a coverage report:

npm run test -- --coverage

🌐 Deployment

We used Render to deploy both the frontend and backend. The deployment link can be found here. Please note that since we’re using the free tier, the backend may become inactive when idle. After attempting to sign in for the first time, you may need to wait up to a minute for the backend to wake up — then reattempt to sign in.

📋 Project Management

For project management, we used GitHub’s project board alongside issue tracking to organise and prioritise tasks. Each pull request was linked to a corresponding issue to ensure clear traceability and progress tracking.

📚 Wiki

Our GitHub Wiki includes notes on:

• Git Etiquette
• Design
• Minutes
• Task Attribution

© Attributions

Library / Tool	Purpose / Usage	License / Link
Font Awesome	Icons in the UI	CC BY 4.0
MongoDB Memory Server	In-memory DB for backend tests	MIT
Vitest	Test runner for backend (API tests)	MIT
Socket.IO	Real-time communication between frontend and backend	MIT
Supertest	HTTP request simulation for Express endpoints	MIT
Fabric.js	Canvas drawing in the game UI	MIT
React Tooltip	Tooltip rendering	MIT
React Hot Toast	Non-blocking toast/notification pop-ups in the UI	MIT

👥 Contributors

Our team members are:

• Amanda Lowe (alow719@aucklanduni.ac.nz)
• Liam Parker (lpar161@aucklanduni.ac.nz)
• Eason Jin (ejin458@aucklanduni.ac.nz)
• Victor Qiu (vqiu164@aucklanduni.ac.nz)
• Jessica Jiang (jjia240@aucklanduni.ac.nz)
• Joshua Tan (jtan678@aucklanduni.ac.nz)