Refonte complète du site web de Tonami Events

Tonami Events disposait d'un site WordPress.com gratuit accessible via tonamicommunication.wordpress.com. Ce site présentait plusieurs limitations majeures qui freinaient le développement de l'agence.

Le design était basique et ne reflétait pas le professionnalisme d'une agence de communication moderne. Il 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 aucune possibilité de personnalisation. Le référencement naturel était insuffisant, ce qui freinait la visibilité en ligne de l'agence. L'URL en sous-domaine wordpress.com nuisait à la crédibilité et à l'image de marque. Enfin, l'absence d'outils de génération de leads limitait les opportunités commerciales.

L'objectif principal était de transformer le site web en un véritable outil stratégique capable de convertir les visiteurs en clients. Les objectifs spécifiques incluaient la création d'une identité visuelle premium et cohérente, le développement d'un portfolio dynamique pour valoriser les réalisations, l'intégration d'un blog professionnel pour renforcer la stratégie de contenu, la mise en place d'un dashboard administrateur intuitif pour l'autonomie de l'équipe, l'optimisation de l'ensemble du site pour le référencement technique, la sécurisation de l'application contre les vulnérabilités courantes et le déploiement sur un domaine personnalisé pour renforcer la crédibilité.

J'ai développé une application full stack sur mesure avec Next.js 16. L'architecture technique repose sur une stack moderne et performante.

Pour le frontend, j'ai utilisé Next.js 16 avec App Router et Turbopack, React 19 pour l'interface utilisateur, TypeScript pour le typage strict, Tailwind CSS v4 pour les styles utilitaires et Framer Motion pour les animations fluides.

Pour le backend et la base de données, j'ai migré les données WordPress vers PostgreSQL hébergée sur Neon, utilisé Drizzle ORM pour la gestion optimale des données, NextAuth.js pour l'authentification sécurisée et les API Routes de Next.js pour les endpoints.

Pour les médias et communications, Cloudinary gère l'upload et la transformation d'images et vidéos, tandis que Resend assure l'envoi d'emails transactionnels.

Pour l'hébergement et la sécurité, Vercel assure le déploiement avec intégration continue GitHub, une Content Security Policy est configurée, un middleware de détection d'attaques est en place et la validation des entrées est effectuée avec Zod.

Le schéma de données comprend sept tables avec des énumérations pour les catégories et services : utilisateurs pour la gestion des comptes administrateurs, projets pour le portfolio avec médias associés, articles pour le blog et le contenu éditorial, témoignages pour les avis clients, contacts pour les messages reçus via formulaire, newsletter pour les abonnés et la gestion d'envoi, et paramètres pour la configuration globale du site.

Le dashboard administrateur permet désormais à l'équipe de gérer l'ensemble du contenu en totale autonomie : création et modification de projets avec upload d'images et vidéos, rédaction et publication d'articles de blog, gestion des témoignages clients, consultation des messages reçus et export des abonnés newsletter.

Un SEO technique complet a été mis en place avec un sitemap dynamique, un fichier robots.txt configuré, des schémas JSON-LD pour les données structurées, des métadonnées Open Graph pour les réseaux sociaux, des Twitter Cards pour le partage et des URLs canoniques avec redirections appropriées.

Plusieurs couches de sécurité ont été intégrées : Content Security Policy, protection contre les injections XSS, middleware de détection d'attaques, validation systématique des entrées utilisateur avec Zod, headers HTTP de sécurité et authentification sécurisée par tokens JWT.

Le processus de développement s'est déroulé en trois phases. La première phase d'analyse et planification a consisté en un audit complet de l'existant pour identifier les forces et faiblesses du site WordPress.com d'origine, la rédaction d'un cahier des charges détaillé définissant les objectifs de la refonte et les spécifications techniques avec l'arborescence complète du site, la palette de couleurs et la stack technique.

La deuxième phase de conception et architecture a couvert la conception du schéma de base de données, le développement des composants frontend réutilisables avec Tailwind CSS v4 et Framer Motion, la création des API RESTful avec des routes publiques et des routes administrateur protégées, et l'intégration de la sécurité dès la conception.

La troisième phase de développement et intégration a vu la réalisation du frontend avec la page d'accueil, la page Agence, les pages Services, le Portfolio avec filtres, le Blog avec recherche et la page Contact. Les optimisations ont inclus le responsive design, les animations subtiles et l'accessibilité. Le backend a été connecté à PostgreSQL, les API ont été développées et le dashboard administrateur modulaire a été créé. La finalisation a intégré le SEO technique, la sécurisation complète et la configuration du mode maintenance.

La refonte a permis de transformer le site en un outil stratégique de conversion, d'offrir une expérience utilisateur premium et moderne, de permettre une gestion de contenu totalement autonome, d'améliorer significativement le référencement naturel, de renforcer la crédibilité avec un domaine personnalisé et de générer des leads qualifiés via des formulaires optimisés.