Implement basic solution

.gitignore

 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# IDE
+/.idea
+*.iml
+
 # dependencies
 /node_modules
 /.pnp

package-lock.json

@@ -1161,6 +1161,19 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz",
+      "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==",
+      "requires": {
+        "@emotion/memoize": "0.7.1"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz",
+      "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg=="
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -4054,6 +4067,16 @@
         }
       }
     },
+    "css-jss": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/css-jss/-/css-jss-10.4.0.tgz",
+      "integrity": "sha512-WA/MgZyQm6KAubnFlBn8d6jwNjpzv0kdRCZ9Qb81ylb3/EYTz8qyjGvhIMODa/MuRBUaIMgzr2qjkb1B7WXEkw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.4.0",
+        "jss-preset-default": "10.4.0"
+      }
+    },
     "css-loader": {
       "version": "3.4.2",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.4.2.tgz",
@@ -4120,6 +4143,15 @@
         }
       }
     },
+    "css-vendor": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.3",
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css-what": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.3.0.tgz",
@@ -6365,6 +6397,14 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "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"
+      }
+    },
     "hosted-git-info": {
       "version": "2.8.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
@@ -6563,6 +6603,11 @@
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -6603,9 +6648,9 @@
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
     },
     "immer": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-1.10.0.tgz",
-      "integrity": "sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg=="
+      "version": "7.0.9",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-7.0.9.tgz",
+      "integrity": "sha512-Vs/gxoM4DqNAYR7pugIxi0Xc8XAun/uy7AQu4fLLqaTBHxjOP9pJ266Q9MWA/ly4z6rAFZbvViOtihxUZ7O28A=="
     },
     "import-cwd": {
       "version": "2.1.0",
@@ -6946,6 +6991,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-negative-zero": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.0.tgz",
@@ -7809,6 +7859,154 @@
         "verror": "1.10.0"
       }
     },
