-Only authentified users can access the application.
-Users can eiter login or create a new account, they can store their favorite cities to have access to their current weather in Home page and forecast in detail page.
-Weather is gotten from OpenWeather API.
-Data is stored in a MongoDB database.
-Frontend uses Nunjucks.
-The app uses many security features.

-Seuls les utilisateurs authentifiés peuvent avoir accès à l'application.
-Ils peuvent se connecter ou créer un compte, ensuite ils peuvent enregistrer leurs villes pour avoir accès à leur météo actuelle dans la page d'accueil, ou aux prévisions dans la page de détails.
-La météo est récupérée depuis OpenWeather API.
-Les données sont enregistrées dans une bdd MongoDB.
-Le frontend utilise Nunjucks.
-L'application utilise plusieurs features de sécurité différentes.

Users can login from this form.

Login like all other forms in this web app, is protected by CSRF tokens.

Les utilisateurs peuvent se connecter depuis ce formulaire.

Ce formulaire comme tous les autres de l'application utilise les CSRF tokens.

Here is register form :

Voici le formulaire de création de compte :

Register errors (and other forms errors) are handled in server side and returned to users as a simple text/message that shows in red.

Les erreurs d'enregistrement (et celles des autres formulaires) sont gérées par le serveur et sont retournées à l'utilisateur sous la forme d'un simple message rouge.

Users can add, modify and delete cities that they want to see in their home menu.

L'utilisateur peut ajouter, modifier et supprimer les villes qu'il souhaite voir dans sa page d'accueil.

To add a city, they need to open a form that looks like this :

Pour ajouter une ville, il faut passer par ce formulaire :

This form has an auto completion feature to make sure users can't add fictive cities, or simply cities that aren't managed by the API.

Ce formulaire a une feature d'auto completion pour être sûr que l'utilisateur ne pourra pas ajouter de villes fictives, ou qui ne sont pas prises en charge par l'API.

The way it works is pretty simple :

Countries list is directly loaded after the page finishes loading, it's a simple static JSON file than we load in client-side using JavaScript and AJAX.
When the user selects a city, the value is directly used as a parameter to load cities list from the API using AJAX.
The API has a route that returns a list of all supported cities of a country in JSON format.

La manière dont ça marche est assez simple :

La liste des pays est chargée avec la page, c'est un simple fichier JSON statique que l'on charge depuis le serveur en utilisant JavaScript et AJAX.
Ensuite, quand l'utilisateur choisit un pays, la valeur choisie est directement utilisée pour récupérer la liste des villes depuis l'API, encore une fois en utilisant AJAX.
L'API a une route qui retourne la liste des villes prises en compte d'un pays (passé en parametre) par l'appli sous format JSON.

Then the list is saved in client-side to be used in the auto completion.

Enfin la liste est sauvegardée du coté du client et est utilisée pour l'auto completion.

There are two data asynchroneous methods :
-They both take as parameter a city ID and return a JSON object (raw data).
-The first one gets current weather in a city from OpenWeather API and the second one gets forceast.

Il y a deux méthodes asynchrones :
-Toutes les deux prennent l'ID d'une ville comme parametre et retournent un objet JSON (données brutes).
-La première récupère la météo actuelle et la deuxième les prévisions.

They look like this :

Elles ressemblent à ceci :

After getting raw data, we process it and show informations that the user needs.

Après avoir récupéré les données, on les traite et affiche le résultat désiré à l'utilisateur.

To make this app as secure as it can be, I used many security features :
-HTTPS
-JWT
-CSRF Tokens
-Rate limit (to prevent DDOS)
-XSS filter
-Password hash (Bcrypt)
-Helmet js (HTTP headers)

Pour rendre cette application sécurisée, j'ai utilisé plusieurs features de sécurité :
-HTTPS
-JWT
-CSRF Tokens
-Rate limit (pour contrer les attaques DDOS)
-Filtre XSS
-hash des mots de passe (Bcrypt)
-Helmet js (headers HTTP)