Skip to main content
The cyberduck’s pond

šŸ•¹ An online pong

·

screenshot

The last project before freedom šŸ #

This project is the last of the common core of 42, after it, we can choose a specialization, start an internship and we are no longer concerned with deadlines to render projects.

It’s a big project to do with a team of 5 people which is a lot for a 42 project.

It’s an understatement to say that we were in a hurry to finish this project, yet, it was the biggest project we’ve ever done.

What we had to do šŸ”Ø #

The goal of the project is to code an online Pong game, the most important requirements are the following:

  • be able to connect with the 42 OAuth system
  • have a global chat as well as user-created channels
  • channels that can be public or private and with password protection
  • channel admin (the channel creator) that can mute and ban a user of his channel
  • channel admin can promote users to be moderators on the channel
  • global admin that can mute user on any channel and ban a user globally
  • global admin can promote users to be moderators everywhere
  • channel moderators can mute and ban a user in their assigned channels
  • users can add friends to easily see if they are online and in-game
  • users can create a game and invite another user to play
  • provide a matchmaking system to find games
  • users can see current games and watch them as spectators
  • parameters for game creation like speed, number of points to win, bonuses/penalties to catch on the map
  • user profile with picture, with achievements, game history
  • list of ongoing games and leaderboard

screenshot
screenshot
screenshot

The technical stack āš™ļø #

Our technical stack was as follows:

  • React as javascript frontend framework
  • P5js as javascript graphics framework
  • Pestjs as typescript backend framework
  • TypeORM as ORM
  • Postgresql as relational database
  • docker-compose to deploy locally
  • docker swarm to deploy on Coincoin Web Services

The challenges šŸ” #

I had already done some front-end projects but we already had a very good front-end developer in our team, so I decided to take care of the back-end part.

I learned a lot of back-end design thanks to the high-level structure of the Nestjs framework.
Nestjs provide dedicated abstractions and modules which embeds the best Nodejs libraries for all important parts of a back-end.

It is based on a very interesting modular structure that enforce good design principles like the single responsibility principle and helps a lot with testing too, by making the mocking necessary to good unit tests much easier.

The only disadvantage of NestJS is also its high level of abstraction, the framework is heavily based on decorators and the modular structure is not very easy to understand at first.

For some people in the team for whom it was the first time with web development, the combo JavaScript + TypeScript + NestJS/React was pretty challenging to learn in a fairly short time but they met this challenge with flying colors šŸ’Ŗ.

To complete the back-end I learned how to create an authentication system based on OAuth, the abstractions of ORM like entities and the different types of relations between them as well as web sockets with the pub/sub event-based model for the chat and online game parts.

For the DevOps part, I provided tools to automate the deployment based on docker containers, sadly I did not have the time to provide CI/CD pipelines.

To present our work to the world I proposed to host the app on my cluster (where this blog is hosted) which is based on a docker swarm and Traefik.

screenshot
screenshot

play it! šŸ•¹ #

The game is available here, if you are not 42 students you can connect with the two ghosty and capser accounts.

look at the code! šŸ¤“ #

@github repo