Challenge Infomaniak - Angular Pokedex Application (Recrutement)

Introduction

Le Challenge Infomaniak consiste à développer une application Pokedex en Angular 17 en utilisant une API dédiée. Le projet est structuré pour évaluer la capacité du développeur à implémenter des fonctionnalités clés tout en respectant les pratiques de développement et l’organisation des composants Angular.

Objectifs principaux (🎯)

Voici les fonctionnalités principales que le projet doit inclure :

1. Gotta List Them All

• Implémenter la liste des Pokémon en récupérant les données depuis l'API.
• Permettre à l'utilisateur de visualiser les Pokémon découverts.

2. Take Charge of Your Discovery

• Intégrer une fonctionnalité pour identifier un nouveau Pokémon et mettre à jour la liste de l'utilisateur.

3. So, This Is My Power... But What Are My Details?

• Afficher les détails d'un Pokémon spécifique (nom, type, caractéristiques, image).

4. Our Lucky Search Is Shining Today!

• Ajouter une barre de recherche pour filtrer rapidement les Pokémon par nom ou par type.

Bonus (🧠)

Ces objectifs sont facultatifs mais permettent de démontrer une maîtrise supplémentaire :

• Nice Theme : Ajouter des améliorations au design pour rendre l'application plus attrayante.
• State : Gérer l'état de l'application avec des outils comme NgRx ou des observables personnalisés.
• Squeeze Performances : Optimiser le chargement des données et l'affichage.
• Image Preview : Ajouter un aperçu rapide des images avant de charger les détails complets.
• Own Tests : Écrire des tests unitaires et E2E supplémentaires pour garantir la robustesse du projet.
• Filter for Trouble and Make It Double : Ajouter des options de filtres avancés (par exemple, par points de combat ou génération).

Prérequis Techniques

• Node.js 20 : Nécessaire pour installer et démarrer l'application.
• Angular 17 : Le framework principal utilisé pour construire l'interface utilisateur.
• Dépendances : Installer les dépendances du projet via npm install.

Instructions pour le Démarrage

1. Clonage du dépôt
   Cloner le dépôt sur votre machine locale.

2. Installation des dépendances
   Installer toutes les dépendances nécessaires au projet.

3. Lancer l'application en local
   Servir l'application sur http://localhost:4200 pour la tester.

4. Connexion

• Se rendre sur www.pokedexercice.ch (opens in a new tab) pour obtenir un token de dresseur personnel.
• Entrer ce token sur la page de connexion pour accéder à l'application.

Commandes de Test (🟢)

Des commandes de test sont disponibles pour valider les différentes fonctionnalités :

• Lancer les tests unitaires.
• Lancer les tests end-to-end avec Cypress.

Remarque : Assurez-vous que l'application tourne sur http://localhost:4200 pour exécuter les tests correctement.

Consignes importantes

• Interdiction d'utiliser des outils d'IA (ChatGPT, Copilot, etc.) : L'objectif est de valider vos compétences personnelles en développement Angular. Toute utilisation d'IA détectée pourrait invalider le test.
• Documentation des choix techniques : Il est recommandé d'ajouter des commentaires dans le code et des notes sur les raisons des choix effectués (structure du code, librairies utilisées, optimisations).
• Suivi du temps (optionnel) : Wakatime peut être utilisé pour partager un suivi du temps passé sur l'exercice, mais cela n'aura pas d'impact sur la notation.

Réflexion personnelle sur le challenge

Ce challenge met à l'épreuve à la fois les compétences techniques (gestion des composants, services, routing, tests) et la capacité d'organisation. Il permet également de démontrer des soft skills comme l'autonomie et la gestion du temps.

En respectant les consignes et en ajoutant des bonus, ce projet constitue une excellente opportunité de montrer une compréhension approfondie d'Angular et des meilleures pratiques de développement front-end.