Refonte complète du site web de Tonami Events
Durée : 3 semaines
Aperçu
Problématique
Tonami Events disposait d'un site WordPress.com gratuit accessible via tonamicommunication.wordpress.com. Ce site présentait plusieurs limitations majeures. Le design basique ne reflétait pas le professionnalisme d'une agence de communication moderne et ne mettait pas en valeur les réalisations de l'équipe. L'absence de portfolio dynamique empêchait de présenter efficacement les projets aux clients potentiels. La gestion de contenu était limitée aux fonctionnalités standard de WordPress.com, sans possibilité de personnalisation. Le référencement naturel était insuffisant, freinant la visibilité en ligne de l'agence. L'URL en wordpress.com nuisait à la crédibilité et à l'image de marque. Enfin, le site n'offrait pas d'outils efficaces pour générer des leads qualifiés, ce qui limitait les opportunités commerciales
Objectif
L'objectif principal était de transformer le site web en un véritable outil stratégique capable de convertir les visiteurs en clients. Cela impliquait de créer une identité visuelle premium et cohérente, de développer un portfolio dynamique pour valoriser les réalisations, d'intégrer un blog professionnel pour renforcer la stratégie de contenu, de mettre en place un dashboard administrateur intuitif pour l'autonomie de l'équipe, d'optimiser l'ensemble du site pour le référencement technique, de sécuriser l'application contre les vulnérabilités courantes, et de déployer le tout sur un domaine personnalisé pour renforcer la crédibilité de l'agence.
Solution
J'ai développé une application full stack sur mesure avec Next.js 16. Le frontend a été entièrement conçu avec Tailwind CSS v4 et Framer Motion pour offrir un design premium, moderne et responsive. J'ai migré les données de WordPress vers une base PostgreSQL hébergée sur Neon, structurée avec Drizzle ORM pour une gestion optimale des projets, articles, témoignages, contacts et abonnés newsletter. Le dashboard administrateur, sécurisé par NextAuth.js, permet désormais à l'équipe de gérer l'ensemble du contenu en autonomie : création et modification de projets avec upload d'images et vidéos via Cloudinary, rédaction et publication d'articles de blog, gestion des témoignages clients, consultation des messages reçus et export des abonnés newsletter. J'ai mis en place un SEO technique complet avec sitemap dynamique, robots.txt, JSON-LD Schema, métadonnées Open Graph et Twitter Cards. La sécurité a été renforcée avec une Content Security Policy, une protection contre les injections XSS, un middleware de détection d'attaques et la validation systématique des entrées utilisateur.
Processus
Analyse & Planification
La première étape a consisté à réaliser un audit complet de l'existant. Nous avons analysé le site WordPress.com d'origine pour identifier ses forces et ses faiblesses : design, contenu, structure, fonctionnalités manquantes. À partir de ce diagnostic, nous avons rédigé un cahier des charges détaillé définissant les objectifs de la refonte : moderniser l'identité visuelle, améliorer l'expérience utilisateur, créer un portfolio dynamique, générer des leads qualifiés, optimiser le SEO et offrir une gestion de contenu autonome. Nous avons ensuite défini l'arborescence complète du site (13 pages), établi la palette de couleurs et les principes de design, et sélectionné la stack technique la plus adaptée : Next.js 16 pour le frontend et le backend, PostgreSQL via Neon pour la base de données, Drizzle ORM pour les requêtes, NextAuth.js pour l'authentification, Cloudinary pour l'upload de médias, Resend pour l'envoi d'emails, et Vercel pour l'hébergement.
Conception & Architecture
Une fois les bases posées, nous sommes passés à la conception de l'architecture technique et visuelle. J'ai conçu le schéma de base de données avec les tables utilisateurs, projets, articles, témoignages, contacts, newsletter et paramètres, en définissant les relations, les types énumérés et les contraintes. Côté frontend, j'ai développé les composants réutilisables (Header, Footer, cartes, formulaires) avec Tailwind CSS v4 et Framer Motion pour des animations légères. Chaque section du site a été pensée comme un composant indépendant, facilitant la maintenance et l'évolutivité. J'ai également structuré les API RESTful : routes publiques pour le portfolio, le blog et les témoignages, et routes administrateur protégées par NextAuth.js pour le dashboard. La sécurité a été intégrée dès la conception avec un middleware de protection, une Content Security Policy et des headers de sécurité.
Développement & Intégration
La phase de développement a suivi une progression méthodique. Nous avons commencé par le frontend statique : page d'accueil avec sections Hero, Services, Portfolio preview et Témoignages, suivie des pages Agence (histoire, dirigeant, équipe, méthodologie, valeurs), Services (5 pages détaillées), Portfolio (avec filtres et modale), Blog (liste, recherche et article détaillé) et Contact (formulaire, coordonnées, carte Google Maps). Chaque page a été optimisée pour le responsive design et enrichie d'animations subtiles. Nous avons ensuite connecté la base de données et développé les API pour rendre le contenu dynamique. Le dashboard administrateur a été construit module par module : authentification, gestion des projets avec upload d'images et vidéos, gestion des articles, témoignages, contacts et newsletter. Enfin, nous avons intégré le SEO technique (sitemap.xml, robots.txt, JSON-LD Schema), sécurisé l'application (CSP, anti-XSS, middleware), configuré le mode maintenance.
Architecture technique
L'architecture du projet repose sur une stack full stack moderne entièrement basée sur l'écosystème Next.js. Le frontend est développé avec Next.js 16 utilisant l'App Router et Turbopack, associé à React 19, TypeScript pour le typage strict, Tailwind CSS v4 pour les styles utilitaires et Framer Motion pour les animations. Le backend exploite les API Routes de Next.js, sécurisées par NextAuth.js avec un provider Credentials et des tokens JWT. La base de données PostgreSQL est hébergée sur Neon, une plateforme serverless compatible avec les environnements edge de Vercel. Drizzle ORM assure la communication avec la base via un driver serverless optimisé. Les médias sont gérés par Cloudinary pour l'upload et la transformation d'images et vidéos. L'envoi d'emails transactionnels (formulaire de contact) est assuré par Resend. La sécurité est renforcée par une Content Security Policy configurée dans Next.js, un middleware de détection d'attaques, des headers HTTP de sécurité et une validation des entrées utilisateur avec Zod. L'application est déployée sur Vercel avec intégration continue depuis GitHub. Le schéma de données comprend 7 tables : utilisateurs, projets, articles, témoignages, contacts, newsletter et paramètres, avec des énumérations pour les catégories et services.
Résultats
98/100
Performance mobile
Score Lighthouse obtenu après refonte grâce à Next.js avec SSR, Tailwind CSS purgé, images optimisées via Cloudinary et police avec display swap.
-90%
Délai de mise en ligne
Le temps de publication d'un projet ou d'un article est passé de plusieurs heures (via WordPress) à quelques secondes grâce au dashboard admin personnalisé avec upload direct.
100%
Autonomie équipe
L'équipe de Tonami Events gère désormais l'intégralité du contenu (projets, articles, témoignages, contacts) sans aucune intervention technique externe.
13/13
Pages indexées
Toutes les pages du site ont été indexées par Google en moins de 7 jours après la soumission du sitemap dynamique et l'optimisation SEO technique.