Statut : en ligne — advoyagemorocco.com
Le problème
A&D Voyage est un tour-opérateur du nord du Maroc spécialisé dans les circuits régionaux authentiques à travers Tanger, Chefchaouen, Tétouan, Akchour et Al Hoceïma. Son public couvre trois groupes linguistiques distincts : les voyageurs marocains qui lisent l'arabe, la diaspora marocaine francophone et les visiteurs francophones, et les voyageurs internationaux anglophones. Le site devait offrir une vraie typographie arabe et une mise en page bidirectionnelle (RTL), et rester léger pour les téléphones sur des connexions mobiles faibles ; je l'ai donc construit sans thème d'agence tout fait.
Mon rôle
J'ai été le développeur et le concepteur d'interface unique du projet : création du design system de marque sur mesure (« Rif & Strait Field Atelier »), architecture d'un moteur de prérendu statique côté serveur, implémentation du contenu trilingue et des mises en page RTL, et construction d'une suite de tests automatisés de vérification SEO à la compilation.
Ce que j'ai construit
- Architecture légère React 19 et Tailwind CSS v4 : j'ai évité la surcharge des bibliothèques tierces de composants et d'icônes en fabriquant à la main des primitives d'interface accessibles et réutilisables (
Button,SectionHeading,Chip,FaqAccordion,ItineraryAccordion, icônes SVG en ligne). Aucune bibliothèque tierce d'interface ou d'icônes n'est chargée : le navigateur a donc moins de code à télécharger avant que la page soit utilisable. - Chaîne de prérendu statique SSR sur mesure : j'ai bâti un générateur statique maison s'appuyant sur
renderToStringdereact-dom/server(entry-server.tsx), qui compile chaque route des trois langues en fichiers HTML statiques à la compilation (scripts/prerender.tsx), en injectant les balises canoniques propres à chaque route, les alternates hreflang (ar,fr,enetx-default) et le JSON-LD Schema.org avant le déploiement sur Vercel. - Contrôle SEO automatisé à la compilation : j'ai créé
scripts/verify-seo-build.tspour réanalyser la sortie statique générée comme une barrière de compilation stricte. Il vérifie la présence d'un H1 unique et d'une balise canonique, teste la parité complète des hreflang, s'assure qu'aucun schéma d'avis fictif n'est présent, vérifie les attributs alt des images et fait échouer la compilation s'il trouve un lien interne cassé. - Internationalisation bidirectionnelle native RTL/LTR : j'ai implémenté un système de dictionnaires i18n typés sans dépendance, avec inversion complète de la mise en page de droite à gauche (
dir="rtl") reposant sur les propriétés logiques CSS de Tailwind v4 (ms/me,ps/pe,start/end), en associant la typographie Noto Kufi Arabic pour l'arabe à Fraunces et Plus Jakarta Sans pour les écritures latines. - Calendrier de départs interactif et grille tarifaire : j'ai construit un calendrier de départs structuré et un calculateur de prix multi-paliers gérant les variantes saisonnières, les tarifs par personne et les options de voyage en groupe.
- Demande de réservation directe : j'ai conçu un parcours de demande simple reliant l'envoi du formulaire Formspree à un passage immédiat vers une conversation WhatsApp pré-remplie.
Résultats
N'ayant pas accès directement aux données privées de Google Analytics ni aux enregistrements de réservation d'A&D Voyage, aucun chiffre de trafic ou de réservation non vérifié n'est avancé ici.