This project runs off of the Project Gutenberg website and the Gutendex API. The purpose of this project is to give users a way to browse the Gutenberg project quickly and efficiently, read the books located on the website, download the book in any available format, retrieve information about the book, etc., all on the same page with minimal clicks. The app was created using React.
The user experience starts with a prompt to select a book from the Book List on the left. The Book List can be shown or hidden at any time by clicking the book icon in the top left of the header. To search for a book, you can enter a term in the "Search Books" bar and either 1) click the "SEARCH" button, or 2) press the enter key. The list will then be updated with books matching the search term. If the book isn't immediately visable on the curent page, the user can click the "NEXT" or "PREV" buttons at the bottom of the Book List component.
Once the desired book is found and clicked, the book will be displayed in the Book Reader component, found in the middle of the screen. If the user would like to hide the book list at this point for easier reading, they can click on the Open Book Icon in the top-left of the Book Reader header. Once hidden, the list can be toggled at any point by clicking the icon again.
Once a book is selected, the user can view information about the book by clicking the Light Bulb Icon in the top-right of the Book Reader's header. Doing so will open the Information Panel, showing things such as: the title of the book, the authors of the book (along with the birth/death date of the author), bookshelves the book belongs to (these are like categories to the Gutenberg Project), the amount of times the book has been downloaded, the copyright status of the book, the languages available, and some download links for the book. Clicking one of the links will open a new tab. The Information Panel can be closed at any point by clicking the light bulb icon again.