MoodBoard est une application web moderne qui permet de rechercher, organiser et sauvegarder des images inspirantes grâce à l'API Unsplash. Pensée pour les designers, créatifs et étudiants, elle offre une expérience fluide, responsive et agréable, avec un système avancé de favoris et de collections sauvegardés via LocalStorage.
Projet réalisé dans le cadre du TP de Web Avancé (Master 2, UDBL), visant à mettre en pratique :
- L'utilisation d'une API externe (Unsplash API)
- Les fondamentaux front-end modernes (HTML, CSS, JavaScript ES6+)
- Le design responsive (Flexbox / CSS Grid)
- La gestion de données côté navigateur (LocalStorage)
- Le versionnement Git/GitHub et le déploiement sur GitHub Pages
- Recherche d'images via l'API Unsplash
- Affichage en grille responsive et esthétique
- Ajout et suppression des favoris, organisés dans des collections (une collection "Par défaut" fournie)
- Création, renommage et suppression de collections (sauf "Par défaut")
- Sauvegarde automatique des favoris et collections dans LocalStorage
- Lightbox avancée : affichage en grand, navigation clavier (suivant/précédent), fermeture via bouton/ESC/clic en dehors
- Gestion claire des états vides (aucun résultat, aucune collection, aucune image dans une collection)
- Adaptation mobile, tablette et desktop
- Grille des collections corrigee (plus d'affichage en colonne unique) et hauteur de page calee sur 100vh - navigation.
- Lightbox centre l'image en respectant son format (portrait/paysage) avec contraintes max viewport.
- Boutons actions (favoris/collections) masques par defaut et reveles au survol ou focus clavier.
- Barre de recherche mobile forcee a 100% sans scroll horizontal parasite; overflow-x global desactive.
- Synchronisation dynamique de la variable CSS
--nav-heightavec le header; badges followers retires des cartes.
- L'utilisateur saisit un mot-clé et obtient une grille d'images Unsplash (minimum 20 résultats par requête), avec loader et messages d'état.
- L'utilisateur visualise une grille responsive qui conserve les ratios d'image sur tous les écrans.
- L'utilisateur ajoute une image à une collection. Une collection "Par défaut" existe déjà. Il peut choisir ou créer une collection au moment de l'ajout.
- L'utilisateur crée, renomme ou supprime ses collections (sauf "Par défaut"). Les noms doivent être valides et uniques.
- L'utilisateur retrouve ses favoris et collections après rechargement grâce au LocalStorage.
- Un clic sur une image ouvre une lightbox avec navigation au clavier et fermeture accessible.
- Les états vides sont clairs et contextualisés.
- Structure de base et initialisation LocalStorage (collections/favoris) avec collection "Par défaut".
- Recherche Unsplash + affichage en grille + loader + gestion des erreurs.
- Ajout/suppression des favoris par collection avec interface de sélection/création.
- Vue des favoris par collection + gestion des états vides + gestion complète des collections.
- Lightbox + navigation clavier.
- Responsive et finitions visuelles.
- Défilement infini (infinite scroll) avec protections anti-requêtes concurrentes + fallback "Charger plus".
- Mode sombre/clair persistant.
- Collections avancées : multi-collections, vue détaillée.
- Suggestions automatiques basées sur les collections (optionnel) + Auth Unsplash OAuth (optionnel).
- HTML5 – Structure sémantique
- CSS3 – Flexbox, CSS Grid, variables CSS, responsive design
- JavaScript ES6+ – Modules, async/await, Fetch API
- Unsplash API – Recherche d'images libres
- LocalStorage – Persistance des données
- Vercel – Déploiement
/ (racine)
|-- index.html
|-- style.css
|-- script.js
|-- config.js <- contient la clé API (NE PAS publier)
|-- assets/
| |-- favicon.svg
|-- pages/
| |-- collections.html
| |-- favoris.html
|-- api/ <- proxy/points d'entrée backend si nécessaire
|-- .gitignore
|-- README.md
|-- doc/
| |-- moodboard_roadmap.md
config.js
- Créer un compte développeur : https://unsplash.com/developers
- Créer une nouvelle application
- Récupérer votre Access Key
- Créer un fichier
config.jsà la racine :
const UNSPLASH_ACCESS_KEY = "VOTRE_CLE_ICI";Ne jamais commiter ce fichier.
- Cloner le dépôt :
git clone https://github.com/votre-nom/moodboard.git
- Ajouter votre fichier
config.js(non fourni) - Ouvrir
index.htmldans un navigateur moderne
- Aller dans Settings > Pages
- Choisir la branche
mainet le dossier/root - Enregistrer
- L'application sera disponible via :
https://votre-nom.github.io/moodboard
- L'utilisateur saisit un mot-clé
fetchImages()interroge l'API Unsplash- La grille s'affiche, accompagnée du loader ou d'un message d'absence de résultats
- Chaque image peut être ajoutée ou retirée d'une collection
- "Par défaut" est toujours disponible
- Ajout/suppression directe, interface de sélection ou création d'une collection
- Persistance via LocalStorage
- Clic sur une image → affichage en grand
- Navigation via flèches du clavier
- Fermeture via bouton, ESC ou clic sur le fond
- Bouton "Charger plus" de secours si l'infinite scroll est bloqué (offline/lent).
- Export/import des collections (JSON) et partage de board en lecture seule.
- Filtres rapides supplémentaires (orientation, couleurs) côté client.
- Optimisation perfs : déduplication de requêtes, gestion fine des loaders.
- Tests d'intégration basiques (render de la grille, lightbox, persistance LocalStorage).
Eric Kayembe (MoodBoard)
Master 2 Communication & Multimédia – Université Don Bosco de Lubumbashi
Projet académique – libre d'utilisation à but éducatif.
- Unsplash pour son API ouverte et de haute qualité
- UDBL & le cours de Web Avancé pour le cadre pédagogique