✏️

Pictionnary

Completed 2023 • Client-Server (REST) with SPA Frontend

Pictionnary is a full-stack online Pictionary game. The NestJS backend exposes JWT-secured REST APIs for authentication, room management, words, comments, and history, with Swagger documentation and global validation. The React frontend provides login/register flows, room creation and joining, player listing, and room views. CORS is enabled for SPA integration, and DTO-driven validation secures inputs.

Game Development Full-Stack Development Web Development Software Engineering

Overview

Pictionnary is a full-stack online Pictionary game. The NestJS backend exposes JWT-secured REST APIs for authentication, room management, words, comments, and history, with Swagger documentation and global validation. The React frontend provides login/register flows, room creation and joining, player listing, and room views. CORS is enabled for SPA integration, and DTO-driven validation secures inputs.

Key Features

✓

JWT-secured authentication with registration/login

✓

pages.portfolio.projects.pictionnary.features.1

✓

Word (picword) CRUD for game rounds

✓

History storage and retrieval for scores

✓

Comments module for game collaboration context

✓

Swagger documentation with bearer auth

✓

Global validation with DTOs and ValidationPipe

✓

CORS-enabled REST API for SPA

✓

React SPA with routes for login, register, create/join room, and room view

✓

LocalStorage helpers for JWT/session data

Technical Highlights

⚡

Built NestJS REST API with JWT security, Swagger docs, and validation-first DTO design

⚡

Implemented room, word, history, comment, and user modules with MongoDB/Mongoose persistence

⚡

Created React SPA with auth, room creation/join flows, and player listing

⚡

Enabled CORS and bearer-authenticated Swagger for easy SPA integration and testing

Challenges and Solutions

JWT-Secured Routes

Configured global AuthGuard with passport-jwt and Swagger bearer auth to secure endpoints

Room Membership Management

Provided endpoints for creating/joining rooms, fetching players, and generating invite links

Validation and DTO Enforcement

Used class-validator DTOs with global ValidationPipe to whitelist and validate input

SPA Integration

Enabled CORS and structured endpoints for seamless React SPA consumption

Technologies

Backend

NestJS 10 TypeScript MongoDB Mongoose JWT Passport @nestjs/swagger Multer bcrypt

Frontend

React 18 (CRA) React Router 6 Tailwind config

Tooling

ESLint Prettier Jest Supertest

Project Information

Status
Completed
Year
2023
Architecture
Client-Server (REST) with SPA Frontend
Category
Game Development
Back to Portfolio View Projects Game Development