Architecture Frontend
(Mobile + Web)

1.1 Présentation Générale

L'architecture frontend de REWAPP couvre quatre applications distinctes, chacune optimisée pour son contexte d'utilisation et son audience cible. Toutes les applications partagent des principes communs de performance, sécurité et expérience utilisateur.

1.2 Principes Architecturaux Frontend

L'architecture frontend de REWAPP suit plusieurs principes fondamentaux pour garantir performance, maintenabilité et expérience utilisateur optimale.

• Séparation des responsabilités : Chaque application frontend a un rôle spécifique et utilise les technologies les plus adaptées à son contexte.
• Performance First : Optimisation du temps de chargement, réduction de la consommation de données mobiles et fluidité des interactions.
• Security by Design : Authentification robuste via JWT, protection des données sensibles et conformité RGPD intégrée.
• Responsive Design : Adaptation automatique à tous les types d'écrans et orientations (mobile, tablette, desktop).
• Accessibilité : Conformité WCAG 2.1 niveau AA pour garantir l'accessibilité à tous les utilisateurs.
• Maintenabilité : Code modulaire, réutilisable, testé et documenté avec couverture de tests minimale de 80%.

1.3 Communication avec le Backend

Toutes les applications frontend communiquent avec le backend via l'API REST sécurisée.

1.4 Schéma d'Architecture Frontend Globale

+------------------+     +------------------+     +------------------+
|   App Mobile     |     |   Site Vitrine   |     |   Dashboards     |
| Angular + Ionic  |     |     Angular      |     |     Angular      |
+--------+---------+     +--------+---------+     +--------+---------+
         |                        |                        |
         |        HTTPS/TLS 1.3   |                        |
         +------------------------+------------------------+
                                  |
                    +-------------+-------------+
                    |     Kong API Gateway      |
                    |   (Auth, Rate Limiting)   |
                    +-------------+-------------+
                                  |
                    +-------------+-------------+
                    |   Backend Microservices   |
                    |        (NestJS)           |
                    +---------------------------+

2.1 Stack Technique Mobile

L'application mobile REWAPP utilise Angular avec Ionic et Capacitor pour permettre un développement cross-platform efficace tout en maintenant des performances natives.

2.2 Structure des Dossiers

src/
├── app/                        # Module racine Angular
│   ├── core/                   # Services singleton, guards
│   │   ├── services/
│   │   ├── guards/
│   │   └── interceptors/
│   ├── shared/                 # Composants partagés
│   │   ├── components/
│   │   ├── directives/
│   │   └── pipes/
│   ├── features/               # Modules fonctionnels
│   │   ├── auth/               # Authentification
│   │   │   ├── login/
│   │   │   ├── register/
│   │   │   └── forgot-password/
│   │   ├── home/               # Page d'accueil
│   │   ├── transactions/       # Transactions
│   │   ├── qr-code/            # Scanner QR
│   │   ├── rewards/            # Récompenses
│   │   └── profile/            # Profil utilisateur
│   ├── app.component.ts
│   ├── app.module.ts
│   └── app-routing.module.ts
├── environments/               # Configuration par environnement
├── theme/                      # Variables Ionic/SCSS
├── assets/                     # Images, polices, etc.
└── main.ts                     # Point d'entrée

2.3 Gestion d'État (Services Angular / NgRx)

L'application utilise les services Angular avec RxJS et optionnellement NgRx pour la gestion d'état global, offrant une architecture réactive et maintenable.

// services/auth.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { Storage } from '@ionic/storage-angular';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class AuthService {
  private authState$ = new BehaviorSubject<boolean>(false);
  private user$ = new BehaviorSubject<User | null>(null);

  constructor(
    private storage: Storage,
    private http: HttpClient
  ) {
    this.initStorage();
  }

  async initStorage() {
    await this.storage.create();
    const token = await this.storage.get('access_token');
    this.authState$.next(!!token);
  }

  isAuthenticated(): Observable<boolean> {
    return this.authState$.asObservable();
  }

  async login(credentials: LoginDto): Promise<void> {
    const response = await this.http.post<AuthResponse>('/api/auth/login', credentials).toPromise();
    await this.storage.set('access_token', response.accessToken);
    await this.storage.set('refresh_token', response.refreshToken);
    this.authState$.next(true);
  }
}

