Instructions

Build app

Install pnpm package manager

pnpm install
pnpm dev

Dépendances

• Framework : React v18
• Router : React Router v6
• Weather data: 7timer
• Build tools: Vite
• CSS: Bulma

Configuration custom

Ce projet a été crée grâce à Vite. Pour plus d'information sur la customisation, nous vous invitons à consulter la documentation de l'outil configuration.

Step 1 : Afficher la météo du jour pour Grenoble

• Sur la page d’une ville récupérer et afficher la météo du jour.
• Le page d’une ville correspond au composant CityPage
• Utiliser le service weather (getCityTodayWeather) pour récupérer la météo en function des coordonnées GPS de Grenoble lorsque le composant est créé à l'aide d'un useEffect
• Binder les données de la météo du jour avec le template JSX (https://react.dev/learn/writing-markup-with-jsx)

Step 2 : Afficher la météo du jour pour toutes les villes Zenika

• Afficher toutes les villes sur la page d'accueil HomePage (https://react.dev/learn/rendering-lists)
• Utiliser les getters du pseudo-store pour récupérer les coordonnées de la ville par son nom à partir des params de la route cityName (un exemple de code pour récupérer ce paramètre est disponible dans le fichier CityPage)
• Appeler la méthode pour obtenir la météo du jour (getCityTodayWeather) via le fichier weather.api.js avec ces coordonnées

Step 3 : Afficher la météo des 8 prochains jours pour chaque ville

• Via le fichier d'api weather.api.js, récupérer maintenant la météo des 8 prochains jours (getCityNextWeekWeather)
• Binder les données avec le template

Step 4 : Avoir la possibilité de passer en Fahrenheit

• Ajouter des radios boutons, checkbox ou n’importe quoi d’autre pour choisir l’unité à afficher
• Créer un custom hook qui aura un state degree et une methode associée qui retournera la température dans la bonne unité
• Appliquer la fonction de conversion F = C * 9/5 + 32

Step 5 : Ajouter un page pour enregistrer une nouvelle ville

• Créer un nouveau composant dans le dossier pages/city
• Créer dans le router, dans le fichier App.jsx, une route liée à ce composant
• Créer une methode addCity dans le pseudo-store qui permet d'ajouter une ville à la liste
• Créer un formulaire avec des inputs pour le nom de la ville, latitude et longitude
• Appeler la méthode addCity du pseudo-store lors de l’envoi du formulaire

Bonus : Afficher la météo détaillée d'un ville

• Une seconde API sur 7timer permet d'obtenir une météo plus détaillée avec une prévision toute les 3 heures (http://www.7timer.info/bin/civil.php?lon=0&lat=0&unit=metric&output=json)
• Créer un nouveau point d'entrée sur le fichier d'api pour consommer ces données
• Afficher le résultat de la météo détaillée sur la page de la ville
• Ajouter un bouton pour afficher le mode simple ou le mode détaillé
• Afficher un loader pendant le chargement des données pour faire patienter l'utilisateur, avec une durée d'au moins 2 secondes

Correction

Step 1

https://github.com/Zenika/grenoble-hands-on-react/compare/step0...step1

Step 2

https://github.com/Zenika/grenoble-hands-on-react/compare/step1...step2

Step 3

https://github.com/Zenika/grenoble-hands-on-react/compare/step2...step3

Step 4

https://github.com/Zenika/grenoble-hands-on-react/compare/step3...step4

Step 5

https://github.com/Zenika/grenoble-hands-on-react/compare/step4...step5

Bonus

https://github.com/Zenika/grenoble-hands-on-react/compare/step5...bonus