add and implement react-star-ratings library

app/package-lock.json

@@ -3383,6 +3383,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -12931,6 +12936,25 @@
         "shallowequal": "^1.0.1"
       }
     },
+    "react-star-rating-component": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/react-star-rating-component/-/react-star-rating-component-1.4.1.tgz",
+      "integrity": "sha512-i0YEvQzToS0s0GDkxn01Jy4EeLpVEyh023NXJTJ+/1+xkvhpACyD4d1YeBhYWZab53ppUnUxs5gmp75gJr3khA==",
+      "requires": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.6.1"
+      }
+    },
+    "react-star-ratings": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-star-ratings/-/react-star-ratings-2.3.0.tgz",
+      "integrity": "sha512-34Z/oFNDRRn4ZcX7F3t9ccnpo7SQ32gD/vsusQOBc6B6vlqaGR6tke1/Yx3jTDjemKRSmXqhKgpPTR7/JAXq6A==",
+      "requires": {
+        "classnames": "^2.2.1",
+        "prop-types": "^15.6.0",
+        "react": "^16.1.0"
+      }
+    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",

app/package.json

@@ -18,7 +18,9 @@
     "prop-types": "^15.7.2",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
-    "react-helmet": "^5.2.1"
+    "react-helmet": "^5.2.1",
+    "react-star-rating-component": "^1.4.1",
+    "react-star-ratings": "^2.3.0"
   },
   "devDependencies": {
     "prettier": "^1.18.2",

app/src/components/bookcard.js

@@ -1,14 +1,22 @@
 import { Link } from "gatsby"
 import PropTypes from "prop-types"
 import React from "react"
+import StarRatings from 'react-star-ratings';
 
 const BookCard = ({ book }) => (
     <div key={book.id} class="w-56 rounded overflow-hidden shadow-lg m-3">
     <img class="w-full" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1414347376l/18050143.jpg" alt="Sunset in the mountains" />
     <div class="px-6 py-4">
       <div class="font-bold text-xl mb-0">{ book.title }</div>
-      <p className="text-gray-700 font-bold text-sm mb-1">
+      <p className="text-gray-700 font-bold text-base mb-1">
-        { book.year } | { book.rating }
+        <span className="mr-2 align-middle">{ book.year }</span> 
+        <StarRatings 
+          rating={ parseFloat(book.rating) }
+          numberOfStars={5}
+          starDimension="18px"
+          starSpacing="1px"
+          starRatedColor="#fa604a"
+        />
       </p>
       <p class="text-gray-700 text-base">
         { book.author }