In the MyReads project, I have created a bookshelf app that can be used to search for book titles and store them on different shelves depending on what you are currently reading, what you have read and what you would like to read.

In nutshell, MyReads is a simple cataloging app that allows you to place books in one of three shelves or categories.

• Currently Reading
• Want to Read
• Read

It also allow you to search for books based on title and author.

The project emphasizes using React to build the application and provides an API server and client library that you will use to persist information as you interact with the application.

• Live Demo: https://myreads-stage.herokuapp.com/

Clone the repository, change directories, and use NPM to install the dependencies.

$ git clone https://github.com/YousefKJM/MyReads-A-Book-Traking-React-App.git
$ cd MyReads-A-Book-Traking-React-App
$ npm install

The project can be run with

• npm start

The project can be viewed in the browser at

• http://localhost:3000

├── CONTRIBUTING.md
├── README.md - This file.
├── SEARCH_TERMS.md # The whitelisted short collection of available search terms for you to use with your app.
├── package.json # npm package manager file. It's unlikely that you'll need to modify this.
├── public
│   ├── favicon.ico # React Icon, You may change if you wish.
│   └── index.html # DO NOT MODIFY
└── src
    ├── components
    │   ├── Book.js # Book component is responsible for the display of the book and is where some of the functionality of changing the books state is stored.
    │   ├── BookSearch.js # BookSearch component essentially takes care of all of the search functionality.
    │   ├── BookShelf.js # BookShelf component is much like the ListBooks Component except it takes in all of the books assigned to that book shelf and maps them into the Book component.
    │   └── ListBooks.js # ListBooks component simply is a place to store the three different Shelf components
    ├── App.css # Styles for your app. Feel free to customize this as you desire.
    ├── App.js # This is the root of your app. Contains static HTML right now.
    ├── App.test.js # Used for testing. Provided with Create React App. Testing is encouraged, but not required.
    ├── BooksAPI.js # A JavaScript API for the provided Udacity backend. Instructions for the methods are below.
    ├── icons # Helpful images for your app. Use at your discretion.
    │   ├── add.svg
    │   ├── arrow-back.svg
    │   └── arrow-drop-down.svg
    ├── index.css # Global styles. You probably won't need to change anything here.
    └── index.js # You should not need to modify this file. It is used for DOM rendering only.

To simplify your development process, Udacity in React ND provided a backend server for you to develop against. The provided file BooksAPI.js contains the methods you will need to perform necessary operations on the backend:

• getAll
• update
• search

Method Signature:

getAll();

• Returns a Promise which resolves to a JSON object containing a collection of book objects.
• This collection represents the books currently in the bookshelves in your app.

Method Signature:

update(book, shelf);

• book: <Object> containing at minimum an id attribute
• shelf: <String> contains one of ["wantToRead", "currentlyReading", "read"]
• Returns a Promise which resolves to a JSON object containing the response data of the POST request

Method Signature:

search(query);

• query: <String>
• Returns a Promise which resolves to a JSON object containing a collection of a maximum of 20 book objects.
• These books do not know which shelf they are on. They are raw results only. You'll need to make sure that books have the correct state while on the search page.

The backend API uses a fixed set of cached search results and is limited to a particular set of search terms, which can be found in SEARCH_TERMS.md. That list of terms are the only terms that will work with the backend, so don't be surprised if your searches for Basket Weaving or Bubble Wrap don't come back with any results.

This project was bootstrapped with Create React App. You can find more information on how to perform common tasks here.

This repository is the starter code for all Udacity students. Therefore, we most likely will not accept pull requests.

For details, check out CONTRIBUTING.md.