React app using Udacity BooksAPI to track books I've read, want to read, or am reading.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
img
public
src
.gitignore
README.md
SEARCH_TERMS.md
package-lock.json
package.json

README.md

MyReads

This React app tracks books I've read, am reading, or want to read. It was created using Create React App and uses files from Udacity's reactnd-project-myreads-starter. It's the first project for the Udacity React Nanodegree.

Usage

Clone the repository.

git clone https://github.com/wicker/MyReads.git

Install project dependencies and start the dev server.

npm install
npm start

User Interface

The main page displays all books currently on the three shelves:

Currently Reading
Want to Read
Read

A book can be moved from one shelf to another by clicking on the downward arrow icon on each book cover. The move is immediately reflected on the page. There is an additional option on the shelf selection menu to remove a book permanently; if clicked, the book will disappear.

Every displayed book shows a cover (if it exists), the authors (if there are any), and the title. Clicking on the cover image opens a new tab or window with the Google books page.

New books can be added to one of the three shelves by clicking on the green '+' icon at the page's bottom right. This opens the search page.

On the search page, every keystroke updates the returned list of books. Each book contains the same meta information as the main page. Clicking on the downward icon opens the shelf selection menu and allows the user to assign the book to the appropriate shelf.

The user can perform multiple searches and shelf assignments. When finished, the user can leave the search page by clicking on the backward arrow to the left of the search bar.

Screenshots

Main bookshelf display

Search screen

Design Notes

The overall structure of the app

ListBooks
  Bookshelf
    Book
      SelectShelf
SearchBooks
  Book
    SelectShelf

The use of Switch (available in Router 4) means we support two routes and redirect any other requested URLs back to the main page.

('/') ListBooks
('/search') SearchBooks

The BooksAPI calls available are:

get(bookid)
getAll()
update(book, shelf)
search(query)