Lâobjectif est simple : Ă©valuer ta capacitĂ© Ă construire une application mobile en React Native, en utilisant Expo, en utilisant une API REST existante (dĂ©jĂ dĂ©veloppĂ©e en Laravel).
Nous mettons Ă ta disposition une API de gestion de stock pour laquelle tu disposes dâun token dâaccĂšs, reçu dans le mail d'instructions.
đ Ce test est conçu pour ĂȘtre rĂ©alisĂ© en 3 heures maximum.
đ Une fois terminĂ©, merci de le remettre dans un dĂ©pĂŽt GitHub privĂ© et de nous y inviter.
- Node.js >= 18
- Expo CLI
- Un device ou émulateur iOS/Android
Pour gagner du temps, un starter kit vous est fourni avec :
- Maquettes Figma
- Expo Router pour la navigation
- Tailwind avec twrnc pour le style
- React Hook Form pour les formulaires
- Reanimated pour les animations
- React Query pour les appels API
- Zod pour les validations
- Zustand pour la gestion de state
- Flash List pour la gestion de listes
- Action Sheet pour les actions contextuelles
đ Vous ĂȘtes libre dâutiliser les librairies de votre choix, tant que lâarchitecture et les fonctionnalitĂ©s demandĂ©es sont respectĂ©es.
L'objectif de ce test est de produire une petite application permettant la gestion des stocks Ă l'aide de l'API.
-
Liste de produits
- Afficher tous les produits.
- Afficher pour chaque produit : nom, catégorie, quantité, état (OK, Stock bas, Rupture).
- Filtre sur le status (Tous, En rupture, Stock bas).
- Bouton pour ajouter un produit.
-
Ăcran DĂ©tail produit
- Afficher les infos du produit (nom, categorie, quantité, image, status).
- Liste des mouvements associés.
- Boutons pour ajouter/sortir du stock.
- Animation simple via Reanimated lors de la mise à jour de la quantité (bonus).
- Suppression du produit
-
Formulaire dâajout / modification de produit
- Champs : nom, catégorie, quantité initiale (cacher à l'édition), seuil minimum, image.
- Validation des champs, gestion des erreurs.
-
Alerte de seuil : lorsque le seuil minimum d'un produit est atteint, déclancher une notification local.
PS : il n'est pas attendu d'implémenter un systÚme d'authentification
đ Base URL de l'API :
https://technical-test-react-native-back-master-oibbvb.laravel.cloud/api
LâAPI utilise un token dâaccĂšs fourni (type Bearer).
Chaque requĂȘte doit inclure le header suivant : Authorization: Bearer <token>
- Repo GitHub privé contenant :
- FEEDBACK.md (explications de l'architecture, des choix techniques, avis sur le test et commentaires).
- Les modifications effectuées sur le code.
- Commits progressifs.
- Invitez-nous en tant que collaborateurs sur le dépÎt privé.
- Qualité et structure du code React Native.
- Gestion correcte des appels API (erreurs, loading, retry éventuel).
- Respect des rÚgles métier.
- Cohérence UX et finitions (insets, haptic, ...).
- Ătat vide / skeleton loaders soignĂ©s.
- Bonus : une petite animation, librairie i18n, tests unitaires ou dâintĂ©gration (Jest/RTL).
- Cloner le repo :
git clone https://github.com/YieldStudio/technical-test-react-native.git cd technical-test-react-native - Lancer le projet :
npm install npm run start
- Commencer à implémenter les fonctionnalités demandées.
- Créer un dépÎt privé sur GitHub depuis votre compte.
- Changer lâorigine Git pour pointer vers votre dĂ©pĂŽt privĂ© :
git remote remove origin git remote add origin git@github.com:<votre-compte>/<votre-repo-prive>.git
- Pousser votre travail :
git push -u origin main
- Invitez-nous en tant que collaborateurs sur ce dépÎt privé (vous recevrez nos identifiants GitHub par email).