Architecture Page & Screen — MyTelevision
Version : 1.0.0 | Date : 2026-01-26
Ce document fournit l'architecture exhaustive des pages/ecrans pour la plateforme MyTelevision, couvrant l'application Web (desktop + responsive) et l'application Mobile (iOS + Android).
Alignement avec l'API Backend
Basee sur l'API NestJS (60 controllers, 587 endpoints, 73 modeles Prisma) :
| Domaine | Endpoints API | Statut |
|---|---|---|
| Authentication | /auth, /account-auth | Operationnel |
| User Management | /users, /profiles, /sessions, /devices | Operationnel |
| Content - Live TV | /livetv, /live-events | Operationnel |
| Content - VOD | /movies, /series | Operationnel |
| Content - Audio | /radio, /podcasts | Operationnel |
| Content - Editorial | /news, /replays | Operationnel |
| Engagement | /favorites, /watch-history, /reactions, /views | Operationnel |
| Subscription | /subscription-plans, /subscriptions, /payment-methods | Operationnel |
| Support | /support | Operationnel |
| Streaming | /streaming | Operationnel |
| Settings | /settings, /notifications | Operationnel |
Legende
| Symbole | Signification |
|---|---|
| MVP | Must have pour le lancement |
| Phase 2 | Amelioration post-lancement |
| Optionnel | Nice to have |
| Auth | Requiert une authentification |
| Public | Pas d'auth requise |
| Premium | Requiert un abonnement |
| Admin | Staff uniquement |
PARTIE 1 : SITEMAP WEB
1.1 Pages publiques (sans authentification)
WEB
├── Landing Page [/] MVP
│ ├── Hero Section (carousel contenu en vedette)
│ ├── Previews contenu (Live TV, Films, Series, Podcasts)
│ ├── CTA : Inscription / Connexion
│ └── Footer (Liens legaux, Social, Contact)
│
├── Authentification
│ ├── Login [/login] MVP
│ │ ├── Formulaire Email + Mot de passe
│ │ ├── Social Login (Google, Apple, Facebook) Phase 2
│ │ ├── Lien "Mot de passe oublie"
│ │ ├── Lien "Creer un compte"
│ │ └── Option "Se souvenir de moi"
│ ├── Register [/register] MVP
│ │ ├── Email + Mot de passe + Confirmation
│ │ ├── Checkbox acceptation CGU/CGV
│ │ ├── Consentement marketing (RGPD)
│ │ └── Option inscription sociale Phase 2
│ ├── Verify Email [/verify-email] MVP
│ ├── Verification Link [/verify/:token] MVP
│ ├── Forgot Password [/forgot-password] MVP
│ ├── Reset Password [/reset-password/:token] MVP
│ ├── Magic Link Login [/auth/magic/:token] Phase 2
│ └── SSO Callback [/auth/callback/:provider] Phase 2
│
├── Decouverte de contenu (Preview publique)
│ ├── Browse [/browse] MVP
│ ├── Live TV Preview [/live-tv] MVP
│ └── Search [/search] MVP
│
├── Abonnement & Tarifs
│ ├── Pricing [/pricing] MVP
│ └── Plan Details [/pricing/:planId] Phase 2
│
├── Legal & Conformite
│ ├── CGU [/legal/terms] MVP
│ ├── CGV [/legal/terms-of-sale] MVP
│ ├── Politique de confidentialite [/legal/privacy] MVP
│ ├── Cookies [/legal/cookies] MVP
│ ├── RGPD [/legal/gdpr] MVP
│ ├── Politique de contenu [/legal/content-policy] Phase 2
│ └── DMCA / Copyright [/legal/dmca] Phase 2
│
├── Aide & Support (public)
│ ├── Centre d'aide [/help] MVP
│ ├── FAQ [/help/faq] MVP
│ ├── A propos [/about] MVP
│ └── Contact [/contact] MVP
│
└── Pages systeme
├── 404 Not Found [/404] MVP
├── 500 Server Error [/500] MVP
├── Maintenance [/maintenance] MVP
├── Service Unavailable [/unavailable] MVP
└── Region Not Supported [/geo-blocked] Phase 2
1.2 Pages authentifiees
WEB (Authentifie)
├── Onboarding
│ ├── Welcome [/onboarding] MVP
│ ├── Create Profile [/onboarding/profile] MVP
│ ├── Content Preferences [/onboarding/preferences] Phase 2
│ └── Choose Plan [/onboarding/plan] MVP
│
├── Home / Dashboard [/home] MVP
│ ├── Continue Watching
│ ├── My List
│ ├── Recommended for You
│ ├── Live Now
│ ├── New Releases
│ ├── Popular Content
│ └── Genre carousels
│
├── Gestion Profils (style Netflix, multi-profil)
│ ├── Who's Watching [/profiles] MVP
│ ├── Add Profile [/profiles/new] MVP
│ ├── Edit Profile [/profiles/:id/edit] MVP
│ ├── Switch Profile [/profiles/switch] MVP
│ └── Profile PIN [/profiles/:id/pin] Phase 2
│
├── Module Live TV
│ ├── Live TV Home [/live-tv] MVP
│ ├── Channel Detail [/live-tv/:channelId] MVP
│ ├── EPG / Guide TV [/live-tv/guide] MVP
│ ├── Program Detail [/live-tv/program/:programId] Phase 2
│ └── Live Events [/live-events] MVP
│
├── Module Films (VOD)
│ ├── Movies Home [/movies] MVP
│ ├── Movies by Genre [/movies/genre/:genreId] MVP
│ ├── Movie Detail [/movies/:movieId] MVP
│ └── Movie Player [/movies/:movieId/watch] MVP / Premium
│
├── Module Series (VOD)
│ ├── Series Home [/series] MVP
│ ├── Series by Genre [/series/genre/:genreId] MVP
│ ├── Series Detail [/series/:seriesId] MVP
│ ├── Season Detail [/series/:seriesId/season/:num] MVP
│ ├── Episode Detail [/series/:seriesId/episode/:id] Phase 2
│ └── Episode Player [/.../episode/:id/watch] MVP / Premium
│
├── Module Replays
│ ├── Replays Home [/replays] MVP
│ ├── Replay Category [/replays/category/:categoryId] MVP
│ ├── Replay Collection [/replays/collection/:id] MVP
│ └── Replay Player [/replays/:replayId/watch] MVP
│
├── Module Podcasts
│ ├── Podcasts Home [/podcasts] MVP
│ ├── Podcast Category [/podcasts/category/:categoryId] MVP
│ ├── Podcast Detail [/podcasts/:podcastId] MVP
│ ├── Podcast Episode [/.../episode/:episodeId] MVP
│ └── Podcast Player [/.../episode/:id/listen] MVP
│
├── Module Radio
│ ├── Radio Home [/radio] MVP
│ ├── Radio Category [/radio/category/:categoryId] MVP
│ └── Radio Player [/radio/:stationId] MVP
│
├── Module News / Articles
│ ├── News Home [/news] MVP
│ ├── News Category [/news/category/:categoryId] MVP
│ └── Article Detail [/news/:articleId] MVP
│
├── Ma Bibliotheque
│ ├── My List [/my-list] MVP
│ ├── Continue Watching [/continue-watching] MVP
│ ├── Watch History [/history] MVP
│ └── Downloads [/downloads] Phase 2 (PWA)
│
├── Search [/search] MVP
│
├── Compte & Parametres
│ ├── Account Overview [/account] MVP
│ ├── Profile Settings [/account/profile] MVP
│ ├── Security Settings [/account/security] MVP
│ ├── Devices [/account/devices] MVP
│ ├── Preferences [/account/preferences] MVP
│ ├── Notifications [/account/notifications] MVP
│ ├── Privacy [/account/privacy] MVP
│ └── Delete Account [/account/delete] MVP
│
├── Gestion Abonnement
│ ├── My Subscription [/subscription] MVP
│ ├── Change Plan [/subscription/change] MVP
│ ├── Payment Methods [/subscription/payment-methods] MVP
│ ├── Add Payment Method [/.../payment-methods/add] MVP
│ ├── Billing History [/subscription/invoices] MVP
│ ├── Subscribe [/subscribe] MVP
│ ├── Payment Processing [/subscribe/processing] MVP
│ ├── Payment Success [/subscribe/success] MVP
│ ├── Payment Failed [/subscribe/failed] MVP
│ ├── Cancel Subscription [/subscription/cancel] MVP
│ └── Reactivate [/subscription/reactivate] Phase 2
│
├── Support (authentifie)
│ ├── Help Center [/help] MVP
│ ├── My Tickets [/support/tickets] MVP
│ ├── Create Ticket [/support/tickets/new] MVP
│ ├── Ticket Detail [/support/tickets/:ticketId] MVP
│ └── Report Content [/report] MVP
│
└── Notifications [/notifications] MVP
1.3 Pages d'erreur et cas limites
WEB (Etats d'erreur)
├── Erreurs HTTP
│ ├── 400 Bad Request MVP
│ ├── 401 Unauthorized (redirect login avec return URL) MVP
│ ├── 403 Forbidden (upgrade plan CTA si subscription) MVP
│ ├── 404 Not Found MVP
│ ├── 429 Rate Limited ("Too many requests" + retry) MVP
│ ├── 500 Server Error MVP
│ └── 503 Service Unavailable MVP
│
├── Erreurs metier
│ ├── Content Unavailable MVP
│ ├── Region Blocked Phase 2
│ ├── Device Limit Reached MVP
│ ├── Concurrent Stream Limit MVP
│ ├── Subscription Required MVP
│ ├── Subscription Expired MVP
│ ├── Payment Failed MVP
│ ├── Account Suspended MVP
│ └── Account Banned MVP
│
├── Erreurs auth
│ ├── Session Expired MVP
│ ├── Email Not Verified MVP
│ ├── Verification Expired MVP
│ └── Reset Link Expired MVP
│
├── Etats vides (composants in-page)
│ ├── No Search Results MVP
│ ├── No Content in Category MVP
│ ├── No Watch History MVP
│ ├── No Favorites MVP
│ ├── No Notifications MVP
│ └── No Tickets MVP
│
└── Etats systeme
├── Maintenance Mode MVP
├── App Update Required Phase 2
└── Offline Mode (PWA) Phase 2
PARTIE 2 : ECRANS MOBILE
2.1 Structure de navigation
2.2 Ecrans non authentifies
MOBILE (Non authentifie)
├── Splash Screen MVP
├── Onboarding Carousel Phase 2
├── Welcome Screen MVP
├── Login Screen MVP
│ ├── Email + Password
│ ├── Social login (Google, Apple, Facebook) Phase 2
│ └── Biometric login Phase 2
├── Register Screen MVP
├── Email Verification Screen (OTP 6 chiffres) MVP
├── Forgot Password Screen MVP
├── Reset Password Screen MVP
└── Preview / Guest Mode Phase 2
2.3 Tab Home
MOBILE (Home Tab)
├── Home Screen MVP
│ ├── Profile selector (top-left)
│ ├── Notifications bell (top-right)
│ ├── Continue Watching carousel
│ ├── My List carousel
│ ├── Live Now highlight
│ ├── Trending carousel
│ ├── New Releases carousel
│ ├── Recommended For You carousel
│ └── Genre carousels (dynamiques)
├── Movie Detail (modal ou screen) MVP
├── Series Detail MVP
├── Episode Detail MVP
└── Notifications Screen MVP
2.4 Tab Search
MOBILE (Search Tab)
├── Search Screen MVP
│ ├── Barre de recherche (voice input optionnel)
│ ├── Recherches recentes
│ ├── Recherches tendance
│ ├── Parcourir par genre
│ └── Parcourir par type
├── Search Results Screen MVP
│ ├── Onglets (All, Movies, Series, Live TV, etc.)
│ ├── Grille de resultats
│ └── Filtres et tri
└── Search Filters Sheet MVP
2.5 Tab Live TV
MOBILE (Live TV Tab)
├── Live TV Home MVP
│ ├── Live Now highlights
│ ├── EPG Quick Access
│ ├── Onglets categories
│ └── Liste/grille de chaines
├── Channel Detail / Player MVP
├── EPG / Guide TV Screen MVP
├── Program Detail Sheet Phase 2
├── Live Events Screen MVP
└── Event Detail MVP
2.6 Tab Library
MOBILE (Library Tab)
├── Library Home MVP
├── My List Screen MVP
├── Continue Watching Screen MVP
├── Downloads Screen Phase 2
└── Watch History Screen MVP
2.7 Tab Profile
MOBILE (Profile Tab)
├── Profile Screen MVP
├── Profile Selection Screen MVP
├── Edit Profile Screen MVP
├── Add Profile Screen MVP
├── Account Screen MVP
├── Security Screen MVP
├── Devices Screen MVP
├── Subscription Screen MVP
├── Change Plan Screen MVP
├── Payment Methods Screen MVP
├── Add Payment Method Screen MVP
├── Billing History Screen MVP
├── Settings Screen MVP
│ ├── Video Playback (qualite, autoplay)
│ ├── Downloads (Phase 2)
│ ├── Notifications
│ ├── Langue
│ ├── Accessibilite (Phase 2)
│ └── A propos
├── Help Screen MVP
├── Support Tickets Screen MVP
├── Create Ticket Screen MVP
└── Ticket Detail Screen MVP
2.8 Modules contenu (Mobile)
MOBILE (Content Modules)
├── Replays Module
│ ├── Replays Home MVP
│ ├── Replay Category MVP
│ ├── Replay Collection MVP
│ └── Replay Player MVP
├── Podcasts Module
│ ├── Podcasts Home MVP
│ ├── Podcast Category MVP
│ ├── Podcast Detail MVP
│ ├── Episode Detail MVP
│ └── Podcast Player (mini player persistant) MVP
├── Radio Module
│ ├── Radio Home MVP
│ ├── Radio Category MVP
│ └── Radio Player (mini player persistant) MVP
└── News Module
├── News Home MVP
├── News Category MVP
└── Article Detail MVP
2.9 Players
MOBILE (Players)
├── Video Player (Full Screen) MVP
│ ├── Play/Pause, Seek bar
│ ├── Volume, Brightness (swipe)
│ ├── Quality selector, Subtitles selector
│ ├── Audio track selector Phase 2
│ ├── Playback speed Phase 2
│ ├── Picture-in-Picture Phase 2
│ ├── Chromecast / AirPlay Phase 2
│ ├── Skip intro Phase 2
│ ├── Next episode
│ └── 10s rewind / forward
├── Audio Player (Mini + Full) MVP
│ ├── Mini Player (barre persistante)
│ └── Full Player (artwork, progress, speed)
└── Live TV Player MVP
├── Lecture video en direct
├── EPG mini-guide (swipe up)
├── Channel switcher (swipe left/right)
└── Quality selector
2.10 Etats d'erreur (Mobile)
MOBILE (Etats d'erreur)
├── Erreurs reseau
│ ├── Pas de connexion Internet MVP
│ ├── Connexion lente MVP
│ └── Connexion perdue pendant lecture MVP
├── Erreurs auth
│ ├── Session expiree MVP
│ ├── Autre appareil connecte MVP
│ └── Compte verrouille MVP
├── Erreurs contenu
│ ├── Contenu indisponible MVP
│ ├── Geo-restriction Phase 2
│ ├── Restriction d'age Phase 2
│ └── Erreur de lecture MVP
├── Erreurs abonnement
│ ├── Abonnement requis MVP
│ ├── Paiement echoue MVP
│ └── Essai expire MVP
├── Erreurs appareil
│ ├── Limite d'appareils atteinte MVP
│ └── Limite de streams simultanes MVP
├── Etats vides
│ ├── Aucun resultat de recherche MVP
│ ├── My List vide MVP
│ └── Pas d'historique MVP
└── Etats systeme
├── Mise a jour requise MVP
├── Mode maintenance MVP
└── Deconnexion forcee MVP
PARTIE 3 : PARCOURS UTILISATEUR CLES
3.1 Acquisition nouvel utilisateur
3.2 Login utilisateur existant
3.3 Decouverte et lecture de contenu
3.4 Visionnage TV en direct
3.5 Achat abonnement
3.6 Gestion des profils
3.7 Suppression de compte (RGPD)
PARTIE 4 : RESUME MVP vs PHASE 2
MVP (lancement)
Web : Landing, Auth (Login, Register, Verify, Forgot/Reset), Home, Profiles, Live TV (List, Player, EPG), Movies (List, Detail, Player), Series (List, Detail, Season, Episode, Player), Podcasts (List, Detail, Player), Radio (List, Player), News (List, Detail), Replays (List, Player), Search, My List, Continue Watching, History, Account Settings, Subscription (Plans, Subscribe, Payment, Manage), Help, FAQ, Contact, Legal (CGU, CGV, Privacy, Cookies, GDPR), Error Pages, Notifications.
Mobile : Meme couverture que le Web + Players natifs video/audio + Push notifications + Option login biometrique + Gestion erreurs offline.
Phase 2
Social authentication, Two-factor auth, Downloads offline, Picture-in-Picture, Chromecast/AirPlay, Smart TV pairing, Controles parentaux avances, Sleep timer, Playback speed, Skip intro/recap, Voice search, Data saver, Accessibility, Status page, Gift subscriptions, Retention offers, Analytics avances.
Optionnel
Social features (comments, reviews), Watchlist sharing, Creator/Studio pages, User playlists, Referral program, Community features, Live chat support.
PARTIE 5 : STRUCTURE DE ROUTAGE
Routes Web (React Router / Next.js)
// Routes publiques
/ // Landing
/login // Login
/register // Register
/verify-email // Verification email
/verify/:token // Lien de verification
/forgot-password // Mot de passe oublie
/reset-password/:token // Reset mot de passe
/browse // Browse public
/pricing // Page tarifs
/search // Recherche publique
// Routes legales
/legal/terms // CGU
/legal/terms-of-sale // CGV
/legal/privacy // Confidentialite
/legal/cookies // Cookies
/legal/gdpr // RGPD
// Routes aide
/help // Centre d'aide
/help/faq // FAQ
/about // A propos
/contact // Contact
// Routes authentifiees
/home // Dashboard
/profiles // Selection profil
/profiles/new // Creer profil
/profiles/:id/edit // Editer profil
// Routes contenu
/live-tv // Live TV
/live-tv/:channelId // Chaine
/live-tv/guide // EPG
/live-events // Evenements
/movies // Films
/movies/genre/:genreId // Films par genre
/movies/:movieId // Detail film
/movies/:movieId/watch // Player film
/series // Series
/series/genre/:genreId // Series par genre
/series/:seriesId // Detail serie
/series/:seriesId/season/:num
/series/:seriesId/episode/:id
/series/:seriesId/episode/:id/watch
/replays // Replays
/replays/category/:categoryId
/replays/collection/:collectionId
/replays/:replayId/watch
/podcasts // Podcasts
/podcasts/category/:categoryId
/podcasts/:podcastId
/podcasts/:podcastId/episode/:id
/podcasts/:podcastId/episode/:id/listen
/radio // Radio
/radio/category/:categoryId
/radio/:stationId
/news // News
/news/category/:categoryId
/news/:articleId
// Routes bibliotheque
/my-list // Ma liste
/continue-watching // Continuer a regarder
/history // Historique
/downloads // Telechargements (PWA)
// Routes compte
/account // Apercu compte
/account/profile // Profil
/account/security // Securite
/account/devices // Appareils
/account/preferences // Preferences
/account/notifications // Notifications
/account/privacy // Confidentialite
/account/delete // Supprimer compte
// Routes abonnement
/subscription // Mon abonnement
/subscription/change // Changer plan
/subscription/payment-methods
/subscription/payment-methods/add
/subscription/invoices // Historique facturation
/subscription/cancel // Annuler
/subscribe // S'abonner
/subscribe/processing
/subscribe/success
/subscribe/failed
// Routes support
/support/tickets // Mes tickets
/support/tickets/new // Creer ticket
/support/tickets/:ticketId // Detail ticket
/report // Signaler contenu
// Notifications
/notifications // Centre de notifications
// Erreurs
/404 // Non trouve
/500 // Erreur serveur
/maintenance // Maintenance
/error/:code // Erreur generique
References
- Vue d'ensemble -- Architecture globale
- Schema Base de Donnees -- 73 modeles Prisma
- Diagrammes -- Tous les diagrammes techniques