****đźš—đź’¨
Tags: #javascript #supabase #webdev #showdev #saas
Introduction
On entend souvent dire qu'il faut absolument utiliser React, Vue ou Angular pour construire une application web moderne en 2024. Pourtant, le "Vanilla JS" (JavaScript pur) combiné à des outils puissants comme Tailwind CSS et Supabase permet de réaliser des prouesses avec une performance incroyable et zéro étape de compilation complexe.
Aujourd'hui, je vous présente AutoExpert, une solution complète de gestion de garage automobile que j'ai développée. Elle comprend un site vitrine pour la prise de rendez-vous et un back-office d'administration complet (PWA).
*La Stack Technique *🛠️
L'objectif était de rester simple, performant et facile à déployer.
Frontend : HTML5, JavaScript (ES6+), Tailwind CSS (via CDN pour le dev, build pour la prod).
Backend (BaaS) : Supabase (PostgreSQL, Auth, Realtime, Edge Functions).
Bibliothèques clés :
FullCalendar pour la gestion du planning.
Chart.js pour les statistiques.
jsPDF pour la génération de factures côté client.
HĂ©bergement : GitHub Pages (via GitHub Actions).
Fonctionnalités Clés
1. Prise de rendez-vous en temps réel 📅
Côté client (index.html), j'ai créé un formulaire dynamique qui permet de sélectionner la marque et le modèle du véhicule (chargés depuis Supabase) et de choisir un créneau horaire.
Le défi ici était de gérer la validation des données et l'expérience utilisateur (UX) sans rechargement de page.
2. Tableau de bord Admin & Realtime ⚡
La partie la plus intéressante se trouve dans admin.html. Grâce aux fonctionnalités Realtime de Supabase, le garage reçoit une notification instantanée (visuelle et sonore) dès qu'un client prend rendez-vous, sans avoir à rafraîchir la page.
3. Génération de Factures PDF 📄
Plutôt que de générer les PDF côté serveur, j'utilise jspdf directement dans le navigateur (work_orders.html). Cela réduit la charge serveur et rend l'application très réactive.
4. Mode Hors-Ligne et PWA 📱
Pour permettre aux mécaniciens d'utiliser l'application sur tablette dans l'atelier (où le Wi-Fi peut être instable), j'ai implémenté une stratégie de Cache-First avec localStorage pour les données critiques et un Service Worker pour les assets.
Déploiement Continu (CI/CD) 🚀
Le projet est hébergé sur GitHub Pages. J'utilise une GitHub Action (deploy.yml) qui injecte les clés d'API Supabase de manière sécurisée dans le code HTML au moment du build, évitant ainsi de les exposer dans le dépôt public.
Conclusion
Ce projet prouve qu'il est possible de construire des applications SaaS complexes (CRM, Facturation Peppol, Stats, Messaging) sans s'enfermer dans un framework JS spécifique.
L'utilisation de Supabase comme backend-as-a-service a considérablement accéléré le développement, me permettant de me concentrer sur la logique métier plutôt que sur l'infrastructure.
N'hésitez pas à me donner votre avis en commentaire ! 👇
Top comments (0)