Bookshelf Builder

Splash Page

• This is the intro screen where users can see the application's name and enter it to access their saved books.

Homepage - Table View

• This is the main homepage from where users can view their books, listed by organized by Title, Author, and Publish Year.
• At the end, there are a few operations that allow the user to View, Edit, and Delete a book.

Homepage - Card View

• This shows the same homepage in a Card layout.
• Each card has the same View, Edit, and Delete functionalities as previously described, along with an Eye icon.
• This opens a Card Modal with the following information:

• The See Cover button allows users to view the book cover, which is automatically fetched from Google Images and displayed in the modal interface.

Add Book

• Users can add a new book by clicking the + button in the top-right corner, which prompts them to type the necessary information.
• The new book gets added to the list as shown on the homepage.

Show Book

• Users can look at more information regarding their books by clicking the ⓘ icon in the Operations section.
• They are also given the option to Learn More about the book, which opens a new tab with the book already in the search query.

Edit Book

• Users can edit the information regarding their books by clicking the pencil icon in the Operations section.
• The book's information is altered in the list as shown on the homepage.

Delete Book

• Users can delete a certain book by clicking the trash icon in the Operations section.
• The book is removed from the list as shown on the homepage.

Stack

• MERN: MongoDB v8.2, React v18.2 + Vite v5.1, Express v4.18, Node v18.11

Notable Dependencies

Frontend:

• axios@1.6.8
• react-router-dom@6.22.3
• tailwindcss@3.4.1

Backend:

• axios@1.6.8
• cors@2.8.5
• express@4.18.3
• mongoose@8.2.1
• nodemon@3.1.0