jatiinyadav/books-paradise

A Book Library for all Books Lovers made using React-Js. The API used for fetching books is Google Books API.

               

books-paradise's Issues

Add hover animation to scale book images

The book images are very small.

I would like to use a motion library like , framer motion to scale the image to be larger on hover.
I would like to work on this and maybe use the same library to add animations to other parts of the page as well.

Separate the book component and better loading indicator

Is your feature request related to a problem? Please describe.

• The book component is in the same file as the books(parent component). It would be harder to make changes to the book component because both parent logic and child logic are in the same file.
• There is only a text which indicates the data loading, which makes a bad User experience.

Describe the solution you'd like

• Export the code for the book component rendering into a separate component file.
• Instead of loading text, add the loading indication cards for better UX

Screenshots

Original	Updated
original screenshot	updated screenshot

Want to change the background of the books

The background color of the books in home page is not looking very good.

I want to change the background of the books to a light color with little bit of transparency

Screenshots

Original	Updated

Books transition fix

When you hover out of the book component, its animation is jerky.

It can be made smooth ease-in ease-out animation. Please assign me this issue so I can fix it.

Added Hover Effect on Cards, Background color modified.

I have added a hover zoom-in effect in cards to make them more user-friendly and engaging.

I have done the following changes :

• modified background color of cards.
• added zoom in hover effects.

Why I have modified the background.

The grey background is reflecting a drab image of the cards making it less user-pleasant UI. I have altered the hue to a brighter side making it appear beautiful and appealing.

Screenshot

Card's background was like this.

I have done these changes

20210924_231253.MP4

I hope you like the changes. If you have suggestions do let me know :)

Add an default image where book image is not showing

Add a contributors section in the README.md file

1. Just below the Project Maintainer heading add the Contributors Section.
2. Make a separate section for contributors and the contributors section should be done through automation rather than manually adding the name.

Add a default message

Books in which the Author, Published By, Read More details is/are not available there should be a default message for example: Details Not Available.

feat: Enhance more beautiful valid text alerts by using modal

Improve valid search text alert. Please review this issue and assign it to me.

By

• Use pure CSS and HTML to create modal

Can't see the changes reflected on sass file

• I am not able to see my changes that i have done in .scss file. Help me here

Add a load more button

When someone clicks the load more button more books should appear.

features to be implemented

• I want to style the UI of card.
• Search Input and search button can be enhanced to look better.
• Add animation to book-cards after the search is completed.
• add genre of each book in card.

Please review this issue.

Want to do multiple UI changes

• White background of title text is not looking good. So, I want to remove the background of the title text and give some text-shadow to make it look better.
• Increasing size of Search button to make it look a little bit more good with the search input box.
• Adding hover effect to the Search Button with animation.
• Changing the strong white color background of book card to a transparent grey color, such that it look professional with the patterns in the background.

Improve the UI of heading

Add your own feature/enhancement to the project

1. Don't message in the issue for assigning this issue, kindly open a new issue.

2. Everyone is free to open an issue but make sure that your issue is relevant and add value to the project.

3. Please don't open an issue for minor changes, for example:- Background Color, Text Color.

4. Use Live Sass Compiler if you're using Visual Studio Code (VSCode) and enable the live sass compiling. Live Sass Compiler

   Do styling changes in style.scss file.
   Click on Watch Sass at the bottom of your VSCode.

   

   Your Sass will look like this:-

   

   If you are facing any difficulties you can refer to this documentation.

Add a 404 Error Page

If no books are found, instead of a blank page add an error page.

Add Error Message

If a user clicks on the search button with an empty string, add a feature that will show an error message.

Spelling error in footer

change build to built

Change Background Image

Style this card except the illustration.

Dark theme for the project

I would like to add the light/dark fully functional toggle button to toggle between the light and dark theme on the website.
It would make the website more intuitive and engaging.

Github Icon

Enhance the appearance of the Github Icon, make sure to make it responsive.

Grammar error on card

Change found to find

Format Code

1. Add/Create a js folder and move javascript files in js folder.
2. Inline styling in .js files should be in style.scss.
3. Make sure that your are making styling changes in style.scss file not in style.css file.

Bottom to top button

1. I want a bottom to top button like this.
2. Make sure to make it responsive.
3. Do the styling changes in the respective Sass File.