Chap06 -> Reducing boilerplate code with React Hook From -> Implementing the answer form

Chap06 -> Reducing boilerplate code with React Hook Form -> Implementing the ask form
Chap06 -> Reducing boilerplate code with React Hook Form -> Creating from styled components
2022-03-31 11:16:30 +11:00 · 2022-03-30 23:51:10 +11:00 · 2022-03-30 23:21:13 +11:00 · 2022-03-30 22:55:50 +11:00 · 2022-03-30 22:37:41 +11:00 · 2022-03-30 22:36:10 +11:00
22 changed files with 1170 additions and 88 deletions
--- a/QandA/frontend/package-lock.json
+++ b/QandA/frontend/package-lock.json
@ -8,6 +8,8 @@
      "name": "frontend",
      "version": "0.1.0",
      "dependencies": {
+        "@emotion/react": "^11.8.2",
+        "@emotion/styled": "^11.8.1",
        "@testing-library/jest-dom": "^5.16.2",
        "@testing-library/react": "^12.1.4",
        "@testing-library/user-event": "^13.5.0",
@ -15,8 +17,11 @@
        "@types/node": "^16.11.26",
        "@types/react": "^17.0.41",
        "@types/react-dom": "^17.0.14",
+        "history": "^5.3.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
+        "react-hook-form": "^7.29.0",
+        "react-router-dom": "^6.2.2",
        "react-scripts": "5.0.0",
        "typescript": "^4.6.2",
        "web-vitals": "^2.1.4"
@ -1980,6 +1985,177 @@
        "postcss": "^8.3"
      }
    },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.7.2",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
+      "integrity": "sha512-6mGSCWi9UzXut/ZAN6lGFu33wGR3SJisNl3c0tvlmb8XChH1b2SUvxvnOh7hvLpqyRdHHU9AiazV3Cwbk5SXKQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/plugin-syntax-jsx": "^7.12.13",
+        "@babel/runtime": "^7.13.10",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.5",
+        "@emotion/serialize": "^1.0.2",
+        "babel-plugin-macros": "^2.6.1",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.0.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/babel-plugin-macros": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/cosmiconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
+      "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
+      "dependencies": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.1.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "4.0.13"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz",
+      "integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.8.2",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.8.2.tgz",
+      "integrity": "sha512-+1bcHBaNJv5nkIIgnGKVsie3otS0wF9f1T1hteF3WeVvMNQEtfZ4YyFpnphGoot3ilU/wWMgP2SgIDuHLE/wAA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/cache": "^11.7.1",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/utils": "^1.1.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
+      "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
+      "dependencies": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
+      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.8.1.tgz",
+      "integrity": "sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/is-prop-valid": "^1.1.2",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/utils": "^1.1.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz",
+      "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
    "node_modules/@eslint/eslintrc": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.1.tgz",
@ -7493,6 +7669,11 @@
        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
      }
    },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
    "node_modules/find-up": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@ -8041,6 +8222,27 @@
        "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/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/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/hoopy": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -13331,6 +13533,21 @@
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
      "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
    },
+    "node_modules/react-hook-form": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.29.0.tgz",
+      "integrity": "sha512-NcJqWRF6el5HMW30fqZRt27s+lorvlCCDbTpAyHoodQeYWXgQCvZJJQLC1kRMKdrJknVH0NIg3At6TUzlZJFOQ==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
    "node_modules/react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -13344,6 +13561,30 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-router": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz",
+      "integrity": "sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==",
+      "dependencies": {
+        "history": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz",
+      "integrity": "sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==",
+      "dependencies": {
+        "history": "^5.2.0",
+        "react-router": "6.2.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
    "node_modules/react-scripts": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@ -14493,6 +14734,11 @@
        "postcss": "^8.2.15"
      }
    },
+    "node_modules/stylis": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+    },
    "node_modules/supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@ -17504,6 +17750,142 @@
        "postcss-value-parser": "^4.2.0"
      }
    },
