6.6 KiB
6.6 KiB
Plan de développement - Paniels (Komga Reader)
🎯 Objectif
Créer une application web moderne avec Next.js permettant de lire des fichiers CBZ, CBR, EPUB et PDF via un serveur Komga.
📋 Fonctionnalités principales
- Interface de 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
- Lecteur de fichiers (CBZ, CBR)
- Navigation entre les pages
- Mode plein écran
- Raccourcis clavier
- Mode double page
- Zoom et pan
- Préchargement des pages
🛠 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 du stockage sécurisé des credentials
- 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*)
- Création du fichier .env.local.example
📚 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
- Types pour l'API Komga
🔒 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
- Vérification des credentials via l'API Komga
- 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
📱 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
- Barre de recherche
- Filtres avancés
- Tri personnalisable
- 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
- 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 réponses
- Cache en mémoire côté serveur
- TTL configurable (5 minutes par défaut)
- Cache par route et paramètres
- Endpoints
- Authentication
- Bibliothèques
- Séries
- Livres
- Pages
- Gestion des erreurs
- Retry automatique
- Feedback utilisateur
- Messages d'erreur détaillés
🎨 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
- Optimisation des images
- SEO
- Meta tags
- Sitemap
- robots.txt
- Accessibilité
- ARIA labels
- Keyboard navigation
- Screen readers
- Color contrast
🔄 Futures évolutions possibles
- Support de nouveaux formats
- EPUB
- 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