📖 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 <--- :white_check_mark: --- Dev <--- :white_check_mark: --- Microservices
.....|............................................................|
.....|_______________ :x: ______________|

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: :white_check_mark: Not done: :x:

Plan everything as a microservice :x:

Basic structure :white_check_mark:

Backend structure setup :white_check_mark:

First mindmap :white_check_mark:

Docker files for services :white_check_mark:

Hashed passwords :white_check_mark:

Using OAuth system from 42 :white_check_mark:

CI/CD pipeline setup :white_check_mark:

Deploying to github pages :white_check_mark:

Setting unique username :white_check_mark:

Uploading an avatar for user :white_check_mark:

Option to enable 2FA auth :white_check_mark:

Friend list and their status :white_check_mark:

User stats of wins, losses etc.. :x:

Match history from games :x:

User being able to create private channels :white_check_mark:

Be able to block and unblock other users :white_check_mark:

Able to invite other users to play a game :x:

Accessing other users profile :white_check_mark:

Playing live games on the site :x:

Matchmaking system :x:

Faithful to the original pong game :white_check_mark:

Custom options for the game :white_check_mark:

The game must be responsive :white_check_mark:

Modules Used

16 Major module

11 Minor module

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