Contact person: Création d'Interface moderne pour duels gaming

Phone:Show

Email:Show

Location: Rabat, Morocco

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"Cahier des Charges - Frontend
Objectif du Projet
Développer une interface utilisateur moderne et intuitive pour la plateforme de duels
gaming permettant aux utilisateurs de créer des duels, participer à des
tournois et gérer leur portefeuille virtuel.
Stack Technique
Technologies Frontend
Framework : React 18+ avec hooks
Styling : Bootstrap 5 + CSS custom
Routing : React Router v6
State Management : Context API React
HTTP Client : Axios
Design : Glassmorphism Dark Theme
Compatibilité
Navigateurs : Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
Responsive : Mobile-first (320px → 1920px)
Performance : Lighthouse score > 85
Design System
Palette de Couleurs
--primary: #6366f1 /* Indigo principal */
--secondary: #8b5cf6 /* Violet secondaire */
--accent: #06b6d4 /* Cyan accent */
--success: #10b981 /* Vert succès */
--warning: #f59e0b /* Orange warning */
--danger: #ef4444 /* Rouge danger */
--dark: #1f2937 /* Gris foncé */
--background: #0f172a /* Fond principal */
Typography
Headers : Inter Bold (32px, 24px, 20px, 18px)
Body : Inter Regular (16px, 14px)
Buttons : Inter Medium (14px, 16px)
Effets Glassmorphism
Background : rgba(255, 255, 255, 0.1)
Backdrop-filter : blur(10px)
Border : 1px solid rgba(255, 255, 255, 0.2)
Border-radius : 12px minimum
Pages et Composants Requis
Authentification
[login to view URL] - Connexion utilisateur
[login to view URL] - Inscription utilisateur
Fonctionnalités :
Validation temps réel
Messages d’erreur clairs
Redirection automatique
Option “Se souvenir de moi”
Navigation
[login to view URL] - Menu principal
[login to view URL] - Barre supérieure
Exigences :
Navigation responsive
Indicateurs actifs
Menu repliable mobile
Déconnexion rapide
Duels
[login to view URL] - Liste des duels
[login to view URL] - Création de duel
[login to view URL] - Salle de duel
Fonctionnalités :
Filtres par jeu et statut
•
•
•
•
•
•
•
•
•
•
◦
◦
◦
◦
•
•
•
◦
◦
◦
◦
•
•
•
•
◦
Timer en temps réel
Upload de captures d’écran
Chat intégré
Notifications en direct
Tournois
[login to view URL] - Gestion tournois
Exigences :
Visualisation des brackets
Inscription et désinscription
Suivi de progression
Classements en temps réel
Profil et KYC
[login to view URL] - Profil utilisateur
[login to view URL] - Vérification d’identité
Fonctionnalités :
Édition de profil
Upload de documents
Historique des transactions
Statistiques détaillées
Portefeuille
[login to view URL] - Gestion financière
Exigences :
Historique des transactions
Demandes de retrait
Graphiques des revenus
Validation sécurisée
Boutique
[login to view URL] - Boutique virtuelle
Fonctionnalités :
Achat de tickets
Articles cosmétiques
Système de réductions
Classements
[login to view URL] - Classements
◦
◦
◦
◦
•
•
◦
◦
◦
◦
•
•
•
◦
◦
◦
◦
•
•
◦
◦
◦
◦
•
•
◦
◦
◦
•
Exigences :
Filtres multiples
Pagination optimisée
Animations fluides
Sécurité Frontend
Authentification
JWT Storage : localStorage avec expiration
Route Protection : ProtectedRoute component
Auto-logout : Sur token expiré
CSRF Protection : Headers automatiques
Validation
Côté client : Validation immédiate
Sanitization : XSS prevention
File Upload : Type/taille checking
Form Security : Disable submit sur erreurs
Performance et Expérience Utilisateur
Optimisations Requises
Lazy Loading : Pages et images
Code Splitting : Par routes
Memoization : [login to view URL] sur composants lourds
Debouncing : Recherches et appels API
Cache Strategy : localStorage pour données statiques
Indicateurs de Performance
First Contentful Paint : < 1.5s
Largest Contentful Paint : < 2.5s
Time to Interactive : < 3s
Bundle Size : < 1MB total
Priorités de Développement
P0 - Critique (Doit Fonctionner)
Connexion/Inscription - Fluidité absolue
Navigation principale - Sidebar responsive
•
◦
◦
◦
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
1.
2.
Liste des duels - Affichage et filtres
Création de duel - Formulaire complet
Salle de duel - Timer et actions
P1 - Important (Très Souhaité)
Notifications temps réel - WebSocket
Upload de captures - Drag & drop
Profil complet - Édition et statistiques
Modal KYC - Upload de documents
Transactions portefeuille - Historique
P2 - Améliorations (Nice to Have)
Animations de transition - Framer Motion
Mode sombre/clair - Toggle
Effets sonores - Feedback des actions
Filtres avancés - Recherche multicritères
Tableaux de bord - Visualisations graphiques" (client-provided description)