Aller au contenu principal
Retour aux projets
Application Web2026

Gwada Rando

Application web de randonnée en Guadeloupe : carte interactive avec 119 sentiers, météo par zones climatiques, assistant IA, tracé GPX temps réel et mode hors-ligne.

Next.jsTypeScriptTailwindLeafletSupabaseOpenRouterPWAPrisma
Gwada Rando : Application web de randonnée en Guadeloupe : carte interactive avec 119 sentiers, météo par zones climatiques, assistant IA, tracé GPX temps réel et mode hors-ligne.
Voir la démo(s'ouvre dans un nouvel onglet)

Le Défi

La Guadeloupe offre des centaines de sentiers de randonnée, mais les informations sont dispersées entre plusieurs sources (ONF Geotrek, francetourisme.fr, blogs). Les randonneurs manquent d'un outil centralisé pour découvrir, planifier et sécuriser leurs sorties.

Ma Solution

Gwada Rando est une application web complète avec 22 features pour les randonneurs en Guadeloupe.

Carte interactive

  • 119 randonnées dédupliquées depuis Geotrek API + scraping francetourisme.fr (Playwright)
  • Clustering intelligent avec Leaflet + Supercluster (~200 markers)
  • Tracés GPX au survol avec spiderfying
  • Filtres avancés (difficulté, distance, type) avec mode AND/OR
  • Wishlist avec badges cœur sur les marqueurs et clusters

Météo intelligente

  • 10 zones climatiques distinctes en Guadeloupe (polygones GeoJSON réels)
  • Prévisions précises par zone via Open-Meteo API
  • Overlay météo sur la carte avec code couleur (palette daltonienne Paul Tol)
  • Cache 15 minutes côté serveur

Assistant IA

  • Chat conversationnel streaming via OpenRouter (GPT-4o mini / Claude fallback)
  • Recommandations contextuelles basées sur météo + préférences + niveau utilisateur
  • System prompt avec 3 vérifications obligatoires (niveau, météo, équipement)
  • Rate limiting 50 req/jour, authentification requise

Suivi terrain temps réel

  • GPX Viewer fullscreen : position GPS throttle 1s, profil altitude SVG interactif
  • Détection hors-piste : turf.js avec hysteresis 3 mesures, 3 niveaux d'alertes (15m/25m/50m)
  • Check-in/Check-out : suivi de session avec feedback étoiles et conditions
  • Bouton SOS : partage position via SMS/WhatsApp en semi-automatique

PWA & Offline

  • Service Worker Workbox (NetworkFirst pages, CacheFirst tiles 30j)
  • IndexedDB 100MB quota iOS avec LRU auto-purge
  • Page /offline avec liste randos cachées
  • Téléchargement GPX pour utilisation hors-ligne

Social & Admin

  • Feedback anonyme crowdsourcé sur l'état des sentiers
  • Notes et conditions récentes agrégées
  • Interface admin CRUD (Settings, Randos, Users)
  • Permissions ADMIN/GUIDE/USER avec matrice claire

Architecture

Architecture 3-couches propre : UI → Server Actions (next-safe-action) → Services → Repositories → Prisma/Supabase

Technologies

Next.js 15, TypeScript strict, React 19, Tailwind v4, Leaflet + Supercluster, Supabase (Auth + Storage), Prisma, OpenRouter, Open-Meteo, Zustand, nuqs, TanStack Query, turf.js, PWA

Résultats

  • 🥾 119 randonnées dédupliquées (Geotrek + francetourisme)
  • 🌦️ 10 zones météo avec polygones GeoJSON réels
  • 📱 PWA complète avec cache offline 100MB
  • 🤖 IA contextuelle streaming avec safety checks
  • 🗺️ GPS temps réel avec détection hors-piste 3 niveaux
  • 🆘 Sécurité : SOS SMS/WhatsApp, check-in/out, timer
  • 👥 22 features MVP + post-MVP complètes

Leçons Apprises

Le scraping de Google Sites (francetourisme) nécessite Playwright avec Shadow DOM override. Le système de 10 zones climatiques avec polygones réels apporte une vraie valeur vs les apps météo génériques. L'architecture 3-layer facilite les tests et la maintenance. La PWA avec cache IndexedDB est indispensable pour une app de randonnée.

Découvrir d'autres réalisations

Voir tous les projets