Bienvenue à toi cher.e candidat.e.
Tu trouveras ci-dessous les informations nécessaires pour te lancer dans ce test technique. Si certaines parties de l'exercice ne te paraissent pas claires ou que tu as des questions, nous sommes là pour y répondre. Nous t'encourageons même à les poser plutôt que de rester bloqué.e et de ne pas être sûr.e de ce qui t'est demandé.
L'application utilise React et Material UI. Il y a déjà plusieurs composants utilisés qui sont dans le dossier /components.
L'application doit permettre d'afficher des photos de chiens.
Il faut pouvoir choisir:
- plusieurs races de chien
- plusieurs nombres d'images à afficher
- le nombre de colonnes de la grille d'images.
L'objectif de l'exercice est de remplacer les éléments en dur par des éléments provenant de l'api Dog API.
L'immense majorité du travail se concentre sur la partie fonctionnelle et non UI/UX.
Tu peux consulter les 2 screenshots qui sont dans le projet pour te donner une idée du résultat final attendu.
🚨 Le test doit être réalisé sur codesandbox en créant une nouvelle version du projet
📣 L'essentiel du travail peut se faire dans App.tsx mais tu peux aussi créer des nouveaux fichiers si tu le souhaites, afin de découper ton code et le rendre plus facilement maintenable.
📣 Les fonctionalités actuelles mais non fonctionnelles de l'application sont les suivantes:
- 📌 Dropdown 1: Choisir une race de chien
- 📌 Dropdown 2: Choisir le nombre d'images à récupérer dans le call et à afficher
- 📌 Dropdown 3: Choisir un nombre de column pour la grille d'image
- 📌 Dans la carte a droite des Dropdown afficher l'image d'un chien de la race choisie et afficher le nom de la race en dessous
Actuellement, aucune de ces fonctionalités de fonctionnent. A toi de jouer 💪💪
🐶 - Tu peux utiliser directement les composants dans /components sans avoir à les modifier.
🐶 - CHOSEN_BREED_URL = https://dog.ceo/api/breed/{breedName}/images/random/{?num}
📣 Une nouvelle fonctionnalité à réaliser
Il faudrait pouvoir afficher sur la page une liste de chiens préférés. La liste des chiens doit être stockée dans le localStorage. Des boutons (UI au choix) sont à implémenter afin de pouvoir mettre et retirer des favoris le chien qui est affiché. La liste complète doit être affichée sur la page. Si l'on clique sur l'un des noms de liste, la page de la race de chien s'affiche.
🚨🚨 Bonus 🚨🚨 Typescript est installé et disponible. Si vous le souhaitez le projet peut être typé exhaustivement.
Et bien sûr:
Bon courage 💪💪 :)
Test à rendre en ayant forké puis partagé la sandbox.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent