Merge pull request #8 from StevanFreeborn/master

Deploy master to production

client/package-lock.json

@@ -1,19 +1,25 @@
 {
   "name": "client",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "client",
-      "version": "0.1.0",
+      "version": "1.0.0",
       "dependencies": {
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.5.0",
+        "bootstrap": "^5.1.3",
         "http-proxy-middleware": "^2.0.6",
+        "nth-check": ">=2.0.1",
         "react": "^18.2.0",
+        "react-bootstrap": "^2.4.0",
+        "react-bootstrap-icons": "^1.8.4",
         "react-dom": "^18.2.0",
+        "react-router": "^6.3.0",
+        "react-router-dom": "^6.3.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       },
@@ -2986,6 +2992,57 @@
         }
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.2.0.tgz",
+      "integrity": "sha512-wwJFdkl+Q8NU5yJ4NvdAOqx5LM3QtUVoSjuK7Ey8jZ4WS4bB0EqT3Kr3IInBs257HzZ5nXCiKXKE4NGXXuIRWA==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
+      "integrity": "sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==",
+      "dependencies": {
+        "dequal": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.3.0.tgz",
+      "integrity": "sha512-VRb330/6tDaHAHRkqe0GOawuj+hcZM7Zp5piWk/3AVwW18+0sQxGqqFeiH1ZeEMdn7w+D8bZPaY3QoLTmDKcGg==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@popperjs/core": "^2.11.5",
+        "@react-aria/ssr": "^3.2.0",
+        "@restart/hooks": "^0.4.7",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.2",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3909,6 +3966,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -3970,6 +4035,11 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
+    },
     "node_modules/@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -5181,6 +5251,18 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "node_modules/bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/bootstrap"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.10.2"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -5437,6 +5519,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz",
@@ -6280,6 +6367,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -6416,6 +6511,15 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -8321,6 +8425,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -8681,6 +8793,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -13480,6 +13600,23 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/prop-types-extra/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -13655,6 +13792,46 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-bootstrap": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.4.0.tgz",
+      "integrity": "sha512-dn599jNK1Fg5GGjJH+lQQDwELVzigh/MdusKpB/0el+sCjsO5MZDH5gRMmBjRhC+vb7VlCDr6OXffPIDSkNMLw==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@restart/hooks": "^0.4.6",
+        "@restart/ui": "^1.2.0",
+        "@types/react-transition-group": "^4.4.4",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-bootstrap-icons": {
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/react-bootstrap-icons/-/react-bootstrap-icons-1.8.4.tgz",
+      "integrity": "sha512-PTCQqTLn0AdCy622reNmV+b4PwCPIOA0PFYT3CSfiqw5nwDPGntOm3Pr+ZsMxXD655QAs1nrMm7u0t3+HVxhtQ==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.6"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -13794,6 +13971,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -13802,6 +13984,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "dependencies": {
+        "history": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "dependencies": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -13874,6 +14080,21 @@
         }
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -15506,6 +15727,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -15684,6 +15919,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -18570,6 +18813,43 @@
         "source-map": "^0.7.3"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
+    },
+    "@react-aria/ssr": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.2.0.tgz",
+      "integrity": "sha512-wwJFdkl+Q8NU5yJ4NvdAOqx5LM3QtUVoSjuK7Ey8jZ4WS4bB0EqT3Kr3IInBs257HzZ5nXCiKXKE4NGXXuIRWA==",
+      "requires": {
+        "@babel/runtime": "^7.6.2"
+      }
+    },
+    "@restart/hooks": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
+      "integrity": "sha512-ZbjlEHcG+FQtpDPHd7i4FzNNvJf2enAwZfJbpM8CW7BhmOAbsHpZe3tsHwfQUrBuyrxWqPYp2x5UMnilWcY22A==",
+      "requires": {
+        "dequal": "^2.0.2"
+      }
+    },
+    "@restart/ui": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.3.0.tgz",
+      "integrity": "sha512-VRb330/6tDaHAHRkqe0GOawuj+hcZM7Zp5piWk/3AVwW18+0sQxGqqFeiH1ZeEMdn7w+D8bZPaY3QoLTmDKcGg==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@popperjs/core": "^2.11.5",
+        "@react-aria/ssr": "^3.2.0",
+        "@restart/hooks": "^0.4.7",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.2",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -19262,6 +19542,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -19323,6 +19611,11 @@
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz",
       "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg=="
     },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA=="
+    },
     "@types/ws": {
       "version": "8.5.3",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
@@ -20215,6 +20508,12 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "requires": {}
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -20391,6 +20690,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "clean-css": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.0.tgz",
@@ -20994,6 +21298,11 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
       "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
     },
