NHariman / transcendence

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

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.

Content

• Project Description
• Requirements
• Demos
• Usage
• Resources
• About Us

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).

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

• Using ESLint and Prettier to keep the code uniformly-formatted

Typescript

• TypeScript Handbook
• Typescript’s type system from an OOP POV
• Typescript strictness checks

Vue 3

• Vue.js documentation
• Tutorial series: Learn Vue 3 Step by Step
• State management was done using Pinia: Video: Pinia tutorial
• Web sockets for chat, friends, and game used Socket.IO

NestJS

• NestJS documentation
• NestJS-Vue 3 boilerplate
• Very thorough guide covering most project requirements: API with NestJS
• Video: "Authentication: JWTs, Sessions, Logins, and more! | NestJS PassportJS tutorial"
• Passport strategy for 42 OAuth system
• Packages for 2FA: qrcode, otplib
• Password hashing using bycrypt
• List of validation decorators

TypeORM

• find options
• Select using Query Builder
• Relations in TypeORM
• Eager and Lazy Relations

PostgreSQL

• Setting up NestJS with PostgreSQL
• Video: PostgreSQL crash course

Chat

• Build a Real-time Chat App with Vue 3, Socket.io and Nodejs
• Building a NestJS Chat App with Websockets and MySQL
• Build a Real-time Chat Application With Nestjs and PostgreSQL

About Us

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