Dernière mise à jour
Eugenia Bravo, avocate et médiatrice familiale à Málaga, avait besoin d'un site et d'un blog professionnels pour attirer des clients en ligne. Je les ai créés en 2024 puis refondus en 2025 pour que ses articles soient trouvés sur Google, avec un espace d'administration sécurisé d'où elle les publie elle-même.
Introduction
Eugenia a 25 ans d'expérience en droit de la famille et en médiation, et son site associe la présentation de ses services à un blog juridique. Voici les deux versions : la version d'origine de 2024 et la refonte de 2025.
J'ai aussi créé une page pour son guide gratuit sur le divorce, qui envoie le guide automatiquement à chaque nouvel abonné : lire l'étude de cas Tu Divorcio Inteligente.
Version 1 (2024) : React et AWS Amplify
La première version était une application React monopage avec un backend AWS Amplify : un site public avec un blog, et un espace privé où l'équipe publie les articles.
Pour développer ce site, j'ai collaboré avec une amie qui est aussi ma cliente, en choisissant des technologies qui renforceraient mes compétences en ingénierie logicielle plutôt que de m'appuyer sur des solutions clés en main comme WordPress ou Wix. Cette approche a permis de livrer un site robuste et sur mesure.
Frontend: React et TypeScript
Comme il s'agissait d'un projet professionnel, j'ai utilisé React pour tirer parti de ma connaissance avancée du framework. De plus, l'implémentation de TypeScript a garanti une manipulation des données plus sûre qu'avec du JavaScript pur.
Pour démarrer le développement, j'ai expérimenté un outil d'IA innovant appelé bolt.new, capable de générer un projet de zéro, de l'exécuter et d'améliorer le code de façon itérative à partir d'instructions. J'ai ensuite téléchargé le code de base généré pour poursuivre le développement.
Backend: AWS Amplify
Lors d'un projet précédent, j'avais construit un backend Spring Boot intégré à une base de données AWS RDS. Cependant, cette approche a entraîné des problèmes tels que des plantages inattendus, un temps de développement accru et une complexité supplémentaire. En tant que développeur solo disposant de peu de temps, j'avais besoin d'une solution à la fois plus simple et robuste. C'est alors que j'ai opté pour AWS Amplify, une solution de type « backend as a service ». Amplify est plus facile à développer une fois qu'on le maîtrise, et il offre une infrastructure robuste et économique pour les projets de petite à moyenne envergure, puisqu'il est entièrement géré.
Pages publiques
Le site trouve un équilibre entre la promotion des services d'Eugenia et l'invitation des utilisateurs à entrer en contact, tout en proposant un contenu de blog de qualité et sans publicité.
Page d'accueil
Pages d'administration
Protégée par l'authentification des utilisateurs d'Amplify, une page d'administration privée permet à l'équipe du site de gérer le contenu. Ce portail propose un tableau de bord et un panneau d'administration pour modifier et examiner les articles privés ou les supprimer.
Tableau de bord d'administration
La refonte (2025) : Next.js et Supabase
EugeniaBravo est passé d'une simple application React monopage à une version Next.js afin d'améliorer le SEO, la visibilité et les flux éditoriaux d'un site axé sur le contenu. La migration a également remplacé AWS Amplify par Supabase, qui convient mieux aux projets de plus petite taille nécessitant tout de même l'authentification, le stockage et une base de données relationnelle.
Objectifs de la migration
Les principaux objectifs étaient d'obtenir une indexation fiable du contenu du blog, d'améliorer les performances des pages et de simplifier les opérations backend, afin que le projet reste léger sans renoncer à des fonctionnalités telles que les outils d'administration, le téléversement de médias et l'édition de contenu riche.
La refonte s'articule autour de Next.js avec TypeScript pour le frontend et de Supabase pour le backend et le stockage.
Frontend et SEO
Next.js permet le rendu côté serveur et la génération statique pour le blog, ce qui signifie que les robots d'indexation reçoivent un HTML complet plutôt qu'une coquille presque vide. C'est une nette amélioration par rapport au React pur pour l'indexation dynamique, car chaque article peut fournir des métadonnées complètes, des balises canoniques et des aperçus enrichis dès qu'il est demandé.
Le build inclut des sitemaps, des règles robots et des métadonnées propres à chaque page, afin que les nouveaux articles deviennent rapidement repérables. Il améliore également le routage, l'optimisation des images et les performances de chargement globales du site public.
Backend avec Supabase
Supabase a remplacé Amplify afin de garder une stack plus légère et plus accessible pour une petite équipe. Avec Postgres, l'authentification intégrée et le stockage réunis au même endroit, il est plus facile à maintenir qu'une configuration AWS plus lourde, tout en offrant une base solide pour le tableau de bord d'administration et les flux liés aux médias.
L'authentification prend désormais en charge le MFA, les articles et les catégories sont stockés dans des tables relationnelles, et les images sont conservées dans Supabase Storage avec des solutions de repli pertinentes.
Flux de contenu
Les éditeurs gèrent les articles, les catégories et les auteurs depuis le tableau de bord d'administration, avec TinyMCE pour l'édition de contenu riche et des flux d'aperçu avant publication. Le blog utilise des slugs optimisés pour le SEO, des articles connexes et des cartes recommandées pour maintenir l'intérêt des lecteurs.
Tableau de bord d'administration
Expérience publique
Le site public combine un tunnel marketing avec un blog facile à parcourir et rapide à charger. Les pages services, témoignages, FAQ et contact sont toutes bâties sur la même base optimisée pour le SEO.
Page d'accueil
Garde-fous de la version démo
La branche de démonstration est livrée sans secrets, fonctionne sur des fixtures en mémoire et désactive les écritures afin que les évaluateurs puissent explorer l'interface en toute sécurité. Les outils d'analytique et de cookies sont conditionnés par des variables d'environnement pour isoler la démo de la production.
La démo publique est disponible avec les pages d'administration activées à l'adresse eugeniabravo-public.vercel.app.
Visitez le site en ligne à l'adresse eugeniabravo.com, explorez la démo à l'adresse eugeniabravo-public.vercel.app, ou parcourez le dépôt sur GitHub.
Besoin d'une assistance juridique en Espagne ? Contactez Eugenia !
Merci de votre lecture,
Julio Macias Gonzalez
