Built with the tools and technologies:

---

Table of Contents

• Table of Contents
• Overview
• Team Members
• Project Management
• Features
• Technologies Used
• Database Schema
• Implemented Modules
• Project Structure
• Getting Started
• Contributing
• License
• Acknowledgments

---

Overview

ft_transcendence a comprehensive, real-time web application that brings the classic Pong experience into the modern era. Designed with a focus on concurrency, scalability, and user experience, this platform is more than just a game; it's a full-featured social ecosystem.

The project integrates real-time WebSockets for instantaneous gameplay and chat, secure authentication with 2FA, and a comprehensive monitoring stack to ensure 99.9% uptime and performance reliability.

---

Team Members

Name	GitHub	Role	Responsibilities
Mustapha Elfersioui	@BL4KCY	Project Manager / DevOps	Infrastructure, Monitoring (ELK/Grafana), Docker, Project Coordination
Aziz Elkhetabi	@Aziz018	Product Owner / Backend	Database Design, API Architecture, Social Hub Logic
Hamza Mouhib	@itsLhaj	Backend Team Lead	Security (JWT/2FA), Core Backend Logic, API Documentation
Hamza Barda	@N308-ui	Backend / Game	Real-time Game Engine, WebSocket Synchronization, Matchmaking
Ibnoukhalkane Zakaria	@Ibnoukhalkanezakaria	Frontend Developer	UI/UX Design, React Architecture, State Management, Styling

---

Project Management

Our team adopted an Agile-inspired approach to manage the development of Pong Rush.

• Tools:
  • Notion: Centralized task board for tracking features, bugs, and documentation.
  • Discord: Daily sync-ups and real-time troubleshooting.
• Workflow:
  • Branching Strategy: Strict feature/ branch model. No direct commits to dev or master.
  • Code Reviews: Every Pull Request required a peer review to maintain code quality.
  • Automation: Dockerized environments ensured seamless integration between front-end and back-end modules.

---

Features

🎮 The Arena (Core Gameplay) - Implemented by @N308-ui

• Real-time Multiplayer: Low-latency Pong matches powered by WebSockets.
• Dual Mode Support:
  • Local Play: Battle friends on the same machine.
  • Remote Play: Matchmaking system for global challenges.
• AI Contender: An intelligent bot system for solo practice and skill-building.
• Live Game Synchronization: Seamless state management across all connected clients.

💬 Social Hub (Chat & Community) - Implemented by @Aziz018

• Dynamic Chat Rooms: Create, join, and manage public or password-protected channels.
• Direct Messaging (DMs): Private, secure communication between users.
• Moderation Tools: Admin capabilities including kicking, banning, and promoting members.
• Live Status Tracking: Real-time "Online/Offline/In-Game" status indicators.
• Friend System: Manage relationships, block intruders, and invite friends to matches.

🔐 Security & Identity - Implemented by @itsLhaj

• Multi-Strategy Auth: Support for traditional credentials and OAuth2 (42 & Google).

• Advanced Protection:

  • Two-Factor Authentication (2FA): Google Authenticator integration for account security.
  • JWT Security: Secure token-based sessions with refresh rotation.

• Profile Customization: Personalize your presence with avatars and unique handles.

• Database Reliability: Type-safe interactions using Prisma ORM.

• Scalar Interactive Docs: Sleek, modern API documentation accessible at /docs.

📊 Engine & Orchestration - Implemented by @BL4KCY

• Observation Stack:
  • ELK Stack: Centralized logging for debugging and audit trails.
  • Prometheus & Grafana: Real-time performance metrics and visual dashboards.
• Dockerized Environment: Fully containerized services for consistent "one-command" deployment.

---

Technologies Used

Technology	Justification
Fastify	Chosen for its high performance and low overhead, essential for handling high-concurrency WebSocket connections.
TypeScript	Ensures type safety across the stack, reducing runtime errors and improving developer productivity.
React	Provides a robust component-based architecture for building a dynamic and responsive game UI.
Prisma ORM	Offers type-safe database queries and automated migrations, ensuring data consistency with SQLite.
WebSockets	Critical for the real-time bidirectional communication required for real-time multiplayer gameplay.
Docker	Simplifies deployment and ensures environment parity between development and production.
ELK Stack	Provides centralized logging for observability and efficient debugging of system events.

---

Database Schema

Our data model is designed to handle complex social interactions and real-time game state tracking.

• User: Manages authentication, profile data, and XP/stats.
• Room & Message: Handles both direct messages and multi-user group chats.
• Friendships & Requests: Manages the social graph and blocked users.
• Match: Records match history, scores, and winners for the leaderboard.