+    "jss": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.4.0.tgz",
+      "integrity": "sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^3.0.2",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.4.0.tgz",
+      "integrity": "sha512-9oDjsQ/AgdBbMyRjc06Kl3P8lDCSEts2vYZiPZfGAxbGCegqE4RnMob3mDaBby5H9vL9gWmyyImhLRWqIkRUCw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.4.0"
+      }
+    },
+    "jss-plugin-compose": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-compose/-/jss-plugin-compose-10.4.0.tgz",
+      "integrity": "sha512-m1MKZQDH/48W2NHqgsfhYBAObVHzDzSCULLLqrc8nZh1fYGvEBUND82oqd6Jh95pJbMhTzx3E9st63MivEuvAw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.4.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.4.0.tgz",
+      "integrity": "sha512-BYJ+Y3RUYiMEgmlcYMLqwbA49DcSWsGgHpVmEEllTC8MK5iJ7++pT9TnKkKBnNZZxTV75ycyFCR5xeLSOzVm4A==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.4.0"
+      }
+    },
+    "jss-plugin-expand": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-expand/-/jss-plugin-expand-10.4.0.tgz",
+      "integrity": "sha512-UiZ6D4Ud2Chg3GIzRGjgs3DLiueN4r+g1TkEgc7L/0J/L9wsvuFKOtkahdHn177+YUK5/+N05mIE9xsgREB4+Q==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.4.0"
+      }
+    },
+    "jss-plugin-extend": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-extend/-/jss-plugin-extend-10.4.0.tgz",
+      "integrity": "sha512-TsgSmvWnpZWvXWpCDHl9Vj/n8wA/Awluutg/dnrfU7rwnM+BKkssHocGai8wQ5mtmIR+lYt+y7zAO+MOeigPiw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.4.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.4.0.tgz",
+      "integrity": "sha512-b8IHMJUmv29cidt3nI4bUI1+Mo5RZE37kqthaFpmxf5K7r2aAegGliAw4hXvA70ca6ckAoXMUl4SN/zxiRcRag==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.4.0"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.4.0.tgz",
+      "integrity": "sha512-cKgpeHIxAP0ygeWh+drpLbrxFiak6zzJ2toVRi/NmHbpkNaLjTLgePmOz5+67ln3qzJiPdXXJB1tbOyYKAP4Pw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.4.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.4.0.tgz",
+      "integrity": "sha512-j/t0R40/2fp+Nzt6GgHeUFnHVY2kPGF5drUVlgkcwYoHCgtBDOhTTsOfdaQFW6sHWfoQYgnGV4CXdjlPiRrzwA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.4.0"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.4.0.tgz",
+      "integrity": "sha512-w8504Cdfu66+0SJoLkr6GUQlEb8keHg8ymtJXdVHWh0YvFxDG2l/nS93SI5Gfx0fV29dO6yUugXnKzDFJxrdFQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.4.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-rule-value-observable": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-observable/-/jss-plugin-rule-value-observable-10.4.0.tgz",
+      "integrity": "sha512-Utnsvopa2Gg9Z/9rJ5uH0Gl5QRWlnx9Hd+K/rnAc7UyxbIpvTAWMv5hsnuCUbmUSyb9RKJPHlohJNwG8rFownQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.4.0",
+        "symbol-observable": "^1.2.0"
+      }
+    },
+    "jss-plugin-template": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-template/-/jss-plugin-template-10.4.0.tgz",
+      "integrity": "sha512-bpRu56Dnas1+G/HvB0TdeC2907YujZ8F3pwLls7gNS6oJSYZD3iYbqsJuRVcAkhNINYVdcuW1SCo1aigCI7r/Q==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.4.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.4.0.tgz",
+      "integrity": "sha512-DpF+/a+GU8hMh/948sBGnKSNfKkoHg2p9aRFUmyoyxgKjOeH9n74Ht3Yt8lOgdZsuWNJbPrvaa3U4PXKwxVpTQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.8",
+        "jss": "10.4.0"
+      }
+    },
+    "jss-preset-default": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-10.4.0.tgz",
+      "integrity": "sha512-WnmqDtQiK7bcw7yOxoW4iwf2ytVhgJfxqsb9R7V0gYOQi8TuApxs99nXgLVr3XN2HfVwk8hXlc9j50N5imozCQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.4.0",
+        "jss-plugin-camel-case": "10.4.0",
+        "jss-plugin-compose": "10.4.0",
+        "jss-plugin-default-unit": "10.4.0",
+        "jss-plugin-expand": "10.4.0",
+        "jss-plugin-extend": "10.4.0",
+        "jss-plugin-global": "10.4.0",
+        "jss-plugin-nested": "10.4.0",
+        "jss-plugin-props-sort": "10.4.0",
+        "jss-plugin-rule-value-function": "10.4.0",
+        "jss-plugin-rule-value-observable": "10.4.0",
+        "jss-plugin-template": "10.4.0",
+        "jss-plugin-vendor-prefixer": "10.4.0"
+      }
+    },
     "jsx-ast-utils": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz",
@@ -10598,6 +10796,11 @@
             "path-exists": "^4.0.0"
           }
         },
+        "immer": {
+          "version": "1.10.0",
+          "resolved": "https://registry.npmjs.org/immer/-/immer-1.10.0.tgz",
+          "integrity": "sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg=="
+        },
         "inquirer": {
           "version": "7.0.4",
           "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.0.4.tgz",
@@ -10710,6 +10913,11 @@
         }
       }
     },
+    "react-display-name": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.5.tgz",
+      "integrity": "sha512-I+vcaK9t4+kypiSgaiVWAipqHRXYmZIuAiS8vzFvXHHXVigg/sMKwlRgLy6LH2i3rmP+0Vzfl5lFsFRwF1r3pg=="
+    },
     "react-dom": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
@@ -10731,6 +10939,24 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-jss": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-10.4.0.tgz",
+      "integrity": "sha512-q0P6GQrq0bm0ms/l6QpqNaPwPuJpYP5kcCXLSwcOQUnKACXh4NCcEsnqxD56TQmbAhE1p3RhtGD5xoBda1pjwQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "@emotion/is-prop-valid": "^0.7.3",
+        "css-jss": "10.4.0",
+        "hoist-non-react-statics": "^3.2.0",
+        "is-in-browser": "^1.1.3",
+        "jss": "10.4.0",
+        "jss-preset-default": "10.4.0",
+        "prop-types": "^15.6.0",
+        "shallow-equal": "^1.2.0",
+        "theming": "^3.3.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
     "react-scripts": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.3.tgz",
@@ -10791,6 +11017,11 @@
         "workbox-webpack-plugin": "4.3.1"
       }
     },
