climatiseyy

Une application web pour trouver les points d'eau, toilettes publiques et lieux climatisés accessibles gratuitement à Paris.

Fonctionnalités

• Carte interactive avec OpenStreetMap
• Recherche de localisations (géocodage via Nominatim)
• Affichage des toilettes publiques de Paris (données Open Data)
• Affichage des points d'eau et fontaines à boire (données Open Data)
• Affichage des lieux frais et/ou climatisés (boutons, cafés, restaurants, etc.)
• Système de soumission de nouveaux lieux climatisés par les utilisateurs
• Interface d'administration pour valider les soumissions
• Design responsive pour mobile, tablette et desktop

Installation et deployement

Logiciels pré-requis

1. Node.js 20.x LTS
2. pnpm 8.x ou 10.x (testé avec v10.27.0)
3. Git

Verification des prerequis

node --version
pnpm --version
git --version

Installation

1. Cloner le depot

git clone https://git.poudlar.do/Poudlardo/climatiseyy.git
cd climatiseyy

2. Installer les dependances

pnpm install
# Si vous avez des problèmes de lockfile, essayez:
# rm -rf node_modules pnpm-lock.yaml && pnpm install

Demarrer le serveur de developpement

pnpm run dev

Commandes de developpement

Commande	Description
pnpm run dev	Demarre Vite en mode developpement avec Hot Module Replacement
pnpm run build	Construit l'application pour la production
pnpm run lint	Execute ESLint pour verifier la qualite du code
pnpm run preview	Previsualise la build de production localement

Fonctionnalites de developpement

• Hot Module Replacement (HMR): Les modifications sont automatiquement rechargees
• Validation TypeScript en temps reel
• Messages d'erreur clairs dans le navigateur

Depannage du developpement local

Le serveur ne demarre pas

lsof -i :8070
# Si le port 8070 est occupe, changez-le:
pnpm run dev -- --port 8071

Ou modifiez vite.config.ts:

server: { port: 8071 }

Erreurs de types TypeScript

pnpm install --save-dev typescript@latest @types/react @types/react-dom @types/leaflet
npx tsc --noEmit

La carte ne s'affiche pas

• Verifiez votre connexion Internet (Leaflet charge les tiles depuis OpenStreetMap)
• Verifiez qu'il n'y a pas d'erreurs dans la console du navigateur (F12)
• Assurez-vous que les données mockées sont activées en développement

Problèmes de build avec pnpm

Si vous obtenez des erreurs de type "Cannot use packageManager" ou "lockfile failed supply-chain policy" :

# Solution 1: Réinstaller les dépendances
rm -rf node_modules pnpm-lock.yaml
pnpm install --force

# Solution 2: Utiliser une version spécifique de pnpm
pnpm install -g pnpm@10.27.0

Erreurs de types TypeScript manquantes

Si vous voyez des erreurs comme "Cannot find name 'process'" :

pnpm install --save-dev @types/node

Problemes de CORS avec l'API Overpass

L'API Overpass publique (overpass-api.de) a des restrictions CORS et de rate limiting:

• Limite: environ 2 requetes par seconde
• Solution 1: Utiliser un proxy serveur-side
• Solution 2: Deployer votre propre instance Overpass
• Solution 3: Utiliser Overpass Turbo pour les tests: https://overpass-turbo.eu/

Mise en production

Option 1: Podman (Recommandé)

Creer un Containerfile:

FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN pnpm install --frozen-lockfile
COPY . .
RUN pnpm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 8070
CMD ["nginx", "-g", "daemon off;"]

Construire et lancer:

podman build -t climatiseyy .
podman run -d -p 8070:80 --name climatiseyy climatiseyy

Acceder a l'application: http://localhost:8070

Option 3: Reverse Proxy (Nginx, Caddy)

1. Construire l'application:

pnpm run build

2. Copier le contenu de dist/ sur votre serveur

3. Configurer le Reverse Proxy

Configuration Nginx :

server {
    listen 8070;
    server_name climatiseyy;
    root /var/www/climatiseyy/dist;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
}

