my React Weather forecast App

Introduction to React Single Page Apps and JSX, but also:

-> React Components;

-> React State & LifeCycle => useState() & useEffect() hooks;

-> conditional rendering.

---

versions:

  "react": "^18.2.0"
  "react-router-dom": "^6.3.0"

---

CLICK ME TO READ THE HACKING PROJECT INSTRUCTIONS (in English)

1. INTRODUCTION

Very well known in the world of development when you start using a language, and in particular React, you will have to make an application today to display the weather.

This will be the time to discover how component logic in React is more pleasant to handle!

The API documentation to use for the project is here.

2. THE PROJECT

By default, you will have to get the position of the user in order to display for the next 5 days the weather of where it is located.

As long as the user has not indicated whether or not he accepts geolocation, and as long as the API response has not been received, you will display a small loading, thanks to the NPM module react-loading.

If the user refuses to be geolocated, then you will have to display a message telling the user that the application cannot display their weather.

Depending on the return from the API, you will have to display an icon (sun, cloud, rain...). You can find here documentation about Weather Conditions.

The weather must contain cards that display at least: the minimum temperature, the maximum temperature, an icon, and the day of the week.

Don't forget to cut out the components of your application well to avoid repeating code unnecessarily.

CLIQUER POUR LIRE LES CONSIGNES DE THE HACKING PROJECT (en Français)

1. INTRODUCTION

Très connue du monde du développement lorsque l'on commence à utiliser un langage, et notamment React, tu vas devoir faire aujourd'hui une application permettant d'afficher la météo.

Ce sera le moment de découvrir à quel point la logique par composant dans React est plus agréable à manipuler !

La documentation de l'API à utiliser pour le projet est ici.

2. LE PROJET

Par défaut, tu devras récupérer la position de l'utilisateur afin d'afficher pour les 5 prochains jours la météo de là où il se situe.

Tant que l'utilisateur n'a pas renseigné s'il accepte ou non la géolocalisation, et tant que la réponse de l'API n'a pas été reçue, tu afficheras un petit loading, grâce au module NPM react-loading.

Si l'utilisateur refuse d'être géolocalisé, alors tu devras afficher un message indiquant à l'utilisateur que l'application ne peut pas afficher sa météo.

En fonction du retour de l'API, tu devras afficher une icône (soleil, nuage, pluie...). Tu peux trouver ici la documentation à propos des Weather Conditions.

La météo devra contenir des cards qui affichent au minimum : la température minimale, la température maximale, une icône, et le jour de la semaine.

N'oublie pas de bien découper les composants de ton application afin d'éviter de répéter du code inutilement.

---

How to use this repo:

Simply clone this repo on your machine, then open it in a Terminal window.

Then, create an account and get a free API key on: https://openweathermap.org/. Create a .env file inside the src folder and add your API key by replacing by the actual key you've just got from https://openweathermap.org/:

REACT_APP_OPENWEATHER_API_KEY = "<yourAPIkey>"

Finally, you can copy and paste the following commands in your Terminal (inside the project's directory):

npm i
npm start

That's it!
You have access to my weather forecast app in your browser 👌

Acknowledgments:

Weather icons created by Freepik - Flaticon