Vue d'ensemble
Un portfolio statique, c'est une carte de visite figée. Chaque nouveau projet oblige à toucher au code. Chaque mise à jour dépend d'un développeur. Le résultat : un site qui vieillit plus vite que le travail qu'il est censé montrer. Ce projet a consisté à briser ce verrou — et à donner à l'architecte le contrôle total sur ses contenus.
Le projet
Transformer un portfolio statique en application web dynamique : galerie connectée à une API, espace admin, gestion autonome des contenus.
La cliente
Sophie Bluel, architecte d'intérieur. Un portfolio qui devait évoluer au rythme de ses projets — sans dépendre d'un prestataire à chaque mise à jour.
Le problème
Un front-end figé, sans administration, sans connexion aux données réelles. Chaque modification nécessitait une intervention technique manuelle.
L'objectif
Construire un front-end clair, fiable et administrable — pour que le portfolio devienne un outil vivant, pas un fichier à maintenir.
Le véritable enjeu n'était pas d'ajouter de l'interactivité. C'était de construire une logique de produit : données, session, édition et interface devaient fonctionner ensemble — sans couture visible, sans rechargement, sans friction.
Résultats concrets
Un portfolio qui vit
La galerie se nourrit directement de l'API. Chaque projet ajouté apparaît instantanément — sans toucher à une ligne de code.
Autonomie totale
Login, ajout, suppression de médias : Sophie gère ses contenus seule, depuis une interface d'administration intégrée au site.
Zéro rechargement
Filtrage, navigation, édition : tout se passe sans que la page ne se recharge. L'expérience est fluide, rapide et professionnelle.
Un code qui dure
Architecture front propre, lisible et maintenable — conçue pour évoluer sans dette technique ni dépendance à un framework lourd.
Avant / Après
Le problème
Le défi ne tenait pas à la complexité des écrans. Il tenait à la qualité de l'articulation entre plusieurs couches qui devaient coexister dans un même front — sans se marcher dessus.
Concrètement, il fallait faire fonctionner ensemble :
- Une API à consommer proprement — récupérer les données, gérer les erreurs, synchroniser l'affichage.
- Un système de filtrage dynamique — sans rechargement, avec un état cohérent entre les catégories et la galerie.
- Une authentification complète — login, gestion de session, token, accès conditionnel au mode admin.
- Une interface d'édition fonctionnelle — modale d'upload, suppression de médias, mise à jour immédiate du DOM.
Le tout sans framework. En JavaScript pur. Avec un code suffisamment lisible pour qu'un autre développeur puisse le reprendre demain.
C'est ce niveau d'exigence qui sépare une intégration « qui fonctionne » d'une application réellement maîtrisée.
Notre approche
Nous avons structuré le front autour d'un principe : chaque responsabilité a sa place, et rien ne déborde.
Données — Connexion propre au back-end
- Consommation de l'API via
fetchavec gestion explicite des réponses et des erreurs - Séparation stricte entre récupération, transformation et affichage des données
- Synchronisation entre l'état local et l'interface — sans rechargement de page
Interface — Fluidité et cohérence
- Galerie générée dynamiquement à partir des données de l'API
- Filtres par catégorie avec mise à jour instantanée du rendu
- Modale d'édition complète : upload, prévisualisation, suppression
- Validation côté client pour guider l'utilisateur et réduire les erreurs
Administration — Une extension naturelle du site
- Gestion du token d'authentification et de la session
- Mode admin qui s'active sans rupture visuelle — pas une interface séparée, mais un prolongement cohérent
- Interface d'édition pensée pour un usage réel, pas pour une démo
La qualité du projet ne reposait pas sur la stack. Elle reposait sur la discipline architecturale : savoir ce qui va où, pourquoi, et comment le tout reste lisible quand le projet grossit.
Stack technique
- HTML5 sémantique
- CSS3
- JavaScript ES6+ (vanilla — aucun framework)
- API Node.js (fournie, documentée via Swagger)
- Git / GitHub
- Chrome DevTools
Le résultat
Le portfolio de Sophie est passé d'un fichier statique à un outil professionnel autonome. Elle ajoute ses projets, supprime les anciens, réorganise sa galerie — sans ouvrir un terminal, sans écrire une ligne de code, sans demander à personne.
- Une galerie vivante, alimentée en temps réel par l'API
- Un système de filtrage fluide et instantané
- Un espace admin complet avec login, upload et suppression
- Une interface qui se met à jour sans rechargement
- Un front-end propre, documenté et prêt à évoluer
Le site ne montre plus seulement le travail de Sophie. Il travaille pour elle.
Ce que ce projet révèle
Ce projet démontre une compétence qui dépasse l'intégration : la capacité à structurer un front-end comme un vrai produit — avec des flux de données, des états, une logique d'administration et une expérience utilisateur qui tient la route dans un usage réel.
Si vous avez un site statique qui vous freine, une interface qui dépend encore d'un développeur pour chaque mise à jour, ou un projet qui a besoin d'un front-end structuré pour devenir un vrai produit — c'est exactement ce type de transformation que nous réalisons.