Ebiblio

Contexte

Ebiblio est l'application web de bibliothèque numérique de l'ENEAM (École Nationale d'Économie Appliquée et de Management), développée lors de mon stage de Licence. L'objectif était de moderniser l'accès aux ressources documentaires de l'école — livres, mémoires, thèses — en proposant une interface en ligne permettant la consultation et la lecture directement dans le navigateur.

Le projet est une application full-stack découplée : j'ai développé le frontend Next.js, tandis que le backend REST API Laravel a été réalisé par Euvince, un collègue de promotion. Les deux dépôts communiquent via une API sécurisée par Laravel Sanctum.

Architecture générale

Frontend (mon travail)          Backend (Euvince)
─────────────────────           ──────────────────────────
Next.js 14 / TypeScript         Laravel 10 / PHP 8.1
NextAuth.js (sessions)    ←──→  Sanctum + Fortify (tokens)
Axios + SWR (requêtes)          Spatie Permission (rôles)
React PDF / react-reader        Spatie MediaLibrary (fichiers)
                                DomPDF / PHPWord (exports)
                                Laravel Queue (jobs asynchrones)

Fonctionnalités

Interface utilisateur

• Authentification complète (connexion, inscription, vérification email, réinitialisation de mot de passe, 2FA)
• Navigation et recherche dans le catalogue de livres et de mémoires
• Lecture de livres en PDF intégrée au navigateur (React PDF Viewer + pdfjs-dist)
• Lecture de mémoires en format e-book (react-reader)
• Réservation et emprunt de livres physiques
• Mode clair / sombre

Panneau d'administration

• Gestion du catalogue : livres, mémoires, mots-clés, cycles, filières
• Gestion des utilisateurs et des rôles (Administrateur / Gestionnaire / Étudiant)
• Gestion des emprunts — cycle complet : demande, validation, retour
• Gestion des abonnements et paiements
• Planification des soutenances et dépôt des mémoires
• Configuration générale de la bibliothèque (durées d'emprunt, périodes…)
• Tableaux de données avec tri et pagination (TanStack React Table)
• Graphiques et statistiques d'usage (Recharts)

Stack frontend

Next.js 14       Framework React (App Router)
TypeScript       Typage intégral du projet
NextAuth.js      Authentification et gestion de session côté client
Axios + SWR      Requêtes HTTP et revalidation des données
React Hook Form  Gestion des formulaires
Zod              Validation des schémas côté client
TanStack Table   Tableaux de données avancés (tri, pagination, filtres)
Recharts         Graphiques et statistiques
Framer Motion    Animations d'interface
React PDF        Visionneuse PDF intégrée (pdfjs-dist)
react-reader     Lecteur e-book (EPUB)
Radix UI         Composants accessibles (modals, onglets, dropdowns…)
Tailwind CSS     Styling

Stack backend (Laravel API)

Laravel 10          Framework PHP
Sanctum + Fortify   Authentification API (tokens, 2FA, email verification)
Spatie Permission   Contrôle d'accès par rôles et politiques (Policies)
Spatie MediaLibrary Gestion des fichiers et médias associés aux entités
DomPDF              Génération de PDF (fiches de dépôt, documents)
PHPWord             Génération de documents Word
Laravel Excel       Import / export de fichiers Excel
Laravel Queue       Jobs asynchrones (notifications, rappels d'échéance)
Scramble            Génération automatique de la documentation OpenAPI
PHPUnit             Tests unitaires et d'intégration

Modèle de données (backend)

Le schéma de base de données couvre l'ensemble des domaines métier de la bibliothèque :

Users / Roles / Permissions     Gestion des comptes et droits
Articles                        Livres et ressources documentaires
SupportedMemories               Mémoires et thèses déposés
Loans / Reservations            Emprunts et réservations de livres
Subscriptions / Payments        Abonnements annuels et transactions
Soutenances / FilingReports     Sessions de soutenance et fiches de dépôt
SchoolYears / Cycles / Sectors  Calendrier académique et filières
Configurations                  Paramètres système
Statistics                      Données analytiques agrégées
Keywords                        Mots-clés pour la recherche documentaire
Reminders                       Notifications et rappels d'échéance

Structure du frontend

app/
  (auth)/            — Connexion, inscription, reset password
  (app)/
    home/            — Tableau de bord utilisateur
    livres/          — Catalogue et lecture de livres
    memoires/        — Catalogue et lecture de mémoires
    settings/        — Paramètres du compte
  (dashboard)/
    admin/
      livres/        — Gestion du catalogue livres
      memoires/      — Gestion des mémoires
      utilisateurs/  — Gestion des comptes
      configuration/
services/            — Couche d'appels API (une fonction par ressource)

Ce que j'ai appris

Travailler sur un projet full-stack découplé avec un collègue sur la partie backend a été une expérience structurante. Il fallait s'accorder sur les contrats d'API, gérer les décalages entre ce qui était prévu et ce qui était effectivement disponible côté serveur, et déboguer des erreurs qui traversaient les deux couches.

Sur le plan frontend, ce projet m'a confronté à des problématiques rarement abordées dans les tutoriels : sécurisation des routes selon les rôles avec NextAuth, intégration de visionneuses de documents (PDF, EPUB), et coordination de nombreux formulaires complexes avec React Hook Form et Zod.

La complexité du panneau d'administration — tableaux paginés, formulaires validés, modales, gestion des états de chargement — m'a appris à structurer un projet de grande taille de manière lisible et maintenable. C'est ce projet qui a vraiment consolidé ma maîtrise de TypeScript sur une base de code réelle et conséquente.