ft_transcendence - École 42 | Paris

Description

Le projet ft_transcendence est une plateforme Web innovante centrée sur le jeu Pong. Bien plus qu'un simple jeu local, il s'agit d'une application web complète, évolutive, et riche en fonctionnalités, permettant des interactions temps réel entre utilisateurs. Ce projet est conçu comme un exercice d'excellence en développement web, DevOps, et cybersécurité.

---

Fonctionnalités Principales

Partie Obligatoire

• Jeu Pong en ligne :
  • Mode 1v1 sur même machine
  • Tournoi avec organisation automatique des matchs.
• Application Web Monopage (SPA) :
  • Développée en JavaScript : vanilla.
  • Compatible avec la dernière version stable de Google Chrome.
• Sécurité Basique :
  • Connexion HTTPS.
  • Protection contre les injections SQL et XSS.
  • Stockage des mots de passe hashés.
• Conteneurisation avec Docker :
  • Déploiement via une commande simple (docker-compose up --build).

Modules Avancés

Le projet peut être enrichi avec de nombreux modules pour atteindre 100 % de complétion :

Web

• Backend avec Django.
• Utilisation de PostgreSQL comme base de données.

User Management

• Authentification OAuth2.0/42.
• Gestion des profils avec avatars, historique des matchs, et statistiques.
• Système d'amis avec affichage du statut en ligne.

Gameplay

• Matchmaking automatisé.

Cybersécurité

• Mise en place de WAF/ModSecurity.
• Gestion des secrets avec HashiCorp Vault.
• Authentification 2FA et JWT.
• Conformité GDPR.

DevOps

• Gestion des logs via ELK (Elasticsearch, Logstash, Kibana).
• Architecture backend en microservices.

Accessibilité

• Multi-langue, compatibilité multi-navigateurs.

Structure du Projet

ft_transcendence/
.
├── backend
│   ├── conecte_me_backend
│   │   ├── asgi.py
│   │   ├── __init__.py
│   │   ├── middleware.py
│   │   ├── settings.py
│   │   ├── urls.py
│   │   ├── views.py
│   │   └── wsgi.py
│   ├── Dockerfile
│   ├── entrypoint.sh
│   ├── game
│   │   ├── admin.py
│   │   ├── apps.py
│   │   ├── consumers.py
│   │   ├── __init__.py
│   │   ├── migrations
│   │   │   ├── 0001_initial.py
│   │   │   ├── 0002_gamesettings_paddle_size_matchhistory.py
│   │   │   └── __init__.py
│   │   ├── models.py
│   │   ├── routing.py
│   │   ├── tests.py
│   │   ├── urls.py
│   │   └── views.py
│   ├── logs
│   │   ├── django.log
│   │   └── frontend.log
│   ├── manage.py
│   ├── media
│   │   └── profile_pictures
│   │       └── default_avatar.png
│   ├── oauth_app
│   │   ├── __init__.py
│   │   ├── jwt_decorator.py
│   │   ├── migrations
│   │   │   ├── 0001_initial.py
│   │   │   ├── 0002_user42_email_address_user42_first_name_and_more.py
│   │   │   ├── 0003_user42_is_2fa_enabled_user42_totp_secret.py
│   │   │   ├── 0004_alter_user42_totp_secret.py
│   │   │   ├── 0005_user42_profile_image.py
│   │   │   ├── 0006_alter_user42_profile_image_userloginhistory.py
│   │   │   ├── 0007_userloginhistory_is_connected.py
│   │   │   ├── 0008_alter_user42_username.py
│   │   │   └── __init__.py
│   │   ├── models.py
│   │   ├── templates
│   │   │   └── 2fa_setup.html
│   │   ├── tests.py
│   │   ├── twofa_views.py
│   │   ├── urls.py
│   │   ├── utils.py
│   │   └── views.py
│   ├── requirements.txt
│   └── tournament
│       ├── admin.py
│       ├── apps.py
│       ├── forms.py
│       ├── __init__.py
│       ├── migrations
│       │   └── __init__.py
│       ├── models.py
│       ├── tests.py
│       ├── urls.py
│       └── views.py
├── certs
│   ├── localhost.crt
│   └── localhost.key
├── docker-compose.yml
├── elk
│   ├── elasticsearch
│   │   └── elasticsearch.yml
│   ├── elk_initializer.sh
│   ├── filebeat.yml
│   ├── kibana
│   │   └── kibana.yml
│   ├── logstash
│   │   ├── logstash.conf
│   │   └── logstash.yml
│   └── saved_objects.ndjson
├── frontend
│   ├── Dockerfile
│   ├── index.html
│   └── static
│       ├── css
│       │   ├── board.css
│       │   ├── game.css
│       │   ├── game_tournament.css
│       │   ├── login.css
│       │   ├── main.css
│       │   ├── privacy.css
│       │   ├── setup.css
│       │   ├── signup.css
│       │   ├── social.css
│       │   ├── stats.css
│       │   ├── team.css
│       │   ├── terms.css
│       │   ├── tournament.css
│       │   ├── tournament_details.css
│       │   └── user.css
│       ├── fonts
│       │   ├── PongGame.woff
│       │   └── PongGame.woff2
│       ├── img
│       │   ├── 42_logo.png
│       │   ├── default_avatar.png
│       │   ├── favicon.ico
│       │   ├── field_basketball.png
│       │   ├── field_hockey.png
│       │   ├── field_NFL.png
│       │   ├── Game_anime.png
│       │   ├── jecointr.jpg
│       │   ├── mmaric.jpg
│       │   ├── ode-cleb.jpg
│       │   ├── PONG_Accueil.png
│       │   ├── PONG_seul.png
│       │   ├── raveriss.jpg
│       │   ├── return_arrow.png
│       │   └── sycourbi.jpg
│       ├── js
│       │   ├── 2fa.js
│       │   ├── board.js
│       │   ├── game.js
│       │   ├── game_tournament.js
│       │   ├── i18n.js
│       │   ├── login.js
│       │   ├── main.js
│       │   ├── router.js
│       │   ├── setup.js
│       │   ├── signin42.js
│       │   ├── signup.js
│       │   ├── social.js
│       │   ├── stats.js
│       │   ├── tournament_details.js
│       │   ├── tournament.js
│       │   ├── translations.json
│       │   └── user.js
│       ├── sounds
│       │   └── hit.mp3
│       └── templates
│           ├── board.html
│           ├── game.html
│           ├── game_tournament.html
│           ├── home.html
│           ├── login.html
│           ├── privacy.html
│           ├── setup.html
│           ├── signin42.html
│           ├── signup.html
│           ├── social.html
│           ├── stats.html
│           ├── team.html
│           ├── terms.html
│           ├── tournament_details.html
│           ├── tournament.html
│           └── user.html
├── nginx.conf
└── README.md