+    "@emotion/babel-plugin": {
+      "version": "11.7.2",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
+      "integrity": "sha512-6mGSCWi9UzXut/ZAN6lGFu33wGR3SJisNl3c0tvlmb8XChH1b2SUvxvnOh7hvLpqyRdHHU9AiazV3Cwbk5SXKQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/plugin-syntax-jsx": "^7.12.13",
+        "@babel/runtime": "^7.13.10",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.5",
+        "@emotion/serialize": "^1.0.2",
+        "babel-plugin-macros": "^2.6.1",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.0.13"
+      },
+      "dependencies": {
+        "babel-plugin-macros": {
+          "version": "2.8.0",
+          "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+          "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+          "requires": {
+            "@babel/runtime": "^7.7.2",
+            "cosmiconfig": "^6.0.0",
+            "resolve": "^1.12.0"
+          }
+        },
+        "cosmiconfig": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.1.0",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.7.2"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        }
+      }
+    },
+    "@emotion/cache": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
+      "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.1.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "4.0.13"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/is-prop-valid": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz",
+      "integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "@emotion/react": {
+      "version": "11.8.2",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.8.2.tgz",
+      "integrity": "sha512-+1bcHBaNJv5nkIIgnGKVsie3otS0wF9f1T1hteF3WeVvMNQEtfZ4YyFpnphGoot3ilU/wWMgP2SgIDuHLE/wAA==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/cache": "^11.7.1",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/utils": "^1.1.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
+      "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
+      "requires": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
+      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
+    },
+    "@emotion/styled": {
+      "version": "11.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.8.1.tgz",
+      "integrity": "sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/is-prop-valid": "^1.1.2",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/utils": "^1.1.0"
+      }
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz",
+      "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
    "@eslint/eslintrc": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.1.tgz",
@ -21562,6 +21944,11 @@
        "pkg-dir": "^4.1.0"
      }
    },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
    "find-up": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@ -21929,6 +22316,29 @@
      "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"
+      }
+    },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.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=="
+        }
+      }
+    },
    "hoopy": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -25608,6 +26018,12 @@
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz",
      "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA=="
    },
+    "react-hook-form": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.29.0.tgz",
+      "integrity": "sha512-NcJqWRF6el5HMW30fqZRt27s+lorvlCCDbTpAyHoodQeYWXgQCvZJJQLC1kRMKdrJknVH0NIg3At6TUzlZJFOQ==",
+      "requires": {}
+    },
    "react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@ -25618,6 +26034,23 @@
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
      "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
    },
+    "react-router": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz",
+      "integrity": "sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz",
+      "integrity": "sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.2.2"
+      }
+    },
    "react-scripts": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@ -26468,6 +26901,11 @@
        "postcss-selector-parser": "^6.0.4"
      }
    },
+    "stylis": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+    },
    "supports-color": {
      "version": "5.5.0",
      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
--- a/QandA/frontend/package.json
+++ b/QandA/frontend/package.json
@ -3,6 +3,8 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
@ -10,8 +12,11 @@
    "@types/node": "^16.11.26",
    "@types/react": "^17.0.41",
    "@types/react-dom": "^17.0.14",
+    "history": "^5.3.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
+    "react-hook-form": "^7.29.0",
+    "react-router-dom": "^6.2.2",
    "react-scripts": "5.0.0",
    "typescript": "^4.6.2",
    "web-vitals": "^2.1.4"
--- a/QandA/frontend/src/Answer.tsx
+++ b/QandA/frontend/src/Answer.tsx
@ -0,0 +1,38 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+import React from 'react';
+import { AnswerData } from './QuestionsData';
+import { gray3 } from './Styles';
+
+interface Props {
+  data: AnswerData;
+}
+
+export const Answer = ({ data }: Props) => (
+  <div
+    css={css`
+      padding: 10px 0px;
+    `}
+  >
+    <div
+      css={css`
+        padding: 10px 0px;
+        font-size: 13px;
+      `}
+    >
+      {data.content}
+    </div>
+    <div
+      css={css`
+        font-size: 12px;
+        font-style: italic;
+        color: ${gray3};
+      `}
+    >
+      {`Answered by ${
+        data.userName
+      } on ${data.created.toLocaleDateString()} ${data.created.toLocaleTimeString()}`}
+    </div>
+  </div>
+);
--- a/QandA/frontend/src/AnswerList.tsx
+++ b/QandA/frontend/src/AnswerList.tsx
@ -0,0 +1,31 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import React from 'react';
+import { AnswerData } from './QuestionsData';
+import { Answer } from './Answer';
+import { gray5 } from './Styles';
+
+interface Props {
+  data: AnswerData[];
+}
+
+export const AnswerList = ({ data }: Props) => (
+  <ul
+    css={css`
+      list-style: none;
+      margin: 10px 0 0 0;
+      padding: 0;
+    `}
+  >
+    {data.map((answer) => (
+      <li
+        css={css`
+          border-top: 1px solid ${gray5};
+        `}
+        key={answer.answertId}
+      >
+        <Answer data={answer} />
+      </li>
+    ))}
+  </ul>
+);
--- a/QandA/frontend/src/App.css
+++ b/QandA/frontend/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);
-  }
-}
--- a/QandA/frontend/src/App.tsx
+++ b/QandA/frontend/src/App.tsx
@ -1,21 +1,59 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
 import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
 import { Header } from './Header';
-import './App.css';
 import { HomePage } from './HomePage';
+import { fontFamily, fontSize, gray2 } from './Styles';
+import { SearchPage } from './SearchPage';
+import { SignInPage } from './SignInPage';
+import { NotFoundPage } from './NotFoundPage';
+import { QuestionPage } from './QuestionPage';
+
+const AskPage = React.lazy(() => import('./AskPage'));

 function App() {
  return (
-    <div className="App">
+    <BrowserRouter>
      <Header />
-      <HomePage />
+      <div
+        css={css`
+          font-family: ${fontFamily};
+          font-size: ${fontSize};
+          color: ${gray2};
+        `}
+      >
+        <Routes>
+          <Route path="" element={<HomePage />} />
+          <Route path="search" element={<SearchPage />} />
+          <Route
+            path="ask"
+            element={
+              <React.Suspense
+                fallback={
+                  <div
+                    css={css`
+                      margin-top: 100px;
+                      text-align: center;
+                    `}
+                  >
+                    Loading...
                  </div>
+                }
+              >
+                <AskPage />
+              </React.Suspense>
+            }
+          />
+          <Route path="signin" element={<SignInPage />} />
+          <Route path="questions/:questionId" element={<QuestionPage />} />
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      </div>
+    </BrowserRouter>
  );
 }

-class ProblemComponent extends React.Component {
-  render() {
-    return <div ref="div" />;
-  }
-}
-
 export default App;
--- a/QandA/frontend/src/AskPage.tsx
+++ b/QandA/frontend/src/AskPage.tsx
@ -0,0 +1,52 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+
+import { Page } from './Page';
+import {
+  FieldInput,
+  FieldLabel,
+  Fieldset,
+  FieldContainer,
+  FieldTextArea,
+  FormButtonContainer,
+  PrimaryButton,
+} from './Styles';
+
+type FormData = {
+  title: string;
+  content: string;
+};
+
+export const AskPage = () => {
+  const { register } = useForm<FormData>();
+  return (
+    <Page title="Ask a question">
+      <form>
+        <Fieldset>
+          <FieldContainer>
+            <FieldLabel htmlFor="title">Title</FieldLabel>
+            <FieldInput
+              {...register('title')}
+              id="title"
+              name="title"
+              type="text"
+            />
+          </FieldContainer>
+          <FieldContainer>
+            <FieldLabel htmlFor="content">Content</FieldLabel>
+            <FieldTextArea
+              {...register('content')}
+              id="content"
+              name="content"
+            />
+          </FieldContainer>
+          <FormButtonContainer>
+            <PrimaryButton type="submit">Submit Your Question</PrimaryButton>
+          </FormButtonContainer>
+        </Fieldset>
+      </form>
+    </Page>
+  );
+};
+
+export default AskPage;
--- a/QandA/frontend/src/Header.module.css
+++ b/QandA/frontend/src/Header.module.css
@ -0,0 +1,13 @@
+.container {
+    position: fixed;
+    box-sizing: border-box;
+    top: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px;
+    background-color: #fff;
+    border-bottom: 1px solid #e3e2e2;
+    box-shadow: 0 3px 7px 0 rgba(110, 112, 114, 0.21);
+}
--- a/QandA/frontend/src/Header.tsx
+++ b/QandA/frontend/src/Header.tsx
@ -1,13 +1,97 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
 import React from 'react';
-import { UserIcon } from './Icons';
+import { Link, useSearchParams } from 'react-router-dom';
+import { useForm } from 'react-hook-form';

-export const Header = () => (
-  <div>
-    <a href="./">Q & A</a>
-    <input type="text" placeholder="Search ..." />
-    <a href="./signin">
+import { UserIcon } from './Icons';
+import { fontFamily, fontSize, gray1, gray2, gray5 } from './Styles';
+
+type FormData = {
+  search: string;
+};
+
+export const Header = () => {
+  const { register } = useForm<FormData>();
+  const [searchParams] = useSearchParams();
+  const criteria = searchParams.get('criteria') || '';
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+  };
+
+  return (
+    <div
+      css={css`
+        position: fixed;
+        box-sizing: border-box;
+        top: 0;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 20px;
+        background-color: #fff;
+        border-bottom: 1px solid ${gray5};
+        box-shadow: 0 3px 7px 0 rgba(100, 112, 114, 0.21);
+      `}
+    >
+      <Link
+        to="/"
+        css={css`
+          font-size: 24px;
+          font-weight: bold;
+          color: ${gray1};
+          text-decoration: none;
+        `}
+      >
+        Q & A
+      </Link>
+      <form onSubmit={handleSubmit}>
+        <input
+          {...register('search')}
+          name="search"
+          type="text"
+          placeholder="Search ..."
+          defaultValue={criteria}
+          css={css`
+            box-sizing: border-box;
+            font-family: ${fontFamily};
+            font-size: ${fontSize};
+            padding: 8px 10px;
+            border: 1px solid ${gray5};
+            border-radius: 3px;
+            color: ${gray2};
+            background-color: white;
+            width: 200px;
+            height: 30px;
+            :focus {
+              outline-color: ${gray5};
+            }
+          `}
+        />
+      </form>
+      <Link
+        to="signin"
+        css={css`
+          font-family: ${fontFamily};
+          font-size: ${fontSize};
+          padding: 5px 10px;
+          background-color: transparent;
+          color: ${gray2};
+          text-decoration: none;
+          cursor: pointer;
+          :focus {
+            outline-color: ${gray5};
+          }
+          span {
+            margin-left: 7px;
+          }
+        `}
+      >
        <UserIcon />
        <span>Sign In</span>
-    </a>
+      </Link>
    </div>
-);
+  );
+};
--- a/QandA/frontend/src/HomePage.tsx
+++ b/QandA/frontend/src/HomePage.tsx
@ -1,13 +1,51 @@
-import React from 'react';
-import { QuestionList } from './QuestionList';
-import { getUnansweredQuestions } from './QuestionsData';
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { useNavigate } from 'react-router-dom';