2.4 Navigation (Ionic Router)

Ionic Router (basé sur Angular Router) gère toute la navigation de l'application mobile avec une structure modulaire et lazy loading.

AppRoutingModule
├── AuthModule (lazy loaded, non connecté)
│   ├── /login → LoginPage
│   ├── /register → RegisterPage
│   ├── /forgot-password → ForgotPasswordPage
│   └── /verify-email → VerifyEmailPage
└── MainModule (lazy loaded, connecté + guards)
    ├── TabsModule (ion-tabs)
    │   ├── /home → HomePage
    │   ├── /transactions → TransactionsPage
    │   ├── /qr-code → QRCodePage
    │   ├── /rewards → RewardsPage
    │   └── /profile → ProfilePage
    └── Modal Pages
        ├── TransactionDetailPage
        ├── WithdrawalPage
        ├── SettingsPage
        └── NotificationsPage

Deep Linking

L'application supporte les deep links pour permettre la navigation depuis les notifications push ou les liens externes.

2.5 Écrans Principaux

2.5.1 Écran d'Accueil (HomeScreen)

L'écran d'accueil affiche une vue d'ensemble du compte utilisateur avec les informations essentielles.

• Solde de points avec valeur en euros (conversion 1 point = 0,10€)
• Palier de fidélité actuel et progression
• Dernières transactions (3-5 plus récentes)
• Campagnes partenaires actives (featured)
• Bouton d'action rapide vers génération QR code

2.5.2 Écran QR Code (QRCodeScreen)

• Saisie du montant en points (minimum 10 points)
• Validation du solde suffisant
• Génération QR code avec signature HMAC-SHA256
• Compteur visuel à rebours de 60 secondes
• Expiration automatique avec déblocage des points

2.5.3 Écran Récompenses (RewardsScreen)

• Affichage solde disponible et valeur en euros
• Demande de virement (seuil minimum : 100 points = 9,50€)
• Historique des demandes de virement
• Statut des demandes (En attente, En cours, Effectué)
• Estimation du délai de traitement (2-3 semaines)

2.6 Sécurité Mobile

Authentification Biométrique

• Face ID (iOS) et Touch ID (iOS)
• Fingerprint (Android) et Face Recognition (Android)
• Activation optionnelle par l'utilisateur
• Fallback vers code PIN en cas d'échec

Certificate Pinning

Implémentation du certificate pinning pour prévenir les attaques MITM (Man-in-the-Middle).

2.7 Performance Mobile

Métriques Cibles

3.1 Stack Technique Site Vitrine

Le site vitrine REWAPP utilise Angular 17 avec Angular Universal pour un SEO optimal et des performances maximales.

3.2 Structure des Dossiers

src/
├── app/                        # Modules Angular 17
│   ├── layout.tsx              # Layout racine
│   ├── page.tsx                # Page d'accueil
│   ├── globals.css             # Styles globaux Tailwind
│   ├── partenaires/
│   │   ├── page.tsx            # Liste partenaires
│   │   └── [slug]/page.tsx     # Fiche partenaire
│   ├── a-propos/page.tsx       # Page à propos
│   ├── contact/page.tsx        # Page contact
│   ├── faq/page.tsx            # FAQ
│   ├── blog/
│   │   ├── page.tsx            # Liste articles
│   │   └── [slug]/page.tsx     # Article détail
│   ├── mentions-legales/page.tsx
│   ├── cgu/page.tsx
│   └── politique-confidentialite/page.tsx
├── components/
│   ├── layout/                 # Header, Footer, Navigation
│   ├── home/                   # Hero, Features, HowItWorks
│   ├── partners/               # PartnerCard, PartnerGrid
│   └── common/                 # Button, Card, SEO
├── lib/                        # API, utils
├── types/                      # Types TypeScript
└── public/                     # Images, icons, fonts

