Rencontres authentiques avec validation par un ami. Fenêtre 48h. Matches éphémères.
flowchart TB
UI["Pages React 19<br/>Onboarding - Discover - Matches - Chat - Premium"]
Stores["Stores Zustand<br/>onboarding - swipe - filters - user - settings"]
Services["Services métier<br/>discovery - chat - block - premium"]
Lib["Lib<br/>faceDetection - security XSS - i18n - supabase client"]
Supabase["Supabase<br/>Auth - Postgres + RLS - migrations"]
Vercel["Vercel<br/>build Vite - headers CSP - PWA"]
UI --> Stores
UI --> Services
UI --> Lib
Services --> Supabase
Lib --> Supabase
Vercel --> UI
ECHO réinvente les applications de dating avec trois principes fondamentaux :
-
Photos en temps réel - Pas de vieilles photos ou de filtres trompeurs. Seules les photos prises dans l'instant sont acceptées.
-
Validation Wingman - Ton profil doit être validé par un ami qui témoigne de ta personnalité.
-
Matchs éphémères - Les matchs expirent en 48h. Pas de temps à perdre, agis vite !
- Structure projet Vite + React + TypeScript
- Configuration Tailwind CSS avec thème neon dark
- PWA ready (manifest, service worker)
- Navigation bottom mobile-first
- Pages principales (Home, Discover, Matches, Profile)
- Animations Framer Motion
- Système d'onboarding avec caméra temps réel
- Validation de formulaire avec Zod
- Store Zustand pour l'onboarding
- Swipe cards avec drag gestures
- Super Like avec animation
- Limite quotidienne (20 swipes/jour, Super Like Premium only)
- Match popup avec timer 48h
- Modal Premium upsell
- Statistiques de swipe
- Système Wingman complet
- Page publique /wingman/:token
- Enregistrement vocal avec visualizer
- Sélection qualités/défauts
- Système Echo TTL (profil expire après 7 jours)
- StatusBadge (Actif/Expiring/Silence)
- ExpirationBanner avec CTA
- Grayscale filter pour profils inactifs
- CountdownTimer component
- EchoTimerWave (waveform animé)
- User store avec persistance
- Match list avec timer 48h
- Waveform timer UI
- Chat UI avec messages
- Typing indicator
- Résonance badge (match permanent)
- Supabase backend integration
- AuthContext avec authentification
- Chat service temps réel
- Géolocalisation avec Haversine
- Résonance check-in (200m)
- Appels vidéo WebRTC (Phase VII)
- Splash screen animé avec logo
- i18n complet (FR/EN)
- Code splitting et lazy loading
- Optimisation Lighthouse (chunks vendors)
- Configuration Vercel
- Deploy prêt
# Clone le repo
git clone https://github.com/Adam-Blf/Echo.git
cd Echo
# Installe les dépendances
npm install
# Configure les variables d'environnement
cp .env.example .env
# Ajoute ta clé Supabase dans .env
# Lance le serveur de développement
npm run dev# .env
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key.env- Variables d'environnement (NE PAS COMMITTER).env.example- Template des variablesvite.config.ts- Configuration Vite avec PWA plugintailwind.config.ts- Thème neon personnalisétsconfig.json- Configuration TypeScript strict
Les matchs expirent après 48 heures d'inactivité. Cette urgence pousse à l'action et maintient les utilisateurs engagés. Un timer visible rappelle le deadline.
Validation par un ami pour garantir l'authenticité. Chaque profil doit être validé par un ami témoignant de la personnalité réelle de l'utilisateur.
Pas de vieilles photos. Le système encourage les selfies frais avec timestamp pour l'authenticité.
- Like : Swipe droite
- Super Like : Double tap (Premium only)
- Rewind : Annuler le dernier swipe (Premium only)
- Block : Swipe bas
- Chat temps réel avec Supabase
- Résonance badge = Match qui s'est transformé en relation stable
- Check-in géolocalisation (200m) pour confiance
- Frontend: React 19 + TypeScript 5
- Styling: Tailwind CSS v4 + Framer Motion
- State: Zustand avec persistance localStorage
- Routing: React Router DOM v7
- Forms: React Hook Form + Zod
- Icons: Lucide React (24px)
- PWA: Vite Plugin PWA + Workbox
- Security: DOMPurify (XSS sanitization)
- Backend: Supabase (Auth, Database, Realtime, Storage, PostGIS)
- Deployment: Vercel
Echo utilise un design system neon cohérent avec composants réutilisables et accessibles.
- RangeSlider - Selecteur de plage double (age, distance)
- Toggle - Switch on/off elegant avec animations
- CardSection - Container reutilisable avec variantes
- ProfileGridItem - Carte profil pour grille avec badges
- PremiumBanner - Banniere promotionnelle animee
- FiltersModal - Modale de filtres (age, distance, genre) avec sliders
- Showcase interactif :
/components/showcase - Documentation complète :
docs/COMPONENTS.md - Galerie de stories :
docs/COMPONENT_STORIES.md - Cheat sheet :
docs/COMPONENTS_CHEATSHEET.md
Cyan: #00f5ff | Purple: #bf00ff | Pink: #ff006e
Green: #39ff14 | Dark: #0a0a0f | Card: #12121a
Score audit frontend: 9/10 ⬆️
- ✅ XSS Sanitization - DOMPurify pour tous les inputs utilisateur (messages, bios)
- ✅ Validation Zod stricte sur tous les formulaires
- ✅ Rate limiting côté client (messages, swipes, reports)
- ✅ RLS Policies sur toutes les tables Supabase (block, premium, discovery)
- ✅ Validation des types de fichiers (images JPEG/PNG uniquement)
- ✅ Gestion sécurisée de la mémoire (Object URLs cleanup)
- ✅ TypeScript strict mode activé
- ✅ Headers sécurisés Vercel (CSP, HSTS)
- Tokens d'authentification Supabase stockés en session (jamais localStorage)
- Sanitization XSS centralisée via
sanitizeString()dans/lib/security.ts - Rate limiting en-mémoire avec
RateLimiterclass - Validation des requêtes côté backend via RPC functions sécurisées
npm run dev # Serveur de développement
npm run build # Build de production
npm run preview # Preview du build
npm run lint # Linting ESLintsrc/
├── components/
│ ├── layout/ # MainLayout, BottomNavigation
│ └── ui/ # Composants réutilisables
│ ├── RangeSlider.tsx # Sélecteur de plage
│ ├── Toggle.tsx # Switch on/off
│ ├── CardSection.tsx # Container avec variantes
│ ├── ProfileGridItem.tsx # Carte profil
│ ├── PremiumBanner.tsx # Bannière promo
│ ├── CameraView.tsx
│ ├── SwipeCard.tsx
│ ├── SwipeActions.tsx
│ ├── MatchPopup.tsx
│ ├── LimitReachedModal.tsx
│ ├── AudioVisualizer.tsx
│ ├── VoiceRecorder.tsx
│ ├── StatusBadge.tsx
│ ├── ExpirationBanner.tsx
│ ├── CountdownTimer.tsx
│ ├── EchoTimerWave.tsx
│ ├── SplashScreen.tsx
│ ├── LanguageSelector.tsx
│ ├── PaywallModal.tsx # Premium paywall avec blur effects
│ └── index.ts # Exports
├── contexts/ # React contexts (AuthContext)
├── hooks/ # Custom hooks
│ ├── useCamera.ts
│ ├── useAudioRecorder.ts
│ ├── useLocation.ts
│ ├── useResonanceCheckIn.ts
│ └── usePremiumGate.ts # Premium gate pour les features bloquées
├── lib/ # Utilitaires
│ ├── cn.ts # Tailwind class merger (clsx + tailwind-merge)
│ ├── security.ts # XSS sanitization + Rate limiting
│ ├── supabase.ts # Supabase client config
│ └── i18n.ts # Internationalization (FR/EN)
├── services/ # Services backend
│ ├── blockService.ts # Block/Report avec RLS
│ ├── discoveryService.ts # Discovery + PostGIS geolocation
│ ├── premiumService.ts # Premium features + subscriptions
│ └── chatService.ts # Messages temps réel
├── pages/ # Pages de l'application
│ ├── Home.tsx # Landing page avec CTA
│ ├── Discover.tsx # Swipe cards avec filtres
│ ├── Matches.tsx # Matchs avec timer 48h
│ ├── Chat.tsx # Messages temps réel
│ ├── Profile.tsx # Profil utilisateur
│ ├── EditProfile.tsx
│ ├── Onboarding.tsx # 5 étapes onboarding
│ ├── Wingman.tsx # Validation par ami
│ ├── Settings.tsx # Paramètres avec card UI
│ ├── Likes.tsx # Qui m'a liké (Premium gate)
│ └── Premium.tsx # Page subscription premium
├── stores/ # Zustand stores
│ ├── onboardingStore.ts
│ ├── swipeStore.ts
│ ├── userStore.ts
│ ├── settingsStore.ts
│ └── filtersStore.ts # Store des filtres de recherche
├── types/ # Types TypeScript
│ ├── database.ts
│ ├── onboarding.ts
│ ├── swipe.ts
│ ├── user.ts
│ └── wingman.ts
├── supabase/ # Supabase configuration
│ ├── schema.sql
│ └── migrations/
│ ├── 001_add_blocks_reports.sql
│ ├── 002_add_premium_subscriptions.sql
│ ├── 003_add_geolocation.sql
│ └── 004_security_hardening.sql # RLS policies, indexes
└── docs/ # Documentation
├── COMPONENTS.md # Design system complet
├── COMPONENT_STORIES.md # Usage stories
├── COMPONENTS_CHEATSHEET.md # Copy-paste ready
├── BACKEND_SERVICES.md # Services Supabase
├── ARCHITECTURE.md # Architecture générale
└── README.md # Ce fichier
| Feature | Gratuit | Premium |
|---|---|---|
| Swipes/jour | 20 | Illimité |
| Super Likes/semaine | 0 | 5 |
| Voir qui t'a liké | ❌ Blur progressif | ✅ Grille complète |
| Rewind (annuler swipe) | ❌ | ✅ |
| Mode invisible | ❌ | ✅ |
| Filtres avancés | Basique | Tous |
| Géolocalisation | ✅ | ✅ |
| Validation Wingman | ✅ | ✅ |
Implémentation élégante avec :
- Blur progressif des profils premium (gradient overlay)
- Cards animées avec Framer Motion
- CTA avec micro-interactions
- Statistiques premium (top stats, engagement metrics)
Echo utilise Supabase avec des migrations SQL avancées pour les fonctionnalités backend.
-
Block Service - Blocage et signalement d'utilisateurs
- Rate limiting (20 blocks/h, 5 reports/24h)
- RPC functions avec RLS policies
- Cleanup automatique des matches
-
Discovery Service - Discovery avec géolocalisation
- PostGIS pour calculs de distance optimisés
- Filtres avancés (âge, distance, validation)
- Index spatial GiST pour performance
-
Premium Service - Gestion des abonnements
- Sync temps réel avec Supabase Realtime
- Features premium (see likes, rewind, invisible mode)
- Tables denormalisées pour cache rapide
Documentation complète : docs/BACKEND_SERVICES.md
# Appliquer les migrations
supabase db push
# Migrations incluses:
# - 001: Blocks & Reports avec RLS
# - 002: Premium & Subscriptions
# - 003: PostGIS Geolocation- XSS Sanitization - DOMPurify sur tous les inputs utilisateur (messages, bios, posts)
- Premium Paywall - PaywallModal avec blur progressif des profils premium
- Micro-interactions - Animations Framer Motion smoothes sur tous les CTAs
- Security audit score passé de 8/10 à 9/10
- RLS policies optimisées pour premium features
- Documentation sécurité complète dans
/lib/security.ts
- Services Supabase complets (block, discovery, premium)
- Intégration PostGIS pour géolocalisation
- RPC functions avec Row Level Security
- Stores Zustand étendus avec synchro backend
- Documentation complète des services
- FiltersModal avec double range slider (age, distance) et selection genre
- filtersStore Zustand avec persistance localStorage
- Settings page refonte complete avec Deck card-style UI
- Quick toggles (mode invisible, notifications push)
- Page Likes "Qui m'a like" avec grille profils et overlay premium
- Animation shimmer sur bouton premium
- Integration des filtres dans la page Discover
- Correction bugs TypeScript (Framer Motion variants)
- Phase VII complète
- Splash screen animé avec logo Echo
- Système i18n complet (FR/EN) avec détection automatique
- Code splitting avec lazy loading des pages
- Chunks vendors optimisés (React, Motion, Supabase, Forms)
- Configuration Vercel avec headers sécurisés
- PWA complète avec caching optimisé
- Supabase backend integration complète
- AuthContext pour authentification
- ChatService temps réel avec rate limiting
- useLocation hook avec formule Haversine
- useResonanceCheckIn pour check-in 200m
- Schema SQL complet avec RLS policies
- Types database TypeScript
- Phase V Echo TTL complète
- Système de profil "vivant" (expire après 7 jours)
- StatusBadge et ExpirationBanner
- CountdownTimer et EchoTimerWave
- Chat UI avec typing indicator
- Match list avec waveform timer
- Résonance status (match permanent)
- Utilitaires de sécurité (sanitization, rate limiting)
- Système Wingman complet avec page publique
- Enregistrement audio avec visualizer temps réel
- Sélection qualités/défauts pour le profil
- Animation de succès après validation
- Limites : 20 swipes/jour, 0 Super Like gratuit, 5/semaine Premium
- Système de swipe complet avec drag gestures
- Super Like avec animation (Premium only - 5/semaine)
- Limite de 20 swipes/jour pour utilisateurs gratuits
- Match popup avec timer 48h et confettis
- Modal Premium upsell avec features list
- Store swipe avec statistiques et historique
- Rewind pour utilisateurs Premium
- Module Onboarding complet avec 5 étapes
- CameraView avec capture photo temps réel
- Validation formulaire avec Zod + React Hook Form
- Store Zustand avec persistance
- Génération code Wingman et partage natif
- Setup PWA avec manifest ECHO
- Navigation bottom avec animations
- Pages principales (Home, Discover, Matches, Profile)
- Thème neon dark avec glassmorphism
- Configuration Tailwind CSS personnalisée
Made with love by Adam Beloucif
Par Adam Beloucif - Data Engineer & Fullstack Developer - GitHub - LinkedIn