/ft_transcendAnce

A social gaming website

Primary LanguageTypeScriptMIT LicenseMIT

ft_transcendAnce

Transcendence is the last project of the common core in 42. The aim was to develop a single page application featuring a pong game, a chat, an authentication system via the 42 API and a ranking linked to the outcome of the games.

We used the following stack:

  • Typescript for the frontend and the backend
  • Node with the Nest framework for the backend
  • React for the frontend
  • React Query to fetch the data from the backend
  • Tailwind to handle the CSS
  • PostgreSQL for the database
  • Prisma to interact with the database
  • Websocket to handle real-time interactions
  • Docker to launch the application

⚠️⚠️ You will need an UID and a secret generated by the 42 API to make the web app work ⚠️⚠️


Profile

A user is created as soon as he/she logs in with the 42 API.

A user :

  • Can change his nickname
  • Can change his profile picture
  • Can add/remove friends
  • Can activate the 2FA authentication with Google Authenticator
  • Can gain the 8 following achievement: builder, social animal, who is the boss, serial ponger, it is the taking part that counts, security first, gaming mania
  • Can see his/her match history
  • Can see the following stats: number of win, number of loss, ranking position, elo score
Screen.Recording.2023-01-22.at.09.24.46.mov

Game

We set up an elo score system, similar to what you can find in chess. If you lose against someone who has a lower elo score than you, you will lose more points and vice versa.

Users can play :

  • A classic pong game: There is a throw-in
  • A mayhem pong game: There is no throw-in and the ball is faster

If a user unexpectedly quits the game, the other user will win by forfeit after 10 seconds.

Users can play a game by clicking on the play button on the home page or by inviting another user to play in the chat on his/her profile.

Screen.Recording.2023-01-22.at.09.59.48.mov

Chat

Users can create four types of channel:

  • A public channel: everyone can join this channel
  • A private channel: only users invited to the channel will be able to join
  • A protected channel: users will be asked to enter a password
  • Private message: users can send private message to another user through the chat or his friends list

Users can have the following role in the channel:

  • Owner: the user who created the channel
  • Admin: Only an owner or an admin can make another user an admin
  • Regular

Owner and admin can ban or mute another admin or regular users from the channel for 30 seconds

  • Ban: The user can't speak and won't be able to see what is sent on the channel
  • Mute: The user can't speak but can see what is sent to the channel

Users can block one another. In this case they won't be able to see what the other user types in the channel where they are both participants. Their private message conversation will also be deleted.

Screen.Recording.2023-01-22.at.10.01.32.mov

Ranking

A raking is updated as soon as 2 users finish a game.

Screen.Recording.2023-01-22.at.10.04.36.mov