1. Context
• Client: Kasa, a French leader in peer-to-peer apartment rentals (500+ listings/day).
• Team: Artdantech, Laura (CTO), Paul (Figma designer).
• Deliverables: full React application (Home, Lodging page, About, 404), reusable components, routing, UI logic (slideshow, collapse), Sass styles, animations (collapse), responsive design.
• Starting point: Figma mockups + prototypes (animations), JSON file (20 listings), Kasa coding guidelines, bundler choice (CRA recommended, Vite allowed).
2. Need
• Bootstrap and structure a React project, use a local JSON file as the source of truth (until an API exists), and implement screens and behaviors described in the mockups/brief.
• Ensure robust UX: infinite carousel, animated collapses, invalid URL handling, performant rendering, responsive layout.
3. Client / Users
• End users (desktop/mobile) searching for accommodation.
• Product/design stakeholders (Laura, Paul) ensuring compliance with the brief, guidelines, and Figma prototypes.
4. Goals
4.1 Functional
• Pages: Home (listings grid), Lodging page (details + carousel + collapses), About (collapses), 404.
• Slideshow: infinite navigation, fixed height, centered/cropped images, current/total counter, hidden when there is only one image.
• Collapse: closed by default, toggles on click, open/close animation.
• Routing: navigation via Header, 404 for unknown routes and invalid lodging ids.
4.2 Technical
• React + React Router v6+, Sass (mandatory in the “Web Developer” track; recommended otherwise).
• Component-driven architecture, validated props (PropTypes), stable list keys.
• Accessibility: image alt text, aria-expanded for Collapse, keyboard-accessible slideshow controls, visible focus styles.
• Responsive behavior aligned with Figma (mobile/tablet/desktop).
5. Constraints / Challenges
• No API: rely on local JSON while keeping the code ready for a future API swap.
• Fidelity to mockups/prototypes (spacing, sizing, animations).
• Robust routing (404/invalid id), slideshow edge cases (single image), performance (heavy images).
• Well-organized Sass (variables, mixins), smooth and accessible CSS animations (prefers-reduced-motion).
6. Process / Methodology
6.1 Analysis
• Review Figma (export logos/icons, collect color/typography/spacing tokens, observe Collapse animation behaviors).
• Read Kasa coding guidelines (naming, structure, tooling).
• Inspect the JSON structure (e.g., id, title, cover, pictures[], description, host{name, picture}, rating, location, tags[], equipments[]).
6.2 Breakdown into GitHub issues
• Setup: initialize React (CRA or Vite), add Sass, ESLint/Prettier/Stylelint, import JSON.
• Router: install React Router, base routes + 404, layout (Header/Footer).
• Home: Banner, Card, Grid components; list from JSON; links to lodging pages.
• About: generic Collapse component + content.
• Lodging: load by :id, Slideshow, TagList, Host, Rating, two Collapses (Description, Equipments).
• Errors: invalid id → 404.
• Styles: Sass structure, variables, mixins, responsive rules.
• Finalization: Collapse animations, a11y, manual testing, deployment (GH Pages/Netlify/Vercel).
6.3 Architecture & logic
• Folder structure (example): see GitHub repo.
6.4 Technical choices (rationale)
• React Router v6 for clean routing (Navigate/useNavigate for redirects).
• Modular Sass for maintainability (color/typography/spacing variables; breakpoint mixins).
• PropTypes to harden component contracts during development; reusable atomic components (Card, Tag, Rating).
• High-performance CSS animations (transform/opacity) with prefers-reduced-motion support.
6.5 Main flows
• Home → load JSON → map into Cards → click a Card → Lodging/:id.
• Lodging → Slideshow (infinite prev/next), Tags, Rating, Host, Collapses (Description/Equipments).
• About → list of Collapses (open/close on click).
• Unknown route / invalid id → 404.
6.6 Tests & quality
• UI: pixel-perfect check vs Figma (spacing, sizing, responsiveness).
• Routing: all routes render correctly; unknown id → 404; Header navigation works.
• Slideshow: edge cases (1 image), looping behavior, correct numbering.
• Collapse: closed by default, smooth animation, a11y (aria-expanded, keyboard support).
• Accessibility: relevant alt text, contrast, focus states; verify prefers-reduced-motion.
• Validation: no warnings (stable keys), ESLint/Prettier clean, production build passes.
• Responsive: breakpoints match the mockups.
7. Analysis
• By isolating key behaviors (Slideshow, Collapse) into autonomous, testable components and structuring Sass around tokens/mixins, the app stays readable, extensible, and ready for a future backend API (swap JSON for fetch). Robust routing protects UX (404/invalid id).
8. Technical decisions
• CRA or Vite (quick start; Vite for faster builds).
• React Router v6; Sass with a lightweight architecture (abstracts/base/components/pages).
• PropTypes, ESLint/Prettier, Stylelint; deployment on Netlify/Vercel or GitHub Pages.
9. Resolution logic
• Initialize app + Sass → install Router → build Layout + routes → implement Home (Cards) → About (generic Collapse) → Lodging (Slideshow + sections) → handle 404/invalid id → animations + a11y → responsive → final QA + deployment.
10. Stack used
• Front: React 18+, React Router v6+, Sass.
• Tooling: ESLint, Prettier, Stylelint, GitHub, DevTools; deployment Netlify/Vercel/GH Pages.
• Data: local JSON (swappable for a later API).
11. Final outcome
• Kasa app faithful to Figma mockups and prototypes: Home, About, Lodging page, 404.
• Reusable components (infinite Slideshow, animated Collapse), robust routing, structured Sass, fully responsive UI.
• Clean, validated code ready for future integration with a NodeJS backend.