REA 1 Flashcards
Pourquoi avez-vous choisi une approche mobile-first pour cette page?
J’ai opté pour une approche mobile-first car les statistiques d’utilisation montrent une tendance croissante à la navigation sur appareils mobiles. Cette méthode permet de garantir une expérience optimale sur tous les appareils. En commençant par concevoir pour les contraintes d’un écran mobile, j’ai pu me concentrer sur l’essentiel et ensuite enrichir l’expérience pour les écrans plus larges. Cela facilite également le maintien d’une base de code cohérente et optimisée pour tous les formats.
Comment avez-vous implémenté la recherche dynamique et quels défis avez-vous rencontrés?
La recherche dynamique est implémentée avec React en utilisant les hooks d’état (useState). À chaque frappe dans le champ de recherche, je filtre le tableau de jeux en fonction de la correspondance entre la saisie et les noms des jeux.
Le principal défi était de gérer les différents états possibles (chargement initial, aucun résultat, erreur de chargement) tout en maintenant une interface réactive. J’ai résolu cela en créant des états spécifiques pour chaque situation et des messages contextuels adaptés, notamment en utilisant des messages humoristiques liés au thème des jeux d’arcade lorsqu’aucun résultat n’est trouvé.
Comment assurez-vous la sécurité des données lors des requêtes au backend?
Pour sécuriser les requêtes, j’ai mis en place plusieurs mesures:
- Utilisation de requêtes paramétrées dans le repository pour prévenir les injections SQL
- Validation des données côté serveur avant tout traitement
- Implémentation d’un système d’authentification par token pour les fonctionnalités réservées aux utilisateurs connectés
- Gestion sécurisée des erreurs sans divulgation d’informations sensibles
Dans le code du repository, vous pouvez voir que les requêtes SQL utilisent des paramètres (marqués par ?) plutôt que de concaténer directement les valeurs
Comment gérez-vous la performance lors du chargement des images des jeux?
Pour optimiser la performance des images, j’ai implémenté plusieurs techniques:
Conteneurs d’image à taille fixe pour éviter les changements de mise en page pendant le chargement
Utilisation de la propriété object-fit: contain pour garantir que les images s’adaptent correctement
Gestion de fallback avec logo par défaut en cas d’image manquante
Chargement asynchrone des données pour ne pas bloquer l’interface utilisateur
De plus, pour les grandes listes de jeux, l’implémentation du filtrage côté client permet d’éviter des requêtes supplémentaires au serveur lors de la recherche.
Comment avez-vous testé la responsivité de votre interface?
J’ai testé la responsivité à travers plusieurs approches:
- Utilisation des outils de développement des navigateurs pour simuler différentes tailles d’écran
- Tests sur divers appareils physiques (smartphones, tablettes, ordinateurs)
- Validation des points de rupture (breakpoints) CSS pour assurer une transition fluide entre les différentes mises en page
- Vérification de l’accessibilité sur chaque format d’écran
J’ai particulièrement veillé à ce que les éléments interactifs comme la barre de recherche et les boutons restent facilement utilisables sur les écrans tactiles.
Quelles améliorations futures envisageriez-vous pour cette fonctionnalité?
Pour améliorer cette fonctionnalité, j’envisagerais:
- Implémentation de filtres supplémentaires (par catégorie, popularité, etc.)
- Ajout d’une pagination ou chargement infini pour gérer un grand nombre de jeux
- Optimisation des performances avec du lazy loading pour les images
- Amélioration de l’accessibilité avec une meilleure navigation au clavier et support des lecteurs d’écran
- Enrichissement des cartes de jeux avec plus d’informations (vidéo, galerie d’images, avis)
- Implémentation de suggestions de recherche basées sur les termes les plus populaires
Comment assurez-vous la cohérence visuelle avec le reste de l’application?
J’ai maintenu la cohérence visuelle en:
- Respectant strictement la charte graphique définie (palette de couleurs, typographie)
- Réutilisant des composants communs comme les cartes et les boutons
- Appliquant les mêmes principes d’interaction sur l’ensemble de l’interface
- Conservant une hiérarchie visuelle constante
- Maintenant des espacements et des alignements cohérents
Cette approche garantit que l’utilisateur retrouve des repères familiers quelle que soit la section de l’application qu’il visite.
