L'immobilier piloté par la donnée. La première conciergerie 2.0 maximisant les revenus locatifs.

ConciergerieKlee

Conception, Design & Développement Full-Stack

1 mois

Le Contexte

Comprendre le défi

Besoin de digitaliser la vitrine de la conciergerie de manière à refléter son positionnement Data Intelligence haut de gamme.

Le Client

Agence de conciergerie courte durée gérant l'intendance et utilisant des algorithmes pour ajuster les prix et optimiser l'occupation.

Objectifs

Présentation claire et premium via une architecture Bento Grid. Conversion via formulaires intégrés.

Problème

Besoin de digitaliser la vitrine de la conciergerie de manière à refléter son positionnement Data Intelligence haut de gamme.

Contraintes

UX/UI premium avec des micro-interactions fluides et complexes. Maintenir 60 FPS constant sur les animations.

L'approche

Notre Solution

Single Page Application (SPA) React ultra-modulaire. Interface esthétique 'Dark' avec effets de luminescence (Glows) interactifs calculés dynamiquement selon la position de la souris.

Capacités Déployées

Front-end

React 19React Router v7Vite

UI & Animations

Framer MotionTailwind CSS v3.4Lucide React

Utilitaires CSS

clsxtailwind-merge

Services Tiers

EmailJS

Capacités Déployées

Bento Grid Interactive : Gradients radiaux réactifs à la souris avec useSpring/useTransform.
Routing Asynchrone : Gestion native avec 'Login Modal' sans redirection.
Design System 'Klee' : Configuration Tailwind sur-mesure (klee-black, klee-accent).
Formulaire Serverless : Intégration front-end pure via EmailJS.

Enjeu Technique

Calcul mathématique de la position relative de la souris pour créer un éclairage réaliste sur le Bento Grid, sans déclencher des re-rendus React sur l'ensemble de l'arbre DOM.

Apprentissage

Gestion avancée de Framer Motion (useMotionValue, useSpring, useTransform).

Le saviez-vous ?

"Les effets de brillance suivent le curseur à 60FPS sans déclencher un seul re-rendu React, via un mapping matriciel injecté via vars CSS."

Interactive Island

Tableau de Bord Live

Utilisateurs

24.5k

Revenu MRR

€142k

Activité

+34%

Inside the Engine

Virtualization & Data Transformation

L'affichage d'un volume massif de transactions ne surcharge pas le client. J'ai construit une couche de transformation des payloads JSON (Selectors/Adapters) soulageant les composants React.memo et j'implémente le Windowing pour garantir un rendu à 60 FPS sur les longues listes DOM.

Source Module

// Matrix Normalization Layer
export const selectRevenueStats = createSelector(
  [getRawTransactions],
  (txs) => {
    // Heavy aggregation out of React render cycle
    const normalized = txs.reduce((acc, curr) => { /*...*/ }, {});
    return calculateMoMDelta(normalized);
  }
);
// Only mounts visible rows to DOM
<VirtualList itemSize={44} itemCount={10000} />

Inside the Engine

Middleware Guards & FSM Workflows

Navigation SaaS robuste (Zero-Trust). Le routage implémente des Higher-Order Components évaluant les claims JWT asynchrones. Les tickets d'incident métiers obéissent à des Machines à États Finis (FSM) pour interdire les Race Conditions.

Source Module

// JWT Asynchronous Route Guard
const ProtectedRoute = ({ requiredRole }) => {
  const { role, isFetching } = useAuthUser();
  
  if (isFetching) return <SkeletonLoader />;
  if (role !== requiredRole) return <Redirect to="/unauthorized" />;
  
  // Guard clears: Mount Business Logic
  return <DashboardLayout><Outlet /></DashboardLayout>;
};

// Axios Anti-CSRF Interceptor injected automatically

Bilan

Impact & Résultats

Demandes B2B

+45%

Animations

60 FPS

DOM

Minimisé

"
Notre image de marque a été considérablement renforcée. Le site reflète parfaitement le côté data-driven et premium de notre conciergerie.
D
Direction
Klee Conciergerie

Galerie