Contexte du projet
Dans le cadre de la SAE105, développement d’une application web de gestion de collection Pokémon. Un dresseur peut se connecter, consulter son Pokédex et gérer sa collection (ajout/suppression).
Contrainte principale : Tout coder from scratch en PHP natif, HTML/CSS et JavaScript, sans framework ni librairie. Les données sont gérées via des fichiers JSON et une API fournie.
Objectifs
- Authentification du dresseur
- Affichage de la collection avec avatars
- Ajout/suppression de Pokémon
- Gestion des quantités (augmenter/diminuer)
- Page détail avec caractéristiques
Mes missions
En tant que designer et développeur full-stack, gestion complète du projet :
Conception
- Wireframing des 3 écrans (accueil, collection, détail)
- UI Design sur Figma
- Planche de style (couleurs, typo, composants)
Développement Front-end
- Intégration HTML/CSS des maquettes
- Interactions JavaScript (formulaires, feedbacks)
Développement Back-end
- Architecture PHP modulaire
- Système de sessions (connexion/déconnexion)
- CRUD complet (Create, Read, Update, Delete)
- Manipulation des fichiers JSON
- Traitement des formulaires POST/GET
Fonctionnalités développées
Page d’accueil : Message personnalisé + avatar + bouton connexion
Page Collection : Formulaire d’ajout, grille des Pokémon capturés, boutons +1/-1 pour gérer les quantités, suppression automatique si quantité = 0
Page Détail : Avatar grande taille, caractéristiques (nom, taille, poids, expérience), quantité possédée, bouton retour
Réalisations techniques
Architecture : Séparation claire entre pages (index, collection, détail) et scripts de traitement (add, remove)
Base de données JSON : 3 fichiers (pokemon.json, collectors.json, associations.json) pour simuler une BDD relationnelle
API utilisée : Fonctions fournies pour manipuler les données (get_pokemon_by_id(), list_all_pokemon(), add_pokemon_to_collector(), etc.)
Défis rencontrés
Architecture sans framework : Création de ma propre logique de routage et d’organisation du code
CSS natif : Le plus gros défi. Difficulté à structurer les styles proprement, ce qui m’a poussé à créer des projets annexes pour m’entraîner spécifiquement sur ce point
Compétences développées
Techniques : PHP natif, manipulation JSON, HTML/CSS, JavaScript, architecture MVC, gestion de sessions
Transversales : Autonomie, persévérance face aux difficultés CSS, auto-formation
Outils : Figma (design), Git/GitHub (versionning), débogage PHP
Bilan personnel
Ce projet m’a révélé une préférence nette pour le back-end (logique PHP, manipulation de données) plutôt que le front-end et le design CSS.
Les difficultés en CSS m’ont d’abord frustré, mais au lieu d’abandonner, j’ai créé des projets annexes pour m’entraîner spécifiquement. Cette approche proactive m’a permis de progresser et de mieux réussir les projets suivants.
Apprentissages clés
- Confirmation de mon attrait pour le développement back-end
- Importance de maîtriser les fondamentaux (coder sans framework force à vraiment comprendre)
- Face à une difficulté technique, s’entraîner davantage plutôt que l’éviter
- Le CSS reste important même si ce n’est pas ma partie préférée (d’où mon adoption de Tailwind CSS par la suite)