🏓 ft_transcendence: Real-time Multiplayer Pong

Experience the classic Pong game reimagined with modern web technologies and real-time multiplayer capabilities!

🌟 Features

🎮 Game Features

• Real-time multiplayer Pong gameplay
• Matchmaking system
• Live score tracking
• Power-ups and special abilities
• Custom game rooms
• Tournament mode

💬 Social Features

• Real-time chat system
• Friend management
• User profiles
• Achievement system
• Global leaderboard

🏗️ System Architecture

Container Architecture

graph TB
    subgraph "Docker Environment"
        subgraph "Frontend Container"
            R[React App]
            S[Serve Static Files]
        end

        subgraph "Backend Container"
            D[Daphne Server]
            DJ[Django App]
            WS[WebSocket Handler]
        end

        subgraph "Nginx Container"
            NC[Nginx Server]
            SSL[SSL Termination]
            PC[Proxy Controller]
        end

        subgraph "Database Container"
            PG[PostgreSQL]
        end

        NC --> |"Proxy HTTPS\n(443)"| D
        NC --> |"Serve Static\n(80/443)"| S
        R --> |"Build"| S
        D --> |"Handle Requests"| DJ
        D --> |"WebSocket\nConnections"| WS
        DJ --> |"Data\nOperations"| PG
        WS --> |"Real-time\nUpdates"| PG
    end

    User --> |"HTTPS/WSS"| NC

Loading

Network Flow

sequenceDiagram
    participant U as User
    participant N as Nginx
    participant F as Frontend
    participant B as Backend
    participant DB as PostgreSQL

    U->>N: HTTPS Request
    alt Static Content
        N->>F: Request Static Files
        F->>N: Return Built Files
        N->>U: Serve Static Content
    else API Request
        N->>B: Proxy to Backend
        B->>DB: Database Query
        DB->>B: Query Result
        B->>N: API Response
        N->>U: Return Data
    else WebSocket
        U->>N: WS Connection
        N->>B: Proxy WS
        activate B
        Note over B: Keep Connection Alive
        B->>DB: Real-time Updates
        B->>N: WS Messages
        N->>U: Real-time Data
        deactivate B
    end

Loading

SSL Certificate Management

graph LR
    subgraph "SSL Management"
        I[Initial Setup] -->|Generate| K[SSL Keys]
        K -->|Mount| N[Nginx]
        K -->|Mount| B[Backend]
        N -->|Terminate SSL| R[Requests]
        B -->|Internal SSL| W[WebSocket]
    end

Loading

Volume Management

graph TB
    subgraph "Docker Volumes"
        NV[nginx_certs]
        FV[frontend_build]
        DV[database]

        subgraph "Mounted Locations"
            NV -->|"SSL Certs"| NC[Nginx Container]
            NV -->|"SSL Certs"| BC[Backend Container]
            FV -->|"Static Files"| NC
            DV -->|"Persistent Data"| PG[PostgreSQL Container]
        end
    end

Loading

Request Flow

graph LR
    subgraph "Request Router"
        H[HTTPS Request] -->|443| N[Nginx]
        N -->|Static| S[Static Files]
        N -->|API| B[Backend API]
        N -->|WebSocket| W[WS Handler]
        N -->|Admin| A[Admin Panel]
        N -->|Media| M[Media Files]
    end

Loading

🛠️ Technical Stack

Frontend Container (Node.js Alpine)

• React.js with TypeScript
• CSS for styling
• Socket.io client for real-time communication
• Production-optimized build
• Static file serving
• Environment variable support

Backend Container (Python Slim)

• Django with Daphne server
• WebSocket support
• SSL certificate integration
• Automatic migrations
• PostgreSQL integration
• Real-time game state management

Nginx Container

• SSL termination
• Reverse proxy
• Static file serving
• WebSocket proxy
• Media file handling
• Security optimizations

Database Container (PostgreSQL)

• Persistent storage
• Environment configuration
• Automatic restart
• Data integrity
• Backup support

🎨 User Interface Gallery

Landing Page

Clean Landing Page

Loading Animation

Clean Settings

Home Page

Clean Home

Game Management

Clean Game Management

Chat Interface

Clean Chat

Leaderboard

Clean leaderboard

Settings Panel

Clean Settings

Profile Page

Clean Profile

🔒 Security Features

SSL/TLS Configuration

• TLS 1.2 and 1.3 support
• Strong cipher suite configuration
• Automatic certificate generation
• Secure key permissions (644)

Proxy Security

• Real IP forwarding
• XSS protection
• Secure headers
• Maximum body size limits

🚀 Scaling Considerations

1. Horizontal Scaling

   • Backend containers can be replicated
   • WebSocket connections are load-balanced
   • Static content is cached

2. Performance Optimization

   • Nginx caching for static files
   • Database connection pooling
   • WebSocket connection management

3. Monitoring Points

   • Container health checks
   • Database performance
   • WebSocket connection status
   • SSL certificate validity

Color Palette

Color	Hex Code	Usage
Primary	#000000	Main actions, buttons
Secondary	#565656	Highlights, success states
Accent	#FF4242	Notifications, alerts
Background	#000000	Main background
Text	#B0B0B0	Primary text

🏆 Achievement System

• 🎮 The emperor: the player has to be at the top of the leaderboard
• 🏅 The joker: the player has lost 5 matches
• 💫 maestro: the player has to win two tournaments in a row
• 🌟 down keeper: The player has to win three matches with no points lost
• 🔥 thunder strike: The player has to win a match in a record time

💡 Development Philosophy

Our project embraces:

• Clean, maintainable code
• Responsive design
• Real-time performance
• Scalable architecture
• User-centered design

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Made with ❤️ by the ft_transcendence team

© 2025 ft_transcendence. All rights reserved.