3.3 Stratégie de Rendu

Le site vitrine utilise différentes stratégies de rendu selon le type de page pour optimiser performance et SEO.

3.4 Optimisation SEO

// app/layout.tsx
export const metadata: Metadata = {
  title: {
    default: 'REWAPP - Cashback nouvelle génération',
    template: '%s | REWAPP',
  },
  description: 'REWAPP transforme chaque achat en récompense. Cashback bancaire direct.',
  keywords: ['cashback', 'fidélité', 'remboursement', 'points', 'récompenses'],
  openGraph: {
    type: 'website',
    locale: 'fr_FR',
    url: 'https://rewapp.fr',
    siteName: 'REWAPP',
  },
  twitter: { card: 'summary_large_image' },
  robots: { index: true, follow: true },
};

Éléments SEO Implémentés

• Meta tags optimisés par page (title, description, keywords)
• Sitemap XML généré automatiquement (/sitemap.xml)
• Robots.txt configuré (/robots.txt)
• Structured data JSON-LD (Organization, LocalBusiness, FAQ)
• Balises Open Graph pour réseaux sociaux
• URLs canoniques et balises hreflang

3.5 Performance Site Vitrine

Core Web Vitals Cibles

Optimisations Implémentées

• Images : next/image avec lazy loading, formats WebP/AVIF automatiques, srcset responsive
• Fonts : Préchargement Google Fonts avec font-display: swap, subset français uniquement
• CSS : Tailwind CSS avec purge automatique, critical CSS inline
• JavaScript : Code splitting automatique par route, tree shaking, minification
• Caching : Headers cache optimisés, CDN Nginx/Traefik intégré

4.1 Stack Technique Dashboard Admin

Le Dashboard Admin est une Single Page Application Angular optimisée pour la gestion complète de la plateforme REWAPP.

4.2 Gestion d'État

Angular Services pour Données Serveur

Les services Angular et HttpClient gèrent tout le cache serveur et la synchronisation des données avec le backend.

// hooks/useUsers.ts
export const useUsers = (filters: UserFilters) => {
  return useQuery({
    queryKey: ['users', filters],
    queryFn: () => userService.getUsers(filters),
    staleTime: 5 * 60 * 1000, // 5 minutes
    cacheTime: 30 * 60 * 1000, // 30 minutes
  });
};

export const useUpdateUser = () => {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: userService.updateUser,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['users'] });
    },
  });
};

Zustand pour État Local

4.3 Modules Fonctionnels

Tableau de Bord Principal

KPIs affichés en temps réel :

• Nombre total d'utilisateurs (avec variation période)
• Nombre de partenaires actifs
• Volume de transactions (jour/semaine/mois)
• Revenus générés (commissions)
• Points distribués vs utilisés

Gestion des Utilisateurs

• Liste paginée avec tri et filtres
• Recherche par nom, email, téléphone
• Détail complet du profil utilisateur
• Actions : bloquer, débloquer, supprimer (RGPD)
• Export CSV des utilisateurs

Gestion des Partenaires

• Liste des partenaires avec statut (en attente, validé, suspendu)
• Workflow de validation des nouveaux partenaires
• Configuration des taux de cashback
• Gestion des abonnements premium

4.4 Sécurité Dashboard Admin

Contrôle d'Accès RBAC

5.1 Stack Technique

Le Dashboard Partenaire est une Progressive Web App (PWA) optimisée pour une utilisation mobile et desktop par les commerçants.

5.2 Fonctionnalités PWA

Capacités Offline

Installation PWA

• Prompt d'installation sur mobile et desktop
• Icône personnalisée REWAPP
• Splash screen au lancement
• Mise à jour automatique en arrière-plan

5.3 Module de Scan QR Code

Flux de Scan

1. 1

   Ouverture Scanner

   Partenaire ouvre le scanner (accès caméra)

2. 2

   Scan QR Code

   Scan du QR code présenté par le client

