Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/laudep/react-project-bookshelf
Simple Bookshelp app in React
https://github.com/laudep/react-project-bookshelf
react react-router
Last synced: 27 days ago
JSON representation
Simple Bookshelp app in React
- Host: GitHub
- URL: https://github.com/laudep/react-project-bookshelf
- Owner: laudep
- Created: 2018-12-23T14:30:28.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:00:47.000Z (almost 2 years ago)
- Last Synced: 2024-10-10T18:41:21.672Z (about 1 month ago)
- Topics: react, react-router
- Language: JavaScript
- Size: 5.85 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Bookshelf
This project is a bookshelf app that allows users to catalogize books they've
read, are currently reading, or want to read.
The frontend is written in React and the utilizes a demo backend server run by
Udacity.
## Table of Contents
- [Demo](#demo)
- [Installation](#running-the-application)
- [Usage](#using-the-application)
- [Shelves](#shelves)
- [Adding books](#adding-books)
- [Multiple selection](#multiple-selection)
- [Backend server and BooksAPI](#backend-server)
- [`getAll`](#getall)
- [`update`](#update)
- [`search`](#search)
- [Search terms](#search-terms)
- [Create React App](#create-react-app)
## Demo
[](https://travis-ci.org/laudep/react-project-bookshelf)
An online demo can be found here: [react-bookshelf.surge.sh](https://react-bookshelf.surge.sh/)
## Running the application
Make sure to have [Node.js](https://nodejs.org/en/) installed.
Clone the project, install the dependencies and run the development server:
```
git clone https://github.com/laudep/react-project-bookshelf.git
npm install
npm start
```
A new browser window will open automatically.
By default, the app runs in [http://localhost:3000/](http://localhost:3000/).
## Using the application
### Shelves
- Books are sorted into different categories, each of which are displayed on a different 'shelf'.
- Click on the button on the book cover to change a book's category or remove a book from the list.
### Adding books
To add new books click the button on the bottom right of the page.
Enter a search term. Found books can be added using the buttons on the book covers.
### Multiple selection
Click on a book cover to select it. A frame appears around the book.
After selecting one or more books the change multiple button appears at the bottom right.
Using this button multiple books can be changed at once.
Note: The backend API is limited to a particular set of [search terms](SEARCH_TERMS.md)
(see [below](#search-terms) for more information).
## Backend Server
This project utilizes a backend server provided by Udacity.
The file [`BooksAPI.js`](src/BooksAPI.js) contains the methods needed to
perform necessary backend operations
- [`getAll`](#getall)
- [`update`](#update)
- [`search`](#search)
### `getAll`
Method Signature:
```js
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.
### `update`
Method Signature:
```js
update(book, shelf);
```
- book: `` containing at minimum an `id` attribute
- shelf: `` contains one of ["wantToRead", "currentlyReading", "read"]
- Returns a Promise which resolves to a JSON object containing the response data of the POST request
### `search`
Method Signature:
```js
search(query);
```
- query: ``
- 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.
## Search terms
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](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.
## Create React App
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app). You can find more
information on how to perform common tasks [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).