stripstream/devbook.md

📚 StripStream - Devbook

🎯 Objectifs

Application web moderne pour la lecture de BD/mangas/comics via un serveur Komga.

🚀 Fonctionnalités à venir

📚 Gestion des séries

• Système de favoris
  • Ajout/suppression des favoris
  • Menu dédié dans la sidebar
  • Carousel dédié dans sur la homepage de toutes les séries favorites
  • Synchronisation avec Komga
• Vue liste/grille configurable
• Filtres et tri avancés
• Recherche globale
• Bouton pour marquer comme lu

📖 Lecteur

• Revue API thumbnail => thumbnails
• Thumbnails : prefetch en 2 secondes
• Thumbnails : UI : barre de scroll plus grande
• Thumbnails : UI : scroll horizontal
• Page fantome avant le lecteur
• switch to page

📖 Lecture

• Téléchargement local des livres
  • Bouton de téléchargement
  • Gestion de la progression
  • Stockage local sécurisé
  • Bouton pour supprimer le téléchargement
  • Bouton pour supprimer tous les livres téléchargés dans les préférences
• Support de nouveaux formats
  • EPUB
  • PDF

🔄 Cache et Performance

• Revoir si tous les services utilisent bien le cache
• Invalidation du cache sur les mutations
• Stratégie de revalidation à la demande
• Prefetching intelligent
• Lazy loading amélioré
• Préférences : pouvoir vider chaque cache indépendemment

👥 Gestion des utilisateurs

• Système d'inscription
• Profil utilisateur enrichi
  • Nom/Prénom
  • Email
  • Préférences personnalisées
• Gestion des rôles et permissions

🌍 Internationalisation

• Support multi-langues
  • i18n
  • RTL support

🧪 Tests

• Tests unitaires
  • Services
  • Hooks
  • Utils
• Tests d'intégration
  • Flows utilisateur
  • API integration
• Tests E2E
  • User journeys
  • Cross-browser

📝 Documentation

• README
  • Installation
  • Configuration
  • Development
• Guide d'utilisation
  • Features
  • Shortcuts
  • Tips & tricks
• Documentation API
  • Endpoints
  • Types
  • Examples

🚀 Déploiement

• Configuration du build
  • Optimisations de build
  • Analyse de bundle
• Scripts de déploiement
  • CI/CD
  • Environnements
• Documentation d'installation
  • Requirements
  • Step-by-step guide

📋 Fonctionnalités principales

🔐 Authentification et Configuration

• Interface de connexion
  • Formulaire de connexion
  • Déconnexion
• Page de paramétrage pour la configuration Komga
  • Configuration du serveur
  • Test de connexion
  • Gestion du cache

📚 Bibliothèque

• Visualisation et navigation
  • Liste des bibliothèques
  • Affichage des séries par bibliothèque
  • Couvertures et informations des séries
  • Pagination
  • Statut de lecture avec transparence pour les éléments lus
  • Informations au survol

📖 Lecteur

• Lecteur de fichiers (CBZ, CBR)
  • Navigation entre les pages
  • Mode plein écran
  • Raccourcis clavier
  • Mode double page
  • Zoom et pan
  • Préchargement des pages

📱 PWA

• Installation
  • Manifest
  • Service worker
  • Icons
  • Splash screens
• Mode hors ligne
  • Offline page
  • Cache stratégies
  • Background sync
• Support iOS
  • Configurations spécifiques
  • Splash screens iOS
  • Status bar

🎨 UI/UX

• Design responsive
  • Mobile-first
  • Breakpoints cohérents
  • Touch-friendly
• Animations et transitions
  • Page transitions
  • Loading states
  • Micro-interactions
• Feedback utilisateur
  • Toasts pour les actions
  • Messages d'erreur contextuels
  • Indicateurs de progression
• États de chargement
  • Skeletons
  • Suspense boundaries
  • Loading spinners
• Gestion des erreurs UI
  • Error boundaries
  • Fallbacks élégants
  • Recovery options

🔍 Optimisations

• Performance
  • Optimisation des images
    • Format WebP
    • Responsive images
  • Lazy loading
    • Components
    • Images
    • Routes
  • Mise en cache
    • API responses
    • Static assets
    • Images
• SEO
  • Meta tags
  • Sitemap
  • robots.txt
• Accessibilité
  • ARIA labels
  • Keyboard navigation
  • Screen readers
  • Color contrast

🛠 Configuration initiale

• Mise en place du projet Next.js
  • Configuration TypeScript
  • Configuration ESLint et Prettier
  • Configuration Tailwind CSS
  • Configuration des alias de chemins
• Mise en place de l'authentification
  • Configuration du stockage sécurisé des credentials
    • Service de stockage avec localStorage/sessionStorage
    • Encodage basique des données sensibles
    • Gestion des cookies pour le middleware
  • Middleware d'authentification (protection des routes)
    • Protection des routes publiques/privées
    • Redirection vers la page de login
    • Gestion des routes d'API
• Configuration des variables d'environnement
  • Création du fichier .env.local.example
    • URL de l'application
    • URL par défaut du serveur Komga
    • Version de l'application
  • Types pour les variables d'environnement
    • Déclaration des types ProcessEnv
    • Variables publiques (NEXTPUBLIC*)

📚 Structure de l'application

• Mise en place de l'architecture des dossiers
  • Components
  • Layouts
  • Pages (routes)
  • Services (API)
  • Types
  • Hooks personnalisés
  • Utils
• Création des types TypeScript
  • Types pour l'API Komga
    • Types des utilisateurs et rôles
    • Types des bibliothèques
    • Types des séries et livres
    • Types des métadonnées
  • Types pour les états d'authentification
    • Configuration d'authentification
    • État d'authentification
    • Gestion des erreurs
  • Types pour les préférences utilisateur

🔄 Intégration Komga

• Service d'API
  • Client HTTP avec fetch natif
  • Gestion des tokens Basic Auth
  • Cache des requêtes
  • Gestion des erreurs
  • Typage des réponses
• Endpoints
  • Authentification
  • Collections
  • Séries
  • Tomes
  • Progression de lecture
  • Images et miniatures