Team P-T-3
presentCity Zen

City Zen Demo Video

City Zen Demo Video

Welcome to the vibrant world of "City Zen"!

Our team has developed an immersive board game web application drawing inspiration from classic board games while incorporating modern design and technology. The game begins with the foundations of City Zen as single tile in the centre of the board.

Each player begins with seven citizens, which are placed to claim territory as the game progresses.

During your turn, you draw a 3D tile, place it on the board, choose whether to populate the tile with one of your citizens, and finally, score any points which may have been won on your turn.

You can place your tile on the outskirts of City Zen adjacent to an existing tile. Any features on your tile must match those on any adjoining tiles. You can rotate the tile or move it to another location to position it correctly. You can also move the 3D board around and zoom to help you decide on your strategy. Points are scored when features guarded by citizens are completed. This is very important to remember in your strategy, as you may want to place a tile to obstruct another player from completing a feature, and therefore preventing them from scoring!!

The game ends when all the tiles have been drawn, and the player with most points is awarded citizenship of City Zen.

The Team

  • Team member imagePreview: Team member image


  • Team member imagePreview: Team member image

    Jay Spencer

  • Team member imagePreview: Team member image


  • Team member imagePreview: Team member image


  • Team member imagePreview: Team member image



Technologies section imagePreview: Technologies section image

We used: MongoDB, Render, PlayroomKit, Axios, React React-three-fiber, Three.js React-three-rapier, React-three-drei, CSS Modules, Blender

An overarching reason for the tech choices was the requirement for us to use tech that was new to us. In addition to that, MongoDB suited the structure of our data. We looked at a few packages for game building, but Playroom Kit offered the best compatibility with React React-three-fiber and the other 3D tech we chose to fully realise the immersive experience we had decided on.

Challenges Faced

Integrating the 3D packages with the multiplayer game platform was a real challenge, and deciding to pivot from a drag and drop mechanism for placing tiles, to a simple click really boosted the development of the app. We expected the logic of the game play to be one of the most difficult aspects of the build, but that was dealt with surprisingly quickly.