Stack: Node.js/Express + React/Vite + tRPC + MySQL (Drizzle ORM) Features: Gestion de podcasts, établissements, mots-clés, upload audio S3 Migrations: 0000-0002 (users, etablissements, mots_cles, podcasts, podcast_mots_cles)
6.1 KiB
6.1 KiB
Itinova Podcasts - TODO
Base de données
- Table
etablissements(id, nom, description, logoUrl, createdAt) - Table
podcasts(id, titre, resume, etablissementId, audioUrl, audioKey, duree, statut, auteurId, createdAt, updatedAt) - Table
mots_cles(id, label) - Table
podcast_mots_cles(podcastId, motCleId) - relation many-to-many - Migration DB avec
pnpm db:push
Backend API (tRPC)
- Router
etablissements: list, create, update, delete (admin) - Router
podcasts: list (public), getById, create (auth), update (auth), delete (auth/admin) - Router
motsCles: list (public), create (admin) - Route upload audio : POST /api/upload-audio (S3)
- Filtrage podcasts par établissement et mots-clés
- Pagination des podcasts
Interface Web d'Administration
- Layout dashboard avec sidebar (AdminLayout)
- Page d'accueil / tableau de bord avec statistiques
- Page liste des podcasts (tableau avec recherche/filtres)
- Formulaire création/édition podcast (titre, résumé, établissement, mots-clés, upload audio)
- Confirmation suppression podcast
- Page gestion des établissements (liste, ajout, édition, suppression)
- Page gestion des mots-clés
- Gestion des rôles utilisateurs (admin peut promouvoir)
Interface Mobile Responsive (Écoute)
- Page d'accueil mobile avec logo Itinova et CTA
- Page liste/écoute avec filtres (établissement, mots-clés)
- Lecteur audio HTML5 intégré avec contrôles (play/pause, progress, volume)
- Carte podcast avec titre, résumé, établissement, durée
- Connexion OAuth pour professionnels sur mobile
- Formulaire publication podcast sur mobile (après connexion)
- Navigation mobile avec bottom bar
Authentification & Sécurité
- Authentification Manus OAuth (déjà en place)
- Rôles : admin (gestion complète) / user (publication propres podcasts)
- Protection des routes d'administration
- Validation des formulaires (zod)
Tests
- Tests unitaires routers podcasts
- Tests unitaires routers établissements
- Tests upload audio
Design & UX
- Palette couleurs Itinova (bleu institutionnel, blanc, accents)
- Typographie professionnelle (Inter)
- Responsive mobile-first pour interface écoute
- États de chargement (skeletons)
- Messages d'erreur et de succès (toasts)
Compte administrateur local
- Étendre le schéma DB avec champ
passwordHashetusernamedans la table users - Ajouter route tRPC
auth.loginLocal(vérification username + bcrypt) - Créer le compte immuable
adminServPodcast(protégé contre modification/suppression) - Page de connexion avec choix : connexion Manus OAuth ou connexion locale
- Formulaire de connexion locale (username + mot de passe)
- Tests Vitest pour
auth.loginLocal
Suppression connexion Manus OAuth
- Page /login : afficher directement le formulaire local, supprimer le choix Manus
- AdminLayout : supprimer le bouton "Se connecter avec Manus"
- Interface mobile : supprimer les boutons/liens de connexion Manus
- Retirer les imports getLoginUrl inutilisés
Gestion des utilisateurs (CRUD complet)
- API : route createUser (nom, username, mot de passe, rôle)
- API : route updateUser (nom, username, mot de passe optionnel, rôle)
- API : route deleteUser (avec protection compte immuable)
- Page AdminUtilisateurs : tableau avec colonnes (nom, identifiant, rôle, méthode, date)
- Bouton "Nouvel utilisateur" en haut à droite
- Boutons Modifier / Supprimer en fin de chaque ligne
- Modale création utilisateur (formulaire validé)
- Modale modification utilisateur (formulaire pré-rempli)
- Dialogue de confirmation suppression
- Protection : compte immuable non modifiable/supprimable
Bugs
- Erreur 404 sur le bouton "Nouveau podcast" dans l'interface admin
Logos en-tête page d'accueil
- Uploader logo Itinova vers CDN
- Uploader logo Santinova vers CDN
- Intégrer les deux logos côte à côte dans l'en-tête de la page d'accueil (mobile + web)
Corrections UI
- Supprimer le bouton "Nouveau podcast" du tableau de bord
Bug session
- Le bouton Connexion n'apparaît pas toujours : session OAuth Manus résiduelle reconnecte l'utilisateur automatiquement sans passer par la connexion locale
Refonte UI moderne
- Styles globaux : palette Itinova enrichie, typographie Inter, tokens CSS, animations
- Page d'accueil mobile : header avec logos, hero gradient, cartes podcast modernes, lecteur flottant redesigné
- Composant PodcastCard : design carte moderne avec waveform visuelle, badges colorés
- Composant PodcastPlayer : lecteur bottom-sheet moderne avec artwork, progression animée
- Interface admin : sidebar redesignée, dashboard avec métriques visuelles, tableaux épurés
- AdminLayout : sidebar avec icônes plus grandes, couleurs riches, transitions
Bug logos
- Logos Itinova/Santinova invisibles sur la page Login (filtre brightness-0 invert sur fond bleu les rend blancs sur blanc)
Enregistrement audio depuis smartphone
- Composant AudioRecorder : enregistrement microphone via MediaRecorder API
- Chronomètre d'enregistrement en temps réel
- Prévisualisation audio avant upload (lecture du fichier enregistré)
- Choix dans PodcastForm : onglet "Fichier existant" / onglet "Enregistrer"
- Upload du fichier enregistré vers S3 (même route que upload fichier)
- Interface mobile : bouton "Enregistrer un podcast" accessible sans admin
Logos page de connexion
- Logo Itinova en haut de la page de connexion
- "powered by" + logo Santinova en bas de la page de connexion
Logos panneau droit connexion
- Logo Itinova en haut du panneau droit (formulaire) de la page de connexion
- "powered by" + logo Santinova en bas du panneau droit (formulaire) de la page de connexion
Correction logos page connexion (v2)
- Supprimer les logos du panneau gauche bleu
- Logo Itinova juste au-dessus de la carte de connexion (panneau droit)
- "powered by" + logo Santinova sur la même ligne, juste en dessous de la carte de connexion