E-sport Application with Chat (2025)

This platform allows e-sport event organizers to create and manage tournaments, while offering participants a way to communicate in real-time via an integrated chat system.

Project overview

This project demonstrates the integration of real-time chat into a web application with a clear architecture separating responsibilities. The frontend uses Astro for static rendering with interactive islands via Alpine.js and HTMX, while the backend uses Express with its WebSocket module to handle both API requests and real-time communication.

Visit prototype Frontend Repo Backend Repo

Project architecture

Frontend 🖥️

• Astro for static rendering with partial hydration
• Alpine.js for local state management and lightweight UI interactions
• HTMX for AJAX requests and server interaction without complex JavaScript
• Tailwind CSS for efficient styling with utility classes

Backend ⚙️

• Integrated monolithic architecture for simplicity and maintenance
• Express server handling both REST API and WebSocket communication
• Native WebSocket module for Express for real-time communication
• MongoDB for storing messages and user data
• PostgreSQL for structured data (events, tournaments, teams)

Component interaction

Express + WebSocket Server

Single server managing the entire backend application

→ REST API for authentication and CRUD operations
→ Management of e-sport events and tournaments
→ Establishment and maintenance of WebSocket connections for chat
→ Broadcasting messages in appropriate chat rooms
→ Persistent storage in PostgreSQL and MongoDB

Frontend HTMX + Alpine.js

Responsive user interface with minimal JavaScript

→ HTMX intercepts forms and makes AJAX requests to the Express API
→ HTMX connects to WebSocket for real-time messages
→ Alpine.js handles local state and complex UI interactions
→ Astro optimizes initial loading with server-side rendering

Interface de chat de l'application e-sport

Technical challenges

WebSocket Integration

Designing an architecture where Express consistently handles both traditional HTTP requests and persistent WebSocket connections.

Distributed state management

Maintaining data consistency between the frontend and backend (REST API and WebSocket).

Targeted technology integration

Selecting the appropriate technologies for each part of the application: standard HTMX for CRUD operations and HTMX WebSocket extension only for features requiring real-time communication.

Inter-service security

Implementing a consistent authentication system for the REST API and WebSocket connections.

Implemented solutions

Integrated Express Server

🔄

Using a single Express server with native WebSocket integration, simplifying deployment and maintenance while ensuring smooth communication between different parts of the application.

Event Management

🔔

System allowing users to create events, subscribe to them, and moderators to manage them via a dedicated dashboard, ensuring a smooth community experience.

HTMX for simplicity

⚡

HTMX provides a dynamic SPA-like experience but with much less client-side JavaScript, making the application lighter and more responsive.

WebSocket for real-time chat

💬

Targeted use of WebSocket through the HTMX extension only for chat features, providing a real-time experience where it's truly needed while keeping the application lightweight.

Performance approach

JS bundle size

Minimal

Strategic use of HTMX to reduce the amount of client-side JavaScript

Partial page updates

Efficient

HTMX enables partial UI updates without complete page reloads

Real-time communication

Targeted

HTMX WebSocket extension used only for chat features, where real-time is necessary

Lessons learned

Monolithic architecture with Express can offer excellent separation of concerns internally while simplifying deployment and maintenance
HTMX and WebSocket form a powerful combination for creating dynamic interfaces with little JavaScript
Using specialized databases for different types of data (PostgreSQL for structured data, MongoDB for messages) optimizes performance
Good documentation of APIs and internal modules is essential even in a monolithic architecture

Personal reflection

This project was an excellent opportunity to explore a well-structured monolithic architecture with clearly defined responsibilities. Using Express with its native WebSocket module to handle both REST API and real-time communication proved to be an elegant and performant solution. I particularly appreciated the integration of HTMX, which provides a dynamic user experience with minimal JavaScript, while maintaining a clean server-side architecture. This project was developed with Express for its ease of implementation and flexibility. For the current traffic level, this architecture is perfectly suitable. If the application were to gain popularity and require better load management, I would consider migrating to a Phoenix/Elixir backend, known for its superior concurrency and scaling capabilities.

Technologies used

Backend/Frontend Separation

Astro Alpine.js HTMX TailwindCSS

Express WebSocket PostgreSQL MongoDB

← Previous project: Object Library - Quimper Next project: Eco-friendly personal portfolio →

Interested in working together?

I am available for short-term or long-term assignments, team projects or web eco-design consultations.

Contact me