Library

Javascript Advanced Project by Giacomo Giovannetti

A Library online where you can find your next book searching by subject and read their description

📑 Index

• About the project
• How it works
• Languages
• Libraries
• Bundler
• External Services
• Try it
• Contact Me

💾 About the project

This is a project realized for Start2Impact's -Javascript Advanced- module of the Full Stack Web Developer course. For this project i had to build:

• A web app to search for books by subject by fetching them from an API with the value of the search bar
• The web app in the first place after the search has to display a list of all the books, if the user clicks on one of them the description has to be displayed
• To do that i had to implement API requests functions for the books and their data and function to display/hide the different elements

My Idea:

In my mind the project had to be realized in three stages:

• The Homepage: Where the user lands once he opens the Web app, and find a list with a few guidelines on how it works
• The Book List screen: A list of cards that appears after the research and each card contains the main informations about a book.
• The Description screen: it appears after the user clicked on a book, contains the description of the book.

🔍 How it works

As you land on the page there are 3 elements displayed:

• Header : contains the Title of the web app and an icon which on click redirects to the homepage
• Search bar: Here the user con specify the subject to research, the research can be sterted by clicking on the search button or by pressing the "enter" key
• How-to-use list: A list of instructions on the usage of the web app.
  

Once the user searched fo a subject the book list is displayed. The content title changes and the cards for each book are generated. Each card contains cover, title and first author of the book. I made the decision to put only the first author in order to not overcrowd the cards. The title in the card is clickable, and allows the user to display the description of the book.

After the title in the book list is clicked the description of the book is displayed. The content title changes and becomes the book title, below it there is a subtitle with all the authors of the book. Then we can find the description of the book and on its left the book cover. Below the description i decided to implement a button to allow the user to go back to the book list by clicking it.

⌨️ Languages

• HTML5
• Tailwind CSS
• Javascript

📚 Libraries

• axios

📦 Bundler

• Webpack

📤 External Services

• Open Library API

💻 Try it!

That's my project, try it here: Library

📧 Contact Me

My Linkedin Profile: Linkedin

My email if you have any questions: giovannettii.giacomo@gmail.com