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 + Tailwind|    | Angular + Ionic  |
+--------+---------+     +--------+---------+     +--------+---------+
         |                        |                        |
         |        HTTPS/TLS 1.3   |                        |
         +------------------------+------------------------+
                                  |
                    +-------------+-------------+
                    |      Traefik             |
                    |   (Routing, TLS, Rate)   |
                    +-------------+-------------+
                                  |
                    +-------------+-------------+
                    |   Backend Monolithe       |
                    |      Modulaire            |
                    |      (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)

L'application utilise les services Angular injectables avec RxJS (BehaviorSubject, Observable) pour la gestion d'état. Aucune bibliothèque NgRx n'est utilisée.

// 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 recoins avec valeur en euros (conversion 1 recoin = €0.20 soit 5 recoins/€)
• 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 15 minutes
• Expiration automatique avec déblocage des points

2.5.3 Écran Récompenses (RewardsScreen)

• Affichage solde disponible et valeur en euros
• Demande de virement (minimum €10.00)
• 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

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 20 avec TailwindCSS v4 en mode SPA. C'est une application web single-page, sans rendu serveur (SSR).

3.2 Structure des Dossiers

src/
├── app/                        # Application Angular
│   ├── app.component.ts        # Composant racine
│   ├── app.routes.ts           # Routing Angular
│   ├── pages/
│   │   ├── home/              # Page d'accueil
│   │   ├── partenaires/       # Liste partenaires
│   │   │   └── [slug]/        # Fiche partenaire
│   │   ├── a-propos/          # Page à propos
│   │   ├── contact/           # Page contact
│   │   └── faq/               # FAQ
│   ├── core/                   # Services, guards, interceptors
│   └── shared/                # Composants réutilisables
│   ├── 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 est une SPA Angular (single-page application). Toutes les pages sont servies côté client avec lazy loading par route.

3.4 Optimisation SEO

// app.config.ts - Angular Meta service
export const appConfig: ApplicationConfig = {
  providers: [
    provideMeta({
      title: 'REWAPP - Cashback nouvelle génération',
      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 : Angular img loading lazy, formats WebP, srcset responsive via HTML standard
• Fonts : Préchargement Google Fonts avec font-display: swap, subset français uniquement
• CSS : Tailwind CSS v4 avec purge automatique, critical CSS inline
• JavaScript : Code splitting automatique par route Angular, tree shaking, minification
• Caching : Headers cache optimisés, CDN Traefik

4.1 Stack Technique Dashboard Admin

Le Dashboard Admin est une Angular SPA 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 injectables gèrent tout le cache serveur et la synchronisation des données avec le backend via RxJS.

// services/user.service.ts
@Injectable({ providedIn: 'root' })
export class UserService {
  private apiUrl = '/admin/users';

  constructor(private http: HttpClient) {}

  getUsers(filters?: UserFilters): Observable<PaginatedResponse<User>> {
    return this.http.get<PaginatedResponse<User>>(this.apiUrl, { params: filters as HttpParams });
  }

  updateUser(id: string, data: Partial<User>): Observable<User> {
    return this.http.put<User>(`${this.apiUrl}/${id}`, data);
  }
}

Services Angular avec RxJS

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) Angular optimisée pour une utilisation mobile et desktop par les commerçants. Même stack technique que le Dashboard Admin.

5.2 Fonctionnalités PWA

Capacités Offline (Service Worker)

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 Angular SPA
npm run build

# Déploiement vers CapRover
caprover deploy --appName rewapp-vitrine
# Cache invalidation automatique via CapRover

Dashboards (Angular)

# Build production
npm run build

# Déploiement via Docker
docker build -t rewapp-dashboard-admin .
docker push registry.rewapp.com/rewapp-dashboard-admin

8.4 CI/CD Frontend

Pipeline GitLab CI/CD :

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 20 + Ionic 8 avec Capacitor 8 pour un développement cross-platform efficace avec performances natives, gestion d'état via Services Angular (RxJS), et sécurité renforcée (certificate pinning).
• Site Vitrine : Angular 20 SPA avec TailwindCSS v4, pas de SSR. SEO via meta tags Angular, design responsive, Core Web Vitals optimisés.
• Dashboard Admin : Angular 20 + Ionic 8 pour une interface professionnelle, gestion d'état via Services Angular, et sécurité renforcée (2FA obligatoire).
• Dashboard Partenaire : Angular 20 + Ionic 8 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 21 et Signals
• Micro-frontends pour isolation des dashboards
• Design system unifié avec Storybook
• Tests E2E automatisés avec Playwright