Mode Éco activé
Vous consultez actuellement la version ultra-légère de mon portfolio.
Application e-sport avec chat (2025)
Cette plateforme permet aux organisateurs d'événements e-sport de créer et gérer des tournois, tout en offrant aux participants un moyen de communiquer en temps réel via un système de chat intégré.
Aperçu du projet
Ce projet démontre l'intégration d'un chat en temps réel dans une application web avec une architecture claire séparant les responsabilités. Le frontend utilise Astro pour le rendu statique avec des îlots interactifs via Alpine.js et HTMX, tandis que le backend utilise Express avec son module WebSocket pour gérer à la fois les requêtes API et la communication en temps réel.
Architecture du projet
Frontend:
- Astro pour le rendu statique avec hydratation partielle
- Alpine.js pour la gestion de l'état local et les interactions UI légères
- HTMX pour les requêtes AJAX et l'interaction avec le serveur sans JavaScript complexe
- Tailwind CSS pour un styling efficace avec des classes utilitaires
Backend:
- Architecture monolithique intégrée pour simplicité et maintenance
- Serveur Express gérant à la fois l'API REST et la communication WebSocket
- Module WebSocket natif d'Express pour la communication en temps réel
- MongoDB pour le stockage des messages et des données utilisateurs
- PostgreSQL pour les données structurées (événements, tournois, équipes)
Défis techniques
- Concevoir une architecture où Express gère de manière cohérente à la fois les requêtes HTTP traditionnelles et les connexions WebSocket persistantes
- Maintenir la cohérence des données entre le frontend et le backend (API REST et WebSocket)
- Choisir les technologies appropriées pour chaque partie de l'application: HTMX standard pour les opérations CRUD et l'extension WebSocket de HTMX uniquement pour les fonctionnalités nécessitant une communication en temps réel
- Mettre en place un système d'authentification cohérent pour l'API REST et les connections WebSocket
Solutions mises en œuvre
Serveur Express intégré
Utilisation d'un serveur Express unique intégrant nativement WebSocket, simplifiant le déploiement et la maintenance tout en assurant une communication fluide entre les différentes parties de l'application.
Gestion des événements
Système permettant aux utilisateurs de créer des événements, de s'y abonner, et aux modérateurs de les gérer via un dashboard dédié, assurant une expérience communautaire fluide.
HTMX pour la simplicité
HTMX permet d'obtenir une expérience dynamique semblable à une SPA mais avec beaucoup moins de JavaScript côté client, rendant l'application plus légère et réactive.
WebSocket pour le chat en temps réel
Utilisation ciblée de WebSocket via l'extension HTMX uniquement pour les fonctionnalités de chat, offrant une expérience en temps réel là où elle est vraiment nécessaire tout en gardant l'application légère.
Leçons apprises
- • L'architecture monolithique avec Express peut offrir une excellente séparation des préoccupations en interne tout en simplifiant le déploiement et la maintenance
- • HTMX et WebSocket forment une combinaison puissante pour créer des interfaces dynamiques avec peu de JavaScript
- • L'utilisation de bases de données spécialisées pour différents types de données (PostgreSQL pour les données structurées, MongoDB pour les messages) permet d'optimiser les performances
- • Une bonne documentation des API et des modules internes est essentielle même dans une architecture monolithique
Réflexion personnelle
Ce projet a été une excellente occasion d'explorer une architecture monolithique bien structurée avec des responsabilités clairement définies. L'utilisation d'Express avec son module WebSocket natif pour gérer à la fois l'API REST et la communication en temps réel s'est avérée être une solution élégante et performante. J'ai particulièrement apprécié l'intégration de HTMX qui permet d'obtenir une expérience utilisateur dynamique avec un minimum de JavaScript. Ce projet a été développé avec Express pour sa simplicité d'implémentation et sa flexibilité. Si l'application venait à gagner en popularité, j'envisagerais de migrer vers un backend Phoenix/Elixir pour ses capacités de concurrence et de mise à l'échelle supérieures.
Technologies utilisées
Astro, Tailwind CSS, Alpine.js, HTMX, WebSocket, Express, PostgreSQL, MongoDB