TRAINING PROJECT

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 Fetch API et ajout dans une liste personnelle
Suppression dynamique des livres avec mise à jour du DOM en temps réel
SPA complète en JavaScript ES6 pur — 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 — logique SPA, Fetch API, manipulation du DOM
Fetch API — requêtes vers l API externe de livres
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

Poch'Lib — UI cover

Captures d'écran