Pictionnary
Pictionnary ist ein Full-Stack-Online-Pictionary-Spiel. Das NestJS-Backend stellt JWT-gesicherte REST-APIs für Authentifizierung, Raumverwaltung, Wörter, Kommentare und Verlauf bereit, mit Swagger-Dokumentation und globaler Validierung. Das React-Frontend bietet Login/Register-Flows, Raum-Erstellung und -Beitritt, Spieler-Listing und Raum-Ansichten. CORS ist für SPA-Integration aktiviert, und DTO-gesteuerte Validierung sichert Eingaben.
Übersicht
Pictionnary ist ein Full-Stack-Online-Pictionary-Spiel. Das NestJS-Backend stellt JWT-gesicherte REST-APIs für Authentifizierung, Raumverwaltung, Wörter, Kommentare und Verlauf bereit, mit Swagger-Dokumentation und globaler Validierung. Das React-Frontend bietet Login/Register-Flows, Raum-Erstellung und -Beitritt, Spieler-Listing und Raum-Ansichten. CORS ist für SPA-Integration aktiviert, und DTO-gesteuerte Validierung sichert Eingaben.
Schlüsselfunktionen
JWT-gesicherte Authentifizierung mit Registrierung/Login
pages.portfolio.projects.pictionnary.features.1
Wort (picword) CRUD für Spielrunden
Verlaufs-Speicherung und -Abruf für Scores
Kommentar-Modul für Spiel-Kollaborations-Kontext
Swagger-Dokumentation mit Bearer-Auth
Globale Validierung mit DTOs und ValidationPipe
CORS-aktivierte REST-API für SPA
React SPA mit Routen für Login, Register, Raum erstellen/beitreten und Raum-Ansicht
LocalStorage-Helfer für JWT/Session-Daten
Technische Highlights
Aufbau NestJS REST-API mit JWT-Sicherheit, Swagger-Docs und Validierung-First-DTO-Design
Implementierung von Raum-, Wort-, Verlaufs-, Kommentar- und Benutzer-Modulen mit MongoDB/Mongoose-Persistenz
Erstellung React SPA mit Auth, Raum-Erstellungs-/Beitritts-Flows und Spieler-Listing
Aktivierung von CORS und Bearer-authentifiziertem Swagger für einfache SPA-Integration und Tests
Herausforderungen und Lösungen
JWT-gesicherte Routen
Konfiguration globaler AuthGuard mit passport-jwt und Swagger Bearer-Auth zur Sicherung von Endpunkten
Raum-Mitgliedschafts-Verwaltung
Bereitstellung von Endpunkten für Erstellen/Beitreten von Räumen, Abrufen von Spielern und Generieren von Einladungslinks
Validierung und DTO-Durchsetzung
Verwendung von class-validator DTOs mit globalem ValidationPipe zur Whitelist und Validierung von Eingaben
SPA-Integration
Aktivierung von CORS und strukturierte Endpunkte für nahtlosen React SPA-Verbrauch
Technologien
Backend
Frontend
Tooling
Projektinformationen
- Status
- Completed
- Jahr
- 2023
- Architektur
- Client-Server (REST) mit SPA-Frontend
- Category
- Spieleentwicklung