stripstream/devbook.md

📚 Paniels - Devbook

🎯 Objectifs

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

📋 Fonctionnalités principales

• Interface de connexion
  • Formulaire de connexion
  • Déconnexion
• Page de paramétrage pour la configuration Komga
• Visualisation et navigation dans la bibliothèque
  • Liste des bibliothèques
  • Affichage des séries par bibliothèque
  • Couvertures et informations des séries
  • Filtres et recherche
  • Pagination
  • Statut de lecture avec transparence pour les éléments lus
  • Informations au survol
• Lecteur de fichiers (CBZ, CBR)
  • Navigation entre les pages
  • Mode plein écran
  • Raccourcis clavier
  • Mode double page
  • Zoom et pan
  • Préchargement des pages

🚀 Fonctionnalités à venir

Gestion des séries

• Système de favoris
  • Ajout/suppression des favoris sur les séries
  • Menu dédié dans la sidebar
  • Synchronisation avec Komga

Améliorations techniques

• Refactorisation des services API
  • Création d'un service de base avec gestion des cookies
  • Création d'un middleware commun
  • Mutualisation du code de gestion du cache
  • Création des services spécialisés (Library, Series, Book, Home)
• Mise à jour des API deprecated
• Synchronisation de l'état de lecture avec Komga
• Revue du système de cache
  • Optimisation du cache côté serveur
  • Gestion intelligente du TTL par type de données
  • Invalidation du cache sur les mutations
  • Stratégie de revalidation à la demande

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

Fonctionnalités avancées

• Téléchargement local des livres
  • Bouton de téléchargement
  • Gestion de la progression
  • Stockage local sécurisé

🛠 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

🔒 Authentification et Configuration

• Page de connexion
  • Formulaire de connexion (email/password)
  • Validation des champs
  • Gestion des erreurs de connexion
  • Stockage sécurisé du token
  • Redirection après connexion
• Page de paramètres
  • Formulaire de configuration Komga
    • Validation de l'URL du serveur
    • Test de connexion en direct
    • Gestion des erreurs détaillée
    • Messages d'erreur contextuels
  • Sauvegarde des préférences
    • Stockage sécurisé des credentials Komga
    • Persistance des paramètres
  • Configuration du cache
    • Gestion des TTL par type de données
    • Interface de configuration intuitive
    • Nettoyage du cache à la demande
  • UI/UX optimisée
    • Layout compact et centré
    • Hiérarchie visuelle claire
    • Composants redimensionnés
    • Espacement optimisé

📱 Interface utilisateur

• Layout principal
  • Header avec navigation
  • Sidebar rétractable
  • Thème clair/sombre
  • Responsive design
• Page d'accueil
  • Présentation des fonctionnalités principales
  • Liste des collections récentes
• Page de collection
  • Grille de séries avec lazy loading
  • Affichage des couvertures
  • Métadonnées des séries
  • État des séries (En cours, Terminé, etc.)
  • Vue liste/grille
  • Filtres et tri
• Page de détails de la série
  • Couverture et informations
  • Liste des tomes
  • Progression de lecture
  • Pagination des tomes
  • Filtre "À lire" (non lus et en cours)
  • Bouton de lecture contextuel
• Page de détails du tome
  • Couverture et informations
  • Métadonnées (auteurs, date, etc.)
  • Bouton de lecture
  • Lecteur plein écran

🔄 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

🚀 Prochaines étapes

• Amélioration de l'UX
  • Animations de transition
  • Retour haptique
  • Messages de confirmation
  • Tooltips d'aide
• Fonctionnalités avancées
  • Recherche globale
  • Filtres avancés
  • Tri personnalisé
  • Vue liste/grille configurable
• Performance
  • Optimisation des images
  • Lazy loading amélioré
  • Prefetching intelligent
  • Cache optimisé
• Accessibilité
  • Navigation au clavier
  • Support lecteur d'écran
  • Contraste et lisibilité
  • ARIA labels

🎨 UI/UX

• Design responsive
  • Mobile-first
  • Breakpoints cohérents
  • Touch-friendly
• Animations et transitions
  • Page transitions
  • Loading states
  • Micro-interactions
• Messages de feedback
  • 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

🧪 Tests

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

📦 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

📝 Documentation

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

🔍 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

🔄 Futures évolutions possibles

• Support de nouveaux formats
  • EPUB
  • PDF
• Synchronisation des favoris
  • Sync avec Komga
  • Listes personnalisées
• Mode hors ligne
  • Service worker
  • Sync en background
• PWA
  • Installation
  • Notifications
  • Background sync
• Support multi-langues
  • i18n
  • RTL support