jayjongcheolpark / MyReads

:books: MyReads is @Udacity React Nanodegree Project. This is a book tracking app allows you to select and categorize books you have read, are currently reading, or want to read. The project emphasizes using React to build the application and provides an API server and client library that it should be persisted information as user’s interacts with the application.

My Reads

This is a book tracking app allows you to select and categorize books you have read, are currently reading, or want to read. The project emphasizes using React to build the application and provides an API server and client library that it should be persisted information as user’s interacts with the application.

Getting Started

Installing

git clone https://github.com/jayjongcheolpark/MyReads.git
cd MyReads
npm install
npm start

Demo

https://jaypark-myreads.netlify.com/

Deployment

npm run build

npm install netlify-cli -g
netlify deploy

Acknowledgments

What's included

Within the download you'll find the following directories and files:

|-- package.json
`-- src
    |-- index.js
    |-- store.js
    |-- App.js
    |-- actions
    |   `-- index.js
    |-- components
    |   |-- Book.js  
    |   |-- BookShelf.js
    |   |-- BookShelfChanger.js
    |   |-- NotFound.js
    |   |-- SearchBar.js
    |   `-- SearchResult.js
    |-- constants
    |   |-- actionTypes.js
    |   `-- shelfTypes.js
    |-- middlewares
    |   `-- sagas.js
    |-- pages
    |   |-- ListBooks.js
    |   `-- Search.js
    |-- reducers
    |   `-- index.js
    |-- styles
    |   |-- App.css
    |   `-- index.css
    `-- utils
        |-- BooksAPI.js
        `-- SearchTerm.js

Functionality (requirements)

In this application, the main page(the root URL)displays a list of "shelves" (i.e. categories), each of which contains a number of books. The three shelves are:

• Currently Reading
• Want to Read
• Read

When you select a different shelf, the book moves there. In search page(/search), you can get the list of books as by your input keywords.

Additional Functionality

Using Redux and Redux-Saga

To use redux and redux-saga is easier to manage state and asynchronous things, more efficient to execute, simple to test, and better at handling failure.

Throttling

Throttling of 300ms is applied to support live search. If not so, ajax call is too frequent.

Autocomplete

This API allows users to use their restricted search keywords. react-autosuggest is added to search a book easily.

Optimistic Update

When fetching book list after changing a book shelf, it upates local state before getting a response to show UI changes immediately.

Deployment

This App is deployed on Netlify

License

A Project starter code contributed by Udacity.