Eco Mode activated
You are currently viewing the ultra-lightweight version of my portfolio.
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.
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)
Technical challenges
- Designing an architecture where Express consistently handles both traditional HTTP requests and persistent WebSocket connections
- Maintaining data consistency between the frontend and backend (REST API and WebSocket)
- 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
- 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.
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. This project was developed with Express for its ease of implementation and flexibility. If the application were to gain popularity, I would consider migrating to a Phoenix/Elixir backend for its superior concurrency and scaling capabilities.
Technologies used
Astro, Tailwind CSS, Alpine.js, HTMX, WebSocket, Express, PostgreSQL, MongoDB