+    "react-sweet-state": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/react-sweet-state/-/react-sweet-state-2.3.1.tgz",
+      "integrity": "sha512-dqTIK/rxr4j2TzSWl3GB2XBwTJ3Ux8i+B80T/uKVrLUib1LRjfweHi8ezKzCH48KWTUs+SGc26EZjWUtv7y6aA=="
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -11589,6 +11820,11 @@
         }
       }
     },
+    "shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -12373,6 +12609,11 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -12550,6 +12791,17 @@
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ="
     },
+    "theming": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/theming/-/theming-3.3.0.tgz",
+      "integrity": "sha512-u6l4qTJRDaWZsqa8JugaNt7Xd8PPl9+gonZaIe28vAhqgHMIG/DOyFPqiKN/gQLQYj05tHv+YQdNILL4zoiAVA==",
+      "requires": {
+        "hoist-non-react-statics": "^3.3.0",
+        "prop-types": "^15.5.8",
+        "react-display-name": "^0.2.4",
+        "tiny-warning": "^1.0.2"
+      }
+    },
     "throat": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",
@@ -12611,6 +12863,11 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",

package.json

@@ -10,9 +10,12 @@
     "@types/node": "^12.12.62",
     "@types/react": "^16.9.49",
     "@types/react-dom": "^16.9.8",
+    "immer": "^7.0.9",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-jss": "^10.4.0",
     "react-scripts": "3.4.3",
+    "react-sweet-state": "^2.3.1",
     "typescript": "^3.7.5"
   },
   "scripts": {

src/App.css

-.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);
-  }
-}

src/App.tsx

-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, {useEffect, useState} from 'react';
+import {createUseStyles} from "react-jss";
+import {useApiClient} from "./api/ApiClientContext";
+import {Title} from "./api/models/Title";
+import {Locale, LocalePriority, selectLocaleVersion} from "./locale/selectLocaleData";
+import {usePlayabilityRating} from "./mime/usePlayabilityRating";
+import {sortNumericallyDesc} from "./util/sortNumerically";
+
+export default function App() {
+    const {apiClient} = useApiClient();
+    const playabilityRating = usePlayabilityRating();
+    const [data, setData] = useState<Title[]>();
+    useEffect(() => {
+        apiClient.listTitles().then(setData);
+    }, [apiClient]);
+    const locale: Locale = {
+        language: "de",
+        region: "DE",
+    };
+
+    const classes = useStyles();
+
+    return (
+        <div>
+            {data?.map((item: Title) => {
+                const title = selectLocaleVersion(locale, LocalePriority.REGION_BEFORE_LOCALE, item.titles);
+                const description = selectLocaleVersion(locale, LocalePriority.LOCALE_BEFORE_REGION, item.descriptions);
+                const poster = item.images.find(it => it.kind === "poster");
+                const backdrop = item.images.find(it => it.kind === "backdrop");
+                const mediaList = item.media.map(it => {
+                    return {
+                        item: it,
+                        value: playabilityRating(it),
+                    };
+                }).sort(sortNumericallyDesc(it => it.value));
+                const media = mediaList[0]?.item;
 
-function App() {
                 return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+                    <div key={item.ids.uuid} className={classes.movie}>
+                        <h1>{title?.name}</h1>
+                        <strong>{description?.tagline}</strong>
+                        <p>{description?.overview}</p>
+                        {poster && (
+                            <img
+                                className={classes.poster}
+                                alt={`Movie poster for ${title?.name}`}
+                                src={poster.src}
+                            />
+                        )}
+                        {backdrop && (
+                            <img
+                                className={classes.poster}
+                                alt={`Movie backdrop for ${title?.name}`}
+                                src={backdrop.src}
+                            />
+                        )}
+                        {media && media.src}
+                        <pre>{JSON.stringify(item.subtitles, null, 2)}</pre>
+                        <pre>{JSON.stringify(item.preview, null, 2)}</pre>
+                    </div>
+                )
+            })}
         </div>
     );
 }
 
-export default App;
+const useStyles = createUseStyles({
+    movie: {
+        maxWidth: "40rem",
+        margin: {
+            left: "auto",
+            right: "auto",
+        }
+    },
+    poster: {
+        maxWidth: "20rem",
+        maxHeight: "20rem",
+    }
+});

src/api/ApiClient.ts

