Maquettes Figma (Page: UI Desktop & UI Mobile)
Proto Figma Desktop
Proto Figma Mobile
Documentation API
https://documenter.getpostman.com/view/34243021/2sA3BhfaDd#421679c7-251c-408e-b736-adafb2d1e557
Le test technique se découpe en deux parties distinctes, présentes sur une seule et même maquette à intégrer.
Vous trouverez une partie orientée intégration/animations, dont le but est de juger vos aptitudes à respecter une maquette ainsi que de suivre les intentions d'animation réalisées par notre équipe créative (cf: proto figma). En ce qui concerne la partie animation, vous êtes libre de faire quelques propositions supplémentaires ou alternatives. Cependant, en ce qui concerne l'intégration, celle-ci devra respecter au maximum la maquette.
Ainsi, vous trouverez une partie orientée logique, qui se matérialise par la présence du listing de produits en fin de page. Ici, l'objectif est de traiter et d'afficher les données provenant d'une API, ainsi que d'interagir avec celle-ci. Vous constaterez dans le brief ainsi que la maquette la présence de filtres ; ceux-ci doivent être fonctionnels ainsi que la fonctionnalité "load more".
Dernier point, vous devez également penser au responsive (cf maquette).
- L'utilisation d'un framework front est obligatoire (React/Vue.js/Next.js/Nuxt.js à choisir selon vos préférences).
- L'utilisation de TypeScript n'est pas obligatoire. Si vous êtes plus à l'aise en JavaScript, n'hésitez pas.
- Aucune librairie n'est interdite (à l'exception de jQuery).
- L'utilisation d'un préprocesseur CSS est obligatoire (Sass/Scss/Less, etc.).
Vous disposez d’un délai de 2 semaines à partir de la réception de ce document. Si jamais vous avez besoin de plus de temps, n’hésitez pas à en faire la demande par mail auprès de Kevin ou Samy.
Vous serez noté sur les critères suivants :
- Qualité du code.
- Respect de la maquette.
- Fonctionnement de la partie listing de produit (gestion des appels API / fonctionnement des filtres / "load more").
- Optimisations du code / assets.
Les points suivants ne sont pas obligatoires mais constituent un plus :
- Animations.
- Nomenclature des commits & structure du dépôt.
- ESLint / TSLint.
- BEM => Block-Element-Modifier (https://getbem.com/).
C'est tout ! Bonne chance ! Une fois que vous avez terminé, veuillez ajouter les personnes suivantes à votre dépôt GitHub et n'oubliez pas de nous envoyer également un e-mail.
- Kevin Rousseau
- GitHub: kevrou (https://github.com/kevrou)
- Mail: [email protected]
- Samy Yahia
- GitHub: Samyyahia (https://github.com/Samyyahia)
- Mail: [email protected]
PS : Si jamais vous avez le moindre doute, n'hésitez pas à nous contacter par e-mail, que ce soit pour une question ou pour un asset manquant.