wasimreja/book-finder

Find the book you want to read next!

Book Finder

Find the book you want to read next!

About The Project

Book Finder is your go-to place for all kinds of book related searches, need to read a book but don't know where to find it?

We got your back! Started in 2022, we are an open-source free search engine with over a million books and more to find out. Here you won't just be able to read books but also listen to them.

So what are you waiting for? Search your favourite book right now!

Features

• Allows user to search books by title, author and ISBN number.
• Allows user to read the preview of the book.
• Generate picture of book along with external link to see a preview of the book on Google Books.
• Along with the books for reading, audiobooks are also available.

Tech Stack

Getting Started

Below are the steps to follow to contribute to this project:

1. Fork this repository.

2. Clone your forked copy of the project.

git clone https://github.com/<your_user_name>/book-finder.git

where your_user_name is your GitHub username.

3. Navigate to the project directory.

cd book-finder

4. Add a reference(remote) to the original repository.

git remote add upstream https://github.com/wasimreja/book-finder.git

5. Check the remotes for this repository.

git remote -v

6. Always take a pull from the upstream repository to your main branch to keep it at par with the main project(updated repository). Feel free to raise new issues.

git pull upstream main

7. Create a new branch.

git checkout -b <your_branch_name>

8. Make necessary changes and commit those changes

9. Track your changes.

git add .

10. Commit your changes .

git commit -m "bla bla bla"

11. Push the committed changes in your feature branch to your remote repo.

git push -u origin <your_branch_name>

12. To create a pull request, click on Compare & pull request. Please ensure you compare your feature branch to the desired branch of the repo you are suppose to make a PR to.

13. Add appropriate title and description to your pull request explaining your changes and efforts done.

14. Click on Create pull request.

15. And you are done creating a pull request to this project. Be patient while your PR is reviewed.

License

Distributed under the MIT License. See LICENSE for more information.

Contributors

Thanks to these wonderful people ✨

book-finder's Issues

Title and image overlapping the header in the scroll

Describe the bug

When the user searches for a book and scrolls the screen, the title and the image of the book overlay the application header.

Steps to reproduce

1. Go to the home page
2. Click on the search bar
3. Search for "The reed queen" book
4. Scroll down to the bottom of the page
5. See that the title and the image overlap with the header

Expected behavior

The title and image should not overlap the header.

Screenshots

Desktop

• OS: MacOS
• Browser: Chrome

Smartphones

Not applicable

Additional context

No response

Add prefers-color-scheme for automatic dark mode

🚀 Feature

A clear and concise description of what the feature is.
I have added the css prefers-color-scheme which allows for dark mode to automatically apply on devices the support this CSS tag.

See pull request #22.

Additional context

[OTHER] Updates : Issue Templates 🛠

What i am suggesting to update ?

I am suggesting to update the Issue templates , currently we are using .md files instead of the brand new issue forms with .yml files.

Why to update it ?

Adding an issue Template allows you to organize the issues made by folks in a much better way.

• We can know if someone wants to write a test or maybe fix something in the website
• The issue template forms makes writing details more efficient
• Here's a general idea :

Can i work on it ?

Yes, i will be glad to help an Opensource project grow more !

Adding a scroll up button when scrolling down would help to navigate to top instantly

🚀 Feature

A clear and concise description of what the feature is.

A scroll to top button would be convenient and improve the overall UX of the website.

Is your feature request related to a problem? Please describe.
If a user scrolls down and wants to search another book he/she has to scroll all the way back up.

Proposal to add author name and page count

🚀 Feature

A clear and concise description of what the feature is.
As Google books API also give information about author and number of pages book have
i will would like to add them in on the page so that user wont get confuse between two books with same name.

Add jQuery, Favicon and Animate on Scroll

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

The website is beautifully desigend but it still need a equally beautifull Favicon. Along with smooth on scroll animations for the website while loading the books query.

Describe the solution you'd like

I would firstly like to shorten the main.js file by using jQuery and implement AOS in js so as to improve the visual feel of the Website. I also plan on adding a Favicon will also love to add a Preloader which matches the theme of the website

Describe alternatives you've considered

As I meantioned I will be using jQuery and AOS library to add and fix the existing codebase

Additional context

Refactor JS code to make syntax/wording more consistent

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

Currently, the code in the JS file is pretty inconsistent and it is unclear what syntax it is trying to conform to.
Here is a list (basically acceptance criteria) of some of the issues I've noticed:

• Usage of var along with let and const. In accordance with ES6 features/syntax, var should be avoided unless absolutely necessary and let/const should be used instead.

