Pokémon TCG SPA
Créateur de Deck
Interface de création de decks Pokémon avec recherche intégrée
Collection de Decks
Gestion et visualisation des decks créés
Description du projet
Pokémon TCG SPA est une application web monopage (Single Page Application) développée avec Vue.js et TypeScript qui permet aux utilisateurs de gérer des decks de cartes Pokémon. Cette application offre une interface utilisateur intuitive et réactive pour créer, visualiser et gérer des collections de cartes.
L'application permet aux utilisateurs de :
- Créer un compte et se connecter à l'application
- Parcourir un catalogue complet de cartes Pokémon
- Rechercher des cartes par nom
- Créer des decks personnalisés en ajoutant et retirant des cartes
- Nommer et sauvegarder leurs decks
- Visualiser, gérer et supprimer leurs decks existants
Fonctionnalités principales
- Authentification complète : Système d'inscription et de connexion avec stockage de token JWT
- Catalogue de cartes : Affichage complet des cartes Pokémon disponibles
- Recherche dynamique : Filtrage en temps réel des cartes par nom
- Créateur de deck : Interface glisser-déposer pour composer des decks personnalisés
- Gestion de collection : Tableau interactif de visualisation des decks avec actions contextuelles
- Prévisualisation de deck : Affichage modal du contenu d'un deck existant
- Design System intégré : Interface cohérente basée sur Naive UI
Technologies utilisées
Frontend
- Vue.js 3 avec Composition API
- TypeScript pour le typage statique
- Naive UI comme Design System
- Vue Router pour la navigation
- Pinia pour la gestion d'état
- Vite comme outil de build
Backend (consommation)
- API REST Pokémon (développée en Node.js)
- Fetch API pour les appels HTTP
- JWT pour l'authentification
Outils de développement
- ESLint pour la qualité du code
- TypeScript compiler pour la vérification des types
- Prettier pour le formatage du code
- GitHub pour le versionnement
Défis et solutions
Le développement de cette application a présenté plusieurs défis intéressants :
Gestion d'état avec TypeScript
L'intégration de TypeScript avec Pinia a nécessité une définition précise des types pour les stores, les actions et les mutations. Cette approche a permis d'obtenir une meilleure sécurité de type et une expérience de développement améliorée avec l'autocomplétion.
Interface utilisateur dynamique
La création d'une interface intuitive pour le glisser-déposer des cartes entre la collection et le deck a été un défi technique. La solution a consisté à utiliser des événements Vue.js et des propriétés réactives pour maintenir la synchronisation entre les différentes parties de l'application.
Optimisation des performances
La gestion d'un grand nombre de cartes et d'images a nécessité l'implémentation de techniques d'optimisation comme le chargement paresseux (lazy loading) et la mise en cache des données pour garantir une expérience utilisateur fluide, même avec de grandes collections.
Authentification et sécurité
La mise en place d'un système d'authentification robuste avec JWT, incluant la gestion de la persistance de session et la protection des routes, a été réalisée avec Vue Router et des gardes de navigation personnalisés.