Vitale

Application web d'exploration et de comparaison des solutions numériques de santé référencées par l'Assurance Maladie. Elle permet de naviguer dans un catalogue de produits conformes aux référentiels du numérique en santé (Ségur, ProPS…) via deux parcours utilisateur en A/B test.

Fonctionnalités

Parcours A — Navigation libre

• Catalogue complet des solutions avec filtres verticaux
• Filtres par type de produit, labels, OS, services, cibles, usages
• Recherche avec suggestions groupées
• Tri par nom ou date de conformité
• Fiche détaillée par produit
• Comparateur (sélection multi-produits, vue tableau)

Parcours B — Assistant guidé

• Wizard 4 étapes : type d'utilisateur → cible → type de solution → usages
• Résultats pré-filtrés selon les réponses
• Mêmes capacités de filtrage, tri et comparaison que le parcours A

Administration

• Interface protégée par mot de passe
• Gestion des produits, éditeurs, services, référentiels
• Upload d'images produit
• Suivi des dates d'homologation et certifications OS

Stack technique

Couche	Technologie
Framework	React 18 + TypeScript
Build	Vite 5
Routing	React Router v7
Styles	Tailwind CSS 4 + design system Lyse
Composants	shadcn/ui
Base de données	Supabase
Analytics	PostHog
Tests E2E	Playwright
Déploiement	Vercel

Démarrage

npm install
npm run dev

Variables d'environnement requises (fichier .env) :

VITE_SUPABASE_URL=...
VITE_SUPABASE_ANON_KEY=...
VITE_POSTHOG_KEY=...

Structure du projet

src/
├── pages/
│   ├── flow-a/          # Parcours navigation libre
│   ├── flow-b/          # Parcours assistant guidé
│   ├── admin/           # Back-office
│   └── doc/             # Documentation des composants
├── components/
│   ├── generated/       # Composants métier (ProductCard, Comparator…)
│   └── ui/
│       ├── shadcn/      # Composants shadcn/ui
│       └── lyse/        # Design system custom
├── data/
│   ├── db.ts            # Requêtes Supabase
│   └── types.ts         # Types TypeScript
└── lib/
    ├── comparatorContext.tsx
    └── supabase.ts
styles/
└── lyse/                # Tokens CSS (couleurs, typo, layout)

Design system

Le projet utilise Lyse, un système de design custom basé sur des tokens CSS (/styles/lyse/). Les composants shadcn/ui sont mappés sur ces tokens pour assurer la cohérence visuelle.

Polices : Bricolage Grotesque (titres) + Poppins (corps de texte).

Commandes

npm run dev        # Serveur de développement
npm run build      # Build de production
npm run preview    # Prévisualisation du build
npm run lint       # Lint ESLint
npx playwright test  # Tests E2E