• Inconsistent capitalization of variable names. For instance, Book should either be book or bookName and Author should be author or authorName.

• Variable names could be much more descriptive than they currently are. div, h1 and myNode don't convey a lot of information to someone reading the code for the first time whereas something like errorDiv, errorMessage and bookResults do.

• A lot of the code is repetitive in nature. For example,

          textDiv.appendChild(h1);
          textDiv.appendChild(p);
          textDiv.appendChild(par);
          textDiv.appendChild(btn);
          textDiv.appendChild(speech);

could be simplified to:

textDiv.append(h1,p,par,btn,speech)

Same for all of the classList.append's which could be made into one line.

• The voices variable here seems unnecessary, perhaps one of the maintainers could clarify.

    const voices = synth.getVoices();

Describe the solution you'd like

I've pretty much outlined the issues I see with the code and the fixes I'm suggesting for all of them.
I see this taking multiple PRs to finish up so I'd like to hear the maintainers' thoughts on the above suggestions.

Describe alternatives you've considered

The alternative I see is that this might not be seen as a major priority right now and the maintainers would prefer to leave this for later.
Personally, I think the faster these are rectified, the easier it will be for new contributors to make contributions to the repo

Additional context

No response

Search Result Card UI Redesign

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

Currently, the search result cards show I bit too much information about the book at once. This seems to be a bit overwhelming for the user. Also, the user is able to see fewer results on the screen at once since each book is having too long descriptions and they have varying lengths. Also, the card's UI can be improved a bit.

Describe the solution you'd like

I would like to redesign the search result cards and make them a bit smaller and more concise so that more results can be viewed at once. Also, the description of the book will be limited to 100 characters with a "read more" link which when clicked will open up the rest of the description of the book.

Describe alternatives you've considered

I would like to redesign the search result cards and make them a bit smaller and more concise so that more results can be viewed at once. Also, the description of the book will be limited to 100 characters with a "read more" link which when clicked will open up the rest of the description of the book.

The cards can also be redesigned to have a glass morphism style.

Additional context

Only one result is being viewed due to the descriptions being too long.

Fix listen button

Describe the bug

Listen button is not working properly on few browsers.

Steps to reproduce

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

Fix listen button so that user can listen description about a book.

Screenshots

No response

Desktop

• OS: [e.g. iOS]
• Browser: [e.g. chrome, safari]
• Version: [e.g. 22]

Smartphones

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

No response

Improved UI for book list

🚀 Feature

A clear and concise description of what the feature is.
Currently the search results look connected and unpleasing.

Describe the solution you'd like
I'm proposing this layout for the same.

Please add hacktoberfest tag if this looks good so I can start working on it.

Create a button which lets the user decide how many book results to return

🚀 Feature

A clear and concise description of what the feature is.
Might be a good idea to have a button which lets the user choose how many book results to return from the api call

Is your feature request related to a problem? Please describe.
the user might want to have more results for a particular book search

Describe the solution you'd like
implement a button to let the user decide how many results to show

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Improve Card layout

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

No, just an extra feature that I would like to add

Describe the solution you'd like

If description is too long it doesn't trim it so that the cover fits with it.

Describe alternatives you've considered

I would like to add the option of expanding description when necessary.

Additional context

No response

Form shouldn't do AJAX request if input is empty

Describe the bug

I noticed that when input is empty, the form is still doing a request. Getting a 400 response from API.

Steps to reproduce

1. Go to 'http://127.0.0.1:5500/index.html'
2. Leave search input empty
3. Click on search or press enter
4. The AJAX request is sent and you receive a 400 status code.

Expected behavior

Form should not do the request if input is empty

Screenshots

Desktop

• OS: Windows 10
• Browser: Microsoft Edge
• Version: 106.0.1370.34

Smartphones

NA

Additional context

No response

Adding a Modern Scrollbar

🚀 Feature

I want to add a scroll progress bar, which is generally seen on modern websites, which would be a good addition to this website.

I'm a participant in Hacktoberfest, kindly assign this issue to me. Thank you.😊

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

I have noticed that after searching for a book, It shows a variety of books to the user. And the existing Scrollbar is very boring.

Describe the solution you'd like

I would like to add a modern scrollbar like this:

Additional context

About page

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

I love the idea, and when I first opened the website I didn't know what it does, my feature is related to adding an new About page to tell the visitor about book finder a

Describe the solution you'd like

Add an About page

Describe alternatives you've considered

Add an About page

Additional context

No response

Introduction of Navbar

