The Bookshelf : my fullstack project with Fastify & SQLite backend + Vite frontend

2023-12-26.17-21-17.mp4

🛠️

Backend : NodeJS, Fastify, SQLite Frontend : HTML, CSS, JS, VIte

What I learned :

• separate frontend and backend in different folders
• working with ES Modules
• loading asynchronously ES Modules and scriptd thanks the import('') function main.js
• passing data from backend to frontend via routes
• using pre-handler function to ensure only authenticated user can make a POST request
• using Vite for frontend to benefits of Hot Module Replacement and imports every module in one JS file logic
• fixing CORS issues (origin, methods, credentials)
• authentification through session secure cookies. Learned the difference betwen BasicAuth, SessionAuth and JWT
• encrypting credentials with BCRYPT in order to store in db
• authorization depending on the route thanks to pre-handler function (it's Fastify alternative to middleware)
• Scroll-Progress-Timeline CSS animation, to apply animation when element enter the viewport on scroll
• viewTransitions API to animate page movements
• using <dialog> Modal & Non-Modal
• HTML <template> functionnality

In-depth details of the project :

Backend

1. Goodreads CSV export because it doesn't provide API. Turned the CSV file into Goordreads.sqlite thanks to SQLite bash script.
2. Retrieving book cover image for each book : using a combination of SQL Query and a scrapping book cover library to get all cover images. Logic is getting the book cover Amazon URL depending on the ISBN13 and then cleaning the object.ISBN13 string. getBookCovers.js
3. Querying SQL DB to get all books data to JS objects. Then passing the data to /data route thanks to Fastify passBookDataToFront.js

Frontend

4. Fetching the data from the /data route fetchBooksFromAPI.js
5. Then using HTML functionnality to avoid using innerHTML for security and bugs. displayBooks.js
6. Search : allowing to search a particular book title, hiding results that d'ont math the input. Showing all results if no input entered. search.js
bookshelf-recherche.mp4
7. Filter : filter books by rating through checkboxes. If the checkbox is unchecked it returns to initial state.filter.js
bookshelf-filtre.mp4
8. Login: element contains the connexion form. username and password are passed to the backend endpoint "/login" login.js
bookshelf-login.mp4
9. Sort: allowing to sort by title or rate sort.js
bookshelf-tri.mp4

Backend step 2

10. Authentification : Retrieving username and password. Hashing the password throught bcrypt. Then SQL query to get the corresponding username row in DB (table auth). Bcrypt compares if the in DB hashed password matched the hashed password passed by the connexion form. If match : it uses the fastify-secure-session plugin that adds a session cookie. A request to this session cookie allows to ensure if the user is authenticated. It then passes to frontend the confirmation that user is authenticated.auth.js
11. Authorization : only authenticated user that have a session-cookie are allowed to make a POST request by filling the addbook form.addBook.js
12. Adding the book data provided through the form to the db and passing it to frontend trhough "/addedbookfromform" route server.js

Frontend step 2

13. Adding book to the collection : when addBookForm is received it visually adds the book to the page, and adds it to the DB. At reload : it combines "goodreads" & "bookviaform" table displayAddedViaFormBooks.js
14. Logout function : clicking on the logout notif delete the session cookie, disallow to add a book to the collection and hides the add book button
15. Pagination : displaying only a limited amount of books card, setting dynamically a button for each page, styling the active button, displaying books between a certain range for each page. pagination.js
16. Reservation : allowing to reserve a book. When clicking on the dedicated button it adds it to a modal. Then user select the date to return and validate. Data is sent to the backend and added to the DB. The book now appears as reserved and it visually inform other users. reservation.js
bookshelf-reservation.mp4
17. Deployment : backend on fly.io in order to have persistent storage of SQLite DB, frontend on Vercel which directly recognizes Vite