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.
git clone https://github.com/jayjongcheolpark/MyReads.git
cd MyReads
npm install
npm start
https://jaypark-myreads.netlify.com/
npm run build
npm install netlify-cli -g
netlify deploy
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
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.
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 of 300ms is applied to support live search. If not so, ajax call is too frequent.
This API allows users to use their restricted search keywords. react-autosuggest is added to search a book easily.
When fetching book list after changing a book shelf, it upates local state before getting a response to show UI changes immediately.
This App is deployed on Netlify
A Project starter code contributed by Udacity.