Test de recrutement REACT

Les exercices sont ordonnés de manière à faciliter la mise en œuvre, et certains exercices
peuvent nécessiter que d'autres exercices précédents soient déjà effectués.
Il est également possible que certains exercices nécessitent des modifications dans les
implémentations précédentes.
Le squelette de l'application est fourni tel quel, n'hésitez pas à le modifier à votre convenance.

Le test durera 4 (quatre) jours au maximum, mais vous pouvez le rendre dès que vous aurez
fini.

Règles globales
• Tous les appels réussis doivent renvoyer un code HTTP 200
• Tous les appels ayant échoué doivent renvoyer un code HTTP 500
• Tous les appels aux chemins /api/* doivent renvoyer une réponse au format JSON,
sauf une demande explicite de l’exercice
• Le serveur doit servir sur le port 4642
• Moteur de base de données et le serveur d’API du projet seront à la convenance du
candidat, mais du symfony serait aprécié.
• Les notes varieront selon la productivité, et les fonctionnalités disponibles

Table des matières

Règles globales ......................................................................................................................... 1
Exercice n°1 .......................................................................................................................... 2
Exercice n°2 .......................................................................................................................... 3
Exercice n°3 : ........................................................................................................................ 3
Exercice n°4 .......................................................................................................................... 4
Exercice n°5 .......................................................................................................................... 5
Exercice n°6 .......................................................................................................................... 5
Exercice n°7 .......................................................................................................................... 6
Exercice n°8 .......................................................................................................................... 6

1
Exercice n°1

Créez un client api rest qui sera accessible via

/api/users/import ?seed={seed}& country={country}& count={count}

Avec lequel on pourrait donner ou non des paramètres (seed, country, count) de filtrage de
l’importation.

Lors de l’appel de cette url, l’application doit récupérer tous les utilisateurs de
randomuser.me et les stocker localement selon le filtrage donné.

API randomuser.me à utiliser :

https://randomuser.me/api/1.2/?seed=<seed>&nat=<country>&results=<count>
• <seed> de randomuser.me sera rempli avec votre nom d'utilisateur GitLab
• <pays> est le pays des utilisateurs à récupérer (la France pour le test)
• <count> est utilisé pour déterminer le nombre d'utilisateurs à récupérer (500
pendant le test)

D'autres utilisations de la base de données utilisateur utiliseront ce stockage et ne devraient

pas appeler randomuser.me directement

2
Exercice n°2

Implémenter la route GET /api/users

Lors de l'appel de cette URL, l'application doit renvoyer tous les utilisateurs enregistrés

Les utilisateurs doivent afficher uniquement les champs suivants :

{
"name": {
"title": string,
"first": string,
"last": string
},
"email": string,
"login": {
"uuid": string,
"username": string
},
"registered": {
"date": datetime,
"age": int
},
"picture": {
"thumbnail": string
}
}

Exercice n°3 :

Afficher la liste des utilisateurs, en utilisant React, sur /react

Vous pouvez réutiliser tous les composants que vous voulez (material, bootstrap, …) et créer
votre propre structure.

Pour chaque Utilisateur, affichez au moins son prénom, son nom et son adresse email

3
Exercice n°4

Implémenter la route GET /api/users/{login.uuid}

Lors de l'appel de cette URL, l'application doit renvoyer tous les détails de l'utilisateur
concernant le login.uuid donné avec la structure suivante :

{
"gender": string,
"name": {
"title": string,
"first": string,
"last": string
},
"location": {
"street": string,
"city": string,
"state": string,
"postcode": int,
"coordinates": {
"latitude": float,
"longitude": float
}
},
"email": string,
"login": {
"uuid": string,
"username": string,
"password": string
},
"dob": {
"date": datetime,
"age": int
},
"registered": {
"date": datetime,
"age": int
},
"phone": string,
"cell": string,
"picture": {
"large": string,
"medium": string,
"thumbnail": string
},
"nat": string
}

4
Exercice n°5

Lorsque vous cliquez sur un utilisateur dans la liste des utilisateurs dans les résultats du lien
/react, affichez plus d'informations sur l'utilisateur

L'interface utilisateur exacte dépend de vous

Vous devez afficher au minimum sa vignette, son nom complet (titre + prénom + nom), son
nom d'utilisateur et son adresse e-mail

Exercice n°6

Ajouter les informations sur la force du mot de passe aux utilisateurs.

Ces informations doivent être ajoutées pour chaque utilisateur récupéré en appelant GET
/api/users et GET /api/users/{login.uuid}

Il doit être ajouté au chemin json : login.passwordstrength

La force du mot de passe est un nombre entier compris dans la plage [1, 9] et calculée de
cette manière en fonction de la valeur login.password :

1. : ne contient que des chiffres

2. : ne contient que des lettres (majuscules ou minuscules)
3. : contient des chiffres et des lettres (majuscules ou minuscules)
4. : contient à la fois des lettres minuscules et majuscules
5. : contient des chiffres et des lettres minuscules et majuscules
6. : ne contient que des caractères spéciaux
7. : contient des caractères spéciaux et au moins un autre type de caractères parmi :
chiffres, lettres majuscules ou lettres minuscules
8. : contient des caractères spéciaux et au moins deux autres types de caractères parmi
la liste suivante : chiffres, lettres majuscules ou lettres minuscules
9. : contient des caractères spéciaux, des chiffres, des lettres majuscules et des lettres
minuscules

5
Exercice n°7

Implémenter la route GET /api/users?{property}={value}

Lors de l'appel de cette URL, l'application doit renvoyer tous les utilisateurs correspondant
aux filtres donnés passés dans GET, tels que : {property}={value}
{propriété} est le nom d'une propriété de l'objet utilisateur (utilisez . pour accéder aux
propriétés enfants).
{value} est la valeur de la propriété, elle doit être égale pour une correspondance.

Plusieurs filtres peuvent être ajoutés à la requête

Par exemple,
appeler /api/users?gender=female&location.city=Lausanne
doit renvoyer toutes les utilisatrices vivant à Lausanne

Exercice n°8

Ajout de la possibilité pour tous les appels /api/users* de renvoyer leur résultat dans
différents formats lorsque l'extension .{format} est ajoutée au chemin de l'URL
Les valeurs possibles pour {format} sont : json (par défaut) et xml
Par exemple:
• L'appel de /api/users.xml doit renvoyer la liste des utilisateurs au format XML
• Appeler /api/users.json?dob.age=18 doit retourner la liste des utilisateurs de 18 ans
au format JSON