restructured folder project

.gitignore

@@ -4,6 +4,9 @@ node_modules
 # Build files
 dist/
 
+# Environment varialbes
+.env
+
 # Logs
 logs
 *.log

package-lock.json

@@ -1099,7 +1099,6 @@
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
       "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=",
-      "dev": true,
       "requires": {
         "mime-types": "~2.1.18",
         "negotiator": "0.6.1"
@@ -1427,7 +1426,6 @@
       "version": "0.18.0",
       "resolved": "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
       "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
-      "dev": true,
       "requires": {
         "follow-redirects": "^1.3.0",
         "is-buffer": "^1.1.5"
@@ -1903,7 +1901,6 @@
       "version": "1.18.3",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz",
       "integrity": "sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=",
-      "dev": true,
       "requires": {
         "bytes": "3.0.0",
         "content-type": "~1.0.4",
@@ -2162,8 +2159,7 @@
     "bytes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
+      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg="
-      "dev": true
     },
     "cacache": {
       "version": "10.0.4",
@@ -2695,14 +2691,12 @@
     "content-disposition": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
-      "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=",
+      "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ="
-      "dev": true
     },
     "content-type": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
-      "dev": true
     },
     "convert-source-map": {
       "version": "1.6.0",
@@ -2716,14 +2710,12 @@
     "cookie": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
-      "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=",
+      "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s="
-      "dev": true
     },
     "cookie-signature": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
-      "dev": true
     },
     "copy-concurrently": {
       "version": "1.0.5",
@@ -3859,7 +3851,6 @@
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
       "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
       "requires": {
         "ms": "2.0.0"
       }
@@ -4108,8 +4099,7 @@
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
-      "dev": true
     },
     "des.js": {
       "version": "1.0.0",
@@ -4124,8 +4114,7 @@
     "destroy": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
-      "dev": true
     },
     "detect-node": {
       "version": "2.0.4",
@@ -4257,6 +4246,12 @@
         "is-obj": "^1.0.0"
       }
     },
+    "dotenv": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-6.2.0.tgz",
+      "integrity": "sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==",
+      "dev": true
+    },
     "download": {
       "version": "6.2.5",
       "resolved": "https://registry.npmjs.org/download/-/download-6.2.5.tgz",
@@ -4334,8 +4329,7 @@
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
-      "dev": true
     },
     "electron-to-chromium": {
       "version": "1.3.84",
@@ -4367,8 +4361,7 @@
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
-      "dev": true
     },
     "end-of-stream": {
       "version": "1.4.1",
@@ -4451,8 +4444,7 @@
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
-      "dev": true
     },
     "escape-string-regexp": {
       "version": "1.0.5",
@@ -4500,8 +4492,7 @@
     "etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
-      "dev": true
     },
     "eventemitter3": {
       "version": "3.1.0",
@@ -4707,7 +4698,6 @@
       "version": "4.16.4",
       "resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz",
       "integrity": "sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==",
-      "dev": true,
       "requires": {
         "accepts": "~1.3.5",
         "array-flatten": "1.1.1",
@@ -4744,8 +4734,7 @@
         "array-flatten": {
           "version": "1.1.1",
           "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-          "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
+          "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
-          "dev": true
         }
       }
     },
@@ -5064,7 +5053,6 @@
       "version": "1.1.1",
       "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz",
       "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==",
