Tu es architecte logiciel, développeur full-stack senior et ...

Prompt

Tu es architecte logiciel, développeur full-stack senior et designer UI/UX. Ta mission est de concevoir et construire **en une seule réalisation complète** un site de découverte et de suivi d’animes, totalement autonome et séparé de mon application existante. ## Vision du projet Le nouveau site doit être un projet à part entière : son propre code, son propre backend, son propre stockage et son propre déploiement. Il ne doit pas être une page ou un module ajouté à l’application existante. À terme, je souhaite pouvoir organiser plusieurs services derrière une infrastructure centralisée. Le nouveau site doit donc être facile à déployer indépendamment aujourd’hui et à intégrer dans une infrastructure plus large plus tard, sans construire prématurément une architecture complexe. Le seul lien fonctionnel souhaité entre les services est l’utilisation des **mêmes comptes**. Conçois l’authentification autour d’un fournisseur d’identité externe — par exemple Firebase Authentication ou une solution OIDC équivalente — plutôt que de partager directement une base SQLite, un mot de passe ou une session entre sites. Compare brièvement les options adaptées à un projet personnel et choisis-en une. N’affirme pas que le SSO entre plusieurs domaines est automatique : explique les conditions nécessaires. Le périmètre est le nouveau site autonome. Ne modifie pas le code de l’application existante. Fournis le contrat d’intégration qui permettra de relier ses comptes au même fournisseur d’identité ultérieurement. ## Consigne de livraison en une fois Je veux recevoir **le projet complet en une seule livraison**, pas une série d’étapes nécessitant que je relance l’agent après chaque partie. - Audite d’abord le contexte disponible, puis réalise l’architecture, le backend, le frontend, l’authentification, le stockage, les tests et la documentation au cours de la même tâche. - Ne t’arrête pas après un plan, une maquette ou un prototype. - Ne me demande pas de valider chaque milestone. Si une information non bloquante manque, choisis une valeur par défaut raisonnable, indique-la dans la documentation et continue. - Si une décision est réellement bloquante, pose toutes les questions indispensables en un seul message, avant de commencer les changements. - Si un service externe exige mes identifiants ou une configuration manuelle, construis tout ce qui peut l’être sans ces secrets et fournis la procédure exacte pour terminer la configuration. - À la fin, présente un résumé unique des fonctionnalités réalisées, des fichiers importants, des tests exécutés et des actions manuelles restantes. ## Usage et hébergement Le site est destiné à mon usage personnel, avec possibilité de le rendre accessible sur Internet. Je pourrai utiliser un hébergement web classique et des hébergeurs vidéo tiers. La solution doit rester légère, simple à déployer, maintenable et raisonnablement sécurisée. Ne suppose pas qu’un hébergement gratuit ou mutualisé accepte les processus persistants, les tâches de fond ou les websockets. Vérifie les contraintes de la solution recommandée et distingue clairement les offres gratuites avec veille éventuelle de celles nécessitant un paiement. ## Produit attendu Créer une expérience moderne permettant de parcourir des animes, consulter saisons et épisodes, choisir une version VF ou VOSTFR lorsqu’elle existe, lancer une vidéo depuis une source compatible et retrouver sa progression avec le même compte externe. Prévois une navigation organisée : - Accueil avec recherche, nouveautés et reprises récentes. - Catalogue avec recherche, filtres et tri. - Fiche anime : synopsis, visuels, saisons et informations utiles. - Épisodes avec statut « à voir », « en cours » ou « vu ». - Lecteur avec sélection de version/langue, épisode précédent/suivant et reprise de lecture. - Watchlist et historique personnels. - Paramètres simples : préférences de langue, lecture et confidentialité. Les favoris, la watchlist, l’historique et la progression doivent être enregistrés dans le stockage propre au nouveau site, associés à l’identifiant immuable fourni par le service d’authentification. Ils ne doivent pas être partagés entre utilisateurs. Utilise AniList GraphQL pour les métadonnées si ses conditions et limites le permettent. Mets en place un cache serveur raisonnable, gère les indisponibilités et évite de solliciter l’API à chaque affichage. Présente clairement l’ordre des saisons, films et épisodes hors-série. N’affiche des indications de remplissage (« fillers ») que si elles proviennent d’une source vérifiable ; sinon, permets une configuration manuelle personnelle. ## Résultat attendu pour le lecteur et les sources Je veux recevoir un **site utilisable avec un véritable lecteur vidéo**, pas seulement une maquette ou une liste d’épisodes. Le lecteur doit gérer la lecture, la pause, le volume, le plein écran, la progression, la reprise et le passage à l’épisode suivant lorsque les informations nécessaires sont disponibles. Prépare une architecture d’adaptateurs pour les sources vidéo : je dois pouvoir ajouter une source compatible en renseignant son adaptateur et sa configuration, sans devoir refaire le lecteur ni le reste du site. Un adaptateur reçoit une référence de contenu et retourne une source lisible par le lecteur : URL vidéo directe, playlist ou embed officiel, selon ce que l’hébergeur autorise. Les métadonnées des animes et les flux vidéo sont deux intégrations distinctes : brancher l’API de catalogue ne fournit pas les vidéos. Documente précisément, pour chaque adaptateur, les paramètres attendus, le format des liens acceptés et la manière de vérifier qu’une source est compatible. Livre au moins un adaptateur fonctionnel pour une source de démonstration libre ou que je suis autorisé à utiliser, afin de valider le parcours complet. Les adaptateurs pour Sibnet ou tout autre hébergeur restent à brancher selon leurs interfaces et conditions d’utilisation. N’invente pas d’API ou de méthode d’extraction si elle n’est pas documentée. Si l’URL fournie est un embed officiel, affiche-le dans un lecteur intégré sécurisé ; si c’est un flux direct compatible, utilise le lecteur vidéo natif. N’implémente aucun contournement de DRM, de connexion, de paiement, de restriction d’accès, de CAPTCHA ou de mesure anti-abus. N’extrais pas et ne redistribue pas de contenus protégés sans autorisation. Si une source ne permet pas une intégration autorisée ou stable, affiche une erreur claire au lieu de chercher à la contourner. Valide et limite les domaines externes acceptés pour éviter les injections d’URL, les redirections dangereuses et les iframes arbitraires. Garde toute clé ou tout secret côté serveur ; n’expose jamais d’identifiants privilégiés au navigateur. ## Direction artistique et expérience visuelle Je veux un site **vraiment magnifique**, moderne et soigné, avec un effet « wow » dès l’arrivée, sans sacrifier la lisibilité ni la simplicité. Ne te contente pas d’appliquer quelques couleurs ou d’ajouter deux ombres : imagine une vraie identité visuelle cohérente et réalise-la dans toutes les pages. - Crée une ambiance cinématographique et immersive, avec une palette élégante, une belle typographie, des visuels bien mis en valeur, des compositions équilibrées et une hiérarchie claire. - Utilise des animations fluides et intentionnelles : transitions entre pages ou sections, apparitions progressives, interactions au survol, états actifs, chargements et retours visuels. - Ajoute des micro-interactions raffinées aux cartes, boutons, filtres et contrôles du lecteur. - Soigne particulièrement le lecteur vidéo et les fiches d’anime : ce sont les écrans centraux de l’expérience. - Privilégie des transitions CSS légères ou une bibliothèque d’animation seulement si elle apporte une vraie valeur. Les animations doivent rester performantes et respecter `prefers-reduced-motion`. - Assure-toi que l’interface reste rapide, fluide, accessible et agréable sur mobile comme sur ordinateur. Pas d’effets qui gênent la navigation, de surcharge visuelle ni de commandes décoratives inutiles. - Fournis des états de chargement et d’erreur aussi soignés que les pages normales. Ne copie pas l’interface d’une plateforme existante : crée une identité originale. Évite les frameworks lourds si une solution plus simple répond au besoin. ## Authentification et données - Utilise le fournisseur d’identité externe recommandé pour l’inscription, la connexion, la déconnexion et la récupération de compte. - Stocke uniquement les données nécessaires au fonctionnement du site ; les mots de passe restent gérés par le fournisseur d’identité. - Vérifie les jetons côté serveur pour toutes les routes privées. Ne te fie pas uniquement à l’état d’authentification du navigateur. - Sépare nettement l’identité externe (`uid` ou sujet OIDC) des données propres au site. - Documente le parcours futur pour que les services utilisent le même fournisseur d’identité et explique les limites du SSO entre domaines. - Si une décision sur le domaine, le fournisseur d’identité ou l’hébergement est réellement bloquante, pose toutes les questions correspondantes en une seule fois. ## Sécurité, persistance et déploiement - Valide toutes les entrées, échappe les contenus affichés et protège les routes privées côté serveur. - Prends en compte XSS, CSRF, SSRF et les risques liés aux URL et iframes externes. - Prévois une configuration par variables d’environnement, un fichier d’exemple sans secrets et des migrations de base de données. - Explique quelles données nécessitent un stockage persistant chez l’hébergeur et ce qui serait perdu sur un disque éphémère. - Fournis les étapes de déploiement adaptées à la solution retenue, avec les variables à configurer et les limites de l’offre. ## Critères d’acceptation de la livraison complète La réalisation est terminée lorsque, dans la même livraison : - Le site autonome peut être lancé localement avec les instructions fournies. - L’authentification externe, les routes privées et l’isolation des données par utilisateur sont implémentées ou, si des identifiants sont requis, prêtes à configurer. - Le catalogue, les fiches, la recherche, la watchlist et la progression fonctionnent. - Le lecteur gère au moins une source vidéo légitime ; les indisponibilités sont présentées proprement. - Le design est abouti et cohérent sur toutes les pages, avec animations fluides, responsive et respect des préférences de mouvement réduit. - Les tests automatisés pertinents passent et aucune régression détectée n’est laissée sans explication. - Les fichiers d’exemple, la configuration, les migrations et le guide de déploiement sont inclus. - Les limites connues et les étapes qui exigent mes comptes ou secrets sont clairement listées. Ne prétends pas qu’un fournisseur d’identité, hébergeur ou extracteur fonctionne réellement sans l’avoir configuré et testé. Réalise tout ce qui est possible dans cette tâche, puis livre l’ensemble avec un seul compte rendu final.

A system prompt was added to support web rendering