First React project - books search engine built with Google Books API & Bootstrap
Completed and deployed on Netlify on January 31, 2021 - new deploy on DigitalOcean droplet with minor revision on October 4, 2021
This website was created as a personal project while following the Start2Impact React & Redux course.
The requirements were:
This website is built entirely using the latest version React (17.0.1), with functional components and React Hooks instead of class component (a part from the Error Boundary component, that doesn’t have an alternative with hooks).
I used the Google Books API to get book’s data, using the query provided by the user, and react-photo-gallery to make the gallery.
The main branch, used in production, uses Redux as a state manager (configured with redux-toolkit). An additional branch uses React built-in Context API as an alternative to Redux.
In order to persist the fetched data when the user refreshes the page, I saved them on localStorage as well. For additional infos see the ResultsScreen file.
The useHistory hook (instead of Redirect from react-router-dom) was used to redirect between different screens, allowing an efficient use of the browser back button.
To make the website more appealing, only the cover is shown in the gallery. Title and author of the books appear on hover. This reflects the intended audience for this website (primarily desktop).
However, the website is fully responsive and the covers on mobile and table layout are sufficiently big to permit the user to read the title and author’s name on the cover.
The layout was made using React Bootstrap, styled-components and Sass over a Bootswatch theme.
The website icon is by Nick Roach, the other icons are from Font Awesome. The background is a photo by @impatrickt?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Patrick Tomasso on Unsplash.
Made by Luca Bettini.