Add PWA support

backend/package.json

@@ -25,7 +25,7 @@
     "mongoose": "^5.9.19",
     "mongoose-paginate": "^5.0.3",
     "nanoid": "^3.1.12",
-    "node-fetch": "^2.6.0",
+    "node-fetch": "^2.6.1",
     "passport": "^0.4.1",
     "passport-http-bearer": "^1.0.1",
     "passport-jwt": "^4.0.0",

frontend/public/index.html

@@ -4,12 +4,17 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Martel:wght@700&display=swap" rel="stylesheet">    <meta
+    <link href="https://fonts.googleapis.com/css2?family=Martel:wght@700&display=swap" rel="stylesheet">
+    <meta
       name="description"
       content="The Lord of the Rings API - The one API"
     />
     <meta name="keywords" content="Lord of the Rings, API">
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/icon-apple-180x180.png.png" />
+    <link rel="icon" type="image/png" href="%PUBLIC_URL%/app-logo-128x128.png">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <meta name="theme-color" content="#2e3440">
+
     <title>The one API</title>
     <meta name="robots" content="index, follow"> 
     <meta http-equiv="Content-Security-Policy" content="connect-src 'self' http://localhost:3001;">

frontend/public/manifest.json

@@ -0,0 +1,43 @@
+{
+  "name": "LoTR API - The one API to rule them all",
+  "short_name": "LoTR API",
+  "theme_color": "#2e3440",
+  "background_color": "#2e3440",
+  "scope": "/",
+  "start_url": "/",
+  "display": "standalone",
+  "description": "This is the one API to rule them all. It serves your needs regarding data about The Lord of the Rings, the epic books by J. R. R. Tolkien and the official movie adaptions by Peter Jackson.",
+  "icons": [
+    {
+      "src": "icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/maskable_icon.png",
+      "sizes": "196x196",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}

frontend/src/index.js

@@ -16,4 +16,4 @@ ReactDOM.render(
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.register();

frontend/src/pages/Documentation.jsx

@@ -46,7 +46,7 @@ function Documentation() {
           </p>
         </div>
       </div>
-      <div id="1" className="card fluid">
+      <div id="2" className="card fluid">
         <div className="section">
           <h2>Which data does the "one API to rule them all" provide?</h2>
           <p>