This is a project completed as part of the Udacity React Nanodegree.
This React project uses Create React App to bootstrap the project.
This is a bookshelf app which allows you to select and categorise books into different book shelves - read, currently reading and want to read. You can also search the client library to add new books to your shelves.
The project provides an API server and client library - methods for interacting with the API are detailed below and are used in the code to ensure that your book shelf choices are updated and stored across your interactions with the app.
There are several efforts made to improve the user experience, such as:
- displaying a loading icon whilst data is being retrieved from the client library
- displaying an error message if the app can't retrieve data from the client library
- waiting for the user to stop typing before handling their search query
- using colour to give the user a gentle visual nudge when their search term isn't included in the approved list
-
You'll need to have Node.js and NPM installed on your computer to start the app.
-
First you need to clone this project from Github:
git clone https://github.com/chrisonside/reactnd-project-myreads-starter
-
Now you've cloned the project, simply
cd
into the project directory and runnpm install
to install the dev dependencies. -
Now you can start the development server with
npm start
To simplify the development process, Udacity have provided a backend server to develop against. The provided file BooksAPI.js
contains the methods you needed to perform necessary operations on the backend:
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 anid
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.
The next steps for the app are detailed in the issues section of the GitHub repo.