reactnd-project-myreads

This is a myreads website project for Udacity’s React Nanodegree. The bookshelf 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.

Table of contents

• Demo
• Download
• Quick Start
• Documentation
• Copyright and License

Demo

For a demo, check out https://sujinlee-reactnd-project.firebaseapp.com/

Quick Start

To run locally:

git clone https://github.com/sujinleeme/reactnd-project-myreads.git
cd reactnd-project-myreads
npm install
npm start

To get started developing right away:

install all project dependencies with npm install
start the development server with npm start or yarn start

To build & deploy on firebase:

npm run build && npm run deploy

• Add API keys to ./src/firebaseKey file, your .firebaseKey file should like something like this:

const firebaseKey = {
  apiKey: yours
  authDomain: yours,
  databaseURL: yours,
  projectId: yours,
  storageBucket: yours,
  messagingSenderId: yours
};
export default firebaseKey;

Documentation

What's included

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

|-- package.json
`-- src
    |-- App.js
    |-- App.test.js
    |-- Component
    |   |-- Autocomplete
    |   |   |-- Autocomplete.js
    |   |   |-- AutocompleteItem.js
    |   |   `-- SearchInput.js    
    |   |-- BookShelf
    |   |   |-- BookDetailButton.js
    |   |   |-- BookShelfContainer.js
    |   |   `-- BookShelfItem.js
    |   |-- MyBookList
    |   |   `-- MyBookList.js
    |   |-- Notification
    |   |   `-- Info.js
    |   `-- Search
    |       `-- SearchBooks.js
    |-- fire.js 
    |-- icons
    |-- index.css
    |-- index.js
    |-- style
    |   `-- App.css
    `-- utils
        |-- BooksAPI.js
        |-- ClickOutsideBehavior.js
        |-- Common.js
        `-- SearchKeywords.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

React autocomplete component

Autocomplete, or word completion, is a feature that I created additionally, in which an application predicts the rest of a book category a user is typing. Here is the whitelisted short collection of available search terms in starter repo.

This feature isn't completed yet. Later, I will improve slightly as following #issue. (Aug. 31. 2017)

Hosting React app with Firebase hosting

The app runs on live Firebase server now.

Copyright and License

A Project starter code contributed by Udacity.