1. Contexte
• Client: Kasa, leader français de location d’appartements entre particuliers (500+ annonces/jour).
• Équipe: Artdantech, Laura (CTO), Paul (designer Figma).
• Livrables: application React complète (Home, Fiche logement, À propos, 404), composants réutilisables, routing, logique UI (slideshow, collapse), styles Sass, animations (collapse), responsive.
• Point de départ: maquettes Figma + prototypes (animations), fichier JSON (20 logements), coding guidelines Kasa, choix du bundler (CRA recommandé, Vite possible).
2. Besoin
• Démarrer et structurer un projet React, consommer un JSON local comme source de vérité (en attendant l’API), implémenter les écrans et comportements décrits par les maquettes/brief.
• Assurer une UX robuste: carrousel infini, collapses animés, gestion d’URL erronées, rendering performant, responsive.
3. Client
• Utilisateurs finaux (desktop/mobile) en recherche d’hébergement.
• Équipe produit/design (Laura, Paul) pour la conformité au brief, guidelines et protos Figma.
4. Objectifs
4.1 Fonctionnels
• Pages: Accueil (liste des logements), Fiche logement (détails + carousel + collapses), À propos (collapses), 404.
• Slideshow: navigation infinie, hauteur fixe, images centrées/croppées, numérotation actuelle/total, masqué si une seule image.
• Collapse: fermé par défaut, toggle au clic, animation d’ouverture/fermeture.
• Routing: navigation via Header, redirection 404 pour route inconnue et id de logement invalide.
4.2 Techniques
• React + React Router v6+, Sass (obligatoire sur parcours Développeur Web; recommandé sinon).
• Architecture composants, props validées (PropTypes), clés stables pour les listes.
• Accessibilité: alt images, aria-expanded pour Collapse, boutons de navigation du Slideshow accessibles clavier, focus visibles.
• Responsive conforme Figma (mobile, tablette, desktop).
5. Contraintes / défis
• Pas d’API: utiliser le JSON local et structurer le code pour passer facilement à une API plus tard.
• Fidélité maquettes/protos (espacements, tailles, animations).
• Robustesse du routing (404/id), états limites du Slideshow (1 image), performance (images lourdes).
• Sass organisé (variables, mixins), animations CSS douces et accessibles (prefers-reduced-motion).
6. Processus / méthodologie
6.1 Analyse
• Parcourir Figma (exports logos/icônes, tokens couleur/typo/espacements, comportements animés du Collapse).
• Lire les coding guidelines Kasa (naming, structure, outils).
• Explorer le JSON: structure attendue (ex: id, title, cover, pictures[], description, host{name, picture}, rating, location, tags[], equipments[]).
6.2 Découpage en issues (GitHub)
• Setup: init React (CRA ou Vite), intégration Sass, ESLint/Prettier/Stylelint, JSON ajouté.
• Router: installation React Router, routes de base + page 404, layout (Header/Footer).
• Home: composants Banner, Card, Grid; liste depuis JSON; liens vers fiches.
• About: composant Collapse générique + contenus.
• Lodging: chargement par :id, Slideshow, TagList, Host, Rating, deux Collapses (Description, Équipements).
• Erreurs: id invalide → 404.
• Styles: structure Sass, variables, mixins, responsive.
• Finitions: animations Collapse, a11y, tests manuels, déploiement (GH Pages/Netlify/Vercel).
6.3 Architecture et logique
• Arborescence (exemple): cf github
6.4 Choix techniques (justification)
• React Router v6 pour un routing simple et clair (Navigate/useNavigate pour redirections).
• Sass modulaire pour la maintenabilité (variables couleurs/typo/spacings; mixins breakpoints).
• PropTypes pour sécuriser les props en dev; composants atomiques réutilisables (Card, Tag, Rating).
• Animations CSS performantes (transform/opacity), respect de prefers-reduced-motion.
6.5 Flux principaux
• Accueil → chargement JSON → map en Cards → clic Card → Lodging/:id.
• Lodging → Slideshow (prev/next infini), Tags, Rating, Host, Collapses (Description/Équipements).
• About → liste de Collapses (ouverts/fermés au clic).
• Route inconnue/id invalide → 404.
6.6 Tests et qualité
• UI: pixel‑perfect vs Figma (espacements, tailles, réactivité).
• Routing: toutes routes → bonnes pages; id inconnu → 404; navigation via Header ok.
• Slideshow: états limites (1 image), bouclage aux extrémités, numérotation correcte.
• Collapse: fermé par défaut, animation, a11y (aria-expanded, clavier).
• Accessibilité: alt pertinents, contrastes, focus; test prefers-reduced-motion.
• Validation: absence de warnings (keys de listes), ESLint/Prettier, build de prod ok.
• Responsive: points de rupture (mobile/tablette/desktop) fidèles aux maquettes.
7. Analyse
• En isolant les comportements clés (Slideshow, Collapse) dans des composants autonomes et testables, et en structurant Sass autour de tokens/mixins, on garantit une app lisible, extensible et prête pour un back API futur (remplacement du JSON par fetch). Le routing robuste sécurise l’UX (404/id).
8. Choix techniques
• CRA ou Vite (démarrage rapide; Vite pour builds plus rapides).
• React Router v6; Sass avec architecture légère (abstracts/base/components/pages).
• PropTypes, ESLint/Prettier, Stylelint; deployment Netlify/Vercel ou GH Pages.
9. Logique de résolution
• Initialiser l’app + Sass → installer Router → poser Layout + routes → implémenter Home (Cards) → About (Collapse générique) → Lodging (Slideshow + sections) → gérer 404/id → animations + a11y → responsive → QA finale et déploiement.
10. Stack utilisée
• Front: React 18+, React Router v6+, Sass.
• Outils: ESLint, Prettier, Stylelint, GitHub, DevTools; déploiement Netlify/Vercel/GH Pages.
• Données: JSON local (remplaçable par API ultérieure).
11. Résultat final
• Application Kasa fidèle aux maquettes Figma et aux prototypes: Home, À propos, Fiche logement, 404.
• Composants réutilisables (Slideshow infini, Collapse animé), routing robuste, Sass structuré, responsive complet.
• Code propre, validé et prêt pour intégration future avec un back-end NodeJS.