Création d'un Caddyfile:

:8070 {
    root * /var/www/climatiseyy/dist
    file_server
    
    # Gestion du routage pour les SPAs
    try_files {path} /
}

4. (Re)Démarrer Nginx ou Caddy:

sudo systemctl restart nginx

sudo caddy start --config /etc/caddy/Caddyfile

Acceder a l'application: http://localhost:8070

Configuration

Variables d'environnement

Creer un fichier .env a la racine du projet:

VITE_APP_TITLE=climatiseyy
VITE_OVERPASS_API_URL=https://overpass-api.de/api/interpreter
VITE_NOMINATIM_API_URL=https://nominatim.openstreetmap.org/search
VITE_DEFAULT_CITY=Paris
VITE_DEFAULT_COORDINATES=48.8566,2.3522

IMPORTANT: Les variables doivent commencer par VITE_ pour etre accessibles dans le code avec Vite.

Technologies utilisées (Versions LTS)

Technologie	Version LTS	Rôle	Documentation
Node.js	20.x LTS (Hydrogen)	Runtime JavaScript	nodejs.org
pnpm	10.x (testé avec 10.27.0)	Package manager	pnpm.io
TypeScript	5.3.x	Langage typé	typescriptlang.org
React	18.x LTS	Bibliothèque UI	react.dev
Vite	5.x	Outil de build	vitejs.dev
Leaflet	1.9.x	Bibliothèque de cartes	leafletjs.com
React-Leaflet	4.x	Intégration React	react-leaflet.js.org
@types/node	26.x	Types Node.js	npmjs.com/package/@types/node
OpenStreetMap	-	Cartes et données	openstreetmap.org
Paris Data API	-	Données ouvertes Paris	opendata.paris.fr

APIs externes utilisées

Open Data Paris - Toilettes publiques

• URL: https://opendata.paris.fr/explore/dataset/sanisettesparis/api/
• Rôle: Récupérer les localisations des toilettes publiques à Paris
• Format: JSON
• Documentation: https://opendata.paris.fr/

Open Data Paris - Points d'eau

• URL: https://opendata.paris.fr/explore/dataset/fontaines-a-boire/api/
• Rôle: Récupérer les localisations des fontaines à boire et points d'eau
• Format: JSON
• Documentation: https://opendata.paris.fr/

Nominatim API

• URL: https://nominatim.openstreetmap.org/search
• Rôle: Géocodage (recherche de localisations)
• Limites: 1 requête/seconde maximum
• Documentation: https://nominatim.org/

Note sur le développement: En environnement de développement (NODE_ENV=development), l'application utilise des données mockées pour éviter les problèmes de CORS et les limites de rate des APIs publiques. Cela permet un développement plus fluide sans dépendre des APIs externes.

Depannage

Verification des versions LTS

Avant de deployer, verifiez les versions:

node --version  # Doit afficher v20.x.x
pnpm --version   # Doit afficher 9.x.x

Débogage

Erreurs de types avec les hooks React + Typescript

pnpm install --save-dev @types/react@latest @types/react-dom@latest

Erreurs avec les refs ou le rendu Leaflet + React 18

# React-Leaflet v4 est compatible avec React 18.
pnpm install react-leaflet@^4.0.0

Erreurs de build avec Vite

pnpm install --save-dev vite@latest @vitejs/plugin-react@latest
rm -rf node_modules/.vite
rm -rf node_modules pnpm-lock.yaml
pnpm install

Problèmes de CORS en production

Solutions:

1. Configurer un proxy serveur-side (Nginx, Caddy)
2. Utiliser un service CORS (uniquement pour le developpement)
3. Deployer vos propres instances des APIs

Exemple avec Nginx:

location /api/ {
    proxy_pass https://overpass-api.de/api/;
    proxy_set_header Origin "";
    proxy_hide_header Access-Control-Allow-Origin;
}

Les icones Leaflet ne s'affichent pas

Le fix est inclus dans MapContainer.tsx. Si le probleme persiste:

• Verifiez la connexion Internet
• Les icones sont chargees depuis unpkg.com