-      "dev": true,
       "requires": {
         "debug": "2.6.9",
         "encodeurl": "~1.0.2",
@@ -5133,7 +5121,6 @@
       "version": "1.5.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.9.tgz",
       "integrity": "sha512-Bh65EZI/RU8nx0wbYF9shkFZlqLP+6WT/5FnA3cE/djNSuKNHJEinGGZgu/cQEkeeb2GdFOgenAmn8qaqYke2w==",
-      "dev": true,
       "requires": {
         "debug": "=3.1.0"
       },
@@ -5142,7 +5129,6 @@
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
           "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "dev": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -5184,8 +5170,7 @@
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
-      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
+      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
-      "dev": true
     },
     "fragment-cache": {
       "version": "0.2.1",
@@ -5199,8 +5184,7 @@
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
-      "dev": true
     },
     "from2": {
       "version": "2.3.0",
@@ -5256,7 +5240,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5277,12 +5262,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5297,17 +5284,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5424,7 +5414,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5436,6 +5427,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5450,6 +5442,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5457,12 +5450,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5481,6 +5476,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5561,7 +5557,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5573,6 +5570,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5658,7 +5656,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5694,6 +5693,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5713,6 +5713,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5756,12 +5757,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -6793,7 +6796,6 @@
       "version": "4.7.2",
       "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
       "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
-      "dev": true,
       "requires": {
         "invariant": "^2.2.1",
         "loose-envify": "^1.2.0",
@@ -6806,7 +6808,6 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
           "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
-          "dev": true,
           "requires": {
             "loose-envify": "^1.0.0"
           }
@@ -6827,8 +6828,7 @@
     "hoist-non-react-statics": {
       "version": "2.5.5",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
-      "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==",
+      "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
-      "dev": true
     },
     "hosted-git-info": {
       "version": "2.7.1",
@@ -7016,7 +7016,6 @@
       "version": "1.6.3",
       "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
       "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
-      "dev": true,
       "requires": {
         "depd": "~1.1.2",
         "inherits": "2.0.3",
@@ -7074,7 +7073,6 @@
       "version": "0.4.23",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
       "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==",
-      "dev": true,
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3"
       }
@@ -7379,8 +7377,7 @@
     "inherits": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
-      "dev": true
     },
     "ini": {
       "version": "1.3.5",
@@ -7418,7 +7415,6 @@
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
       "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.0.0"
       }
@@ -7444,8 +7440,7 @@
     "ipaddr.js": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.8.0.tgz",
-      "integrity": "sha1-6qM9bd16zo9/b+DJygRA5wZzix4=",
+      "integrity": "sha1-6qM9bd16zo9/b+DJygRA5wZzix4="
-      "dev": true
     },
     "is-absolute": {
       "version": "0.1.7",
@@ -7500,8 +7495,7 @@
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
-      "dev": true
     },
     "is-builtin-module": {
       "version": "1.0.0",
@@ -7927,8 +7921,7 @@
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-      "dev": true
     },
     "js-yaml": {
       "version": "3.12.0",
@@ -8331,7 +8324,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
@@ -8445,8 +8437,7 @@
     "media-typer": {
       "version": "0.3.0",
       "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
-      "dev": true
     },
     "mem": {
       "version": "4.0.0",
@@ -8504,8 +8495,7 @@
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
-      "dev": true
     },
     "merge-stream": {
       "version": "1.0.1",
@@ -8519,8 +8509,7 @@
     "methods": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
-      "dev": true
     },
     "micromatch": {
       "version": "3.1.10",
@@ -8556,20 +8545,17 @@
     "mime": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz",
-      "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==",
+      "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ=="
-      "dev": true
     },
     "mime-db": {
       "version": "1.37.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.37.0.tgz",
-      "integrity": "sha512-R3C4db6bgQhlIhPU48fUtdVmKnflq+hRdad7IyKhtFj06VPNVdk2RhiYL3UjQIlso8L+YxAtFkobT0VK+S/ybg==",
+      "integrity": "sha512-R3C4db6bgQhlIhPU48fUtdVmKnflq+hRdad7IyKhtFj06VPNVdk2RhiYL3UjQIlso8L+YxAtFkobT0VK+S/ybg=="
-      "dev": true
     },
     "mime-types": {
       "version": "2.1.21",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.21.tgz",
       "integrity": "sha512-3iL6DbwpyLzjR3xHSFNFeb9Nz/M8WDkX33t1GFQnFOllWk8pOrh/LSrB5OXlnlW5P9LH73X6loW/eogc+F5lJg==",
-      "dev": true,
       "requires": {
         "mime-db": "~1.37.0"
       }
@@ -8731,8 +8717,7 @@
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-      "dev": true
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -8822,8 +8807,7 @@
     "negotiator": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
-      "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=",
+      "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk="
-      "dev": true
     },
     "neo-async": {
       "version": "2.6.0",
@@ -9104,8 +9088,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-      "dev": true
     },
     "object-copy": {
       "version": "0.1.0",
@@ -9215,7 +9198,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
       "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
-      "dev": true,
       "requires": {
         "ee-first": "1.1.1"
       }
@@ -9511,8 +9493,7 @@
     "parseurl": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz",
-      "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=",
+      "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M="
-      "dev": true
     },
     "pascalcase": {
       "version": "0.1.1",
@@ -9565,8 +9546,7 @@
     "path-to-regexp": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
-      "dev": true
     },
     "path-type": {
       "version": "1.1.0",
@@ -10641,7 +10621,6 @@
       "version": "15.6.2",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
       "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.3.1",
         "object-assign": "^4.1.1"
@@ -10657,7 +10636,6 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
       "integrity": "sha512-5erio2h9jp5CHGwcybmxmVqHmnCBZeewlfJ0pex+UW7Qny7OOZXTtH56TGNyBizkgiOwhJtMKrVzDTeKcySZwA==",
-      "dev": true,
       "requires": {
         "forwarded": "~0.1.2",
         "ipaddr.js": "1.8.0"
@@ -10731,8 +10709,7 @@
     "qs": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
+      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
-      "dev": true
     },
     "query-string": {
       "version": "5.1.1",
@@ -10810,14 +10787,12 @@
     "range-parser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
-      "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=",
+      "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4="
-      "dev": true
     },
     "raw-body": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.3.tgz",
       "integrity": "sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==",
-      "dev": true,
       "requires": {
         "bytes": "3.0.0",
         "http-errors": "1.6.3",
@@ -10849,7 +10824,6 @@
       "version": "16.6.1",
       "resolved": "https://registry.npmjs.org/react/-/react-16.6.1.tgz",
       "integrity": "sha512-OtawJThYlvRgm9BXK+xTL7BIlDx8vv21j+fbQDjRRUyok6y7NyjlweGorielTahLZHYIdKUoK2Dp9ByVWuMqxw==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -10861,7 +10835,6 @@
       "version": "16.6.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.6.1.tgz",
       "integrity": "sha512-zm+wBuEMGm009Wt1uE4Zw5KcXOW7qC4E/xW/fpJsCsbOco4U/R84u+DzzO/S4SYSdNBcqcaulcp4w3FXl8pImw==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -10873,7 +10846,6 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
       "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==",
-      "dev": true,
       "requires": {
         "history": "^4.7.2",
         "hoist-non-react-statics": "^2.5.0",
@@ -10887,14 +10859,12 @@
         "isarray": {
           "version": "0.0.1",
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
-          "dev": true
         },
         "path-to-regexp": {
           "version": "1.7.0",
           "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
           "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
-          "dev": true,
           "requires": {
             "isarray": "0.0.1"
           }
@@ -10905,7 +10875,6 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz",
       "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==",
-      "dev": true,
       "requires": {
         "history": "^4.7.2",
         "invariant": "^2.2.4",
@@ -11243,8 +11212,7 @@
     "resolve-pathname": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
-      "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg==",
+      "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
-      "dev": true
     },
     "resolve-url": {
       "version": "0.2.1",
@@ -11316,8 +11284,7 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-      "dev": true
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -11331,8 +11298,7 @@
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-      "dev": true
     },
     "sass-graph": {
       "version": "2.2.4",
@@ -11496,7 +11462,6 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.11.0.tgz",
       "integrity": "sha512-MAYbBfmiEHxF0W+c4CxMpEqMYK+rYF584VP/qMKSiHM6lTkBKKYOJaDiSILpJHla6hBOsVd6GucPL46o2Uq3sg==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
@@ -11593,7 +11558,6 @@
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz",
       "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==",
-      "dev": true,
       "requires": {
         "debug": "2.6.9",
         "depd": "~1.1.2",
@@ -11635,7 +11599,6 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz",
       "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==",
-      "dev": true,
       "requires": {
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
@@ -11687,8 +11650,7 @@
     "setprototypeof": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
-      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
+      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
-      "dev": true
     },
     "sha.js": {
       "version": "2.4.11",
@@ -12172,8 +12134,7 @@
     "statuses": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
-      "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==",
+      "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
-      "dev": true
     },
     "stdout-stream": {
       "version": "1.4.1",
@@ -12812,7 +12773,6 @@
       "version": "1.6.16",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz",
       "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==",
-      "dev": true,
       "requires": {
         "media-typer": "0.3.0",
         "mime-types": "~2.1.18"
@@ -13134,8 +13094,7 @@
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
-      "dev": true
     },
     "unquote": {
       "version": "1.1.1",
@@ -13316,8 +13275,7 @@
     "utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
-      "dev": true
     },
     "uuid": {
       "version": "3.3.2",
@@ -13350,14 +13308,12 @@
     "value-equal": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
-      "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw==",
+      "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
-      "dev": true
     },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
-      "dev": true
     },
     "vendors": {
       "version": "1.0.2",
@@ -13452,7 +13408,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz",
       "integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.0.0"
       }

package.json

@@ -13,6 +13,14 @@
   },
   "author": "Andres Alcocer",
   "license": "ISC",
+  "dependencies": {
+    "react": "^16.6.1",
+    "react-dom": "^16.6.1",
+    "react-router-dom": "^4.3.1",
+    "express": "^4.16.4",
+    "axios": "^0.18.0",
+    "prop-types": "^15.6.2"
+  },
   "devDependencies": {
     "@babel/core": "^7.1.5",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
@@ -22,12 +30,11 @@
     "@babel/polyfill": "^7.0.0-beta.51",
     "@babel/preset-env": "^7.1.5",
     "@babel/preset-react": "^7.0.0",
-    "axios": "^0.18.0",
     "babel-loader": "^8.0.4",
     "clean-webpack-plugin": "^1.0.0",
     "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^1.0.1",
-    "express": "^4.16.4",
+    "dotenv": "^6.2.0",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^2.0.0",
     "html-loader": "^0.5.5",
@@ -36,10 +43,6 @@
     "mini-css-extract-plugin": "^0.4.4",
     "node-sass": "^4.10.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "prop-types": "^15.6.2",
-    "react": "^16.6.1",
-    "react-dom": "^16.6.1",
-    "react-router-dom": "^4.3.1",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "svg-inline-loader": "^0.8.0",

src/components/DropdownContent.js

@@ -1,8 +1,8 @@
-import React from 'react'; 
+import React from 'react';
 
 
 const dropdownContent = () => (
-  
+
   <div className="dropdownContainer">
     <div className="navigation__container--userLogo">
       <div className="dropdownContent">
@@ -28,9 +28,7 @@ const dropdownContent = () => (
       </div>
     </div>
   </div>
-
-  
 );
 
-export default dropdownContent; 
+export default dropdownContent;
 

src/components/Header.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import PlayLogo from '../static/images/play-button.svg';
+import AddLogo from '../static/images/add.svg';
+
+
+export default function Header(props) {
+  const backgroundStyle = {
+    backgroundSize: "cover",
+    backgroundImage: `url(https://image.tmdb.org/t/p/original/${props.movie.backdrop_path})`,
+    backgroundPosition: "center",
+  }
+
+  return (
+    <header style={backgroundStyle} className="header">
+      <div className="header__container">
+        <h1 className="header__container-heading">{props.movie.name}</h1>
+        <button onClick={() => alert("not a movie!")} className="header__container-btnPlay">
+          <PlayLogo className="header__container-btnMyList-play" />
+          Play
+        </button>
+
+        <button className="header__container-btnMyList">
+          <AddLogo className="header__container-btnMyList-add" />
+          My List
+        </button>
+        <p className="header__container-overview">{props.movie.overview}</p>
+      </div>
+      <div className="header--fadeBottom"></div>
+    </header>
+  )
+}

src/components/Header/Header.js

@@ -1,40 +0,0 @@
-import React, { Component } from 'react';
-import PlayLogo from '../../static/images/play-button.svg'; 
-import AddLogo from '../../static/images/add.svg'; 
-
-
-class Header extends Component {
-
-  render() {
-
-    /** Background image for the header component */
-    const backgroundStyle = {
-      backgroundSize: "cover",
-      backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})`,
-      backgroundPosition: "center",
-    }
-
-    return (
-      <header style={backgroundStyle} className="header">
-          <div className="header__container">
-            <h1 className="header__container-heading">{this.props.movie.name}</h1>
-
-            <button onClick={() => alert("not a movie!")} className="header__container-btnPlay">
-              <PlayLogo className="header__container-btnMyList-play" />
-              Play
-            </button>
-
-            <button className="header__container-btnMyList">
-              <AddLogo className="header__container-btnMyList-add" />
-              My List
-            </button>
-              <p className="header__container-overview">{this.props.movie.overview}</p>
-          </div>    
-        <div className="header--fadeBottom"></div>
-      </header>
-    )
-
-  }
-}
-
-export default Header; 

src/components/ModalMovieDetails.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Aux from '../hoc/Aux';
+import AddIcon from '../static/images/add.svg';
+import PlayIcon from '../static/images/play-button.svg';
+
+import React from 'react'
+
+export default function ModalMovieDetails(props) {
+  return (
+    <Aux>
+      <div className="modal__container">
+        <h1 className="modal__title">
+          {props.movie.title || props.movie.name}
+        </h1>
+        <p className="modal__info">
+          <span className="modal__rating">
+            Rating: {props.movie.vote_average * 10}%{" "}
+          </span>
+          Release date: {props.movie.release_date || props.movie.first_air_date}  Runtime: {props.movie.runtime || props.movie.episode_run_time}m
+        </p>
+        <p className="modal__episode">
+          {props.movie.number_of_episodes ? " Episodes: " + props.movie.number_of_episodes : ""}
+          {props.movie.number_of_seasons ? " Seasons: " + props.movie.number_of_seasons : ""}
+        </p>
+        <p className="modal__overview">{props.movie.overview}</p>
+        <button className="modal__btn modal__btn--red">
+          <PlayIcon className="modal__btn--icon" />
+          Play
+        </button>
+        <button className="modal__btn">
+          <AddIcon className="modal__btn--icon" />
+          My List
+        </button>
+      </div>
+    </Aux>
+  );
+}

src/components/ModalMovieDetails/ModalMovieDetails.js

@@ -1,41 +0,0 @@
-import React, { Component } from 'react'; 
-import Aux from '../../hoc/Aux/Aux';
-import AddIcon from '../../static/images/add.svg'; 
-import PlayIcon from '../../static/images/play-button.svg'; 
- 
-
-class ModalMovieDetails extends Component {
-
-
-   render() {
-      
-      return <Aux>
-          <div className="modal__container">
-            <h1 className="modal__title">
-              {this.props.movie.title || this.props.movie.name}
-            </h1>
-            <p className="modal__info">
-              <span className="modal__rating">
-                Rating: {this.props.movie.vote_average * 10}%{" "}
-              </span>
-              Release date: {this.props.movie.release_date || this.props.movie.first_air_date }  Runtime: { this.props.movie.runtime || this.props.movie.episode_run_time}m
-            </p>
-            <p className="modal__episode">
-              {this.props.movie.number_of_episodes ? " Episodes: " + this.props.movie.number_of_episodes : ""}
-              {this.props.movie.number_of_seasons ? " Seasons: " + this.props.movie.number_of_seasons : ""}
-            </p>
-            <p className="modal__overview">{this.props.movie.overview}</p>
-            <button className="modal__btn modal__btn--red">
-              <PlayIcon className="modal__btn--icon" />
-              Play
-            </button>
-            <button className="modal__btn">
-              <AddIcon className="modal__btn--icon" />
-              My List
-            </button>
-          </div>
-        </Aux>;
-   }
-}
-
-export default ModalMovieDetails; 

src/components/Movie/Movie.js

@@ -1,12 +1,11 @@
 import React from 'react';
- 
-const movieRow = (props) => (
 
+const movieRow = (props) => (
    <div className="movie">
-         <div onClick={props.movieDetails} className="movie__column-poster">
+      <div onClick={props.movieDetails} className="movie__column-poster">
-            <img src={props.movieImage} alt="" className="movie__poster" />
+         <img src={props.movieImage} alt="" className="movie__poster" />
-         </div>
+      </div>
-   </div> 
+   </div>
 );
 
 export default movieRow; 

src/components/Movie/MovieDetails.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import Aux from '../../hoc/Aux';
+import AddIcon from '../../static/images/add.svg';
+import PlayIcon from '../../static/images/play-button.svg';
+
+export default function MovieDetails(props) {
+  return (
+    <Aux>
+      <div className="modal__container">
+        <h1 className="modal__title">
+          {props.movie.title || props.movie.name}
+        </h1>
+        <p className="modal__info">
+          <span className="modal__rating">
+            Rating: {props.movie.vote_average * 10}%{" "}
+          </span>
+          Release date: {props.movie.release_date || props.movie.first_air_date}  Runtime: {props.movie.runtime || props.movie.episode_run_time}m
+        </p>
+        <p className="modal__episode">
+          {props.movie.number_of_episodes ? " Episodes: " + props.movie.number_of_episodes : ""}
+          {props.movie.number_of_seasons ? " Seasons: " + props.movie.number_of_seasons : ""}
+        </p>
+        <p className="modal__overview">{props.movie.overview}</p>
+        <button className="modal__btn modal__btn--red">
+          <PlayIcon className="modal__btn--icon" />
+          Play
+        </button>
+        <button className="modal__btn">
+          <AddIcon className="modal__btn--icon" />
+          My List
+        </button>
+      </div>
+    </Aux>
+  );
+}

src/components/Movie/MovieDetails/MovieDetails.js

@@ -1,41 +0,0 @@
-import React, { Component } from 'react'; 
-import Aux from '../../../hoc/Aux/Aux';
-import AddIcon from '../../../static/images/add.svg'; 
-import PlayIcon from '../../../static/images/play-button.svg'; 
- 
-
-class MovieDetails extends Component {
-
-
-   render() {
-      
-      return <Aux>
-          <div className="modal__container">
-            <h1 className="modal__title">
-              {this.props.movie.title || this.props.movie.name}
-            </h1>
-            <p className="modal__info">
-              <span className="modal__rating">
-                Rating: {this.props.movie.vote_average * 10}%{" "}
-              </span>
-              Release date: {this.props.movie.release_date || this.props.movie.first_air_date }  Runtime: { this.props.movie.runtime || this.props.movie.episode_run_time}m
-            </p>
-            <p className="modal__episode">
-              {this.props.movie.number_of_episodes ? " Episodes: " + this.props.movie.number_of_episodes : ""}
-              {this.props.movie.number_of_seasons ? " Seasons: " + this.props.movie.number_of_seasons : ""}
-            </p>
-            <p className="modal__overview">{this.props.movie.overview}</p>
-            <button className="modal__btn modal__btn--red">
-              <PlayIcon className="modal__btn--icon" />
-              Play
-            </button>
-            <button className="modal__btn">
-              <AddIcon className="modal__btn--icon" />
-              My List
-            </button>
-          </div>
-        </Aux>;
-   }
-}
-
-export default MovieDetails; 

src/components/MovieGenre.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default function MovieGenre(props) {
+   let netflixUrl = false;
+   if (props.url === "/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
+      netflixUrl = true;
+   }
+
+   return (
+      <div onClick={props.movieDetailsModal}
+         className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
+         <img src={props.posterUrl} className="movieShowcase__container--movie-image" />
+      </div>
+   );
+} 

src/components/MovieGenreImage.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export default function MovieGenreImage(props) {
+   let netflixUrl = false;
+
+   if (props.url === "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
+      netflixUrl = true;
+   }
+
+   return (
+      <div onClick={props.movieDetailsModal}
+         className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
+         <img src={props.posterUrl} className="movieShowcase__container--movie-image" />
+      </div>
+   );
+}

src/components/NavigationItem.js

@@ -1,11 +1,9 @@
-import React from 'react'; 
+import React from 'react';
 import { NavLink } from 'react-router-dom';
 
 const navigationItem = (props) => (
-   
    <NavLink className="navigation__container-link" exact={props.exact}
-   to={props.link}>{props.children}</NavLink>
+      to={props.link}>{props.children}</NavLink>
-   
 )
 
 export default navigationItem;

src/components/UI/Backdrop.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const backdrop = (props) => (
+   props.show ? <div
+      onClick={props.toggleBackdrop}
+      className="backdrop"></div> : null
+);
+
+export default backdrop; 

src/components/UI/Backdrop/Backdrop.js

@@ -1,10 +0,0 @@
-import React from 'react'; 
-
-
-const backdrop = (props) => (
-   props.show ? <div 
-                  onClick={props.toggleBackdrop}
-                  className="backdrop"></div> : null 
-); 
-
-export default backdrop; 

src/components/UI/Modal.js

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import Aux from '../../hoc/Aux';
+import Backdrop from './Backdrop'
+
+
+export default function Modal(props) {
+   const backgroundStyle = {
+      backgroundSize: "cover",
+      backgroundImage: `url(https://image.tmdb.org/t/p/original/${props.movie.backdrop_path || props.movie.poster_path})`,
+   }
+
+   return (
+      <Aux>
+         <Backdrop show={props.show} toggleBackdrop={props.modalClosed} />
+         <div
+            style={backgroundStyle}
+            className={(props.show ? "modal show" : "modal hide")}>
+            {props.children}
+         </div>
+      </Aux>
+   )
+}

src/components/UI/Modal/Modal.js

@@ -1,27 +0,0 @@
-import React, {Component} from 'react'; 
-import Aux from '../../../hoc/Aux/Aux'; 
-import Backdrop from '../Backdrop/Backdrop'
-
-
-class Modal extends Component {
-
-   render() {
-      const backgroundStyle = {
-         backgroundSize: "cover",
-         backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path || this.props.movie.poster_path})`,
-      }
-      return (
-         <Aux>
-            <Backdrop show={this.props.show} toggleBackdrop={this.props.modalClosed} />
-               <div
-                  style={backgroundStyle}
-                  className={(this.props.show ? "modal show" : "modal hide")}>
-                  {this.props.children} 
-               </div>
-         </Aux>
-      ); 
-   }
-
-}
-
-export default Modal; 

src/containers/App.js

@@ -1,16 +1,14 @@
 import React, { Component } from 'react';
-
+import Layout from './Layout';
-import Layout from './Layout/Layout'; 
 
 
 class App extends Component {
 
   render() {
     return (
-      <Layout/>
+      <Layout />
     )
   }
-
 }
 
 export default App; 

src/containers/Layout.js

@@ -1,11 +1,11 @@
-import React, { Component } from 'react'; 
+import React, { Component } from 'react';
-import axios from "axios"; 
+import axios from "axios";
 
-import Navbar from '../Navbar/Navbar'; 
+import Navbar from './Navbar';
-import MainContent from '../Layout/MainContent/MainContent'; 
+import MainContent from './MainContent';
-import Movie from '../../components/Movie/Movie'; 
+import Movie from '../components/Movie/Movie';
-import Modal from '../../components/UI/Modal/Modal'; 
+import Modal from '../components/UI/Modal';
-import MovieDetails from '../../components/Movie/MovieDetails/MovieDetails';
+import MovieDetails from '../components/Movie/MovieDetails';
 
 class Layout extends Component {
 
@@ -39,10 +39,10 @@ class Layout extends Component {
 
             /** Set the movie object to our Movie component */
             const movieComponent = <Movie
-            movieDetails={() => this.selectMovieHandler(movie)}
+              movieDetails={() => this.selectMovieHandler(movie)}
-            key={movie.id}
+              key={movie.id}
-            movieImage={movieImageUrl}
+              movieImage={movieImageUrl}
-            movie={movie} />
+              movie={movie} />
 
             /** Push our movie component to our movieRows array */
             movieRows.push(movieComponent);
@@ -93,7 +93,7 @@ class Layout extends Component {
     axios.get(url)
       .then(res => {
         const movieData = res.data;
-        
+
         this.setState({ movieOverview: movieData });
       }).catch(error => {
         console.log(error);
@@ -112,13 +112,13 @@ class Layout extends Component {
         <Navbar showMovies={this.onSearchHandler} />
         {
           this.state.toggleMovieList ? <MainContent /> : <div
-          className="search-container">{this.state.MovieList}</div>
+            className="search-container">{this.state.MovieList}</div>
         }
 
-        <Modal show={this.state.toggleModal} 
+        <Modal show={this.state.toggleModal}
-               modalClosed={this.closeModal} 
+          modalClosed={this.closeModal}
-               movie={this.state.movieOverview}>
+          movie={this.state.movieOverview}>
-          
+
           <MovieDetails movie={this.state.movieOverview} />
         </Modal>
       </div>

src/containers/MainContent.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import axios from 'axios';
-import Header from '../../../components/Header/Header';
+import Header from '../components/Header';
-import MovieGenreRow from '../../MovieGenreRow/MovieGenreRow';
+import MovieGenreRow from './MovieGenreRow';
-import Footer from '../../../components/Footer/Footer';
+import Footer from '../components/Footer';
 import { BrowserRouter } from "react-router-dom";
 
 

src/containers/MovieGenreRow.js

@@ -1,8 +1,8 @@
 import React, { Component } from "react";
-import axios from '../../axios-movies'; 
+import axios from '../axios-movies';
-import MovieGenre from './MovieGenre'; 
+import MovieGenre from '../components/MovieGenre';
-import Modal from "../../components/UI/Modal/Modal"; 
+import Modal from "../components/UI/Modal";
-import MovieDetails from '../../components/Movie/MovieDetails/MovieDetails'; 
+import MovieDetails from '../components/Movie/MovieDetails';
 
 class MovieGenreRow extends Component {
 
@@ -23,46 +23,46 @@ class MovieGenreRow extends Component {
 
   /** Make all API calls as soon as our MovieGenreRow component mounts. */
   componentWillMount() {
-    this.getTrending(); 
+    this.getTrending();
-    this.getTopRated(); 
+    this.getTopRated();
-    this.getComedyMovies(); 
+    this.getComedyMovies();
-    this.getActionMovies(); 
+    this.getActionMovies();
-    this.getHorrorMovies(); 
+    this.getHorrorMovies();
-    this.getNetflixMovies(); 
+    this.getNetflixMovies();
-    this.getRomanceMovies(); 
+    this.getRomanceMovies();
-    this.getDocumentaries(); 
+    this.getDocumentaries();
-    this.getAnimatedMovies(); 
+    this.getAnimatedMovies();
   }
-  
+
   /** 
    Get the movie details for a single movie 
    @param {object} movieObject - A single movie object
    */
   getMovieDetails = (movieObject) => {
     console.log(movieObject);
-    this.setState({ toggleModal: true }); 
+    this.setState({ toggleModal: true });
-    this.setState({ movieOverview: movieObject }); 
+    this.setState({ movieOverview: movieObject });
-    
+
   }
 
   closeModal = () => {
-    this.setState({toggleModal: false})
+    this.setState({ toggleModal: false })
   }
 
 
   /** Extract our movie data and pass it to our MovieGenre Component. */
   getMovieRows = (res, url) => {
-    const results = res.data.results; 
+    const results = res.data.results;
-    let movieRows = []; 
+    let movieRows = [];
-     
+
     results.forEach((movie) => {
       let movieImageUrl = "https://image.tmdb.org/t/p/original/" + movie.backdrop_path;
       if (url === "/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
         movieImageUrl = "https://image.tmdb.org/t/p/original/" + movie.poster_path;
       }
-      
+
       if (movie.poster_path && movie.backdrop_path !== null) {
-       
+
         const movieComponent = <MovieGenre
           movieDetailsModal={() => this.getMovieDetails(movie)}
           key={movie.id}
@@ -72,21 +72,21 @@ class MovieGenreRow extends Component {
         movieRows.push(movieComponent);
       }
     })
-    
+
-   return movieRows; 
+    return movieRows;
-       
+
   }
 
   /**
    * Send request for movies that are popular right now
    */
   getTrending = () => {
-    const url = "/trending/all/week?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US"; 
+    const url = "/trending/all/week?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US";
-   
+
     axios.get(url)
       .then(res => {
         const movieRows = this.getMovieRows(res, url);
-        
+
         this.setState({ trendingMovieRow: movieRows });
       })
       .catch(error => {
@@ -98,15 +98,15 @@ class MovieGenreRow extends Component {
    * Send request for movies that are top rated 
    */
   getTopRated = () => {
-    const url = "/movie/top_rated?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US"; 
+    const url = "/movie/top_rated?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US";
 
     axios.get(url)
       .then(res => {
         const movieRows = this.getMovieRows(res, url);
 
-        this.setState({ topRatedRow: movieRows }); 
+        this.setState({ topRatedRow: movieRows });
       }).catch(error => {
-        console.log(error); 
+        console.log(error);
       })
   }
 
@@ -118,12 +118,12 @@ class MovieGenreRow extends Component {
 
     axios.get(url)
       .then(res => {
-        const movieRows = this.getMovieRows(res, url); 
+        const movieRows = this.getMovieRows(res, url);
 
-        this.setState({ netflixOriginalsRow: movieRows }); 
+        this.setState({ netflixOriginalsRow: movieRows });
       })
       .catch(error => {
-        console.log(error); 
+        console.log(error);
       })
   }
 
@@ -211,61 +211,61 @@ class MovieGenreRow extends Component {
       })
   }
 
-   render() {
+  render() {
 
-      return (  
+    return (
-        <div className="movieShowcase">
+      <div className="movieShowcase">
-          <h1 className="movieShowcase__heading">NETFLIX ORIGINALS</h1>
+        <h1 className="movieShowcase__heading">NETFLIX ORIGINALS</h1>
-          <div className="movieShowcase__container">
+        <div className="movieShowcase__container">
-            {this.state.netflixOriginalsRow}
+          {this.state.netflixOriginalsRow}
-          </div>
-          
-          <h1 className="movieShowcase__heading">Trending Now</h1>
-          <div className="movieShowcase__container">
-              {this.state.trendingMovieRow}
-          </div>
-
-          <h1 className="movieShowcase__heading">Top Rated</h1>
-          <div className="movieShowcase__container">
-              {this.state.topRatedRow}
-          </div>
-
-          <h1 className="movieShowcase__heading">Action Movies</h1>
-          <div className="movieShowcase__container">
-              {this.state.actionMovieRow}
-          </div>
-
-          <h1 className="movieShowcase__heading">Comedy Movies</h1>
-          <div className="movieShowcase__container">
-              {this.state.comedyMovieRow}
-          </div>
-
-          <h1 className="movieShowcase__heading">Horror Movies</h1>
-          <div className="movieShowcase__container">
-              {this.state.horrorMovieRow}
-          </div>
-
-          <h1 className="movieShowcase__heading">Romance Movies</h1>
-          <div className="movieShowcase__container">
-              {this.state.romanceMovieRow}
-          </div>
-
-          <h1 className="movieShowcase__heading">Animated Films</h1>
-          <div className="movieShowcase__container">
-              {this.state.animatedMovieRow}
-          </div>
-
-          <h1 className="movieShowcase__heading">Documentaries</h1>
-          <div className="movieShowcase__container">
-              {this.state.documentaryRow}
-          </div>
-        
-          <Modal show={this.state.toggleModal} modalClosed={this.closeModal} movie={this.state.movieOverview}>
-            <MovieDetails movie={this.state.movieOverview}/>
-          </Modal>
         </div>
-      );
+
-   }
+        <h1 className="movieShowcase__heading">Trending Now</h1>
+        <div className="movieShowcase__container">
+          {this.state.trendingMovieRow}
+        </div>
+
+        <h1 className="movieShowcase__heading">Top Rated</h1>
+        <div className="movieShowcase__container">
+          {this.state.topRatedRow}
+        </div>
+
+        <h1 className="movieShowcase__heading">Action Movies</h1>
+        <div className="movieShowcase__container">
+          {this.state.actionMovieRow}
+        </div>
+
+        <h1 className="movieShowcase__heading">Comedy Movies</h1>
+        <div className="movieShowcase__container">
+          {this.state.comedyMovieRow}
+        </div>
+
+        <h1 className="movieShowcase__heading">Horror Movies</h1>
+        <div className="movieShowcase__container">
+          {this.state.horrorMovieRow}
+        </div>
+
+        <h1 className="movieShowcase__heading">Romance Movies</h1>
+        <div className="movieShowcase__container">
+          {this.state.romanceMovieRow}
+        </div>
+
+        <h1 className="movieShowcase__heading">Animated Films</h1>
+        <div className="movieShowcase__container">
+          {this.state.animatedMovieRow}
+        </div>
+
+        <h1 className="movieShowcase__heading">Documentaries</h1>
+        <div className="movieShowcase__container">
+          {this.state.documentaryRow}
+        </div>
+
+        <Modal show={this.state.toggleModal} modalClosed={this.closeModal} movie={this.state.movieOverview}>
+          <MovieDetails movie={this.state.movieOverview} />
+        </Modal>
+      </div>
+    );
+  }
 }
 
 export default MovieGenreRow; 

src/containers/MovieGenreRow/MovieGenre.js

@@ -1,25 +0,0 @@
-import React, { Component } from 'react';
- 
-
-class MovieGenre extends Component {
-
-
-   render() {
-      let netflixUrl = false; 
-
-      if (this.props.url === "/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
-        netflixUrl = true; 
-      }
-
-      return (
-        
-         <div onClick={this.props.movieDetailsModal} 
-            className={ "movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
-            <img src={this.props.posterUrl} className="movieShowcase__container--movie-image"/>
-         </div>
-
-      ); 
-   }
-}
-
-export default MovieGenre; 

src/containers/MovieGenreRow/MovieGenreImage.js

@@ -1,25 +0,0 @@
-import React, { Component } from 'react';
- 
-
-class MovieGenreImage extends Component {
-
-
-   render() {
-      let netflixUrl = false; 
-
-      if (this.props.url === "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") {
-        netflixUrl = true; 
-      }
-
-      return (
-        
-         <div onClick={this.props.movieDetailsModal} 
-            className={ "movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
-            <img src={this.props.posterUrl} className="movieShowcase__container--movie-image"/>
-         </div>
-
-      ); 
-   }
-}
-
-export default MovieGenreImage; 

src/containers/Navbar.js

@@ -1,28 +1,28 @@
 import React, { Component } from 'react';
-import NavigationItem from '../../components/NavigationItem/NavigationItem'
+import NavigationItem from '../components/NavigationItem'
-import SearchLogo from '../../static/images/search-icon.svg'; 
+import SearchLogo from '../static/images/search-icon.svg';
-import NetflixLogo from '../../static/images/Netflix_Logo_RGB.png'; 
+import NetflixLogo from '../static/images/Netflix_Logo_RGB.png';
-import BellLogo from '../../static/images/bell-logo.svg';
+import BellLogo from '../static/images/bell-logo.svg';
-import DropdownArrow from '../../static/images/drop-down-arrow.svg'; 
+import DropdownArrow from '../static/images/drop-down-arrow.svg';
-import DropdownContent from "./DropdownContent"; 
+import DropdownContent from "../components/DropdownContent";
 
 
 class navigation extends Component {
- state = {
+  state = {
-   scrolling: false
+    scrolling: false
- }
+  }
 
   componentDidMount() {
-    window.addEventListener('scroll', this.handleScroll); 
+    window.addEventListener('scroll', this.handleScroll);
   }
 
   componentWillUnmount() {
-    window.removeEventListener('scroll', this.handleScroll); 
+    window.removeEventListener('scroll', this.handleScroll);
   }
 
   /** changes the scrolling state depending on the Y-position */
   handleScroll = (event) => {
-    if (window.scrollY === 0 ) {
+    if (window.scrollY === 0) {
       this.setState({ scrolling: false });
     }
     else if (window.scrollY > 50) {
@@ -30,44 +30,45 @@ class navigation extends Component {
     }
   }
 
- 
 
-  render () {
+  render() {
+    const { scrolling } = this.state;
+    const { showMovies } = this.props;
 
     return (
-      <nav className={"navigation " + (this.state.scrolling ? "black" : "")} >
+      <nav className={"navigation " + (scrolling ? "black" : "")} >
         <ul className="navigation__container">
-          <NavigationItem link="/" exact><img className="navigation__container--logo" src={NetflixLogo} alt=""/></NavigationItem>
+          <NavigationItem link="/" exact><img className="navigation__container--logo" src={NetflixLogo} alt="" /></NavigationItem>
           <DropdownArrow className="navigation__container--downArrow-2"></DropdownArrow>
           <div className="navigation__container-link pseudo-link">Home</div>
           <div className="navigation__container-link pseudo-link">TV Shows</div>
           <div className="navigation__container-link pseudo-link">Movies</div>
           <div className="navigation__container-link pseudo-link">Recently Added</div>
           <div className="navigation__container-link pseudo-link">My List</div>
-      
+
 
           <div className="navigation__container--left">
             <SearchLogo className="logo" />
-            
+
             <input
-              onChange={this.props.showMovies}
+              onChange={showMovies}
               className="navigation__container--left__input"
               type="text"
               placeholder="Title, genres, people" />
-            
+
-          </div> 
+          </div>
-         
+
           <div className="navigation__container-link pseudo-link">KIDS</div>
           <div className="navigation__container-link pseudo-link">DVD</div>
-          <BellLogo className="navigation__container--bellLogo" />  
+          <BellLogo className="navigation__container--bellLogo" />
 
           <DropdownContent />
-          <DropdownArrow className="navigation__container--downArrow"/>
+          <DropdownArrow className="navigation__container--downArrow" />
-        
+
         </ul>
       </nav>
     )
   }
-} 
+}
 
 export default navigation; 

src/index.html

@@ -13,13 +13,4 @@
    <div id="app"></div>
 </body>
 
-</html>
+</html>
-
-
-
-
-
-
-
-
-

webpack.config.js

@@ -6,11 +6,10 @@ const CleanWebpackPlugin = require('clean-webpack-plugin');
 
 module.exports = {
 
-   entry: "./src/index.js", 
+   entry: "./src/index.js",
    output: {
       filename: "bundle.js",
    },
-
    module: {
       rules: [
          {
@@ -26,7 +25,7 @@ module.exports = {
             use: {
                loader: 'svg-react-loader'
             }
-            
+
          },
          {
             test: /\.scss$/,
@@ -37,7 +36,6 @@ module.exports = {
                      publicPath: '../'
                   }
                },
-               // 'style-loader',
                'css-loader',
                'sass-loader'
             ]
@@ -55,19 +53,22 @@ module.exports = {
                },
             ],
          }
-      ] // end rules array 
+      ]
+   },
+   node: {
+      fs: "empty"
    },
    plugins: [
       new HtmlWebPackPlugin({
          template: "./src/index.html",
          filename: "./index.html"
       }),
-      new CopyWebpackPlugin([{ from: 'src/static/images', to: 'static/images'}]),
+      new CopyWebpackPlugin([{ from: 'src/static/images', to: 'static/images' }]),
       new MiniCssExtractPlugin({
          // Options similar to the same options in webpackOptions.output
          // both options are optional
          filename: "main.css"
       }),
-      new CleanWebpackPlugin(['dist'])
+      new CleanWebpackPlugin(['dist']),
    ]
 };