Étude de cas
Dag Auto - Site vitrine garage automobile
Contexte
Un garage automobile indépendant situé à Juillan (65) souhaitait développer sa présence en ligne pour attirer de nouveaux clients et moderniser sa prise de rendez-vous. Sans site web, le garage dépendait uniquement du bouche-à-oreille et des appels téléphoniques, limitant sa visibilité et générant une charge administrative importante pour la gestion des créneaux.
Dag Auto est un site vitrine professionnel conçu et développé sur mesure pour répondre à ce besoin. Il présente les services du garage, affiche les tarifs, permet la réservation en ligne et met en valeur le travail de l'atelier à travers une galerie photo.
Problème & objectifs
Problème
- Aucune présence en ligne : le garage n'existait pas sur le web, perdant des clients potentiels
- Prise de rendez-vous uniquement par téléphone, source d'interruptions et d'erreurs de planification
- Pas de moyen de présenter les services, tarifs et réalisations de manière professionnelle
- Besoin d'une solution performante, facile à maintenir et peu coûteuse en hébergement
Objectifs
- Créer un site vitrine moderne et performant reflétant le professionnalisme du garage
- Mettre en place un système de réservation en ligne avec gestion des créneaux et notifications email
- Afficher un catalogue de services avec grille tarifaire claire et détaillée
- Proposer une galerie photo de l'atelier pour valoriser le savoir-faire
Approche
Le développement a été mené en autonomie complète, du cadrage du besoin client au déploiement en production :
- cadrage des besoins avec le client : identification des pages, des services à mettre en avant et du parcours utilisateur souhaité ;
- choix d'Astro pour la génération statique (performance, SEO) et d'Express.js pour l'API de réservation ;
- développement itératif avec retours client réguliers pour ajuster le contenu et le design ;
- déploiement sur VPS avec Docker pour l'API et Nginx pour le reverse proxy et le service des fichiers statiques.
Cette approche a permis de livrer un site performant en production tout en maintenant une relation client fluide et un budget d'hébergement minimal.
Points techniques
Frontend : Astro 5 pour la génération statique avec composants .astro, CSS vanilla avec variables CSS pour le thème sombre, JavaScript vanilla pour les interactions (calendrier, lightbox, formulaires multi-étapes).
Backend : API REST Express.js avec SQLite (mode WAL) pour la gestion des réservations. Endpoints : créneaux disponibles, création de booking avec token de confirmation, formulaire de contact.
Emails : Nodemailer pour les notifications transactionnelles : alerte garage avec boutons confirmer/refuser, confirmation ou rejet envoyé au client, notification de message de contact.
Infrastructure : Docker multi-stage (build + distroless) pour l'API, Docker Compose pour l'orchestration, Nginx en reverse proxy sur VPS, Umami pour l'analytics.
SEO & Performance : Sitemap automatique, meta tags dynamiques, police Montserrat en local (WOFF2), images WebP, lazy loading, score Lighthouse optimisé.
Résultats
Le site livré en production propose :
- un site vitrine complet avec 7 pages : accueil, services & tarifs, réservation, galerie, avis clients, contact et mentions légales ;
- un système de réservation en ligne avec calendrier interactif, sélection de créneaux et confirmation par email ;
- une galerie masonry de 25+ photos avec lightbox et navigation clavier ;
- un catalogue de services détaillé avec grilles tarifaires (vidange, freins, distribution) et 8 catégories de prestations.
Le site est en production sur dag-auto.fr et permet au garage de recevoir des demandes de rendez-vous en ligne, réduisant significativement les appels téléphoniques.
Ce que j'ai appris
- mener un projet client de bout en bout : cadrage du besoin, développement, livraison et suivi ;
- découvrir Astro et exploiter la génération statique pour des performances optimales ;
- concevoir un système de réservation complet avec gestion des créneaux et emails transactionnels ;
- déployer une architecture Docker multi-stage avec base distroless pour la sécurité ;
- communiquer avec un client non-technique et traduire ses besoins en spécifications fonctionnelles.
Dag Auto m'a appris à gérer la relation client, à faire des choix techniques pragmatiques et à livrer un produit fini en production. Une expérience déterminante dans mon parcours de développeur.