3. 3

   Validation Serveur

   Validation côté serveur (signature, expiration, solde)

4. 4

   Confirmation

   Affichage du résultat et confirmation par le partenaire

5. 5

   Débit Points

   Débit instantané des points + notification push au client

Gestion des Erreurs Scan

5.4 Statistiques Partenaire

Métriques affichées :

• Nombre de transactions du jour/semaine/mois
• Volume de points acceptés
• Panier moyen des clients REWAPP
• Nouveaux clients vs clients fidèles
• Comparaison avec la période précédente

6.1 Bibliothèque de Composants

Une bibliothèque de composants partagés assure la cohérence visuelle entre les dashboards.

6.2 Tokens de Design

Couleurs

Typographie

6.3 Responsive Design

7.1 Images et Médias

CDN et Distribution

7.2 Icônes

7.3 Polices

Polices utilisées :

• Titres : Inter (Google Fonts)
• Corps : Inter (Google Fonts)
• Code : JetBrains Mono (monospace)

Chargement optimisé avec font-display: swap et préchargement.

8.1 Environnements

8.2 Build Mobile

iOS

• Build via Capacitor + Xcode
• Signing avec certificates Apple Developer
• Distribution : App Store Connect

Android

• Build via Capacitor + Android Studio
• Signing avec keystore sécurisé
• Distribution : Google Play Console

export default {
  name: process.env.APP_ENV === 'production' ? 'REWAPP' : 'REWAPP Dev',
  extra: {
    apiUrl: process.env.API_URL,
    environment: process.env.APP_ENV,
  },
};

8.3 Build Web

Site Vitrine (Angular)

# Build statique
npm run build
npm run export

# Déploiement vers volume CapRover
aws s3 sync out/ s3://rewapp-vitrine --delete
aws cloudfront create-invalidation --distribution-id XXX --paths "/*"

Dashboards (Angular)

# Build production
npm run build

# Déploiement via Docker
docker build -t rewapp-dashboard-admin .
docker push xxx.dkr.ecr.eu-west-3.amazonaws.com/rewapp-dashboard-admin

8.4 CI/CD Frontend

Pipeline GitHub Actions :

9.1 Error Tracking

Sentry est intégré dans toutes les applications frontend pour le tracking des erreurs.

• Source maps uploadés pour debugging
• Alertes email pour erreurs critiques
• Contexte utilisateur (ID anonymisé)
• Breadcrumbs pour reproduction

9.2 Analytics Utilisateur

9.3 Performance Monitoring

Mobile

• Temps de démarrage (cold/warm start)
• Frame rate et animations
• Consommation batterie
• Utilisation mémoire

Web

• Core Web Vitals (LCP, FID, CLS)
• Time to Interactive (TTI)
• First Contentful Paint (FCP)

10.1 Récapitulatif de l'Architecture Frontend

L'architecture frontend de REWAPP est conçue pour offrir une expérience utilisateur optimale sur toutes les plateformes :

• Application Mobile : Angular + Ionic avec Capacitor pour un développement cross-platform efficace avec performances natives, gestion d'état réactive (Services/NgRx), et sécurité renforcée (biométrie, certificate pinning).
• Site Vitrine : Angular 17 avec SSR pour un SEO optimal et des performances maximales (Core Web Vitals excellents), design responsive avec Tailwind CSS.
• Dashboard Admin : Angular SPA avec Angular Material pour une interface professionnelle, gestion d'état réactive avec Services/NgRx, et sécurité renforcée (2FA obligatoire).
• Dashboard Partenaire : Angular + Ionic PWA pour une utilisation mobile et desktop avec capacités offline, scan QR code via navigateur, et installation comme application native.

10.2 Évolutions Futures

L'architecture frontend est conçue pour supporter les évolutions suivantes :

• Évolution vers Angular Signals et standalone components
• Implémentation de Server-Side Rendering Angular
• Micro-frontends pour isolation des dashboards
• Design system complet avec Storybook
• Tests E2E automatisés avec Playwright