My Reads

This application keeps track of a user's book selections from a static database on a server. The user may query certain topics and then select books from the search results to appear on one of three shelves on the main page: "Currently Reading", "Want To Read", and "Read". The project was completed using React, with a basic template and server provided by Udacity.

Structure
  • The main page displays the set of books selected. Such books are shown in three sections on the main page, distinguished by whether the user has read, is reading, or will read a given book.
  • The search page provides a section to look up a specific topic (limited to certain queries) and will update results as search items are typed.
  • Books in both the bookshelves page and the search page have associated buttons to add or remove them from bookshelves as well as to toggle between bookshelves.
Design
The main page is composed of three sections for "currently reading", "want to read", and "read".
A sample view of the main page showing three bookshelves with images of book covers, titles, and authors.
You can also add many books to a single section.
A close up view of the 'currently reading' section with many books appearing in the form of book covers with titles and authors.
Selections can be modified by clicking on the arrow item for a single book.
A view of a row of books with the selection tab open for one of the books, providing options for moving that book.
The search page appears in a similar manner. Type in a search option and see the results that appear.
The Blank Database Write Page
Running The Application
To download, you can clone the repository using this terminal command:
git clone https://github.com/wbchristerson/reactnd-project-myreads-starter.git

Alternatively, follow the instructions below to download to a hard drive:
  • Navigate to this page.
  • Click the green "Clone or download" button towards the right then choose "Download ZIP".
  • Find the folder reactnd-project-myreads-starter in your Downloads folder or wherever it was placed on your device.
  • Right click and choose "Extract All"
To run the application, you will need to have npm installed. See here for installation information. Upon downloading both npm and the project directory, install all project dependencies by running the following command from within the project directory:
npm install

Afterwards, start the development server with this command:
npm start

A browser window will open with the main page.