-export const HomePage = () => (
-  <div>
-    <div>
-      <h2>Unanswered Questions</h2>
-      <button>Ask a question</button>
+import React from 'react';
+import { PageTitle } from './PageTitle';
+import { Page } from './Page';
+import { QuestionList } from './QuestionList';
+import { getUnansweredQuestions, QuestionData } from './QuestionsData';
+import { PrimaryButton } from './Styles';
+
+export const HomePage = () => {
+  const [questions, setQuestions] = React.useState<QuestionData[]>([]);
+  const [questionsLoading, setQuestionsLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    const doGetUnansweredQuestion = async () => {
+      const unanswereedQuestions = await getUnansweredQuestions();
+      setQuestions(unanswereedQuestions);
+      setQuestionsLoading(false);
+    };
+    doGetUnansweredQuestion();
+  }, []);
+
+  const navigate = useNavigate();
+  const handleAskQuestionClick = () => {
+    navigate('ask');
+  };
+
+  return (
+    <Page>
+      <div
+        css={css`
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        `}
+      >
+        <PageTitle>Unanswered Questions</PageTitle>
+        <PrimaryButton onClick={handleAskQuestionClick}>
+          Ask a question
+        </PrimaryButton>
      </div>
-    <QuestionList data={getUnansweredQuestions()} />
-  </div>
-);
+      {questionsLoading ? (
+        <div>Loading...</div>
+      ) : (
+        <QuestionList data={questions || []} />
+      )}
+    </Page>
+  );
+};
--- a/QandA/frontend/src/Icons.tsx
+++ b/QandA/frontend/src/Icons.tsx
@ -1,3 +1,15 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
 import React from 'react';
 import user from './user.svg';
-export const UserIcon = () => <img src={user} alt="User" width="12px" />;
+export const UserIcon = () => (
+  <img
+    src={user}
+    alt="User"
+    css={css`
+      width: 12px;
+      opacity: 0.6;
+    `}
+  />
+);
--- a/QandA/frontend/src/NotFoundPage.tsx
+++ b/QandA/frontend/src/NotFoundPage.tsx
@ -0,0 +1,4 @@
+import React from 'react';
+import { Page } from './Page';
+
+export const NotFoundPage = () => <Page title="Page Not Found">{null}</Page>;
--- a/QandA/frontend/src/Page.tsx
+++ b/QandA/frontend/src/Page.tsx
@ -0,0 +1,24 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+import React from 'react';
+import { PageTitle } from './PageTitle';
+
+interface Props {
+  title?: string;
+  children: React.ReactNode;
+}
+
+export const Page = ({ title, children }: Props) => (
+  <div
+    css={css`
+      margin: 50px auto 20px auto;
+      padding: 30px 20px;
+      max-width: 600px;
+    `}
+  >
+    {title && <PageTitle>{title}</PageTitle>}
+    {children}
+    {/* Component nested within Page component will be rendere here */}
+  </div>
+);
--- a/QandA/frontend/src/PageTitle.tsx
+++ b/QandA/frontend/src/PageTitle.tsx
@ -0,0 +1,20 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+import React from 'react';
+interface Props {
+  children: React.ReactNode;
+}
+export const PageTitle = ({ children }: Props) => (
+  <h2
+    css={css`
+      font-size: 15px;
+      font-weight: bold;
+      margin: 10px 0px 5px;
+      text-align: center;
+      text-transform: uppercase;
+    `}
+  >
+    {children}
+  </h2>
+);
--- a/QandA/frontend/src/Question.tsx
+++ b/QandA/frontend/src/Question.tsx
@ -1,4 +1,9 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import { Link } from 'react-router-dom';
 import React from 'react';
