Öko-Modus aktiviert
Sie sehen gerade die ultraleichte Version meines Portfolios.
E-Sport-Anwendung mit Chat (2025)
Diese Plattform ermöglicht es E-Sport-Veranstaltern, Turniere zu erstellen und zu verwalten, während sie den Teilnehmern eine Möglichkeit bietet, über ein integriertes Chat-System in Echtzeit zu kommunizieren.
Projektübersicht
Dieses Projekt demonstriert die Integration eines Echtzeit-Chats in eine Webanwendung mit einer klaren Architektur, die Verantwortlichkeiten trennt. Das Frontend verwendet Astro für statisches Rendering mit interaktiven Inseln über Alpine.js und HTMX, während das Backend Express mit seinem WebSocket-Modul verwendet, um sowohl API-Anfragen als auch Echtzeit-Kommunikation zu verarbeiten.
Projektarchitektur
Frontend:
- Astro für statisches Rendering mit partieller Hydratation
- Alpine.js für lokale Zustandsverwaltung und leichtgewichtige UI-Interaktionen
- HTMX für AJAX-Anfragen und Serverinteraktion ohne komplexes JavaScript
- Tailwind CSS für effizientes Styling mit Utility-Klassen
Backend:
- Integrierte monolithische Architektur für Einfachheit und Wartung
- Express-Server, der sowohl REST-API als auch WebSocket-Kommunikation verarbeitet
- Natives WebSocket-Modul für Express für Echtzeit-Kommunikation
- MongoDB für die Speicherung von Nachrichten und Benutzerdaten
- PostgreSQL für strukturierte Daten (Veranstaltungen, Turniere, Teams)
Technische Herausforderungen
- Entwicklung einer Architektur, in der Express sowohl traditionelle HTTP-Anfragen als auch persistente WebSocket-Verbindungen konsistent verarbeitet
- Aufrechterhaltung der Datenkonsistenz zwischen dem Frontend und Backend (REST-API und WebSocket)
- Auswahl der geeigneten Technologien für jeden Teil der Anwendung: Standard-HTMX für CRUD-Operationen und HTMX-WebSocket-Erweiterung nur für Funktionen, die Echtzeit-Kommunikation erfordern
- Implementierung eines konsistenten Authentifizierungssystems für die REST-API und WebSocket-Verbindungen
Umgesetzte Lösungen
Integrierter Express-Server
Verwendung eines einzelnen Express-Servers mit nativer WebSocket-Integration, wodurch Bereitstellung und Wartung vereinfacht werden und gleichzeitig eine reibungslose Kommunikation zwischen verschiedenen Teilen der Anwendung gewährleistet wird.
Ereignisverwaltung
System, das Benutzern ermöglicht, Ereignisse zu erstellen, sie zu abonnieren und Moderatoren, diese über ein dediziertes Dashboard zu verwalten, um ein reibungsloses Gemeinschaftserlebnis zu gewährleisten.
HTMX für Einfachheit
HTMX bietet ein dynamisches SPA-ähnliches Erlebnis, aber mit viel weniger clientseitigem JavaScript, wodurch die Anwendung leichter und reaktionsschneller wird.
WebSocket für Echtzeit-Chat
Gezielter Einsatz von WebSocket über die HTMX-Erweiterung nur für Chat-Funktionen, was eine Echtzeit-Erfahrung bietet, wo sie wirklich benötigt wird, und gleichzeitig die Anwendung leicht hält.
Gelernte Lektionen
- • Monolithische Architektur mit Express kann intern eine hervorragende Trennung der Zuständigkeiten bieten und gleichzeitig Bereitstellung und Wartung vereinfachen
- • HTMX und WebSocket bilden eine leistungsstarke Kombination zur Erstellung dynamischer Schnittstellen mit wenig JavaScript
- • Die Verwendung spezialisierter Datenbanken für verschiedene Arten von Daten (PostgreSQL für strukturierte Daten, MongoDB für Nachrichten) optimiert die Leistung
- • Eine gute Dokumentation von APIs und internen Modulen ist auch in einer monolithischen Architektur unerlässlich
Persönliche Reflexion
Dieses Projekt war eine ausgezeichnete Gelegenheit, eine gut strukturierte monolithische Architektur mit klar definierten Verantwortlichkeiten zu erkunden. Die Verwendung von Express mit seinem nativen WebSocket-Modul zur Verarbeitung sowohl der REST-API als auch der Echtzeit-Kommunikation erwies sich als elegante und leistungsstarke Lösung. Besonders geschätzt habe ich die Integration von HTMX, das ein dynamisches Benutzererlebnis mit minimalem JavaScript bietet. Dieses Projekt wurde mit Express für seine einfache Implementierung und Flexibilität entwickelt. Sollte die Anwendung an Popularität gewinnen, würde ich eine Migration zu einem Phoenix/Elixir-Backend für seine überlegenen Nebenläufigkeits- und Skalierungsfähigkeiten in Betracht ziehen.
Verwendete Technologien
Astro, Tailwind CSS, Alpine.js, HTMX, WebSocket, Express, PostgreSQL, MongoDB