Comparateur de Pays pour Expatriation

Le but de ce POK est de créer une application facile à utiliser comme comparateur de pays pour l'expatriation, en prenant en compte divers critères tels que le salaire, les impôts, la qualité de vie, et bien d'autres.

L'idée est de créer un comparateur de pays basé sur différents paramètres. L'objectif est triple : Réfléchir à des critères de notation qui pousseraient la plupart à choisir d'habiter dans un pays plutôt qu'un autre, créer une base de données répertoriant tous ces critères, et créer une interface pour permettre aux utilisateurs de faire leurs propres recherches selon leurs préférences.

Le comparateur est disponible en suivant le lien suivant : https://steady-pudding-ad483b.netlify.app/

Tâches

Sprints

Sprint 1

• [x] Identifier et sélectionner les 28 paramètres clés pour l'expatriation
• [x] Rechercher et collecter les données pour chaque pays
• [x] Normaliser les données pour permettre une comparaison équitable
• [x] Structurer les données dans un fichier JSON

Sprint 2

• [x] Configurer le projet avec Vite, React et TypeScript
• [x] Développer les composants principaux de l'application
• [x] Implémenter la logique de calcul des scores basée sur les préférences de l'utilisateur
• [x] Déployer l'application sur Netlify

Horodatage

Toutes les séances et le nombre d'heures que j'y ai passé.

Contenu

Premier Sprint

Identification des paramètres

Avant de commencer à réfléchir à l'application en elle-même, il me fallait créer ou trouver une base de données me permettant de faire ce comparatif entre pays. J'ai cherché pendant plusieurs heures mais n'ai pas trouvé de BDD complète qui répondait aux besoins de ce projet. J'ai donc entrepris de la recréer moi-même, à partir de base de données plus spécifiques que j'avais trouvé pendant mes recherches. J'ai identifié 28 paramètres clés qui influencent la décision de s'expatrier, tels que le salaire, les impôts sur le revenu, l'indice de développement humain (IDH), le taux de chômage, le coût de la vie, la qualité de l'air, le système de santé, les droits des expatriés, le régime politique, la sécurité, etc.

Collecte des données

Vu la quantité de données que j'avais à trouver et formater, j'ai commencé par faire des recherches sur les sources qui existaient pour les différents paramètres de ma BDD. J'ai ensuite télécharger toutes ces sources, et utiliser une IA pour les concaténer. Cette tâche était vraiment très longue et fastidieuse du fait de la quantité de données manipulée, mais cela m'a permis de débuter le projet avec une base de donnée de paramètres bien définis et pertinents pour le calcul des scores des pays. Ci dessous la liste détaillée des sources utilisées ou consultées pour construire la base de données.

1️⃣ Économie & Travail

2️⃣ Fiscalité & Entrepreneuriat

3️⃣ Qualité de Vie & Services

4️⃣ Environnement & Infrastructure

5️⃣ Législation & Expatriation

6️⃣ Politique & Géographie

7️⃣ Facteurs Macroéconomiques

Pour les données que je ne trouvais pas ou qui me paraissait fausses, j'ai fait mes propres recherches en utilisant les fonctions recherches web d'IA comme chat gpt pour gagner du temps (exemple : demander le salaire moyen pour le titre "ingénieur" sur glassdoor dans plusieurs pays)

Il reste cependant des données approximées mais l'ensemble reste cohérent après plusieurs tests de calculs de score des pays.

Normalisation des données

Il a fallut ensuite normaliser les parametres pour pouvoir les comparer et leur attribuer les coefficients choisis par l'utilisateur de l'app.

Pour comparer des paramètres hétérogènes, j'ai normalisé chaque paramètre sur une échelle de 0 à 100.

Voici quelques exemples des formules ou règles utilisées pour normer ces données :

Normalisation des paramètres numériques

1. Salaire

Pour normaliser les salaires, une échelle linéaire a été utilisée en fonction des valeurs minimales et maximales de la base de données.

Formule utilisée :

[ \text{Salaire normalisé} = \left( \frac{\text{Salaire} - \text{Salaire min}}{\text{Salaire max} - \text{Salaire min}} \right) \times 100 ]

Exemple de calcul :

• Salaire minimum dans la base de données : 5 000 €
• Salaire maximum dans la base de données : 100 000 €
• Salaire à normaliser : 60 000 €

$$ \text{Salaire normalisé} = \left( \frac{60 000 - 5 000}{100 000 - 5 000} \right) \times 100 = 57,89 $$

Résultat : Un salaire de 60 000 € obtient un score normalisé de 57,89.

Normalisation des paramètres non numériques

2. Régime politique

Les scores sont attribués en fonction du niveau de liberté politique et de stabilité.

3. Protection sociale

Les scores sont attribués en fonction de l’accessibilité et de la qualité des services sociaux.

Ces critères permettent une comparaison objective entre les pays en appliquant une normalisation cohérente.

J'ai ensuite formaté tous ces paramètres dans un fichier tsx nommé data.tsx dans mon projet, le format est le suivant :