+
+import { gray2, gray3 } from './Styles';
 import { QuestionData } from './QuestionsData';

 interface Props {
@ -8,15 +13,42 @@ interface Props {

 export const Question = ({ data, showContent }: Props) => (
  <div>
-    <div>{data.title}</div>
+    <div
+      css={css`
+        padding: 10px 0px;
+        font-size: 19px;
+      `}
+    >
+      <Link
+        css={css`
+          text-decoration: none;
+          color: ${gray2};
+        `}
+        to={`/questions/${data.questionId}`}
+      >
+        {data.title}
+      </Link>
+    </div>
    {showContent && (
-      <div>
+      <div
+        css={css`
+          padding-bottom: 10px;
+          font-size: 15px;
+          color: ${gray2};
+        `}
+      >
        {data.content.length > 50
          ? `${data.content.substring(0, 50)}`
          : data.content}
      </div>
    )}
-    <div>
+    <div
+      css={css`
+        font-size: 12px;
+        font-style: italic;
+        color: ${gray3};
+      `}
+    >
      {`Ask by ${
        data.userName
      } on ${data.created.toLocaleDateString()} ${data.created.toLocaleTimeString()}`}
--- a/QandA/frontend/src/QuestionList.tsx
+++ b/QandA/frontend/src/QuestionList.tsx
@ -1,15 +1,38 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
 import React from 'react';
 import { Question } from './Question';
 import { QuestionData } from './QuestionsData';
+import { accent2, gray5 } from './Styles';

 interface Props {
  data: QuestionData[];
 }

 export const QuestionList = ({ data }: Props) => (
-  <ul>
+  <ul
+    css={css`
+      list-style: none;
+      margin: 10px 0 0 0;
+      padding: 0px 20px;
+      background-color: #fff;
+      border-bottom-left-radius: 4px;
+      border-bottom-right-radius: 4px;
+      border-top: 3px solid ${accent2};
+      box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.16);
+    `}
+  >
    {data.map((question) => (
-      <li key={question.questionId}>
+      <li
+        key={question.questionId}
+        css={css`
+          border-top: 1px solid ${gray5};
+          :first-of-type {
+            border-top: none;
+          }
+        `}
+      >
        <Question data={question} />
      </li>
    ))}
--- a/QandA/frontend/src/QuestionPage.tsx
+++ b/QandA/frontend/src/QuestionPage.tsx
@ -0,0 +1,108 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+import {
+  FieldContainer,
+  FieldLabel,
+  Fieldset,
+  FieldTextArea,
+  FormButtonContainer,
+  gray3,
+  gray6,
+  PrimaryButton,
+} from './Styles';
+
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+
+import { Page } from './Page';
+import { QuestionData, getQuestion } from './QuestionsData';
+import { AnswerList } from './AnswerList';
+
+type FormData = {
+  content: string;
+};
+
+export const QuestionPage = () => {
+  const [question, setQuestion] = React.useState<QuestionData | null>(null);
+  const { questionId } = useParams();
+  const { register } = useForm<FormData>();
+  React.useEffect(() => {
+    const doGetQuestion = async (questionId: number) => {
+      const foundQuestion = await getQuestion(questionId);
+      setQuestion(foundQuestion);
+    };
+    if (questionId) {
+      doGetQuestion(Number(questionId));
+    }
+  }, [questionId]);
+  return (
+    <Page>
+      <div
+        css={css`
+          background-color: white;
+          padding: 15px 20px 20px 20px;
+          border-radius: 4px;
+          border: 1px solid ${gray6};
+          box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.16);
+        `}
+      >
+        <div
+          css={css`
+            font-size: 19px;
+            font-weight: bold;
+            margin: 10px 0px 5px;
+          `}
+        >
+          {question === null ? '' : question.title}
+        </div>
+        {question !== null && (
+          <React.Fragment>
+            <p
+              css={css`
+                margin-top: 0px;
+                background-color: white;
+              `}
+            >
+              {question.content}
+            </p>
+            <div
+              css={css`
+                font-size: 12px;
+                font-style: italic;
+                color: ${gray3};
+              `}
+            >
+              {`Asked by ${
+                question.userName
+              } on ${question.created.toLocaleDateString()} ${question.created.toLocaleTimeString()}`}
+            </div>
+            <AnswerList data={question.answers} />
+            <form
+              css={css`
+                margin-top: 20px;
+              `}
+            >
+              <Fieldset>
+                <FieldContainer>
+                  <FieldLabel htmlFor="content">Your Answer</FieldLabel>
+                  <FieldTextArea
+                    {...register('content')}
+                    id="content"
+                    name="content"
+                  />
+                </FieldContainer>
+                <FormButtonContainer>
+                  <PrimaryButton type="submit">
+                    Submit Your Answer
+                  </PrimaryButton>
+                </FormButtonContainer>
+              </Fieldset>
+            </form>
+          </React.Fragment>
+        )}
+      </div>
+      Question Page {questionId}
+    </Page>
+  );
+};
--- a/QandA/frontend/src/QuestionsData.ts
+++ b/QandA/frontend/src/QuestionsData.ts
@ -48,6 +48,30 @@ const questions: QuestionData[] = [
  },
 ];

-export const getUnansweredQuestions = (): QuestionData[] => {
+export const getUnansweredQuestions = async (): Promise<QuestionData[]> => {
+  await wait(500);
  return questions.filter((q) => q.answers.length === 0);
 };
+
+const wait = (ms: number): Promise<void> => {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+};
+
+export const getQuestion = async (
+  questionId: number,
+): Promise<QuestionData | null> => {
+  await wait(500);
+  const results = questions.filter((q) => q.questionId === questionId);
+  return results.length === 0 ? null : results[0];
+};
+
+export const searchQuestions = async (
+  criteria: string,
+): Promise<QuestionData[]> => {
+  await wait(500);
+  return questions.filter(
+    (q) =>
+      q.title.toLowerCase().indexOf(criteria.toLowerCase()) >= 0 ||
+      q.content.toLowerCase().indexOf(criteria.toLowerCase()) >= 0,
+  );
+};
--- a/QandA/frontend/src/SearchPage.tsx
+++ b/QandA/frontend/src/SearchPage.tsx
@ -0,0 +1,38 @@
+/** @jsxImportSource @emotion/react */
+import { css } from '@emotion/react';
+
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import { Page } from './Page';
+import { QuestionList } from './QuestionList';
+import { searchQuestions, QuestionData } from './QuestionsData';
+
+export const SearchPage = () => {
+  const [searchParams] = useSearchParams();
+  const [questions, setQuestions] = React.useState<QuestionData[]>([]);
+  const search = searchParams.get('criteria') || '';
+  React.useEffect(() => {
+    const doSearch = async (criteria: string) => {
+      const foundResults = await searchQuestions(criteria);
+      setQuestions(foundResults);
+    };
+    doSearch(search);
+  }, [search]);
+
+  return (
+    <Page title="Search Results">
+      {search && (
+        <p
+          css={css`
+            font-size: 16px;
+            font-style: italic;
+            margin-top: 0px;
+          `}
+        >
+          <QuestionList data={questions} />
+        </p>
+      )}
+    </Page>
+  );
+};
--- a/QandA/frontend/src/SignInPage.tsx
+++ b/QandA/frontend/src/SignInPage.tsx
@ -0,0 +1,4 @@
+import React from 'react';
+import { Page } from './Page';
+
+export const SignInPage = () => <Page title="Sign In">{null}</Page>;
--- a/QandA/frontend/src/Styles.ts
+++ b/QandA/frontend/src/Styles.ts
@ -0,0 +1,103 @@
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+export const gray1 = '#383737';
+export const gray2 = '#5c5a5a';
+export const gray3 = '#857c81';
+export const gray4 = '#b9b9b9';
+export const gray5 = '#e3e2e2';
+export const gray6 = '#f7f8fa';
+export const primary1 = '#681c41';
+export const primary2 = '#824c67';
+export const accent1 = '#dbb365';
+export const accent2 = '#efd197';
+export const fontFamily = "'Segoe UI', 'Helvetica Neue',sans-serif";
+export const fontSize = '16px';
+export const PrimaryButton = styled.button`
+  background-color: ${primary2};
+  border-color: ${primary2};
+  border-style: solid;
+  border-radius: 5px;
+  font-family: ${fontFamily};
+  font-family: ${fontSize};
+  padding: 5px 10px;
+  color: white;
+  cursor: pointer;
+  :hover {
+    background-color: ${primary1};
+  }
+  :focus {
+    outline-color: ${primary2};
+  }
+  :disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+export const Fieldset = styled.fieldset`
+  margin: 10px auto 0 auto;
+  padding: 30px;
+  width: 350px;
+  background-color: ${gray6};
+  border-radius: 4px;
+  border: 1px solid ${gray5};
+  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.16);
+`;
+
+export const FieldContainer = styled.label`
+  font-weight: 10px;
+`;
+
+const baseFieldCSS = css`
+  box-sizing: border-box;
+  font-family: ${fontFamily};
+  font-size: ${fontSize};
+  margin-bottom: 5px;
+  padding: 8px 10px;
+  border: 1px solid ${gray5};
+  border-radius: 3px;
+  color: ${gray2};
+  background-color: white;
+  width: 100%;
+  :focus {
+    outline-color: ${gray5};
+  }
+  :disabled {
+    background-color: ${gray6};
+  }
+`;
+
+export const FieldLabel = styled.label`
+  font-weight: bold;
+`;
+
+export const FieldInput = styled.input`
+  ${baseFieldCSS}
+`;
+
+export const FieldTextArea = styled.textarea`
+  ${baseFieldCSS}
+  height: 100px;
+`;
+
+export const FieldError = styled.div`
+  font-size: 12px;
+  color: red;
+`;
+
+export const FormButtonContainer = styled.div`
+  margin: 30px 0px 0px 0px;
+  padding: 20px 0px 0px 0px;
+  border-top: 1px solid ${gray5};
+`;
+
+export const SubmissionSussess = styled.div`
+  margin-top: 10px;
+  color: green;
+`;
+
+export const SubmissionFailure = styled.div`
+  margin-top: 10px;
+  color: red;
+`;
--- a/QandA/frontend/src/index.css
+++ b/QandA/frontend/src/index.css
@ -1,13 +1,4 @@
 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;
+  background-color: #f7f8fa;
 }
Author	SHA1	Message	Date
Jason Zhu	d0bb6abf15	Chap06 -> Reducing boilerplate code with React Hook From -> Implementing the answer form	2022-03-31 11:16:30 +11:00
Jason Zhu	98125ab39c	Chap06 -> Reducing boilerplate code with React Hook Form -> Implementing the ask form	2022-03-30 23:51:10 +11:00
Jason Zhu	fc14b1bca6	Chap06 -> Reducing boilerplate code with React Hook Form -> Creating from styled components	2022-03-30 23:21:13 +11:00
Jason Zhu	d72ed50173	Chap06 -> Reducing boilerplat code with React Hook Form -> Refactoring the Header component to use React Hook Form	2022-03-30 22:55:50 +11:00
Jason Zhu	3e93e072f0	Chap06 -> Reducing boilerplat code with React Hook Form -> Installing React Hook Form	2022-03-30 22:37:41 +11:00
Jason Zhu	17dd32bcac	Chap06 -> Understanding controlled components	2022-03-30 22:36:10 +11:00
Jason Zhu	2f868ead68	Chap05 -> Lazy loading routers	2022-03-30 17:05:28 +11:00
Jason Zhu	e03de1f1fa	Chap05 -> Using query parameters -> 7 & 8: Render search criteria and questions that returned from search	2022-03-30 16:43:26 +11:00
Jason Zhu	269e6173d1	Chap05 -> Using query parameters -> 6. Invoke search when component first renders and when the search variable changes using the useEffect hook	2022-03-30 16:39:03 +11:00
Jason Zhu	1f05de9a0c	Chap05 -> Usinig query parameters -> 2 & 3: configure import in SearchPage and add explicit return statement	2022-03-30 16:32:39 +11:00
Jason Zhu	6ccb67ca01	Chap05 -> Using query parameters -> 1. Create function to simulate a search via web request	2022-03-30 16:30:54 +11:00
Jason Zhu	cdc8fea5b5	Chap05 -> Using route parameters -> Creating an AnswerList component	2022-03-30 16:18:22 +11:00
Jason Zhu	292294adf4	Chap05 -> Using route parameter -> Creating an AnswerList component -> 4 & 5 & 6: Created Answer component	2022-03-30 15:08:09 +11:00
Jason Zhu	2ea9deeba6	Chap05 -> Using route parameters -> Creating an AnswerList component -> 1 & 2 & 3: created AnswerList.tsx	2022-03-30 14:58:26 +11:00
Jason Zhu	dee956f542	Chap05 -> Using route paramters -> Implementinig more of the question page (fix background-color)	2022-03-30 14:53:04 +11:00
Jason Zhu	17cecb2931	Chap05 -> Using route paramters -> Implementinig more of the question page -> 8. Add when question asked and who asked into the Fragment	2022-03-30 14:51:48 +11:00
Jason Zhu	527d00be86	Chap05 -> Using route parameters -> Implementing more of the question page -> 7. Implement question content	2022-03-30 14:38:16 +11:00
Jason Zhu	b5f12380b3	Chap05 -> Using route parameters -> Implementiing more of the question page -> Implement JSX for Question Page component by adding container element for the page and question title	2022-03-30 14:34:23 +11:00
Jason Zhu	a2f0fb0522	Chap05 -> Using route parameters -> Implementing more of the question page -> 5. call getQuestion function during initial render	2022-03-30 14:30:37 +11:00
Jason Zhu	de5e78e621	Chap05 -> Using route parameters -> Implementing more of the question page -> 2 & 3 & 4: Create a state for question	2022-03-30 14:14:23 +11:00
Jason Zhu	3fb4435d68	Chap05 -> Using route parameters -> Implementing more of the question pagee -> 1. Add a function that will simulate a web request to get a question	2022-03-30 14:04:55 +11:00
Jason Zhu	1f7388e26d	Fixed problem in Chap04	2022-03-29 23:15:33 +11:00
Jason Zhu	8e13f18a03	Chap05 -> Using route parameters -> Adding the question page route (Finished)	2022-03-29 16:33:58 +11:00
Jason Zhu	b18e0588b5	Chap05 -> Using route parameters -> Adding the question page route	2022-03-29 16:25:56 +11:00
Jason Zhu	379feb7e99	Chap05 -> Implementing links -> Navigating programmatically	2022-03-29 16:24:10 +11:00
Jason Zhu	89ea270218	Chap05 -> Implementing links -> Using the Link component	2022-03-29 16:22:23 +11:00
Jason Zhu	353cb61006	(Edit) Chap05 -> Declaring routes -> Creating a component containing routes: put Header component back to App	2022-03-29 16:19:21 +11:00
Jason Zhu	076120fee7	Chap05 -> Handling routes not found	2022-03-29 15:55:55 +11:00
Jason Zhu	70839dfeca	Chap05 -> Declaring routes -> Creating a component containing routes	2022-03-29 15:52:21 +11:00
Jason Zhu	94545f83c1	Chap05 -> Declaring routes -> Creating some blank pages	2022-03-29 15:41:31 +11:00
Jason Zhu	1a0a1006dd	Chap05 -> Install React Router	2022-03-29 15:06:09 +11:00
Jason Zhu	ab5f1fb67f	Chap04 -> Completing the home page styling -> Styling the Question component	2022-03-29 14:45:12 +11:00
Jason Zhu	eeae6b889c	Chap04 -> Completing the home page styling -> Styling the QuestionList component	2022-03-29 14:41:37 +11:00
Jason Zhu	a2eb621624	Chap04 -> Creating a reusable styled component with Emotion	2022-03-28 21:02:55 +11:00
Jason Zhu	3f5f086e44	Chap04 -> Styling pseudo-classes and nested elements with Emotion	2022-03-28 20:37:00 +11:00
Jason Zhu	c9a2989a15	Chap04 -> Styling components with Emotion -> Styling the Header component	2022-03-28 19:58:15 +11:00
Jason Zhu	e4ca4f079c	Chap04 -> Styling components with Emotion -> Styling the App component (Emotion styles in head tag)	2022-03-28 19:36:40 +11:00
Jason Zhu	b7f435a986	Chap04 -> Styling components with Emotion -> Styling the App component -> style css prop use tagged template literal	2022-03-28 17:56:13 +11:00
Jason Zhu	05f529d84e	Chap04 -> Styling components with Emotion -> Installing Emotion	2022-03-28 17:38:39 +11:00
Jason Zhu	beedc2aef8	Chap04 -> Styling components with CSS modules	2022-03-26 17:56:51 +11:00
Jason Zhu	58c82bb334	Chap04 -> Styling components with CSS -> Styling the Header component	2022-03-26 17:50:10 +11:00
Jason Zhu	8a19835b45	Chap04 -> Styling components with CSS -> Styling the App component	2022-03-26 17:38:20 +11:00
Jason Zhu	563aaf0d27	Chap04 -> Styling components with CSS -> Stlying the document body	2022-03-26 17:33:40 +11:00
Jason Zhu	27421824c7	Chap03 -> Handling events -> Handling an input change event	2022-03-26 17:00:21 +11:00
Jason Zhu	e3810cc810	Chap03 -> Handling events -> Handling a button click event	2022-03-26 16:50:56 +11:00
Jason Zhu	5772c175af	Chap03 -> Implementing component state -> Using useState to implement component state	2022-03-26 16:46:05 +11:00
Jason Zhu	ffc8fe16f5	Chap03 -> Implementing component state -> Using useEffect to execute logic	2022-03-26 16:03:57 +11:00
Jason Zhu	de5bc7f437	Chap03 -> Implementing component state (Change getUnansweredQuestions to async function, result failure in transpiling)	2022-03-26 14:39:21 +11:00
Jason Zhu	5d7f817620	Chap03 -> Creating function-based component -> Function props (aka how to use render prop)	2022-03-26 14:25:09 +11:00
Jason Zhu	f833534d19	Chap03 -> Creating function-based component -> Children props, added explanation	2022-03-26 14:12:16 +11:00
Jason Zhu	affd03b580	Chap03 -> Creating function-based component -> Children props	2022-03-26 14:10:10 +11:00