Conception d'un site de réservation de livres
Rôle
Développeur et designer du projet
Commande / Objectifs
Site de visualisation et de gestion des réservations d'une bibliothèque de livres. Il est possible de rechercher, filtrer et trier les résultats. Les résultats sont paginés pour une meilleure lisibilité. L'administrateur peut se connecter pour ajouter des livres. Tous les utilisateurs peuvent réserver des livres.
Technologies utilisées
- Backend : NodeJS, Fastify, SQLite, SQL
- Frontend : HTML, CSS, Javascript, Vite
- Déploiement : Fly.io, Vercel
Fonctionnalités
- Conception de l'UI et responsive : j'ai conçu l'interface en partant des usages pour qu'elle soit sobre et fonctionnelle. Adaptée à la navigation sur mobile.
- Base de données : à l'origine il s'agit d'un export CSV de livres depuis l'application Goodreads (Goodreads ne fournissant pas d'API). J'ai transformé ce fichier CSV en BDD SQLite.
- Retrouver et associer l'image de couverture de chaque livre : L'export CSV de Goodreads ne fournit pas les images de couverture des livres. J'ai donc utilisé une librairie de "web scrapping" qui récupère l'image de couverture de chaque livre sur Amazon.
- Transfert des données du backend au frontend : création d'une API d'envoi des données.
- Barre de recherche :
- Filtre : classement des résultats par note moyenne
- Tri :
- Connexion et ajout de livre : mise en place d'un système de connexion administrateur. L'administrateur à l'autorisation d'ajouter un livre à la collection via un formulaire.
- Réservations : l'utilisateur peut ajouter dans son panier un livre et le réserver en sélectionnant une date de rendu.
Ce que j'ai appris
- Séparer le frontend et le backend en dossiers différents dès le début du développement.
- Passer les données du backend au frontend grâce aux routes
- Utiliser Vite pour bénéficier du Hot Module Replacement, du bundling et de la logique d'importer tous les modules dans un seul fichier JS
- Travailler avec les ES Modules
- Charger de façon asynchrone les ES Modules et les scripts
- Comprendre et réparer les erreurs CORS (origin, method, credentials...)
- Utiliser les fonctions pre-handler sur le serveur pour s'assurer que seul un utilisateur authentifié a l'autorisation de faire une POST request
- Différencier BasicAuth, SessionAuth et JWT
- Construire un système de login via les secure-session-cookies, différence entre authentification et autorisation
- Animations liés au scroll en pur CSS (Scroll-progress-timeline)
- Animations au changement de page en CSS (ViewTransitionsAPI)
- Savoir quand utiliser ou non une modale
Lien du projet et code source
- Projet en ligne : Mon projet déployé "The Bookshelf"
- Code source du projet : Lien Github