This web application has been developed using the following technologies: Next.js, React, TypeScript, Node.js, Tailwind CSS, Prisma ORM, PostgreSQL...

Learn more

ft_transcendence

This project is centered around the design, development and organization of a full-stack web application.

Project overview

Ft_transcendence is the last project of the 42 School core curriculum.

The goal is to create a single-page application (SPA) allowing users to play the famous Pong game from 1972.

This web application should enable users to:

  • Create an account and log in,

  • Play a Pong game locally on the same computer (with 2 players),

  • Play remotely in the same game with 2 or 4 players,

  • Participate in a 4-player tournament on the same computer,

  • View and edit their profile,

  • Check their game history with data visualisation.

This list is not exhaustive.

Group organization and task assignment

ft_transcendence is a group project involving between 3 and 5 people.

We decided to do it with five people and to divide the project into the following parts:

  1. Back-end -> database and API,

  2. Front-end -> interfaces, user flows and routing,

  3. Pong game -> multiplayer games and sockets,

  4. Secure authentication -> JWT and two-factor authentication (2FA),

  5. DevOps -> infrastructure, monitoring and logs

My role in this project

Within this group, I worked on the front-end layer, excluding sockets (this is a skill I have been able to develop through the Webserv project).

My role was to:

  • Integrate all user interfaces using Tailwind CSS,

  • Define user flows by creating a prototype with Figma Design,

  • Implement routing for different pages/views without a complete reloading in Vanilla JS (JavaScript without framework),

  • Retrieve data from back-end through API endpoints in order to deliver it to users.

This was a very cross-functional role that required collaboration with all members of the group, excluding the DevOps part.

This project also allowed me to work with TypeScript, a strongly typed overlay of the JavaScript language.

Because a picture speaks a thousand words

image
image
image
image
image
image
Loading data
Loading data
Loading data

Would you like to check out the project code and test it by yourself?

Similar projects

This project seems similar to yours?

If you think that skills developed through this project could be useful to your own project, please contact me using the button below.

Let's schedule an appointment

Would you like to discover more projects?