Projet

Design Pattern Playground

Technologies

Resume

Résumé

Dans le cadre de ma montée en compétences en architecture logicielle, j’ai souhaité aller au-delà des exemples théoriques souvent proposés autour des design patterns.

Plutôt que de simplement implémenter ces patterns dans du code, j’ai imaginé une application interactive permettant de :

comprendre les design patterns visuellement
expérimenter leur comportement en temps réel
valider ses connaissances via des quiz

C’est ainsi qu’est né Design Pattern Playground.

Lien démo

Lien du site

Description

Concept

Design Pattern Playground est une application web interactive qui transforme l’apprentissage des design patterns en une expérience visuelle et ludique.

Chaque pattern est décliné en 3 dimensions :

Une démonstration interactive
Une simulation dynamique
Un quiz pédagogique

L’objectif est simple :
comprendre un pattern en quelques minutes en le manipulant directement

Patterns implémentés

À ce jour, l’application couvre plusieurs design patterns fondamentaux :

Création

Factory
Singleton

Structure

Decorator
Flyweight

Comportement

Strategy
Observer
State

Chaque pattern est présenté à travers une interface dédiée, avec une visualisation spécifique adaptée à son fonctionnement.

Approche pédagogique

L’un des points forts du projet est son approche centrée sur l’apprentissage actif.

Exemple : Flyweight

simulation de milliers d’objets
comparaison avec / sans partage mémoire
visualisation de la consommation mémoire

Exemple : State

machine à états interactive
transitions en temps réel
visualisation du state courant

Exemple : Decorator

empilement de comportements (effets, bonus…)
modification dynamique d’un objet
visualisation des impacts en direct

Architecture technique

Le projet repose sur une architecture moderne, modulaire et extensible.

Backend

Spring Boot
Architecture modulaire par design pattern
Système de registre dynamique pour brancher facilement de nouveaux patterns
API REST générique (schema dynamique + exécution des patterns)

Chaque pattern est implémenté comme un module indépendant respectant un contrat commun.

Frontend

React
Interface dynamique basée sur les schémas fournis par l’API
Visualisation en temps réel (graph, simulation, interactions)
Approche orientée UX pour favoriser la compréhension

Déploiement

Containerisation avec Docker
Déploiement sur VPS personnel
Registry Docker privée pour la gestion des images

CI/CD

Pipeline automatisé :
- build des images Docker
- push vers registry privée
- déploiement sur VPS

Permet une mise en production rapide et maîtrisée.

Points clés

Ce projet met en avant plusieurs aspects importants :

Compréhension approfondie des design patterns
Architecture backend extensible
Frontend interactif et dynamique
Déploiement complet (Dev → Prod)

Évolutions possibles

Plusieurs pistes sont envisagées pour la suite :

ajout de nouveaux patterns (Command, Mediator, Chain of Responsibility…)
système de progression utilisateur
génération automatique de code (Java / UML)
mode multijoueur / défis
export des scénarios

Conclusion

Design Pattern Playground est bien plus qu’un projet technique :
c’est une plateforme d’apprentissage interactive qui permet de rendre concrets des concepts souvent abstraits.

Il illustre ma capacité à concevoir :

une architecture complète
une expérience utilisateur réfléchie
et une approche pédagogique innovante