Application météo React réalisée dans le cadre du TP_Projet_React_Sun_Forecast_extrait.txt.
- Afficher la météo à partir de la géolocalisation utilisateur.
- Permettre la recherche d’une ville.
- Afficher des prévisions météo sur 5 jours.
- Afficher les couches cartographiques météo (pluie, température, vent).
- React + Vite
- React Router
- Tailwind CSS v4
- shadcn/ui
- Framer Motion
- Lucide React
- Leaflet / React Leaflet
- OpenWeather API
- Forecast 5 jours:
https://api.openweathermap.org/data/2.5/forecast - Geocoding:
https://api.openweathermap.org/geo/1.0/direct - Icônes météo:
https://openweathermap.org/img/wn/{icon}@2x.png - Tuiles météo:
https://tile.openweathermap.org/map/{layer}/{z}/{x}/{y}.png
Le projet utilise la variable d’environnement VITE_OPENWEATHER_API_KEY.
- Duplique le fichier
.env.exampleen.env.
cp -a .env.example .env- Renseigne ta clé OpenWeather:
VITE_OPENWEATHER_API_KEY=ta_cle_openweather- Redémarre le serveur Vite si nécessaire.
- Le repo contient
.env.example(sans clé réelle). - Chaque utilisateur copie
.env.examplevers.envet renseigne sa propre clé. - Le fichier
.envest ignoré par Git (sécurité).
npm installnpm run devnpm run buildnpm run lint- Recherche de ville
- Bouton “Ma position” (géolocalisation)
- Météo actuelle (température + description + icône)
- Prévisions horaires
- Résumé des indicateurs météo
- Prévisions sur 5 jours
- Carte interactive (Leaflet)
- Recentrage automatique sur la ville recherchée
- Couches météo OpenWeather:
- Pluie
- Température
- Vent
- Contrôle du zoom
Le projet est livrable sous forme de:
- dépôt GitHub (ce repo), ou
- archive
.zipdu projet (horsnode_modules).