Goodreads-Book-Search React App with a Node server on Heroku

A minimal example of using a Node backend (server for API, proxy, & routing) with a React frontend. This application uses goodreads api to look for books by title, author or isbn code.

This project is deployed live at https://still-garden-60707.herokuapp.com/

Homepage

Search Result Page

Book Description Page

To deploy a frontend-only React app, use the static-site optimized
▶️ create-react-app-buildpack

⤵️ Switching from create-react-app-buildpack?

Design Points

A combo of two npm projects, the backend server and the frontend UI. So there are two package.json configs and thereforce two places to run npm commands:

1. Node server: ./package.json
   • deployed automatically via heroku/nodejs buildpack
2. React UI: react-ui/package.json
   • generated by create-react-app
   • deployed via build script in the Node server's ./package.json
   • module cache configured by cacheDirectories

Includes a minimal Node Cluster implementation to parallelize the single-threaded Node process across the available CPU cores.

Demo

Demo deployment: example API call from the React UI is fetched with a relative URL that is served by an Express handler in the Node server.

Deploy to Heroku

git clone https://github.com/ShubhamAnand/goodreadsreact.git
cd goodreadsreact/
heroku create
git push heroku master

This deployment will automatically:

• detect Node buildpack
• build the app with
  • npm install for the Node server
  • npm run build for create-react-app
• launch the web process with npm start
  • serves ../react-ui/build/ as static files
  • customize by adding API, proxy, or route handlers/redirectors

⚠️ Using npm 5’s new package-lock.json? We resolved a compatibility issue. See PR for more details.

👓 More about deploying to Heroku.

Switching from create-react-app-buildpack

If an app was previously deployed with create-react-app-buildpack, then a few steps are required to migrate the app to this architecture:

1. Remove create-react-app-buildpack from the app; heroku/nodejs buildpack will be automatically activated

   heroku buildpacks:clear

2. Move the root React app files (including dotfiles) into a react-ui/ subdirectory

   mkdir react-ui
   git mv -k [!react-ui]* react-ui/
   mv node_modules react-ui/
   
   # If you see "fatal: Not a git repository", then fix that error
   mv react-ui/.git ./

   ⚠️ Some folks have reported problems with these commands. Using the bash shell will probably allow them to work. Sorry if they do not work for you, know that the point is to move everything in the repo into the react-ui/ subdirectory. Except for .git/ which should remain at the root level. 

3. Create a root package.json, server/, & .gitignore modeled after the code in this repo

4. Commit and deploy ♻️

   git add -A
   git commit -m 'Migrate from create-react-app-buildpack to Node server'
   git push heroku master

Local Development

Because this app is made of two npm projects, there are two places to run npm commands:

1. Node API server at the root ./
2. React UI in react-ui/ directory.

Run the API server

In a terminal:

# Initial setup
npm install

# Start the server
npm start

Install new npm packages for Node

npm install package-name --save

Run the React UI

Prerequisites: You need to have Node + NPM installed.

Required Environment Variables:

REACT_APP_API_KEY : Goodreads API Key you can get from here.

Save it in the .env file as described here

Having done that, here is how to run the application locally in development mode.

The React app is configured to proxy backend requests to the local Node server. (See "proxy" config)

In a separate terminal from the API server, start the UI:

Install new npm packages for React UI

# Always change directory, first
cd react-ui/

npm install package-name --save


# Building the application:

To build the production assets, run

    npm run build

# Testing the App:

Right now there is only one test suite. (renders without crashing)

    npm test
    

Features In Current Version:

1. Search for books by title, author, or ISBN.
2. Resets Search Query using Reset Option provided.
3. Displays up to 20 search results in Material UI cards.
4. Displays title, author, and link to Goodreads page.
5. See the description and rating of the book and brief details about the book by clicking on an individual result.
6. Single Page Application with extensive caching, so application loads very fast post the first load.

Future Implementation in more time:

Some of the things that re left out due to time constraints but I will add them in future are:

1. Writing Snapshot & Unit Tests for all components using Jest & Enzyme with >80% functional coverage
2. Ability to login to the Application using Single Sign in.
3. Save favorite books by creating a like icon for the personalized list of book for logged in user.
4. Ability to follow author & provide notifications to the user on the latest books from followed Author.
5. Better Responsive Support for Mobile devices & Adding fractional support for reviews.