Book Search

Matthew Chhay's Book Search using the Google Books API. Open Live Preview

Preview

Table of Contents

• Introduction
• Features
• Technologies Used
• Screenshots
• MVP
• Going beyond the MVP
• Issues discovered during development
• Setup
  • For viewing locally and further development
  • For publishing to GitHub Pages after initial setup
• Tools Used
• Project Status
• Room for Improvement

Introduction

An app where a user can search for books from Google Book's API using React JS, React Router and Asynchronous programming.

Features

• Search for books based on search terms from Google's Book database
• Can return up to 40 results on a single page
• Can sort by relevance or newest
• Modal with more information appears after clicking on a result

Technologies Used

• React JavaScript with Create React App
• React Router
• SCSS/CSS
• Google Books API

Screenshots

MVP

• Header container introducing the page
• Form containing text input and search button
• Text input is used as a query and fetches the Google Books API using async/await
• A container of book card components in a grid-like format and responsive on different screen sizes
• BEM convention used appropriately
• Components require styling have its own SCSS file
• Palette uses variables and is stored in a global styles folder
• Iterators are used over loops

Going beyond the MVP

• User can start a search by hitting the enter key or by pressing the search button
• Provide feedback to user when there are no results for a particular query
• A modal appears with more information about a book after clicking on a book card
• Star Rating indicator
• Pages to see other results

Issues discovered during development

• Google Books API totalItems value fluctuates when changing the following query parameters: maxResults, orderBy or startIndex for the same searchInput
• Clicking on the page buttons quickly may continuously loop fetch requests

Setup

For viewing locally and further development

1. Git clone this repo git clone [email protected]:chhaymatt/books.git
2. Run npm install
3. Run npm start

For publishing to GitHub Pages after initial setup

1. Run npm deploy

Tools Used

• Create React App - create a starting React app.
• React Router - for navigating to other modal views in the URL.
• Prettier - to tidy up code in spacing and structure. Get Prettier Extension
• Font Awesome - a library of icons that can be imported easily. Get Font Awesome icons
• Favicon.io - generate a favicon. Generate favicon
• Meta Tags - generate metadata. Generate metadata
• Coolors - colour palette generator. Generate colour palette
• Google Fonts - a library of free fonts. Get Google Fonts

Project Status

Project is ongoing

Room for Improvement

• Address eslint warnings
• Move getData query to a higher level and pass props down rather than up and may try useContext
• Sort by Oldest for the current page