🎥 Click the image above to watch the demo
"Not just a game. A lesson in secure, scalable, real-time architecture."
ft_transcendence is a feature-rich, real-time multiplayer Pong platform. But under the hood, it's a showcase of modern DevOps and Secure Software Development Life Cycle (SSDLC) practices.
Built with a microservices-inspired architecture, it leverages Next.js for a responsive frontend, Fastify for a high-performance backend, and HashiCorp Vault for enterprise-grade secret management. This isn't just a coding exercise; it's a simulation of a production-ready environment.
Why this stack? Because performance and security matter.
- 🛡️ Enterprise Security (Vault): Unlike typical student projects that store secrets in
.envfiles, this project uses HashiCorp Vault to manage secrets dynamically. This mimics real-world banking and enterprise security standards. - ⚡ Real-Time Performance: Utilizes WebSockets for low-latency gameplay, ensuring a smooth competitive experience.
- 🐋 Containerized Infrastructure: Fully Dockerized environment ensuring consistency from development to production.
make upis all you need. - 🔐 Two-Factor Authentication (2FA): Implements industry-standard TOTP 2FA for robust user account security.
- 📊 Interactive Dashboard: Dynamic visualizations of user stats and match history.
This project follows a separation of concerns principle, dividing the application into distinct, containerized services:
graph TD
User[User] -->|HTTPS/WSS| Nginx[Nginx WAF & Load Balancer]
Nginx -->|Traffic| Frontend[Next.js Frontend]
Nginx -->|API Req| Backend[Fastify Backend]
Backend -->|Read/Write| DB[(Database)]
Backend -->|Auth| Vault[HashiCorp Vault]
Backend -->|Metrics| Prom[Prometheus Monitor]
| Component | Technology | Reasoning |
|---|---|---|
| Frontend | Next.js 15, Framer Motion | SSR for SEO and performance; Motion for premium feel. |
| Backend | Fastify (Node.js) | Low overhead, high throughput API handling. |
| Database | PostgreSQL / SQLite | Relational data integrity for match history. |
| Security | HashiCorp Vault | Centralized secret management (No hardcoded keys!). |
| DevOps | Docker Compose, Makefile | 1-command deployment and environment isolation. |
| Remote Match Launcher | Tournament Launcher |
|---|---|
 |
 |
| Local Launcher | Matches History |
|---|---|
 |
 |
| User Profile | Account Settings |
|---|---|
 |
 |
| Login Page | Registration |
|---|---|
 |
 |
| Live Chat | Dashboard (Main) |
|---|---|
 |
 |
| Dashboard (Arabic) | Dashboard (French) |
|---|---|
 |
 |
| High Contrast Mode | Dark Mode |
|---|---|
 |
 |
| Grafana Query Dashboard | Grafana HTTP Dashboard |
|---|---|
 |
 |
We believe in "Infrastructure as Code". You don't need to configure 10 files to run this.
- Docker & Docker Compose
- Make
-
Clone the repository
git clone git@github.com:salahrachidi/The-transcendence.git cd ft_transcendence -
Launch the Infrastructure
make up
This command orchestrates the frontend, backend, database, and Vault containers automatically.
-
Access the App Open https://localhost in your browser. (Accept the self-signed certificate, part of our HTTPS setup).
- Immersive Arcade UI: Crafted a custom Glassmorphism/Neon design language using TailwindCSS, Framer Motion, and Lucide Icons to enhance user immersion to the Arcade game vibe.
- The "Cookie" Dilemma: Solving
SameSite=Strictpolicies while handling cross-container communication. - Secret Zero: Bootstrapping Vault securely without hardcoding the initial unseal tokens in the application code.
- State Synchronization: Handling race conditions in real-time game logic using optimistic UI updates.
Mehdi El Akary - AI/ML & DevOps Enthusiast LinkedIn | GitHub
Salaheddine rachidi - Full-Stack & Robotics & AI/ML Enthusiast LinkedIn | GitHub
mohamed elhoudaigui - AI/ML & Backend Enthusiast LinkedIn | GitHub
Anas El Ammari - CyberSecurity & AI/ML Enthusiast LinkedIn | GitHub