+import {GenreWithTitles} from "./models/dto/GenreWithTitles";
+import {Episode} from "./models/Episode";
+import {Genre} from "./models/Genre";
+import {Title} from "./models/Title";
+import {RequestClient} from "../request/RequestClient";
+
+export class ApiClient extends RequestClient {
+    public async listGenres(): Promise<Genre[]> {
+        return await this.request(`api/v1/genres`, {
+            method: "GET"
+        });
+    }
+
+    public async getGenre(genreId: string): Promise<GenreWithTitles> {
+        return await this.request(`api/v1/genres/${genreId}`, {
+            method: "GET"
+        });
+    }
+
+    public async listTitles(): Promise<Title[]> {
+        return await this.request(`api/v1/titles`, {
+            method: "GET"
+        });
+    }
+
+    public async getTitle(titleId: string): Promise<Title> {
+        return await this.request(`api/v1/titles/${titleId}`, {
+            method: "GET"
+        });
+    }
+
+    public async listEpisodes(titleId: string): Promise<Episode> {
+        return await this.request(`api/v1/titles/${titleId}/episodes`, {
+            method: "GET"
+        });
+    }
+}

src/api/ApiClientContext.ts

+import {createContext, useContext} from "react";
+import {ApiClient} from "./ApiClient";
+
+interface ApiClientContext {
+    apiClient: ApiClient
+}
+
+const ApiClientContext = createContext<ApiClientContext>({
+    apiClient: new ApiClient(
+        localStorage.getItem("API_ENDPOINT") ||
+        process.env.NODE_ENV === "development"
+            ? "http://localhost:8000/"
+            : new URL("/", window.location.href).toString()
+    )
+});
+
+export const ApiClientProvider = ApiClientContext.Provider;
+export const ApiClientConsumer = ApiClientContext.Consumer;
+export const useApiClient = () => useContext<ApiClientContext>(ApiClientContext);

src/api/models/Cast.ts

+import {Person} from "./Person";
+
+export interface Cast {
+    category: string | null,
+    characters: string[],
+    credit: string | null,
+    person: Person
+}

src/api/models/Episode.ts

+import {Title} from "./Title";
+
+export interface Episode {
+    seasonNumber: string | null,
+    episodeNumber: string | null,
+    airDate: string | null,
+    title: Title
+}

src/api/models/Genre.ts

+export interface Genre {
+    id: string,
+    tmdbId: number | null,
+    name: string
+}

src/api/models/Image.ts

+export interface Image {
+    kind: string,
+    mime: string,
+    src: string
+}

src/api/models/LocalizedData.ts

+export interface LocalizedData {
+    region: string | null,
+    languages: string[],
+    kind: string,
+}

src/api/models/Media.ts

+export interface Media {
+    mime: string,
+    codecs: string[],
+    languages: string[],
+    src: string
+}

src/api/models/Person.ts

+export interface Person {
+    id: string,
+    imdbId: string | null,
+    name: string
+}

src/api/models/Rating.ts

+export interface Rating {
+    region: string | null,
+    certification: string
+}

src/api/models/Subtitle.ts

+export interface Subtitle {
+    format: string,
+    language: string | null,
+    region: string | null,
+    specifier: string | null,
+    src: string
+}

src/api/models/Title.ts

+import {Cast} from "./Cast";
+import {Genre} from "./Genre";
+import {Image} from "./Image";
+import {Media} from "./Media";
+import {Rating} from "./Rating";
+import {Subtitle} from "./Subtitle";
+import {TitleDescription} from "./TitleDescription";
+import {TitleId} from "./TitleId";
+import {TitleName} from "./TitleName";
+
+export interface Title {
+    ids: TitleId,
+    originalLanguage: string | null,
+    runtime: number | null,
+    yearStart: number | null,
+    yearEnd: number | null,
+    titles: TitleName[],
+    descriptions: TitleDescription[],
+    cast: Cast[],
+    genres: Genre[],
+    ratings: Rating[],
+    images: Image[],
+    media: Media[],
+    subtitles: Subtitle[],
+    preview: string | null,
+    createdAt: string,
+    updatedAt: string
+}

src/api/models/TitleDescription.ts

+import {LocalizedData} from "./LocalizedData";
+
+export interface TitleDescription extends LocalizedData {
+    overview: string,
+    tagline: string | null
+}

src/api/models/TitleId.ts

+export interface TitleId {
+    uuid: string,
+    imdb: string | null,
+    tmdb: number | null,
+    tvdb: number | null
+}

src/api/models/TitleName.ts

+import {LocalizedData} from "./LocalizedData";
+
+export interface TitleName extends LocalizedData {
+    name: string
+}