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 ❌

transcendence's Issues

Create a function for API calls

Create a function which can handle both type of API calls with localhost and with normal URL's as well.

HttPs SuPPorT

Implementing logout for the users

Game implementation connected to backend

Fix hamburger menu layers on mobile

Proper merge of branches to work with the API

Setup dev containers

Create custom dashboards and visualizations using Grafana to provide real time insights into system metrics and performance.

Grafana Prometheus integration

• Create custom dashboards then upload + mount the in the docker compose

Creating basic design and layout for the pages

Major module: Replacing Basic Pong with Server-Side Pong and Implementing an API.

Fix Docker structure

Minor module: User and Game Stats Dashboards.

Some option to go full screen and back on phone for game screens

add an option to go back for hamburger menu

Major module: Introduce an AI Opponent - AI Pong implementation on frontend

Authenticate users with 42 API

Return option/button/whatever for the game windows

How many buttons do we need? Yes.

Sidebar is not working after going back from full screen on PC

Major module: Infrastructure Setup with ELK (Elasticsearch, Logstash, Kibana) for Log Management.

In this major module, the objective is to establish a robust infrastructure for log
management and analysis using the ELK stack (Elasticsearch, Logstash, Kibana).
Key features and goals include:

• Deploy Elasticsearch to efficiently store and index log data, making it easily
  searchable and accessible.
• Configure Logstash to collect, process, and transform log data from various
  sources and send it to Elasticsearch.
• Set up Kibana for visualizing log data, creating dashboards, and generating
  insights from log events.
• Define data retention and archiving policies to manage the storage of log data
  effectively.
• Implement security measures to protect log data and access to the ELK stack
  components.

PDf link

Write test cases for CI/CD

Write the proxy to get around CORS...

Minor Module: Multiple language support

Major module: Remote players

Setting up the frontend for work

Move testing to a separate job in the pipeline for better readability

Fine tune bars in every pong version

• We should try to make the bar more responsive than it is

Normal
AI
3D

• Also give the bar some speed increase periodically

Normal
AI
3D

Change the workflow to run on dev rather than master?

mindmap

fixing 42 api auth with jwt

Scrolling on y axis needs some care and adjustments especially for mobile

In fixed mode the ball and the light behind is not synced yet xD

Not sure what the hell is going on with that :D

Touch control, closing button and full screen for the game 😅

Minor module: Monitoring system.

In this minor module, the objective is to set up a comprehensive monitoring system
using Prometheus and Grafana . Key features and goals include:

• Deploy Prometheus as the monitoring and alerting toolkit to collect metrics
  and monitor the health and performance of various system components.
• #160
  services, databases, and infrastructure components.
• #243
• #261
• Ensure proper data retention and storage strategies for historical metrics data.
• Implement secure authentication and access control mechanisms for Grafana to protect sensitive monitoring data.
  Pdf link

Minor module: Use a database for the backend.

Touch control for the bars kinda sus, needs a check

If I press somewhere far from the bar, it's kinda jumping there almost instant and the bar could be bigger on phone maybe? idk. need to test it

login response should include a token

Major module: Implementing Advanced 3D Techniques

Minor module: Game Customization Options.

Major module: Multiplayers (more than 2 in the same game).

• Page for the game
• Game

Major module: Use a Framework as backend.

Current language in the url

Need to add the current language to the url and changing it dynamically depending on the current language but the routes are tricky..

Fixed background and no scrolling for the games?

Create an API to communicate between Front and Backend

Check if completely full screen is possible

if so, do it

Normal sign in fields on root page

Fix the root url for the deployed page

Deploy a DB and the backend as well for GitHub Pages

Setup CI/CD pipeline with actions and deploying to Github pages

Minor module: Expanding Browser Compatibility.

Major module: Live Chat.

• Backend implementation
• Connected to frontend
• General channel
• Online user list
• Option to interact with online users
• Private messages
• Remove test chat on reload

Setup data exporters for Prometheus

Configure data exporters and integrations to capture metrics from different services, databases, and infrastructure components.

• Posgress exporter
• Django Exporter
• NPM Exporter