Pourquoi TravelPlan ?
Tout est parti d’un besoin concret : organiser un voyage en famille de Koh Samui à la Malaisie, en passant par Hua Hin et Bangkok. Jongler entre les confirmations Airbnb, les billets de train, le budget multi-devises et les idées glanées sur YouTube devenait ingérable.
La solution naturelle : un outil sur mesure, propulsé par Claude, qui regroupe tout en un seul endroit.
Le point de départ : guide-voyage_5.html
La version initiale était un seul fichier HTML de 800 lignes — CSS inline, JavaScript vanilla, aucune dépendance. Sobre, rapide, fonctionnel. Il contenait déjà :
- Un formulaire de planification : destination, dates, voyageurs, préférences de transport et d’hébergement
- Un gestionnaire de réservations : ajout manuel ou extraction automatique via l’IA depuis une confirmation collée
- Un suivi budgétaire : répartition par poste, multi-devises
- Un générateur de blocs IA : depuis un lien YouTube, un article, un PDF ou une description textuelle
- Une vue “Mes Fiches” : collection de fiches pratiques générées par Claude
- Export PDF et partage par URL (état encodé en base64)
L’infrastructure : Hugo + Firebase + Cloudflare
Pour passer de ce prototype local à une application accessible en ligne, nous avons retenu cette stack :
| Composant | Choix | Raison |
|---|---|---|
| Générateur de site | Hugo | Rapide, zéro runtime, thème PaperMod pour le blog |
| Hébergement | Firebase Hosting | CDN global, HTTPS automatique, déploiements atomiques |
| DNS | Cloudflare | Proxy, cache, protections DDoS sur travelplan.girard-davila.net |
| CI/CD | GitHub Actions | Deploy automatique sur chaque push main |
Le workflow GitHub Actions reprend exactement le pattern du projet 3615samui : peaceiris/actions-hugo pour le build, FirebaseExtended/action-hosting-deploy pour le déploiement.
L’IA en client-side : choix assumé
Les appels à l’API Anthropic se font directement depuis le navigateur. C’est inhabituel, mais cohérent pour un outil personnel :
- Pas de backend à maintenir
- La clé API reste sous le contrôle de l’utilisateur (stockée dans
localStorage) - Aucun coût d’infrastructure côté serveur
- Le header
anthropic-dangerous-direct-browser-calls: trueest requis pour autoriser ces appels depuis un browser
Prochaine étape
La semaine 2 verra la migration vers une architecture multi-applications : chaque onglet de la barre latérale devient sa propre page web avec son propre URL, tout en partageant un état commun via localStorage.
TravelPlan est un projet open source. Code disponible sur GitHub.