export const countriesData = [
  {
    name: "Allemagne",
    continent: "Europe",
    salary: 72,
    tax: 35,
    workTime: 80,
    opportunities: 90,
    companies: 90,
    growth: 55,
    hdi: 90,
    corporateTax: 45,
    expatRights: 60,
    visa: 65,
    laborLaw: 90,
    costOfLiving: 91,
    housingCost: 45.7,
    health: 85,
    education: 85,
    socialSecurity: 90,
    qualityOfLife: 90,
    airQuality: 80,
    telecommunications: 90,
    nationality: 75,
    timezone: 85,
    politicalRegime: 90,
    security: 66.93,
    borderingCountries: 100,
    corruptionIndex: 79,
    healthRisk: 66,
    seaAccess: 100,
    inflation: 85,
    unemployment: 85
  },

export const countryDetails = [
  {
    name: "Allemagne",
    continent: "Europe",
    salary: "57 600 €",
    tax: "45%",
    workTime: "38",
    opportunities: "Très fortes",
    companies: "Très développée",
    growth: "1,5",
    hdi: "0,95",
    corporateTax: "29,94",
    expatRights: "Bonnes protections sociales et fiscales pour les expatriés",
    visa: "Nécessite un visa de travail, mais processus relativement simple",
    laborLaw: "Forte législation de protection des salariés, droits sociaux étendus",
    costOfLiving: "0.0545",
    housingCost: "0.078",
    health: "Public",
    education: "Public",
    socialSecurity: "Accessible",
    qualityOfLife: "180.48",
    airQuality: "41.35",
    telecommunications: "90",
    nationality: "Difficile",
    timezone: "1",
    politicalRegime: "Démocratie parlementaire",
    security: "66.93",
    borderingCountries: "Aucun",
    corruptionIndex: "79",
    healthRisk: "Faible à Système de santé robuste et réactif",
    seaAccess: "Mer du Nord, mer Baltique",
    inflation: "2,4",
    unemployment: "3,2"
  },

Second Sprint

Configuration du projet

J'ai configuré le projet avec Vite, React et TypeScript. J'ai également utilisé Tailwind CSS pour le style de l'application. Je ne suis pas très à l'aise avec le développement web, j'ai donc repris mon POK précédent pour la configuration d'un projet React+TS, et essayé de suivre des tutos youtube sur des apps qui pouvaient ressembler à ce que je voulais faire. En toute transparence j'ai beaucoup utilisé des IA comme chatGPT pour coutourner les erreurs que je rencontrais et surtout pour le front end que je considère comme ayant peu de valeur ajoutée dans ce projet et dans d'autres, sachant que les IA sont totalement capables de répondre à ce besoin ça ne me semble pas être une compétence d'avenir que je souhaiterais développer ici.

Développement des composants et logique de calcul

CountryList

Le composant CountryList prend en entrée une liste de pays, des détails sur ces pays et les préférences de l'utilisateur sous forme de pondération des critères.

• Il calcule un score pour chaque pays en effectuant une moyenne pondérée des critères selon les poids définis par l'utilisateur.
• Il classe les pays du meilleur au moins bon en fonction du score calculé.
• Il affiche la liste des pays sous forme de blocs extensibles (<details>), contenant :
  • Le nom du pays et son continent.
  • Le score calculé.
  • Lorsqu'un pays est ouvert, ses détails (ex : qualité de vie, fiscalité, etc.) sont affichés sous forme de grille.

RatingForm

Le composant RatingForm permet à l'utilisateur d'exprimer ses préférences en attribuant une importance (de 0 à 10) à différents critères.

• Il initialise les pondérations des critères à 0.
• Il affiche une liste de curseurs (<input type="range">), un par critère, permettant de définir leur importance.
• Lorsqu'un curseur est modifié, il met à jour la pondération et transmet les nouvelles valeurs au parent via onRatingsChange.

Ces pondérations sont ensuite utilisées dans CountryList pour évaluer et classer les pays.

Déploiement de l'application

Lors de mes précédents POK&MON, j'avais pendant mes recherches découvert Netlify qui permet très simplement depuis un repo GitHub de déployer une app.

Pour déployer mon application sur Netlify depuis GitHub, j'ai d'abord préparé la version de production de l'application

Ensuite, je me suis rendu sur Netlify et j'ai connecté mon compte GitHub à la plateforme. J'ai autorisé Netlify à accéder à mes dépôts GitHub. Une fois la connexion établie, j'ai sélectionné le dépôt contenant mon application, et Netlify a automatiquement détecté la configuration du projet pour procéder à la construction et au déploiement.

Après le déploiement, j'ai configuré quelques paramètres supplémentaires, comme les variables d'environnement, puis Netlify m'a fourni une URL publique pour accéder à mon application en ligne. Le déploiement étant lié à mon dépôt GitHub, chaque nouveau push déclenche automatiquement une mise à jour de l'application sur Netlify.