​

Application Frontend Nuxt.js - Remora

Cette spécification couvre l’application frontend principale de Remora, construite avec Nuxt.js 4 et Vue 3, dédiée à la gestion et au suivi des positions de trading.

​

Vue d’ensemble de l’Application

• L’application frontend est construite avec Nuxt.js 4
• Elle utilise Vue 3.5.17 avec Composition API
• L’interface est optimisée pour le trading et la gestion des positions
• L’application est configurée en mode SPA (SSR désactivé)

​

Architecture Technique

​

Framework et Technologies

• Nuxt.js 4.0.0 : Framework Vue.js avec configuration moderne
• Vue 3.5.17 : Framework de composants réactifs
• TypeScript 5.8.3 : Typage statique pour la robustesse
• Tailwind CSS 4.1.10 : Framework CSS utilitaire moderne
• Nuxt UI Pro 3.2.0 : Composants d’interface premium

​

Configuration Nuxt

• SSR désactivé : Mode SPA pour les performances
• Preset static : Génération de site statique
• Devtools activés : Outils de développement intégrés
• Compatibilité : Date de compatibilité 2024-07-11

​

Modules Nuxt

• @nuxt/ui-pro : Composants d’interface utilisateur premium
• @vueuse/nuxt : Utilitaires Vue.js et hooks réactifs
• @nuxtjs/color-mode : Gestion des thèmes clair/sombre
• @tanstack/vue-query : Gestion d’état et cache des données

​

Structure de l’Application

​

Organisation des Dossiers

• components/ : Composants Vue réutilisables
• pages/ : Pages de l’application avec routage automatique
• layouts/ : Layouts et templates de base
• composables/ : Logique métier réutilisable
• types/ : Définitions TypeScript
• utils/ : Fonctions utilitaires
• assets/ : Ressources statiques (CSS, images, icônes)
• server/ : API routes côté serveur
• public/ : Fichiers publics accessibles directement

​

Composants Principaux

• SwingPositionCard : Affichage des positions de trading
• Workflow : Visualisation du workflow des positions
• Charts : Graphiques de prix et indicateurs techniques
• Notifications : Système d’alertes et notifications
• UI Components : Composants d’interface basiques

​

Interface Utilisateur

​

Design System

• Tailwind CSS : Classes utilitaires pour le styling
• Nuxt UI Pro : Composants d’interface cohérents
• Responsive Design : Interface adaptée à tous les écrans
• Thème sombre/clair : Support des préférences utilisateur

​

Composants d’Interface

• Cards : Conteneurs pour les informations de trading
• Buttons : Actions utilisateur avec variantes
• Forms : Saisie et validation des données
• Tables : Affichage tabulaire des positions
• Modals : Fenêtres modales pour les détails

​

Gestion des Données

​

État de l’Application

• Vue Query : Gestion du cache et des requêtes API
• Composables : Logique métier réactive
• Props et Emits : Communication entre composants
• Reactive References : État local des composants

​

Intégration API

• TRPC : Client TypeScript pour les API
• Base URL : https://api.poihunter.com
• Websockets : Communication temps réel via Pusher
• Error Handling : Gestion robuste des erreurs

​

Fonctionnalités Principales

​

Gestion des Positions

• Affichage des positions : Liste des positions actives
• Détails des positions : Informations complètes et métriques
• Workflow visuel : Représentation graphique des étapes
• Métriques en temps réel : PnL, gaps, pourcentages

​

Tableau de Bord

• Vue d’ensemble : Résumé des performances
• Graphiques : Visualisation des tendances
• Alertes : Notifications importantes
• Statistiques : Métriques de trading

​

Notifications

• Pusher : Notifications temps réel
• Alertes : Notifications importantes
• Historique : Log des événements
• Préférences : Configuration des notifications

​

Composants Spécifiques

​

SwingPositionCard (A détailler)

• Affichage des données : Prix, montants, pourcentages
• Statuts visuels : Indicateurs de progression
• Actions utilisateur : Boutons et interactions
• Modal de détails : Informations complètes

​

Workflow Component

• Étapes visuelles : Représentation du processus
• Indicateurs de statut : Progression des étapes
• Interactions : Clics et navigation
• Responsive : Adaptation mobile et desktop

​

Gestion des Erreurs

​

Validation des Données

• Zod : Validation des schémas
• TypeScript : Vérification des types
• Error Boundaries : Gestion des erreurs de composants
• Fallbacks : Affichage de secours en cas d’erreur

​

Gestion des États

• Loading States : Indicateurs de chargement
• Error States : Affichage des erreurs
• Empty States : États vides et guides
• Success States : Confirmations et succès

​

Performance et Optimisation

​

Optimisations Vue

• Lazy Loading : Chargement différé des composants
• Memoization : Mise en cache des calculs coûteux
• Virtual Scrolling : Défilement optimisé pour les longues listes
• Code Splitting : Division du bundle par routes

​

Optimisations CSS

• PurgeCSS : Suppression des classes inutilisées
• Critical CSS : CSS critique inline
• Image Optimization : Optimisation automatique des images
• Font Loading : Chargement optimisé des polices

​

Tests et Qualité

​

Tests Frontend

• Vitest : Tests unitaires
• Playwright : Tests e2e
• Vue Test Utils : Tests des composants Vue
• Testing Library : Tests centrés sur l’utilisateur
• Coverage : Mesure de la couverture de tests

​

Qualité du Code

• ESLint : Règles de qualité du code
• Prettier : Formatage automatique
• TypeScript : Vérification des types
• Husky : Hooks Git pour la qualité

​

Déploiement et Build

​

Processus de Build

• Nuxt Build : Construction de l’application
• Static Generation : Génération des pages statiques
• Asset Optimization : Optimisation des ressources
• Bundle Analysis : Analyse de la taille du bundle

​

Configuration de Production

• Environment Variables : Configuration par environnement
• API Endpoints : URLs des services backend
• CDN : Distribution des assets statiques
• Monitoring : Suivi des performances en production

​

Accessibilité et UX

​

Standards d’Accessibilité

• WCAG 2.1 : Conformité aux standards d’accessibilité
• Navigation clavier : Support complet du clavier
• Screen Readers : Compatibilité avec les lecteurs d’écran
• Contraste : Ratios de contraste appropriés

​

Expérience Utilisateur

• Design intuitif : Interface facile à utiliser
• Feedback visuel : Retours immédiats des actions
• Responsive : Adaptation à tous les appareils
• Performance : Temps de réponse rapides

​

Intégrations

​

Services Externes

• Pusher : Notifications temps réel
• Analytics : Suivi des interactions utilisateur

​

APIs et Webhooks

• REST APIs : Endpoints standards servi par trpc
• WebSockets : Communication bidirectionnelle

​

Monitoring et Observabilité

​

Métriques Frontend

• Core Web Vitals : Mesures de performance
• Error Tracking : Suivi des erreurs JavaScript
• User Analytics : Comportement des utilisateurs
• Performance Monitoring : Temps de chargement et rendu

​

Logs et Debugging

• Console Logs : Logs de développement
• Error Reporting : Rapport d’erreurs automatique
• Performance Profiling : Analyse des performances
• User Feedback : Retours utilisateur intégrés

​

Sécurité

​

Protection Frontend

• XSS Prevention : Protection contre les attaques XSS
• CSRF Protection : Protection contre les attaques CSRF
• Content Security Policy : Politique de sécurité du contenu
• Input Validation : Validation côté client et serveur

​

Authentification

• JWT Tokens : Gestion des sessions
• OAuth : Authentification tierce
• 2FA : Authentification à deux facteurs
• Session Management : Gestion sécurisée des sessions