Placing the navbar on the top of the page will help the users to go through a lot of options that the website has to provide. All well having all the required features in front of the eyes will help the user to have a good experience.

Adding a new background

🚀 Feature

Hey folks.
I want to add a decent background to this website, so that it looks quite a bit more captivating.
Thanks :)

keyboard shortcut for the search bar

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

The Ctrl+K keyboard shortcut should take us to the search box

Describe alternatives you've considered

In some browsers "/" also focuses on the search box.

Create a Light and Dark Mode

🚀 Feature

Add a switch to change light mode to dark mode and vice versa.

Add a floating back to top button

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

Add a floating back to top button like this https://codeconvey.com/floating-back-to-top-button-html/ so that the user doesn't have to scroll through the whole page and get on the top of the page just by clicking on the button.

Describe the solution you'd like

bla bla bla

Describe alternatives you've considered

bla bla bla

Additional context

No response

Pressing enter doesn't work when searching for a book

Describe the Bug 🐛

Hey! I noticed it while testing your app. Pressing enter redirects the user to another path. Searching only works when you manually click on search.

To Reproduce
Steps to reproduce the behavior:

1. Go to search page
2. Type a book or author
3. Press enter
4. After pressing enter, it doesn't actually search for the book but rather redirects the user to another path

Expected behavior
After pressing enter, it should also search for the book.

Screenshots
Pressing enter redirects me to this page:

Additional context
Can I take over in solving this issue? Thanks! @wasimreja

The description is too long

🚀 Feature

Reduce the initial description shown to users

Is your feature request related to a problem? Please describe.
Sometimes, the book description is really long, and if it isn't the book you are looking for, you might get thrown off.

Describe the solution you'd like
It's better to show some of the description and have an option to show the rest.

Changing background of home page

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

A better background image could be set

Describe the solution you'd like

I would like to change the background

Describe alternatives you've considered

Additional context

No response

Adding Voice Method

🚀 Feature

A clear and concise description of what the feature is.

Is your feature request related to a problem? Please describe.
I was very frustrated to read description of books . Mostly we don't want to read f there is an option to listen

Describe the solution you'd like
I would like to add the option of speaker button so that on clicking that user can read description of particular book

Please consider it if you like and assign it to me for hacktoberfest

Add Meta Tags for better SEO and Page Visibility

🚀 Feature

Adding proper Meta Tags would greatly improve SEO and also help social media websites generate image previews for this website

I'd be glad to join in and contribute if you're okay with it.

Home Post App

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

It is a React based application which will teach how to use react and bootstrap

Describe the solution you'd like

It is a React based application

Describe alternatives you've considered

None

Additional context

No response

Search and results divs should be wrapped with main tag

Describe the Bug 🐛

The <div class="search> and <div class="results> should be wrapped in a <main> tag

Adding a day-night toggle button to the landing page

🚀 Feature

A clear and concise description of what the feature is.

Is your feature request related to a problem? Please describe.
As a programmer, I prefer dark mode because it is more comfortable for eyes.

Describe the solution you'd like
I would like to add one button for switching between dark and light mode.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Add website image at the top of readme and the website link in readme

📚 Documentation

• It would be better if there was a link to the website in the README.md in case someone misses it in the about section of the project.
• Also it would describe the project better if the first image would be of the landing page so that it would describe it better and then we can include a separate hacktoberfest section instead of the last part which includes screenshot.

Add relevant screenshot or video (if any)

• The current README.md looks like this

• I'd like to propose to change the README.md to this

Additional context

No response

Clearing input field after search

Describe the Bug 🐛

A clear and concise description of what the bug is
The input field clears when you search thus it is hard to know what was searched

Make code for rendering card more readable

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

The code to render the card is hard to understand

Describe the solution you'd like

I'd like to split the code into smaller function and make the code easier to read and maintain

Describe alternatives you've considered

I can make custom element to make the code more easier to read and maintain

Additional context

No response

Navbar Overlapping Issue

Describe the bug

When trying to scroll down, the navbar faces an overlapping issue.

Here is the image:

Steps to reproduce

1. Go to 'index.html' or main Home page
2. Search for a particular book
3. Scroll down a little bit
4. See navbar

Expected behavior

Navbar should retain its original z-indexing.

Screenshots

No response

Desktop

• OS: Windows
• Browser: Google Chrome
• Version: 107.0.5304.29

Smartphones

• Device: Poco X3
• OS: MIUI
• Browser Google Chrome
• Version 13.0.1

Additional context

I would like to contribute please assign me this @wasimreja.

UI Enhancement

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

