Skip to content

A single-page web app featuring a multiplayer Pong game. A collaborative 42/Codam project

Notifications You must be signed in to change notification settings

MichelleJiam/transcendence

Repository files navigation

transcendence

transcendence is a 42/Codam fullstack web project about creating a single-page web application where users can play Pong against each other.
This is a collaborative project between Michelle Jiam, Niks Hariman, Nilo Van Winden, Sanne Albreghs, and Swaan Miller.

Pong game still

Content

Description

🏓 Play Pong in real-time against other users and jostle for 1st place in the leaderboard to earn eternal glory as Pong Master! 🏓

Features include:

  • Chatrooms 💬: users can create and join both public and private (password-protected) chatrooms, and also DM other users
  • Game by invite ✉️: users can invite specific users to a game of Pong via DM
  • Game matchmaking 🤝: users can enter a game queue to be matched automatically to other users looking to play a game
  • Authentication 🔒: users can log in using the 42 OAuth system and enable 2FA
  • User account customization 🖼️: users can change their player name and avatar
  • Friends 👯: users can add other users as friends and see their status (online, offline, in a game)
  • Match history 📒: user pages show last 10 games played
  • Leaderboard 📈: users go up and down in ranking after each win/loss
  • Achievements 🏅: users can earn achievements
  • Blocking, banning, and muting 🔇: users can block other users to stop seeing their messages in chatrooms; chatroom admins/owners can ban or mute users from chatrooms.

This is a full-stack single-page web application built using NestJS (backend), Vue 3 (frontend), PostgreSQL (database), and Docker (environment).

User page

Requirements

You can find the full list of project requirements here: Project Requirements

Demos

Sending a game challenge through DM

game_from_dm.mov

Reactive friends page

friend_page.mov

More demos

See more demos of features here: demos

Usage

Run

  1. Install and run Docker

  2. Run ./run.sh

    • NOTE: manually build with docker compose up --build
localhost:5173 Navigate here to see frontend from Vue + Vite
localhost:5050 Navigate here to see GUI for postgreSQL

Clean

run ./clean.sh and select a clean option

Prompt
1. clean this option will remove containers and delete images
2. clean all this option will additionally delete the volumes
  • NOTE: manually clean all with docker compose down --rmi all -v

Resources

General

Typescript

Vue 3

NestJS

TypeORM

PostgreSQL

Chat

About Us

Michelle Jiam - LinkedIn / Github
Niks Hariman - LinkedIn / Github
Nilo Van Winden - LinkedIn / Github
Sanne Albreghs - LinkedIn / Github
Swaan Miller - LinkedIn / Github