← Back to Projects

Monopoly 3D

Monopoly 3D

For my final group capstone before internships, I worked with four other students to recreate Monopoly as a full 3D multiplayer web game. The idea was ambitious, and several professors advised us not to go for a 3D setup because of the limited time and technical overhead. We decided to take the risk anyway, and it paid off. I took on a wide range of responsibilities across both the frontend and backend. I created the full 3D game board using Three.js, built key interfaces like the piece selection screen and player profile page, developed the full turn logic system, and handled deployment when it mattered most. I also set up our initial Docker configuration so the entire stack could be run quickly and consistently across every team member's machine. This article focuses on the systems I personally built, how I approached each problem, and what I learned by owning those parts under pressure.

Small demo (no audio):

3D Board Design and Logic

I had no prior experience with Three.js. I learned it as I went, using documentation and quick tests to figure out how to work in 3D space.

To start, I placed a high-resolution image of a Monopoly board onto a flat plane. That gave me something visual, but it was not interactive. So I created individual 3D tiles to represent every property and space.

How I approached it:

  • I placed the four corner tiles first: Go, Jail, Free Parking, and Go to Jail. These were my fixed reference points

  • I measured the remaining space between the corners and divided it evenly into nine segments for each side

  • I used a helper function to place and size each tile automatically

  • Every tile received a unique index that matched its position in the Monopoly path. This simplified movement and logic handling

By using fixed anchors and math-based spacing, I avoided hardcoding coordinates. The layout was clean and accurate, and I could modify it quickly if needed.

Piece Selection and Player Interfaces

At the start of each game, players needed to select their game piece. I built a 3D selection interface where players could scroll through options and confirm their choice. Once selected, a piece became unavailable to others.

I also built the player profile page, which showed each player’s money, properties, and status. It was styled using Chakra UI and updated in real time using data from the backend.

Turn Management System

I developed the complete turn system from scratch using Spring Boot. Every player had a one-minute countdown to complete their turn. If they ran out of time, the system would skip them and pass control to the next player.

Key features I implemented:

  • Countdown timers tracked using a ConcurrentHashMap

  • Automatic switching between players

  • Auction mode with frozen timers

  • Scheduled backend service that ran checks every second

  • Real-time sync between frontend and backend for remaining time display

  • Turn order based on a defined player sequence

This logic ensured that games moved forward and prevented players from stalling the session.

Docker and Collaboration

At the very beginning of the project, I created a full Docker Compose setup that containerized the backend, frontend, and database. This made it easy for every team member to spin up the entire stack with a single command. It saved time, prevented machine-specific bugs, and kept our environments consistent.

Google Cloud Deployment

Deployment was supposed to be handled by a student from the DevOps specialization, but he was not able to get the app running. With only two days left before the final presentation, I stepped in and deployed the game myself.

I used a Linux VM on Google Cloud, configured reverse proxies, exposed the backend API, and made sure the game was fully online. This allowed our professors to join and play the game with us during the final demo, which made a big difference in how the project was received.

Challenges and Takeaways

This project pushed me to learn quickly and deliver under real pressure. I had to move between front-end logic, 3D modeling, backend services, Docker configs, and cloud deployment. What helped me most was breaking every challenge into smaller steps and always thinking about how each part would connect to the rest.

Things I learned:

  • How to model and position 3D elements using code

  • How to sync React with Three.js for UI and game state

  • How to structure backend logic for real-time games

  • How to keep a team aligned by removing technical blockers early

  • How to take responsibility when things go wrong and make sure the project is delivered

Result

We finished the project with a fully working 3D Monopoly game, live on the web and ready to play. The professors joined our session during the final demo and played several turns, which was only possible because of the last-minute deployment I handled.

The systems I built, from the 3D board to the turn engine and the Docker environment, helped turn a risky idea into a playable game that worked from start to finish.