Kasa
Dans le cadre de ma formation d'Intégrateur Web, ce projet m'a permis de construire le front-end d'une application web de location de logements entre particuliers. L'accent a été mis sur la création de composants modulaires et la gestion du routage multipages (SPA).
Rôle
Intégrateur Web
Angle Visé
UI & UX
Architecture
Component-Based UI, Routing
Stack
Problématique
Il fallait créer une expérience fluide avec des transitions entre de multiples pages (Accueil, À propos, Page de logement détaillé) sans utiliser de requêtes serveur à chaque clic, tout en respectant fidèlement une maquette Figma.
Approche
Développement d'une application avec React, utilisant React Router pour la navigation et gestion du style avec Sass. Configuration d'un profil de couleur avec prefer-color-scheme ce qui permet aux utilisateurs de basculer entre le mode sombre et le mode clair en fonction du profil de couleur de leur système d'exploitation. J'ai organisé ce projet (composants React et feuilles de style Sass) en adoptant la logique du pattern 7-1, et j'ai simulé des appels API sur un fichier JSON local.
Résultat
Une interface web responsive, modulaire, structurée et facilement maintenable, offrant une navigation instantanée, intégrant des animations CSS fluides, des fonctionnalités interactives (carrousels d'images, menus accordéons) et un design moderne et attrayant.
Compétences cibles & Apports
- Conception de composants d'interface hautement modulaires et réutilisables (React)
- Gestion du routage et des transitions dynamiques côté client avec React Router
- Structuration CSS avancée par Sass selon la méthodologie SMACSS / pattern 7-1
- Intégration pixel-perfect responsive d'une maquette Figma complexe
- Intégration de préférences d'affichage (mode sombre automatique)
// suite
M-Motors
Plateforme web full-stack de vente et location de véhicules avec espace utilisateur sécurisé.
Coders Monkeys
Application web SaaS de partage de projets pour développeurs avec Firebase et Next.js.
Nina Carducci
Optimisation experte des performances, du référencement SEO et de l'accessibilité.