+    "dequal": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug=="
+    },
     "destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -21100,6 +21409,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -22471,6 +22789,14 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -22735,6 +23061,14 @@
         "side-channel": "^1.0.4"
       }
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -26044,6 +26378,22 @@
         }
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -26161,6 +26511,33 @@
         "whatwg-fetch": "^3.6.2"
       }
     },
+    "react-bootstrap": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.4.0.tgz",
+      "integrity": "sha512-dn599jNK1Fg5GGjJH+lQQDwELVzigh/MdusKpB/0el+sCjsO5MZDH5gRMmBjRhC+vb7VlCDr6OXffPIDSkNMLw==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@restart/hooks": "^0.4.6",
+        "@restart/ui": "^1.2.0",
+        "@types/react-transition-group": "^4.4.4",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
+    "react-bootstrap-icons": {
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/react-bootstrap-icons/-/react-bootstrap-icons-1.8.4.tgz",
+      "integrity": "sha512-PTCQqTLn0AdCy622reNmV+b4PwCPIOA0PFYT3CSfiqw5nwDPGntOm3Pr+ZsMxXD655QAs1nrMm7u0t3+HVxhtQ==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -26266,11 +26643,33 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -26326,6 +26725,17 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -27538,6 +27948,17 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
+    "uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@@ -27673,6 +28094,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

client/package.json

@@ -1,14 +1,19 @@
 {
   "name": "client",
-  "version": "0.1.0",
+  "version": "1.0.0",
-  "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "bootstrap": "^5.1.3",
     "http-proxy-middleware": "^2.0.6",
+    "nth-check": ">=2.0.1",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.4.0",
+    "react-bootstrap-icons": "^1.8.4",
     "react-dom": "^18.2.0",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

client/public/favicon.svg

@@ -0,0 +1,123 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="491.6" height="323.7"><svg version="1.0" id="SvgjsSvg1055" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 491.6 323.7" enable-background="new 0 0 491.6 323.7" xml:space="preserve">
+<g id="SvgjsG1054">
+	<path id="SvgjsPath1053" fill="#912718" d="M54.9,92.9c0,14.6-11.8,27.4-26.9,27.4C15,120.3,0,114,0,92.4V27.3C0,11.8,11.1,0,27.6,0
+		c15.6,0,27.3,11.8,27.3,28.3v6.6h-17v-5.7c0-6.6-4-12.3-10.5-12.3C18.9,17,17,22.8,17,30.8v60.5c0,6.8,2.7,12.1,10.3,12.1
+		c4.7,0,10.6-2.7,10.6-12v-5.8h17L54.9,92.9L54.9,92.9z"></path>
+	<path id="SvgjsPath1052" fill="#912718" d="M68.6,1h27.3c20.1,0,29.9,11.8,29.9,34.7c0,13.6-3.8,23.6-14.6,29.6l18.3,54h-18L95.7,68.8H85.6
+		v50.5h-17L68.6,1L68.6,1z M85.6,53.9h9.6c11.8,0,13.6-6.6,13.6-18.5c0-12-2-18.4-14.5-18.4h-8.8L85.6,53.9L85.6,53.9z"></path>
+	<path id="SvgjsPath1051" fill="#912718" d="M139.9,1h17v118.3h-17V1z"></path>
+	<path id="SvgjsPath1050" fill="#912718" d="M173.4,1h16.3l21.8,62.7h0.3L233.4,1h16.5v118.3h-17v-72h-0.3l-16.8,50.9h-8.5l-16.6-50.9h-0.3
+		v72h-17V1z"></path>
+	<path id="SvgjsPath1049" fill="#912718" d="M266.3,1h17v118.3h-17V1z"></path>
+	<path id="SvgjsPath1048" fill="#912718" d="M299,1h16.3l25.6,71.3h0.3V1h17v118.3h-16l-25.9-71.1H316v71.1h-17V1z"></path>
+	<path id="SvgjsPath1047" fill="#912718" d="M392.3,1h14.1l26.4,118.3h-17l-5-25.4h-23.1l-5,25.4h-17L392.3,1z M399.4,35.1h-0.3L390.8,78
+		h17L399.4,35.1z"></path>
+	<path id="SvgjsPath1046" fill="#912718" d="M441.1,1h17v101.4h33.6v17h-50.5V1z"></path>
+</g>
+<g id="SvgjsG1045">
+	<path id="SvgjsPath1044" d="M5,136.4h16.3L43,199h0.3l21.6-62.7h16.5v118.3h-17v-72h-0.3l-16.8,50.9h-8.5l-16.6-50.9h-0.3v72h-17L5,136.4
+		L5,136.4z"></path>
+	<path id="SvgjsPath1043" d="M97.9,136.4h17v118.3h-17V136.4z"></path>
+	<path id="SvgjsPath1042" d="M130.6,136.4h16.3l25.6,71.3h0.3v-71.3h17v118.3h-16l-25.9-71.1h-0.3v71.1h-17V136.4z"></path>
+	<path id="SvgjsPath1041" d="M205.1,136.4h25.1c19.1,0,29.8,11.5,29.8,30.6v55.3c0,21.9-11.3,32.4-31.2,32.4h-23.6V136.4z M222,238.7h7.8
+		c9.5,0,13.1-4.7,13.1-14.8v-57c0-9.3-3.2-14.6-13.1-14.6H222V238.7z"></path>
+	<path id="SvgjsPath1040" d="M330.7,170.4h-17v-3.8c0-7.8-3.3-14.3-12-14.3c-9.3,0-11.5,7.5-11.5,15.3c0,9.1,0.8,12.3,9.6,15.8l13,5.2
+		c15,5.7,17.8,15.1,17.8,32.4c0,19.9-7.3,34.7-29.3,34.7c-16.5,0-28.9-12.1-28.9-28.1v-6.3h17v5.3c0,6.2,3.3,12.1,12,12.1
+		c11.5,0,12.3-6.8,12.3-17.6c0-12.6-1.5-14.6-9.8-18l-12.1-5c-14.6-6-18.4-15.6-18.4-30.4c0-17.9,9.6-32.4,29.1-32.4
+		c17,0,28.3,13.6,28.3,26.8V170.4z"></path>
+</g>
+<g id="SvgjsG1039">
+	<g id="SvgjsG1038">
+		<path id="SvgjsPath1037" fill="#912718" d="M341.4,135.9h150.3v118.8H341.4V135.9z"></path>
+	</g>
+</g>
+<g id="SvgjsG1036">
+	<path id="SvgjsPath1035" fill="#C8534B" d="M3.7,272h8.2c1.4,0,3.1,0.1,4.2,1.4c0.5,0.7,0.6,1.5,0.6,2c0,1.3-0.6,2-1.2,2.3
+		c-0.1,0.1-0.6,0.3-0.6,0.3c0.6,0.2,2.4,0.8,2.4,3.3c0,1-0.4,2-1.1,2.6c-1.2,1-2.9,1-4.3,1H3.7V272L3.7,272z M5.5,273.5v3.9h6.7
+		c0.6,0,1.2,0,1.7-0.3c0.6-0.3,0.9-1.1,0.9-1.7c0-0.8-0.4-1.3-0.8-1.6c-0.6-0.4-1.4-0.4-2.1-0.4C11.9,273.5,5.5,273.5,5.5,273.5z
+		 M5.5,278.9v4.4h7c0.8,0,1.6,0,2.3-0.6c0.7-0.6,0.7-1.3,0.7-1.6c0-1.1-0.6-1.5-0.8-1.7c-0.7-0.5-1.5-0.5-2.3-0.5L5.5,278.9
+		L5.5,278.9z"></path>
+	<path id="SvgjsPath1034" fill="#C8534B" d="M21.6,272h11.8v1.6h-10v3.8h9.7v1.5h-9.8v4.3h10.5v1.6H21.6L21.6,272L21.6,272z"></path>
+	<path id="SvgjsPath1033" fill="#C8534B" d="M37.6,272h1.8v5.2h9.8V272h1.8v12.8h-1.8v-6.1h-9.8v6.1h-1.8V272z"></path>
+	<path id="SvgjsPath1032" fill="#C8534B" d="M60.3,272h1.9l6.6,12.8h-2.1l-1.6-3.2h-7.9l-1.6,3.2h-2L60.3,272z M61.6,274.8
+		c-0.1-0.2-0.2-0.4-0.3-0.7c-0.1-0.2-0.1-0.3-0.1-0.5c-0.1,0.2-0.1,0.3-0.2,0.5c-0.1,0.2-0.2,0.5-0.3,0.7l-2.7,5.3h6.3L61.6,274.8
+		L61.6,274.8z"></path>
+	<path id="SvgjsPath1031" fill="#C8534B" d="M80.6,272h2l-6,12.8h-1.8L68.5,272h2l4.5,9.5c0.3,0.7,0.4,0.9,0.6,1.6c0.1-0.6,0.2-0.8,0.5-1.4
+		L80.6,272L80.6,272z"></path>
+	<path id="SvgjsPath1030" fill="#C8534B" d="M85,272h1.9v12.8H85V272z"></path>
+	<path id="SvgjsPath1029" fill="#C8534B" d="M106.1,278.6c0,4.4-3.6,6.6-7.7,6.6c-1.9,0-3.8-0.3-5.3-1.4c-1.3-0.9-2.6-2.5-2.6-5.2
+		c0-4.7,3.9-6.9,7.7-6.9C102.8,271.7,106.1,274.4,106.1,278.6L106.1,278.6z M92.4,278.5c0,1,0.3,2.3,1.1,3.3
+		c1.2,1.4,3.1,1.9,4.9,1.9c4.7,0,5.9-3,5.9-5.2c0-3.4-2.7-5.2-6.2-5.2C95.4,273.3,92.4,274.7,92.4,278.5z"></path>
+	<path id="SvgjsPath1028" fill="#C8534B" d="M109.9,272h8.7c1.1,0,2.5,0,3.6,1c0.4,0.4,1.1,1.2,1.1,2.7c0,3.1-2.6,3.5-3.4,3.6l4.7,5.4h-2.4
+		l-4.3-5.1h-6.2v5.1h-1.8L109.9,272L109.9,272z M111.7,273.6v4.6h6.3c1,0,2.3,0,3-1c0.3-0.4,0.4-0.9,0.4-1.4c0-0.5-0.1-1-0.4-1.4
+		c-0.6-0.9-1.5-0.9-2.3-0.9L111.7,273.6L111.7,273.6z"></path>
+	<path id="SvgjsPath1027" fill="#C8534B" d="M132.1,272h1.9l6.6,12.8h-2.1l-1.6-3.2h-7.9l-1.6,3.2h-2L132.1,272L132.1,272z M133.5,274.8
+		c-0.1-0.2-0.2-0.4-0.3-0.7c-0.1-0.2-0.1-0.3-0.1-0.5c-0.1,0.2-0.1,0.3-0.2,0.5c-0.1,0.2-0.2,0.5-0.3,0.7l-2.7,5.3h6.3L133.5,274.8
+		L133.5,274.8z"></path>
+	<path id="SvgjsPath1026" fill="#C8534B" d="M143.1,272h1.8v11.3h8.5v1.6h-10.3V272z"></path>
+	<path id="SvgjsPath1025" fill="#C8534B" d="M168.5,272h1.9l6.6,12.8h-2.1l-1.6-3.2h-7.9l-1.6,3.2h-2L168.5,272L168.5,272z M169.9,274.8
+		c-0.1-0.2-0.2-0.4-0.3-0.7c-0.1-0.2-0.1-0.3-0.1-0.5c-0.1,0.2-0.1,0.3-0.2,0.5c-0.1,0.2-0.2,0.5-0.3,0.7l-2.7,5.3h6.3L169.9,274.8
+		L169.9,274.8z"></path>
+	<path id="SvgjsPath1024" fill="#C8534B" d="M181.3,272l8.6,9.2c0.6,0.7,0.7,0.8,1.4,1.6c-0.1-0.9-0.1-1.1-0.1-1.9V272h1.7v12.8h-1.8
+		l-9.1-9.6c-0.5-0.5-0.6-0.7-1-1.2c0.1,0.9,0.1,1.1,0.1,2.2v8.6h-1.7V272L181.3,272L181.3,272z"></path>
+	<path id="SvgjsPath1023" fill="#C8534B" d="M202.1,272h1.9l6.6,12.8h-2.1l-1.6-3.2h-7.9l-1.6,3.2h-2L202.1,272z M203.5,274.8
+		c-0.1-0.2-0.2-0.4-0.3-0.7c-0.1-0.2-0.1-0.3-0.1-0.5c-0.1,0.2-0.1,0.3-0.2,0.5c-0.1,0.2-0.2,0.5-0.3,0.7l-2.7,5.3h6.3L203.5,274.8
+		L203.5,274.8z"></path>
+	<path id="SvgjsPath1022" fill="#C8534B" d="M213,272h1.8v11.3h8.5v1.6H213V272z"></path>
+	<path id="SvgjsPath1021" fill="#C8534B" d="M223.5,272l4.4,5.6c0.3,0.4,0.4,0.5,0.5,0.9c0.2-0.4,0.2-0.4,0.5-0.8l4.6-5.7h2.3l-6.5,7.9v5
+		h-1.8v-5l-6.4-7.8L223.5,272L223.5,272z"></path>
+	<path id="SvgjsPath1020" fill="#C8534B" d="M238.1,281.6c0.2,0.2,0.4,0.5,0.9,0.8c1.4,1,3.1,1.3,4.8,1.3c2.8,0,4.4-1,4.4-2.6
+		c0-1.8-2-1.9-4.6-2.2c-3.2-0.3-4.3-0.4-5.3-1.3c-0.8-0.7-0.9-1.5-0.9-2.1c0-3.6,4.8-3.7,6-3.7c1.8,0,3.6,0.3,5.1,1.3
+		c0.6,0.4,0.9,0.8,1.3,1.3l-1.7,0.7c-0.3-0.3-0.4-0.5-0.7-0.7c-1.1-0.8-2.6-1.1-4-1.1c-1,0-2.3,0.1-3.1,0.5
+		c-0.9,0.4-1.1,1.1-1.1,1.6c0,0.4,0.1,0.7,0.4,1c0.4,0.5,1.1,0.6,2.3,0.7c1.2,0.1,2.3,0.2,3.5,0.3c0.5,0.1,1.1,0.1,1.7,0.3
+		c1.4,0.3,2.9,1.2,2.9,3.3c0,0.5-0.1,1.3-0.7,2.1c-1,1.4-3,2-5.6,2c-1.1,0-2.4-0.1-3.3-0.4c-2.6-0.7-3.6-2-3.9-2.5L238.1,281.6
+		L238.1,281.6z"></path>
+	<path id="SvgjsPath1019" fill="#C8534B" d="M253.6,272h1.9v12.8h-1.9V272z"></path>
+	<path id="SvgjsPath1018" fill="#C8534B" d="M260.3,281.6c0.2,0.2,0.4,0.5,0.9,0.8c1.4,1,3.1,1.3,4.8,1.3c2.8,0,4.4-1,4.4-2.6
+		c0-1.8-2-1.9-4.6-2.2c-3.2-0.3-4.3-0.4-5.3-1.3c-0.8-0.7-0.9-1.5-0.9-2.1c0-3.6,4.8-3.7,6-3.7c1.8,0,3.6,0.3,5.1,1.3
+		c0.6,0.4,0.9,0.8,1.3,1.3l-1.7,0.7c-0.3-0.3-0.4-0.5-0.7-0.7c-1.1-0.8-2.6-1.1-4-1.1c-1,0-2.3,0.1-3.1,0.5
+		c-0.9,0.4-1.1,1.1-1.1,1.6c0,0.4,0.1,0.7,0.4,1c0.4,0.5,1.1,0.6,2.3,0.7c1.2,0.1,2.3,0.2,3.5,0.3c0.5,0.1,1.1,0.1,1.7,0.3
+		c1.4,0.3,2.9,1.2,2.9,3.3c0,0.5-0.1,1.3-0.7,2.1c-1,1.4-3,2-5.6,2c-1.1,0-2.4-0.1-3.3-0.4c-2.6-0.7-3.6-2-3.9-2.5L260.3,281.6
+		L260.3,281.6z"></path>
+	<path id="SvgjsPath1017" fill="#C8534B" d="M285,272v7.6c0,1.5,0.2,2.4,1.3,3.1c0.5,0.3,1.5,0.9,3.5,0.9c1.2,0,2.3-0.2,3-0.6
+		c1.7-0.7,1.7-2.1,1.7-3.1V272h1.8v7.7c0,1.3,0,3.1-2,4.3c-0.9,0.6-2.3,1.1-4.6,1.1c-1.7,0-3.4-0.3-4.7-1.2
+		c-1.8-1.3-1.9-2.9-1.9-4.4V272L285,272L285,272z"></path>
+	<path id="SvgjsPath1016" fill="#C8534B" d="M303,272l8.6,9.2c0.6,0.7,0.7,0.8,1.4,1.6c-0.1-0.9-0.1-1.1-0.1-1.9V272h1.7v12.8h-1.8
+		l-9.1-9.6c-0.5-0.5-0.6-0.7-1-1.2c0.1,0.9,0.1,1.1,0.1,2.2v8.6h-1.7V272L303,272L303,272z"></path>
+	<path id="SvgjsPath1015" fill="#C8534B" d="M319.4,272h1.9v12.8h-1.9V272z"></path>
+	<path id="SvgjsPath1014" fill="#C8534B" d="M324,272h12.3v1.5H331v11.3h-1.8v-11.3H324L324,272L324,272z"></path>
+</g>
+<g id="SvgjsG1013">
+	<g id="SvgjsG1012">
+		<path id="SvgjsPath1011" d="M6.7,311v12.7H3.1v-27h17.3v3.2H6.7v8h12.8v3.1L6.7,311L6.7,311z"></path>
+		<path id="SvgjsPath1010" d="M26.5,296.7h11.1c1.6,0,2.5,0,3.6,0.2c2.7,0.5,6,2.5,6,6.7c0,3.3-2.1,5.2-4.1,5.9c1,0.3,5,1.5,5,6.8
+			c0,1.3-0.2,4.2-3.1,6c-2.1,1.4-4,1.4-8,1.4H26.5L26.5,296.7L26.5,296.7z M29.9,299.9v8.2h5.6c4.1,0,6,0,7.2-1.8
+			c0.5-0.7,0.7-1.6,0.7-2.4c0-3.9-3.7-3.9-5.2-3.9L29.9,299.9L29.9,299.9z M29.9,311.1v9.4h8c1.9,0,2.6,0,3.3-0.2
+			c2.3-0.5,3.1-2.2,3.1-4.3c0-3.1-2.3-4.2-2.6-4.3c-1.1-0.5-1.9-0.5-5.2-0.5L29.9,311.1L29.9,311.1z"></path>
+		<path id="SvgjsPath1009" d="M59.6,296.7v27H56v-27H59.6z"></path>
+	</g>
+</g>
+<g id="SvgjsG1008">
+	<path id="SvgjsPath1007" d="M380.1,284.3c-0.6,0.3-2,0.9-4.4,0.9c-4.7,0-8-2.6-8-6.5c0-1.4,0.4-2.8,1.2-4c0.4-0.5,1-1.1,1.7-1.6
+		c1.5-1,3.3-1.4,5.1-1.4c4.6,0,7.9,2.7,7.9,6.7c0,2.7-1.3,4-2.1,4.8l2.5,1.4l-0.9,1.3L380.1,284.3z M370.6,275.3
+		c-0.6,0.8-1,1.9-1,3.2c0,3.2,2.3,5.2,6.2,5.2c5.1,0,6.1-3.2,6.1-5.2c0-3.2-2.5-5.3-6.3-5.2C373.4,273.3,371.6,274,370.6,275.3z"></path>
+	<path id="SvgjsPath1006" d="M389.3,272v7.6c0,1.5,0.2,2.4,1.3,3.1c0.5,0.3,1.5,0.9,3.5,0.9c1.2,0,2.3-0.2,3-0.6c1.7-0.7,1.7-2.1,1.7-3.1
+		V272h1.8v7.7c0,1.3,0,3.1-2,4.3c-0.9,0.6-2.3,1.1-4.6,1.1c-1.7,0-3.4-0.3-4.7-1.2c-1.8-1.3-1.9-2.9-1.9-4.4V272L389.3,272
+		L389.3,272z"></path>
+	<path id="SvgjsPath1005" d="M409.3,272h1.9l6.6,12.8h-2.1l-1.6-3.2h-7.9l-1.6,3.2h-2L409.3,272L409.3,272z M410.7,274.8
+		c-0.1-0.2-0.2-0.4-0.3-0.7c-0.1-0.2-0.1-0.3-0.1-0.5c-0.1,0.2-0.1,0.3-0.2,0.5c-0.1,0.2-0.2,0.5-0.3,0.7l-2.7,5.3h6.3L410.7,274.8
+		L410.7,274.8z"></path>
+	<path id="SvgjsPath1004" d="M422.2,272l8.6,9.2c0.6,0.7,0.7,0.8,1.4,1.6c-0.1-0.9-0.1-1.1-0.1-1.9V272h1.7v12.8H432l-9.1-9.6
+		c-0.5-0.5-0.6-0.7-1-1.2c0.1,0.9,0.1,1.1,0.1,2.2v8.6h-1.7V272L422.2,272L422.2,272z"></path>
+	<path id="SvgjsPath1003" d="M436.5,272h12.3v1.5h-5.2v11.3h-1.8v-11.3h-5.2V272z"></path>
+	<path id="SvgjsPath1002" d="M451.6,272h1.9v12.8h-1.9V272z"></path>
+	<path id="SvgjsPath1001" d="M472.4,281.3c-0.5,0.9-1,1.7-2.3,2.5c-1.6,1-3.6,1.3-5.2,1.3c-5.2,0-7.8-3-7.8-6.8c0-3,1.5-4.4,2.4-5.1
+		c0.5-0.4,2.1-1.6,5.4-1.6c0.9,0,3.2,0.1,4.9,1.2c1.4,0.9,2,1.9,2.3,2.5l-2,0.4c-0.3-0.5-0.6-1.1-1.4-1.6c-0.8-0.5-2.2-1-3.8-1
+		c-3.1,0-5.9,1.4-5.9,5c0,1.3,0.4,2.6,1.3,3.7c0.9,0.9,2.4,1.6,4.7,1.6c2,0,3.3-0.5,4.1-1.1c0.7-0.5,1.1-1.2,1.3-1.5L472.4,281.3
+		L472.4,281.3z"></path>
+	<path id="SvgjsPath1000" d="M490.6,278.6c0,4.4-3.6,6.6-7.7,6.6c-1.9,0-3.8-0.3-5.3-1.4c-1.3-0.9-2.6-2.5-2.6-5.2c0-4.7,3.9-6.9,7.7-6.9
+		C487.3,271.7,490.6,274.4,490.6,278.6L490.6,278.6z M476.9,278.5c0,1,0.3,2.3,1.1,3.3c1.2,1.4,3.1,1.9,4.9,1.9c4.7,0,5.9-3,5.9-5.2
+		c0-3.4-2.7-5.2-6.2-5.2C479.9,273.3,476.9,274.7,476.9,278.5z"></path>
+</g>
+</svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+</style></svg>

client/public/index.html

@@ -1,14 +1,34 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
 
-    <title>React App</title>
+    <meta charset="utf-8" />
+
+    <link 
+      rel="icon" 
+      type="image/svg+xml" h
+      ref="%PUBLIC_URL%/favicon.svg"
+    >
+    
+    <link 
+      rel="icon" 
+      type="image/png" 
+      href="%PUBLIC_URL%/favicon.png"
+    >
+    
+    <meta 
+      name="viewport" 
+      content="width=device-width, initial-scale=1" 
+    />
+
+    <title>criminalmindsapi</title>
+
   </head>
+
   <body>
+
       <div id="root"></div>
+
   </body>
+
 </html>

client/public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

client/src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

client/src/App.js

@@ -1,65 +1,22 @@
-import React, { Component } from 'react';
+import React from 'react';
+import { Routes, Route } from 'react-router-dom';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './styles/app.css';
 
-export default class App extends Component {
+import NavBar from './components/navbar';
+import Home from './pages/home';
+import About from './pages/about';
+import Footer from './components/footer';
 
-    constructor(props) {
+export default function App() {
-        super(props);
-        this.state = { forecasts: [], loading: true };
-    }
-
-    componentDidMount() {
-        this.populateWeatherData();
-    }
-
-    static renderForecastsTable(forecasts) {
     return (
-            <table className='table table-striped' aria-labelledby="tabelLabel">
+        <div className='d-flex flex-column min-vh-100'>
-                <thead>
+            <NavBar/>
-                    <tr>
+            <Routes>
-                        <th>Date</th>
+                <Route path='/' element={<Home/>}/>
-                        <th>Temp. (C)</th>
+                <Route path='/About' element={<About/>}/>
-                        <th>Temp. (F)</th>
+            </Routes>
-                        <th>Summary</th>
+            <Footer/>
-                    </tr>
-                </thead>
-                <tbody>
-                    {forecasts.map(forecast =>
-                        <tr key={forecast.date}>
-                            <td>{forecast.date}</td>
-                            <td>{forecast.temperatureC}</td>
-                            <td>{forecast.temperatureF}</td>
-                            <td>{forecast.summary}</td>
-                        </tr>
-                    )}
-                </tbody>
-            </table>
-        );
-    }
-
-    render() {
-        let contents = this.state.loading
-            ? <p><em>Loading... Please refresh once the ASP.NET backend has started. See <a href="https://aka.ms/jspsintegrationreact">https://aka.ms/jspsintegrationreact</a> for more details.</em></p>
-            : App.renderForecastsTable(this.state.forecasts);
-
-        return (
-            <div>
-                <h1 id="tabelLabel" >Weather forecast</h1>
-                <p>This component demonstrates fetching data from the server.</p>
-                {contents}
         </div>
     );
-    }
-
-    async populateWeatherData() {
-
-        let url = '/api/seasons';
-
-        if (process.env.NODE_ENV === 'production') {
-            url = 'https://criminalmindsapi.azurewebsites.net' + url;
-        }
-
-        const response = await fetch(url);
-        const data = await response.json();
-        this.setState({ forecasts: data, loading: false });
-    }
 }

client/src/components/cardHolder.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+
+export default function CardHolder(props) {
+
+    return(
+        <Container fluid className="bg-dark">
+            <Row className="d-flex flex-row justify-content-center align-items-center py-3">
+                {props.children}
+            </Row>
+        </Container>
+    );
+
+}

client/src/components/characterCard.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Card from 'react-bootstrap/Card';
+
+export default function CharacterCard(props) {
+    
+    const characterName = props.character.fullName;
+    const image = new URL(props.character.image).pathname;
+    
+    return(
+
+        <Card style={{ width: '22rem' }} className='p-1 m-3'>
+            <Card.Img variant='top' src={image} width='100%' />
+            <Card.Body>
+                <Card.Title>{characterName}</Card.Title>
+                <Card.Text>
+                    Some quick example text to build on the card title and make up the
+                    bulk of the card's content.
+                </Card.Text>
+            </Card.Body>
+        </Card>
+
+    );
+}

client/src/components/footer.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Github } from 'react-bootstrap-icons';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+export default function Footer() {
+    return (
+        <footer className='mt-auto py-3'>
+            <Container>
+
+                <hr/>
+            
+                <Row>
+
+                    <Col className='text-start'>
+                        <span>
+                            <span className='highlight'>criminal</span>mindsapi &#169; 2022
+                        </span>
+                    </Col>
+
+                    <Col className='text-end'>
+                        <a
+                            className='text-dark'
+                            href='https://github.com/StevanFreeborn/criminalmindsapi'
+                            target='_blank'
+                            rel="noreferrer"
+                        >
+                            <Github size={25} />
+                        </a>
+                    </Col>
+
+                </Row>
+
+            </Container>
+        </footer>
+    )
+}

client/src/components/greeting.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+export default function Greeting() {
+
+    return (
+        <Container>
+
+            <Row className='py-5'>
+
+                <Col className='text-center'>
+
+                    <h1>
+                        The <span className='highlight'>Criminal</span> Minds API
+                    </h1>
+
+                    <p>
+                        Checkout the <a href='https://criminalmindsapi.azurewebsites.net' rel='noreferrer' target='_blank' className='highlight'>documentation</a>.
+                    </p>
+
+                </Col>
+
+            </Row>
+            
+        </Container>
+    );
+
+}

client/src/components/navbar.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import Navbar from 'react-bootstrap/Navbar';
+import Nav from 'react-bootstrap/Nav';
+import { NavLink } from 'react-router-dom';
+import Container from 'react-bootstrap/Container';
+
+export default function NavBar() {
+
+    return (
+        <Navbar
+            expand='sm'
+            variant='light'
+        >
+            <Container fluid className='mt-2'>
+
+                <Navbar.Brand
+                    href='/'
+                    className='p-0 my-auto'
+                >
+                    <img 
+                        src='/favicon.svg'
+                        alt='logo'
+                        width='60'
+                        height='100%'
+                    />
+                </Navbar.Brand>
+
+                <Navbar.Toggle aria-controls='basic-navbar-nav'/>
+                
+                <Navbar.Collapse>
+
+                    <Nav className='ms-auto'>
+
+                        <NavLink
+                            to='/'
+                            className='nav-link link-dark'
+                        >
+                            Home
+                        </NavLink>
+
+                        <NavLink
+                            to='/About'
+                            className='nav-link link-dark'
+                        >
+                            About
+                        </NavLink>
+
+                        <a
+                            href='https://criminalmindsapi.azurewebsites.net'
+                            rel='noreferrer'
+                            target='_blank'
+                            className='nav-link link-dark'
+                        >
+                            Documentation
+                        </a>
+
+                    </Nav>
+
+                </Navbar.Collapse>
+
+            </Container>
+            
+        </Navbar>
+    )
+
+}

client/src/constants.js

@@ -0,0 +1,12 @@
+const baseUrl = process.env.NODE_ENV === 'development' ?
+    '' :
+    'http://criminalmindsapi.azurewebsites.net';
+
+const versionHeader = 'x-api-version';
+const versionHeaderValue = 1;
+
+export {
+    baseUrl,
+    versionHeader,
+    versionHeaderValue
+};

client/src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

client/src/index.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
+import { BrowserRouter } from 'react-router-dom';
-import App from './App';
+import App from './app';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
+
 root.render(
   <React.StrictMode>
+    <BrowserRouter>
       <App />
+    </BrowserRouter>
   </React.StrictMode>
 );
 

client/src/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

client/src/pages/about.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function About() {
+    return (
+        <h1>About</h1>
+    );
+}

client/src/pages/home.js

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react';
+
+import Greeting from '../components/greeting';
+import CardHolder from '../components/cardHolder';
+import CharacterCard from '../components/characterCard';
+
+import CharacterService from '../services/characterService';
+const characterService = new CharacterService();
+
+export default function Home() {
+
+    const [characters, setCharacters] = useState([]);
+
+    const getCharacters = async () => {
+
+        const res = await characterService.getCharacters();
+        
+        const characters = await res.json();
+
+        return setCharacters(characters);
+
+    }
+
+    useEffect(() => {
+        getCharacters();
+    }, []);
+
+    const getCharacterCards = () => {
+
+        return characters.map(character => {
+
+            return (
+
+                <CharacterCard 
+                    character={character}
+                />
+
+            );
+
+        })
+
+    }
+
+    return (
+        <>
+            <Greeting/>
+            <CardHolder>
+                {getCharacterCards()}
+            </CardHolder>
+        </>
+    );
+}

client/src/services/characterService.js

@@ -0,0 +1,19 @@
+import { baseUrl, versionHeader, versionHeaderValue } from '../constants';
+
+class CharacterService {
+
+    getCharacters = async () => {
+
+        const res = await fetch(`${baseUrl}/api/characters`, {
+            headers: {
+                [versionHeader]: versionHeaderValue
+            }
+        });
+
+        return res;
+
+    }
+
+}
+
+export default CharacterService;

client/src/setupProxy.js

@@ -1,7 +1,10 @@
 const { createProxyMiddleware } = require('http-proxy-middleware');
 
 const context = [
-    '/api/seasons'
+    '/api/seasons',
+    '/api/characters',
+    '/api/quotes',
+    '/api/episodes'
 ];
 
 module.exports = function (app) {

client/src/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

client/src/styles/app.css

@@ -0,0 +1,17 @@
+/* Bootstrap Overrides */
+.navbar-toggler {
+    border: none;
+}
+
+.navbar-toggler:focus,
+.navbar-toggler:active:focus {
+
+    box-shadow: none;
+
+}
+
+/* App Specific */
+
+.highlight {
+    color: #912718;
+}