erDiagram
    USER ||--o{ MATCH : plays
    USER ||--o{ FRIENDSHIP : has
    USER ||--o{ ROOM_MEMBER : joins
    ROOM ||--o{ ROOM_MEMBER : contains
    ROOM ||--o{ MESSAGE : contains
    USER ||--o{ MESSAGE : sends

Loading

---

Implemented Modules

This project satisfies the requirement of 42 Transcendence by implementing several major and minor modules, totaling 27.0 points.

🌐 Web (7.0 Points)

Module	Type	Value	Justification
Frameworks	Major	2.0	Used Fastify for the backend and React for the frontend to build a high-performance SPA.
Real-time features	Major	2.0	Integrated WebSockets for live game state updates and instant chat messaging.
User Interactions	Major	2.0	Implemented a social graph with Chat, Profiles, and a Friend system.
Use an ORM	Minor	1.0	Utilized Prisma ORM for type-safe database interactions and schema management.

👤 User Management (5.0 Points)

Module	Type	Value	Justification
Standard Management	Major	2.0	Full user lifecycle management: registration, profile editing, and friend status.
Remote Auth	Minor	1.0	Support for OAuth 2.0 (Google and 42) for secure, third-party authentication.
2FA System	Minor	1.0	Enhanced security with Two-Factor Authentication via Google Authenticator.
Game Stats	Minor	1.0	Real-time tracking of Wins/Losses, XP, and global Leaderboard rankings.

🎮 Gaming & AI (6.0 Points)

Module	Type	Value	Justification
Web-based Game	Major	2.0	A custom real-time Pong game implemented with modern canvas API and logic.
Remote Players	Major	2.0	Matchmaking system allowing two players to compete from different machines.
AI Opponent	Major	2.0	Developed a challenging AI bot that simulates human movements for solo play.

🛠️ DevOps & UX (9.0 Points)

Module	Type	Value	Justification
ELK Stack	Major	2.0	Centralized logging using Elasticsearch, Logstash, and Kibana for system auditing.
Prometheus/Grafana	Major	2.0	Real-time monitoring of service health and resource usage with custom dashboards.
Public API	Major	2.0	Secured API with documentation (Scalar) and rate-limiting for third-party access.
Notification System	Minor	1.0	Real-time in-app notifications for friend requests and game invites.
Custom Design	Minor	1.0	Built a cohesive, custom-made design system with reusable components and consistent styling.
Health Check	Minor	1.0	Implemented status pages and health endpoints for all microservices.

---

Project Structure

❯ 48 directories, 35 files

.
├── assets
│   └── cover.png
├── backend
│   ├── Dockerfile
│   ├── ecosystem.config.cjs
│   ├── ecosystem.config.js
│   ├── filebeat.yml
│   ├── nodemon.json
│   ├── package-lock.json
│   ├── package.json
│   ├── postcss.config.js
│   ├── prisma
│   │   └── schema.prisma
│   ├── public
│   │   └── images
│   ├── src
│   │   ├── app.ts
│   │   ├── auth
│   │   ├── controllers
│   │   ├── generated
│   │   ├── hooks
│   │   ├── middleware
│   │   ├── models
│   │   ├── plugins
│   │   ├── routes
│   │   ├── schemas
│   │   ├── server.ts
│   │   ├── services
│   │   ├── tests
│   │   ├── types
│   │   └── utils
│   └── tsconfig.json
├── CONTRIBUTING.md
├── docker-compose.yml
├── frontend
│   ├── dist
│   │   ├── assets
│   │   └── index.html
│   ├── Dockerfile
│   ├── index.html
│   ├── nginx.conf
│   ├── package-lock.json
│   ├── package.json
│   ├── postcss.config.js
│   ├── src
│   │   ├── app.tsx
│   │   ├── assets
│   │   ├── components
│   │   ├── config
│   │   ├── context
│   │   ├── global
│   │   ├── lib
│   │   ├── main.tsx
│   │   ├── router.tsx
│   │   ├── screens
│   │   ├── services
│   │   ├── styles
│   │   ├── svg.d.ts
│   │   └── types
│   ├── tailwind.config.js
│   ├── tsconfig.json
│   └── vite.config.ts
├── LICENSE
├── monitoring
│   ├── ELK-Stack
│   │   ├── docker-compose.yml
│   │   ├── filebeat
│   │   ├── logstash
│   │   ├── nginx
│   │   ├── setupDashboards
│   │   ├── setupDataCycleLife
│   │   ├── setupPassowrds
│   │   └── setupSSL
│   └── PrometheusGrafana
│       ├── alertmanager
│       ├── docker-compose.yaml
│       ├── grafana
│       ├── LICENSE
│       ├── Makefile
│       ├── prometheus
│       └── service-x
└── README.md

---

Getting Started

Prerequisites

This project requires the following dependencies:

• Programming Language: JavaScript
• Package Manager: Npm, Yarn
• Container Runtime: Docker

Installation

Build from the source and intsall dependencies:

1. Clone the repository:

   git clone ../

2. Navigate to the project directory:

   cd 

3. Install the dependencies:

   
   

   

   Using docker:

   docker build -t my-app .

   Using npm:

   npm install

   Using yarn:

   yarn install

   Using bun:

   bun install

Usage

Run the project with:

Using docker:

docker run -it {image_name}

Using npm:

npm start

Using yarn:

yarn start

---

Contributing

• 💬 Join the Discussions: Share your insights, provide feedback, or ask questions.
• 🐛 Report Issues: Submit bugs found or log feature requests for the `` project.
• 💡 Submit Pull Requests: Review open PRs, and submit your own PRs.

Contributing Guidelines

1. Fork the Repository: Start by forking the project repository to your LOCAL account.
2. Clone Locally: Clone the forked repository to your local machine using a git client.

   git clone .

3. Create a New Branch: Always work on a new branch, giving it a descriptive name.

   git checkout -b new-feature-x

4. Make Your Changes: Develop and test your changes locally.
5. Commit Your Changes: Commit with a clear message describing your updates.

   git commit -m 'Implemented new feature x.'

6. Push to LOCAL: Push the changes to your forked repository.

   git push origin new-feature-x

7. Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
8. Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!

---

License

is protected under the LICENSE License. For more details, refer to the LICENSE file.

---

Acknowledgments

• Credit contributors