A real-time multiplayer word-guessing party game where players collaborate to reveal a secret word through strategic clue-giving and matching. Built as a full-stack web application with WebSocket integration for seamless real-time gameplay, session persistence, and responsive design for cross-device compatibility.
This project demonstrates full-stack web development skills through a real-time multiplayer game application. It showcases WebSocket communication with Socket.io, React with Hooks for dynamic UI, MongoDB with native driver for data persistence, Express.js RESTful API development, and session management. The platform enables friends to play together remotely with features including room creation, role selection, live game state synchronization, and point tracking across multiple rounds.
Ganesh Umasankar
MS Computer Science Student
Northeastern University, Boston, MA
Email: umasankar.g@northeastern.edu
Vignesh Pakkam Saravanan
MS Computer Science Student
Northeastern University, Boston, MA
Email: pakkamsaravanan.v@northeastern.edu
Course: CS5610 - Web Development
Institution: Northeastern University
Semester: Fall 2025
Course Website: https://johnguerra.co/classes/webDevelopment_fall_2025/
- Design Document: Design Documentation
- Presentation: Project Slides
- Video Demo: Gameplay Walkthrough
- Live Website: https://contact-game.onrender.com
- Source Code: GitHub Repository
Landing page with game rules and room creation/joining options
Pre-game lobby where players select roles (Wordmaster or Guesser)
Wordmaster interface showing secret word and clue-blocking controls
Clue-giver interface for submitting clues about words starting with revealed letters
Guesser interface for making contact guesses and attempting the secret word
Round end screen showing clue word reveal and contact results
Game completion screen celebrating the winner and revealing the secret word
Live scoreboard tracking points for all players throughout the game
- Frontend: React with Hooks, CSS
- Backend: Node.js with Express.js
- Database: MongoDB with native driver (no Mongoose)
- Real-time: Socket.io for WebSocket communication
- Session Management: express-session with connect-mongo
- Routing: React Router DOM
- ESLint: JavaScript linting and code quality
- Prettier: Code formatting and consistency
- Build Tool: React Scripts
- Git: Version control with clear commit history
- Modern browsers supporting ES6+ and WebSocket
- Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
- Mobile-responsive design for tablet and phone screens
- Node.js v18 or higher
- MongoDB (local installation, Docker, or MongoDB Atlas)
- Git for version control
- Modern web browser with WebSocket support
# Clone the repository
git clone https://github.com/YOUR_USERNAME/contact-game.git
cd contact-game
# (Optional) Setup environment variables
# Copy the example file and customize if needed
cp .env.example .env
# Edit .env to customize MongoDB URI, port, or session secret
# Note: The app works without .env using sensible defaults
# Start MongoDB (if using Docker)
docker run -d -p 27017:27017 --name mongodb mongo:latest
# Or use your local MongoDB installation
# Seed the database with sample data (creates 1000+ synthetic records)
# (Optional, only needed once)
cd backend
npm run seed
cd ..
# Build and install all dependencies
npm run build
# This installs backend dependencies, frontend dependencies, and builds the React app
# Start the server (serves both frontend and backend)
npm start
# Open browser and navigate to http://localhost:5001
# Optional: Code quality and formatting
cd frontend && npm run lint # Check frontend code
cd backend && npm run lint # Check backend code
cd frontend && npm run format # Format frontend
cd backend && npm run format # Format backendcontact-game/
├── backend/ # Backend server
│ ├── config/
│ │ └── db.js # MongoDB connection
│ ├── models/
│ │ ├── Room.js # Room CRUD operations
│ │ └── Game.js # Game CRUD operations
│ ├── routes/
│ │ ├── rooms.js # Room REST API
│ │ └── games.js # Game REST API
│ ├── socket/
│ │ └── gameSocket.js # Socket.io event handlers
│ ├── utils/
│ │ └── gameLogic.js # Game mechanics utilities
│ ├── scripts/
│ │ ├── words.json # Words JSON
│ │ └── seed.js # Database seeding script
│ ├── server.js # Express server setup
│ ├── eslint.config.js # ESLint configuration
│ ├── .prettierrc # Prettier configuration
│ └── package.json # Backend dependencies
├── frontend/ # React frontend
│ ├── public/
│ │ ├── index.html # HTML template
│ │ └── manifest.json # PWA manifest
│ ├── src/
│ │ ├── components/
│ │ │ ├── HomePage/
│ │ │ │ ├── HomePage.jsx # Landing page
│ │ │ │ └── HomePage.css
│ │ │ ├── RoomPage/
│ │ │ │ ├── RoomPage.jsx # Pre-game lobby
│ │ │ │ ├── RoomPage.css
│ │ │ │ ├── PlayerSlot.jsx # Player slot component
│ │ │ │ └── PlayerSlot.css
│ │ │ ├── GamePage/
│ │ │ │ ├── GamePage.jsx # Main gameplay
│ │ │ │ ├── GamePage.css
│ │ │ │ ├── Scoreboard.jsx # Score tracking
│ │ │ │ ├── Scoreboard.css
│ │ │ │ ├── GameLog.jsx # Event log
│ │ │ │ ├── GameLog.css
│ │ │ │ ├── Timer.jsx # Round timer
│ │ │ │ └── Timer.css
│ │ │ ├── Header/
│ │ │ │ ├── Header.jsx # Navigation header
│ │ │ │ └── Header.css
│ │ │ ├── Footer/
│ │ │ │ ├── Footer.jsx # Page footer
│ │ │ │ └── Footer.css
│ │ │ └── shared/
│ │ │ ├── Button.jsx # Reusable button
│ │ │ ├── Button.css
│ │ │ ├── Modal.jsx # Modal overlay
│ │ │ └── Modal.css
│ │ ├── hooks/
│ │ │ └── useSocket.js # Socket.io custom hook
│ │ ├── utils/
│ │ │ └── api.js # REST API client
│ │ ├── App.jsx # Main app component
│ │ ├── App.css # Global app styles
│ │ ├── index.js # React entry point
│ │ └── index.css # Global CSS variables
│ ├── eslint.config.js # ESLint configuration
│ ├── .prettierrc # Prettier configuration
│ └── package.json # Frontend dependencies
├── package.json # Root build scripts
├── .gitignore # Git ignore rules
└── README.md # This file
Contact is a cooperative word-guessing game where Guessers work together to reveal a secret word chosen by the Wordmaster through strategic clue-giving and matching.
- Players: 3-6 players (1 Wordmaster + 2-5 Guessers)
- Wordmaster: Chooses a secret word (minimum 5 letters)
- First Letter: Revealed to all Guessers at game start
- Clue Round: Each round, one Guesser becomes the clue-giver.
- Give Clue: Clue-giver thinks of a word starting with revealed letters and provides a hint.
- Make Contact: Other Guessers who think they know the clue word enter their guess and click "CONTACT!".
- Wordmaster Blocks: Wordmaster has limited time and guesses to identify the clue word.
- Contact Success: If Wordmaster fails to block and all Guessers (who clicked 'Contact') matches the clue word, the next letter is revealed.
- Secret Word Guess: After each letter reveal, Guessers can attempt the full secret word (once per letter reveal).
- Victory: The game ends when the secret word is guessed correctly or revealed completely, and the player with the most points wins the game.
- Correct Secret Word: Base points (decreases per letter revealed)
- Successful Contact: Points awarded to clue-giver and matching Guessers
- Wordmaster Block: Points to Wordmaster for correct clue word guess
- First to Guess Bonus: Extra points for winning player
This project contains a mix of original work and AI-assisted development.
- Claude: Sonnet 4.5 by Anthropic
- Code Architecture: Guidance on React component structure and Socket.io integration patterns
- Debugging Support: Assistance with WebSocket event handling, session persistence, and state synchronization issues
- Deployment Configuration: Help setting up single web service deployment with static file serving
- "How do I structure a React app with Socket.io for real-time multiplayer game state synchronization?"
- "Debug this Socket.io disconnect handling - players aren't being removed properly from active games"
- "How can I persist player sessions across page reloads using express-session and React state?"
- Complete game design and mechanics implementation
- User interface design and user experience flow
- Database schema design with Rooms and Games collections
- All Socket.io event handlers and game state management
- React component architecture and hooks implementation
- Full CRUD operations across multiple collections
- Real-time multiplayer gameplay with Socket.io
- Room creation and joining with unique codes
- Role selection (Wordmaster/Guesser) with validation
- Round-based gameplay with rotating clue-givers
- Contact matching system with simultaneous guess handling
- Live scoreboard with point tracking
- Game event log showing all actions
- Victory detection and game completion
- Session persistence across page reloads
- Player disconnect handling with 5-second grace period
The project uses Google Fonts for consistent typography:
- Headings: Outfit (400, 700) - Modern geometric sans-serif
- Body Text: Inter (400, 600) - Clean, UI-optimized sans-serif
- Code: JetBrains Mono (400, 700) - Monospace for technical elements
The application uses a consistent Dark Mode theme with CSS variables defined in src/index.css:
- Backgrounds: Deep blue palette (
#1a1a2e,#16213e,#0f3460) - Accents: Crimson red (
#A81F3D) and purple (#7e57c2) - Text: Off-white (
#eaeaea) with muted blue-grey (#a8b2d1) - Status: Green (success), orange (warning), red (error)
All colors use CSS custom properties for easy maintenance and consistent application across components.
- Custom word lists and themed categories
- In-game chat for players
- Sound effects and background music
This project is licensed under the MIT License - see the LICENSE file for details.
Built with ❤️ by Ganesh Umasankar & Vignesh Pakkam Saravanan for CS 5610 Web Development