Installation et Lancement

Prérequis

• Docker et Docker Compose installés.
• Navigateur moderne (Google Chrome recommandé).

Commandes

• 1. Clonez le dépôt :

  git clone https://github.com/raveriss/ft_transcendence.git
  cd ft_transcendence

• 2. Configurez les variables d'environnement :

  • Créez un fichier .env à la racine et renseignez-y vos clés API, mots de passe et paramètres.

• 3. Lancez l'application :

  docker-compose up --build

• 4. Accédez à l'application :

  • Ouvrez votre navigateur et rendez-vous sur https://localhost:8443.

Modules et Extensions

Modules Principaux

• 1. Backend Framework : Développement du backend avec Django.
• 2. User Management : Authentification, gestion des profils et historique des matchs.
• 3. Gameplay : Personnalisation des règles**.
• 4. Cybersecurity : Mise en place de 2FA et JWT.
• 5. DevOps : Gestion des logs avec ELK.

Modules Bonus

• Accessibilité : Compatibilité multi-langue

Aperçu

• Accueil

  

• Login Signup et 2fa

  

• Authentification avec log in 42

  

• Interface du jeu

  

• Game

  

• Statistiques des utilisateurs

  

• Interface utilisateurs et Sécurité

  

• Personnalisation et réglages

  

• Tournoi game

  

• Réseau social

  

• Logs via ELK (Elasticsearch, Logstash, Kibana)

  

• Team

  

Contributeurs

• jecointr
• mmaric
• ode-cleb
• raveriss
• sycourbi

Ressources Utilisées

• Request for Comments 4226 HOTP: An HMAC-Based One-Time Password Algorithm

• Request for Comments 6238 TOTP: Time-Based One-Time Password Algorithm

• RGPD

• Documentation Django

• Openlassrooms debutez avec le framework django

• Openlassrooms allez plus loin avec le framework django

• Openlassrooms mettez-en-place-une-api-avec-django-rest-framework/7424482-decouvrez-django-rest-framework

• Openlassrooms deployez-une-application-django

• Django Rest Framework cours tutoriel exemples

• Openlassrooms apprenez a programmer avec javascript

• Lesieur apprenez a programmer avec javascript

• Ethereum guides

• Soliditylang Documentation

• Play list Video Tuto Docker #01

• Play list Video Tuto Docker-Compose #01

• Google Authenticator PAM module

• Introducing 2FA with Google Authenticator and Node.js

• Two-Factor Authentication in Django Using Google Authenticator

• Tuto docker comprendre docker partie #01

• Tuto docker comprendre docker partie #02

• Tuto docker comprendre docker partie #03

• PostgreSQL

• TUTORIALS POSTGRESQL

• TUTORIALS PROMETHEUS / GRAFANA

• TUTORIALS Introduction : why ? what ? - #ELK 01

• ThreeJS

• Tutoriel Pong