J’ai créé Plageo : une carte moderne pour explorer les plages et sites de baignade en France

Je viens de mettre en ligne Plageo, une application web qui permet d’explorer les plages et sites de baignade officiels en France.

👉 Démo : https://localisation-plages.vercel.app/

L’idée est simple : partir de données publiques fiables, les rendre plus accessibles, puis proposer une expérience moderne autour de la recherche, de la carte, de la géolocalisation et des itinéraires.

Aujourd’hui, Plageo référence 3 409 sites officiels, avec 3 409 points cartographiés et 18 régions couvertes.

---

Pourquoi ce projet ?

Quand on cherche une plage ou un site de baignade, on tombe souvent sur des listes peu pratiques, des cartes incomplètes ou des résultats très orientés tourisme.

Je voulais créer une interface plus directe :

• chercher une plage, une commune ou un département ;
• visualiser les sites sur une carte ;
• distinguer les ambiances : mer, lac, rivière ;
• accéder rapidement à une fiche ;
• lancer un itinéraire depuis sa position ;
• utiliser des données publiques plutôt qu’un listing fermé.

Le but n’est pas seulement de faire un annuaire, mais de transformer un dataset public en vraie expérience utilisateur.

---

La source des données

Le projet utilise le jeu de données public suivant :

https://www.data.gouv.fr/datasets/donnees-de-rapportage-de-la-saison-balneaire-1

Ce dataset correspond aux données de rapportage de la saison balnéaire. Il contient notamment :

• les sites de baignade ;
• les coordonnées géographiques ;
• l’origine de l’eau ;
• des informations sanitaires ;
• des classements ou données de qualité lorsque disponibles ;
• des informations liées à la saison balnéaire.

Point important : ce dataset ne contient pas uniquement des plages de bord de mer. Il référence des sites de baignade officiels, ce qui inclut aussi des lacs, rivières, plans d’eau et bases de loisirs.

C’est pour cela que l’interface parle de plages et sites de baignade.

---

Stack technique

Pour cette première version, j’ai choisi une stack moderne et assez classique pour un produit web interactif :

• Next.js avec App Router ;
• TypeScript ;
• Tailwind CSS ;
• composants UI modernes ;
• carte interactive basée sur OpenStreetMap ;
• déploiement sur Vercel ;
• données issues de data.gouv.fr ;
• logique de géolocalisation côté navigateur ;
• liens d’itinéraire vers Google Maps, Apple Plans et OpenStreetMap.

L’objectif était d’avoir une application rapide, responsive et agréable à utiliser, sans dépendre d’une API payante pour la carte.

---

Architecture générale

L’application est organisée autour de trois grands blocs :

txt
/app
  page.tsx
  plages/
    page.tsx
    [id]/
      page.tsx

/components
  layout/
  beaches/
  map/
  ui/

/lib
  data-gouv.ts
  beaches.ts
  geo.ts
  routes.ts
  images.ts
  utils.ts

/types
  beach.ts