Étude de cas

Interface SPA front-end (Poch'Lib)

Développement de l'interface frontend SPA de Poch'Lib, une librairie de gestion de livres en HTML/CSS/JS.

Contexte

Great'App, startup niçoise de 20 personnes, a chargé sa CTO Marie de livrer Poch'Lib — une SPA de gestion de livres commandée par la librairie « La plume enchantée ». Mission : construire l intégralité du frontend de zéro, en respectant les wireframes de l UX designer Charlotte, avec un rendu responsive sur 3 formats (mobile, tablette, bureau), sans aucun framework JavaScript.

Problèmes & Périmètre

Aucune base de code existante — projet à créer intégralement de zéro
Wireframes fournis par l UX designer à respecter à la lettre
Affichage multi-format requis : mobile, tablette et bureau
Consommation d une API externe pour la recherche de livres (Fetch API)
Contrainte SPA : aucun rechargement de page autorisé
Livraison d un README d installation pour la prise en main client

Solution & Livrables

Recherche de livres via la Google Books API (Fetch) et ajout à une liste personnelle (« Poch'List »)
Persistance de la liste entre les pages via sessionStorage — pas de perte au changement de vue, réinitialisée à la fermeture de l'onglet
Suppression dynamique des livres avec mise à jour du DOM en temps réel (icônes Font Awesome pleine/vide selon l'état du signet)
Code organisé en 3 modules ES6 (application.js, search.js, util.js) avec import/export — zéro dépendance framework
Responsive mobile-first avec media queries pour 3 breakpoints
HTML5 sémantique aligné sur les wireframes UX de Charlotte
SASS structuré (variables, mixins, nesting) — approche DRY validée par le jury
README d'installation livré au client final

Stack & Technologies

HTML5 sémantique — structure de l'interface
SASS — préprocesseur CSS (variables, mixins, DRY)
JavaScript ES6 (modules) — logique SPA répartie sur 3 fichiers, manipulation du DOM
Google Books API — recherche de livres via Fetch
sessionStorage — persistance de la liste de livres côté navigateur
Font Awesome — icônes de signet et de suppression
Media queries — responsive 3 breakpoints (mobile, tablette, bureau)
Git — versionning et livraison

Étapes du projet

1
Analyse des wireframes
Lecture des maquettes de Charlotte, découpage en composants HTML/CSS
2
Intégration HTML/SASS
Structure sémantique, styles mobile-first, mise en place des variables et mixins SASS
3
Logique JavaScript
Fetch API, ajout et suppression de livres, mise à jour dynamique du DOM
4
Responsive
Ajustements des media queries pour les 3 formats : mobile, tablette et bureau
5
Documentation & livraison
Rédaction du README d installation, soutenance validée avec 4/4 compétences

Résultats de la soutenance

Compétences validées: 4/4
Formats responsive: 3
Évaluation jury: Très bonne maîtrise

Captures d'écran