The UI of the website is so simple. So I want to beautify the UI. I want to work on that

Describe the solution you'd like

I can make the background better with a cool theme. And also can add a light-night button. And so on.

Describe alternatives you've considered

I can make the background better with a cool theme. And also can add a light-night button. And so on.

Additional context

No response

Add Floating Animation on "Book Finder" svg.

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

Not a problem.

Describe the solution you'd like

Just to make the website more interactive and user-friendly.
When you will hover over the main "Book Finder" logo - it will float up-down. Just cool thing.

Describe alternatives you've considered

NA

Additional context

NA

Adding a footer

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

its adds an additional functionality to the website.

Describe the solution you'd like

add a footer to add copyright.

Describe alternatives you've considered

nil

Additional context

No response

make the cards more distinguishable by adding some styles

The current gap between two consecutive is not much distinguishable, as shown in the picture.

By improving on this we can make the website look more beautiful and appealing.

Add Navbar and footer

🚀 Feature

Adding a navigation bar and footer would enchance the look. Keeping the same color palette

New action to "read button"

🚀 Enhancement

Description

A good way to stay user in the page is to open a new tab (when they click in "read" button) instead to open the new page in the same page that they are. Also, data in console logs should be stay in dev mode.

If there is no problem I can take that and make that changes.

Use semantic header tag

Describe the Bug 🐛

<div class="header"> should be renamed to <header class="header>

search button

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

Adding hover property to the search button

Describe the solution you'd like

I will add a hover effect and transition to the search button
https://user-images.githubusercontent.com/94471189/194359073-f83b7bd7-771e-492d-9863-df0193c3ef7c.mp4

Describe alternatives you've considered

Additional context

No response

Add fevicon

🚀 Feature

Fevicon logo in tab icon

Wave form label

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

Yes, A good animation could be set.

Describe the solution you'd like

i would like to add animation when we click on search bar.

Describe alternatives you've considered

we can a qoute section related to book or habit of reading below the search bar

Additional context

Screen.Recording.2022-10-05.at.1.06.14.AM.mov

Redirect to the home page by clicking on the header logo

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

When the user clicks on the logo, he should be redirected to the home page, clearing his previous search history. Currently this is not the case, and it is only possible to do this redirection by clearing the URL.

Screen.Recording.2022-10-07.at.10.50.44.mov

Describe the solution you'd like

When the user clicks on the logo, he should be redirected to the home page, clearing his previous search history.

Describe alternatives you've considered

Not applicable.

Additional context

No response

Refactor usages of "var"

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

I noticed that some variable decalrations still use var instead of let.
Since the project already uses ES6 syntax elsewhere and this might lead to issues with hoisting later on.

Describe the solution you'd like

Replace all current usages of var with let.

Describe alternatives you've considered

/

Additional context

No response

Display results in a grid

🚀 Feature

Display results in a responsive grid so that it is easier to navigate and view all the results.

It could perhaps display a "card" for each book and on hover would display more information about the book

Add a loading spinner

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

Currently if you search for a book and you have slow internet there is no indication that it fetches the data based on your input.

Describe the solution you'd like

Add a animated loading spinner.

Describe alternatives you've considered

https://github.com/jlong/css-spinners

Additional context

No response

Automatic scroll to first child of result

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

If we search something and still have to scroll for the fetched result, is not user freindly.

Describe the solution you'd like

When the result is fetched, immediately scroll to the first element of result with help of scrollIntoView() function, so that we don't have to scroll again.

Describe alternatives you've considered

We can use different libraries for scrolling.

Additional context

I am adding a pull request with it.

Pressing enter for book search.

Pressing enter sends to a different page and not searches for the book.🐛

To Reproduce
Writing book name in search bar and press enter.

Expected behavior
Writing book name and pressing enter should search book instead of redirect.

No book found response

Describe the Bug 🐛

Whenever you type a book name not found in the backend, it doesn't show any response i.e. book not found or something like that.

A clear and concise description of what the bug is
When a user types any book name that is not found, it doesn't show any response according to the not found message, so there is confusion about the result.

Expected behavior
To show a response when no book is found.

No substitute for undefined data

Describe the bug

The data being fetched from the api do contain some undefined fields which need to be fixed using ternary insertion
I'm willing to solve this bug
Please mark it as hacktoberfest as well

Steps to reproduce

In the provided screenshot, look on the book description after its author. It shows undefined which is not good

Expected behavior

It should either show nothing or show some substitute text

Screenshots

No response

Desktop

valid for all desktops

Smartphones

Valid for all smartphones

Additional context

No response