zstenger93 / Transcendence

This project is about creating a SPA with a playable multiplayer pong game, chat, profiles, leaderboard etc.

📖 TRANSCENDENCE

A group project to create a fully functional website with front and backend.
It will be a single-page application

---

Menu

MindMap

Setup

CI/CD Pipeline

DataBase

Frontend

Backend

Game

Chat

Resources

TODO

Modules Used

---

Github Project

MindMap

Git Flow

Master <--- ✅ --- Dev <--- ✅ --- Microservices
.....|............................................................|
.....|_______________ ❌ ______________|

Microservices

General Explanation

• Base of the project
  • PostgreSQL
  • Django backend
  • Rest API to connect back and frontend
  • Frontend with React
  • Nginx proxy
• Backend
  • Django
• Frontend
  • React app

---

Setup

• docker-compose.dev.yaml (later)

• docker-compose.yaml

  • backend
    • each microservice is an app
  • PostgreSQL database
  • frontend
  • nginx proxy

• images (not customized yet for front and back)

  • Installs python and other required packages
  • Installs and sets venv
  • Installs django
  • Echoes the venv activation to bashrc
  • Copies the starting script to the image
  • Exposes the port
  • Entrypoint (not always, depends because some things wont work directly from dockerfile)
  • CMD to run

Pipeline

• .github folder
  • workflows
    • workflow_name.yaml
• workflow jobs
  • testing
    • need to upload artifacts
  • building
    • need to download the uploaded artifacts
    • ceraful with the correct path
  • deploying
    • in case of react project, in github settings directory should be changed to /doc instead of root

---

DataBase

postgreSQL

---

Frontend

React Tailwind ThreeJS

• Multi language support

• Extra browser support

• Multiple device support

• Fullscreen mode for games except on IOS

• root / Login

  • Register with username email and password to the site
  • Login with your username and password
  • Login via 42 auth

• Home

  • Readme styled (kinda)

• Game & Watch

  • Pong
    • Original
    • AI Opponent
    • Multiplayer
    • 3D Pong
  • Future game

• Chat

  • Channels
  • Online ppl
  • Image Sharing

• Profile

  • Basic details
  • Friends
  • Match history

• About Us

• Logout

---

Backend

• Microservices (kind of)
  • Authentication service
  • Game
    • Normal mode
    • Balanced matchmaking
    • Optimized responsiveness
    • Gamplay statistics
    • Secure data storing
  • Extra game
  • AI opponent
  • Acessibility features
    • More browser support
    • Multiple language support
  • Security tools
  • Chat
    • Direct messages
    • Access to profiles
    • Sending invite to play
    • Let players know who is next in line
  • Statistics
    • Win rate
    • Score
    • Match amount against players
    • etc

---

Original Game

PONG

• Extra Pong versions implemented:
  • AI Pong
  • 3D Pong

---

Chat

---

Resources

our braincells

---

TODO

Done: ✅ Not done: ❌

Plan everything as a microservice ❌

Basic structure ✅

Backend structure setup ✅

First mindmap ✅

Docker files for services ✅

Hashed passwords ✅

Using OAuth system from 42 ✅

CI/CD pipeline setup ✅

Deploying to github pages ✅

Setting unique username ✅

Uploading an avatar for user ✅

Option to enable 2FA auth ✅

Friend list and their status ✅

User stats of wins, losses etc.. ❌

Match history from games ❌

User being able to create private channels ✅

Be able to block and unblock other users ✅

Able to invite other users to play a game ❌

Accessing other users profile ✅

Playing live games on the site ❌

Matchmaking system ❌

Faithful to the original pong game ✅

Custom options for the game ✅

The game must be responsive ✅

Modules Used

16 Major module

11 Minor module

• Web
  • Major module: Use a framework as backend ✅
  • Minor module: Use a front-end framework or toolkit ✅ ❓
  • Minor module: Use a database for the backend ✅
  • Major module: Store the score of a tournament in the Blockchain ❌
• User Management
  • Major module: Standard user management, authentication, users across tournaments ❌
  • Major module: Implementing a remote authentication ✅
• Gameplay and User Experience
  • Major module: Remote players ✅
  • Major module: Multiplayer (more than 2) ✅
  • Major module: Add Another Game with User History and Matchmaking ❌
  • Minor module: Game customization options ✅
  • Major module: Live chat ✅
• AI-Algo
  • Major module: Introduce an AI opponent ✅
  • Minor module: User and game stats dashboard ❌
• Cybersecurity
  • Major module: Implement WAF/ModSecurity with Hardened Configuration and HashiCorp Vault for Secrets Management ❌
  • Minor module: GDPR Compliance Options with User Anonymization, Local Data Management, and Account Deletion ❌
  • Major module: Implement Two-Factor Authentication (2FA) and JWT ✅
• Devops
  • Major module: Infrastructure Setup for Log Management ❌
  • Minor module: Monitoring system ✅
  • Major module: Designing the Backend as Microservices ❌
• Graphics
  • Major module: Use advanced 3D techniques ✅
• Accessibility
  • Minor module: Support more devices ❌ ✅
  • Minor module: Expanding browser compatibility ✅
  • Minor module: Multiple language support ✅
  • Minor module: Add accessibility for visually impaired users ❌
  • Minor module: Server-side rendering (SSR) integration ❌
• Object Oriented
  • Major module: Replacing Basic Pong with Server-Side Pong and Implementing an API ❌
  • Major module: Enabling Pong Gameplay via CLI against Web Users with API Integration ❌