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.
🏓 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).
You can find the full list of project requirements here: Project Requirements
game_from_dm.mov
friend_page.mov
See more demos of features here: demos
-
Install and run
Docker -
Run
./run.sh- NOTE: manually build with
docker compose up --build
- NOTE: manually build with
localhost:5173 |
Navigate here to see frontend from Vue + Vite |
localhost:5050 |
Navigate here to see GUI for postgreSQL |
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
- Using ESLint and Prettier to keep the code uniformly-formatted
- 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 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
- 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
Michelle Jiam - LinkedIn / Github
Niks Hariman - LinkedIn / Github
Nilo Van Winden - LinkedIn / Github
Sanne Albreghs - LinkedIn / Github
Swaan Miller - LinkedIn / Github