diff --git a/README.md b/README.md index 4c8fd7876..b427d7e34 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,25 @@ # Project Movies -Replace this readme with your own information about your project. +Changing name to see -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +The main focus of this project was using routes in React. +We used APIs to fetch various movie and tv show collections to display on multiple pages with the help of useState, useEffect, Navigation Links and Routes. +This project was done in collaboration - by Nina Waldreus & Joanna Philips. ## The problem -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +First we sketched out the pages, components and the states we would need for each of them. +Next we implemented each page connecting them through routes and navigation links. +When faced with problems we turned for help to Stackoverflow, Google and other team members. +Also used ChatGPT for support. +Improvements for the future would be to make the information richer by using more endpoints from the API. ## View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +Deployed site: https://movie-night-tonight.netlify.app/ + + +## Image credits +https://www.flaticon.com/free-icons/back-button Back button icons created by icon_small - Flaticon +https://www.flaticon.com/free-icons/popcorn Popcorn icons created by Freepik - Flaticon +https://www.flaticon.com/free-icons/menu Menu icons created by Febrian Hidayat - Flaticon \ No newline at end of file diff --git a/code/.eslintrc.json b/code/.eslintrc.json index c9c0675c3..81138c66f 100644 --- a/code/.eslintrc.json +++ b/code/.eslintrc.json @@ -42,6 +42,10 @@ "allowSingleLine": true } ], + "linebreak-style":[ + "off", + "unix" + ], "comma-dangle": [ "error", "never" diff --git a/code/package-lock.json b/code/package-lock.json index bb51e893e..39c76fd9a 100644 --- a/code/package-lock.json +++ b/code/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "dependencies": { "@babel/eslint-parser": "^7.18.9", + "bootstrap": "^5.2.3", "eslint": "^8.21.0", "eslint-config-airbnb": "^19.0.4", "eslint-plugin-import": "^2.26.0", @@ -16,7 +17,9 @@ "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-bootstrap": "^2.7.2", + "react-dom": "^18.2.0", + "react-router-dom": "^6.9.0" }, "devDependencies": { "react-scripts": "5.0.1" @@ -1830,11 +1833,11 @@ } }, "node_modules/@babel/runtime": { - "version": "7.18.9", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz", - "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==", + "version": "7.21.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz", + "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==", "dependencies": { - "regenerator-runtime": "^0.13.4" + "regenerator-runtime": "^0.13.11" }, "engines": { "node": ">=6.9.0" @@ -3124,6 +3127,76 @@ } } }, + "node_modules/@popperjs/core": { + "version": "2.11.7", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", + "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, + "node_modules/@react-aria/ssr": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.5.0.tgz", + "integrity": "sha512-h0MJdSWOd1qObLnJ8mprU31wI8tmKFJMuwT22MpWq6psisOOZaga6Ml4u6Ee6M6duWWISjXvqO4Sb/J0PBA+nQ==", + "dependencies": { + "@swc/helpers": "^0.4.14" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, + "node_modules/@remix-run/router": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz", + "integrity": "sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q==", + "engines": { + "node": ">=14" + } + }, + "node_modules/@restart/hooks": { + "version": "0.4.9", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.9.tgz", + "integrity": "sha512-3BekqcwB6Umeya+16XPooARn4qEPW6vNvwYnlofIYe6h9qG1/VeD7UvShCWx11eFz5ELYmwIEshz+MkPX3wjcQ==", + "dependencies": { + "dequal": "^2.0.2" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@restart/ui": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.2.tgz", + "integrity": "sha512-hcYs8PwpmHEtwjihLVn2Jr89yrYajfhxN5HtTq3HA9U3+feg1SC3swBM8/qibMTCFsXWToEEtzJMV+LWE+Qjpg==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@popperjs/core": "^2.11.6", + "@react-aria/ssr": "^3.5.0", + "@restart/hooks": "^0.4.9", + "@types/warning": "^3.0.0", + "dequal": "^2.0.3", + "dom-helpers": "^5.2.0", + "uncontrollable": "^8.0.0", + "warning": "^4.0.3" + }, + "peerDependencies": { + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + } + }, + "node_modules/@restart/ui/node_modules/uncontrollable": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.0.tgz", + "integrity": "sha512-a954G/0JyXoZdpt0YIzTfoQyWtRS1VvygOBsHttCtZL8jDTKd6vQlUo811y46XnWoXIqQ36QKi3cSEdPuFADkA==", + "dependencies": { + "@types/react": ">=18.0.28" + }, + "peerDependencies": { + "react": ">=17.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -3466,6 +3539,14 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@swc/helpers": { + "version": "0.4.14", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz", + "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -3695,6 +3776,11 @@ "integrity": "sha512-fOwvpvQYStpb/zHMx0Cauwywu9yLDmzWiiQBC7gJyq5tYLUXFZvDG7VK1B7WBxxjBJNKFOZ0zLoOQn8vmATbhw==", "dev": true }, + "node_modules/@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + }, "node_modules/@types/q": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", @@ -3713,6 +3799,24 @@ "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==", "dev": true }, + "node_modules/@types/react": { + "version": "18.0.31", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.31.tgz", + "integrity": "sha512-EEG67of7DsvRDU6BLLI0p+k1GojDLz9+lZsnCpCRTa/lOokvyPBvp8S5x+A24hME3yyQuIipcP70KJ6H7Qupww==", + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -3728,6 +3832,11 @@ "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==", "dev": true }, + "node_modules/@types/scheduler": { + "version": "0.16.3", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" + }, "node_modules/@types/serve-index": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz", @@ -3768,6 +3877,11 @@ "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==", "dev": true }, + "node_modules/@types/warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", + "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==" + }, "node_modules/@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -5064,6 +5178,24 @@ "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", "dev": true }, + "node_modules/bootstrap": { + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz", + "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.6" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -5328,6 +5460,11 @@ "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==", "dev": true }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/clean-css": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz", @@ -6095,6 +6232,11 @@ "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==", "dev": true }, + "node_modules/csstype": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", + "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==" + }, "node_modules/damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -6216,6 +6358,14 @@ "node": ">= 0.8" } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "engines": { + "node": ">=6" + } + }, "node_modules/destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -6360,6 +6510,15 @@ "utila": "~0.4" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -8884,6 +9043,14 @@ "node": ">= 0.4" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/ipaddr.js": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz", @@ -14043,6 +14210,18 @@ "react-is": "^16.13.1" } }, + "node_modules/prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "dependencies": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + }, + "peerDependencies": { + "react": ">=0.14.0" + } + }, "node_modules/proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -14226,6 +14405,35 @@ "node": ">=14" } }, + "node_modules/react-bootstrap": { + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.2.tgz", + "integrity": "sha512-WDSln+mG4RLLFO01stkj2bEx/3MF4YihK9D/dWnHaSxOiQZLbhhlf95D2Jb20X3t2m7vMxRe888FVrfLJoGmmA==", + "dependencies": { + "@babel/runtime": "^7.17.2", + "@restart/hooks": "^0.4.6", + "@restart/ui": "^1.4.1", + "@types/react-transition-group": "^4.4.4", + "classnames": "^2.3.1", + "dom-helpers": "^5.2.1", + "invariant": "^2.2.4", + "prop-types": "^15.8.1", + "prop-types-extra": "^1.1.0", + "react-transition-group": "^4.4.2", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "@types/react": ">=16.14.8", + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -14375,6 +14583,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -14384,6 +14597,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.9.0.tgz", + "integrity": "sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==", + "dependencies": { + "@remix-run/router": "1.4.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.9.0.tgz", + "integrity": "sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==", + "dependencies": { + "@remix-run/router": "1.4.0", + "react-router": "6.9.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -14472,6 +14715,21 @@ "node": ">=10" } }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -14550,9 +14808,9 @@ } }, "node_modules/regenerator-runtime": { - "version": "0.13.9", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, "node_modules/regenerator-transform": { "version": "0.15.0", @@ -16115,8 +16373,7 @@ "node_modules/tslib": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", - "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==", - "dev": true + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" }, "node_modules/tsutils": { "version": "3.21.0", @@ -16221,6 +16478,20 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/uncontrollable": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", + "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", + "dependencies": { + "@babel/runtime": "^7.6.3", + "@types/react": ">=16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + }, + "peerDependencies": { + "react": ">=15.0.0" + } + }, "node_modules/unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", @@ -16443,6 +16714,14 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", @@ -18609,11 +18888,11 @@ } }, "@babel/runtime": { - "version": "7.18.9", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.9.tgz", - "integrity": "sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==", + "version": "7.21.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz", + "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==", "requires": { - "regenerator-runtime": "^0.13.4" + "regenerator-runtime": "^0.13.11" } }, "@babel/runtime-corejs3": { @@ -19509,6 +19788,58 @@ "source-map": "^0.7.3" } }, + "@popperjs/core": { + "version": "2.11.7", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", + "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==" + }, + "@react-aria/ssr": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.5.0.tgz", + "integrity": "sha512-h0MJdSWOd1qObLnJ8mprU31wI8tmKFJMuwT22MpWq6psisOOZaga6Ml4u6Ee6M6duWWISjXvqO4Sb/J0PBA+nQ==", + "requires": { + "@swc/helpers": "^0.4.14" + } + }, + "@remix-run/router": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.4.0.tgz", + "integrity": "sha512-BJ9SxXux8zAg991UmT8slpwpsd31K1dHHbD3Ba4VzD+liLQ4WAMSxQp2d2ZPRPfN0jN2NPRowcSSoM7lCaF08Q==" + }, + "@restart/hooks": { + "version": "0.4.9", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.9.tgz", + "integrity": "sha512-3BekqcwB6Umeya+16XPooARn4qEPW6vNvwYnlofIYe6h9qG1/VeD7UvShCWx11eFz5ELYmwIEshz+MkPX3wjcQ==", + "requires": { + "dequal": "^2.0.2" + } + }, + "@restart/ui": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.2.tgz", + "integrity": "sha512-hcYs8PwpmHEtwjihLVn2Jr89yrYajfhxN5HtTq3HA9U3+feg1SC3swBM8/qibMTCFsXWToEEtzJMV+LWE+Qjpg==", + "requires": { + "@babel/runtime": "^7.21.0", + "@popperjs/core": "^2.11.6", + "@react-aria/ssr": "^3.5.0", + "@restart/hooks": "^0.4.9", + "@types/warning": "^3.0.0", + "dequal": "^2.0.3", + "dom-helpers": "^5.2.0", + "uncontrollable": "^8.0.0", + "warning": "^4.0.3" + }, + "dependencies": { + "uncontrollable": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.0.tgz", + "integrity": "sha512-a954G/0JyXoZdpt0YIzTfoQyWtRS1VvygOBsHttCtZL8jDTKd6vQlUo811y46XnWoXIqQ36QKi3cSEdPuFADkA==", + "requires": { + "@types/react": ">=18.0.28" + } + } + } + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -19727,6 +20058,14 @@ "loader-utils": "^2.0.0" } }, + "@swc/helpers": { + "version": "0.4.14", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz", + "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==", + "requires": { + "tslib": "^2.4.0" + } + }, "@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -19950,6 +20289,11 @@ "integrity": "sha512-fOwvpvQYStpb/zHMx0Cauwywu9yLDmzWiiQBC7gJyq5tYLUXFZvDG7VK1B7WBxxjBJNKFOZ0zLoOQn8vmATbhw==", "dev": true }, + "@types/prop-types": { + "version": "15.7.5", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + }, "@types/q": { "version": "1.5.5", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz", @@ -19968,6 +20312,24 @@ "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==", "dev": true }, + "@types/react": { + "version": "18.0.31", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.31.tgz", + "integrity": "sha512-EEG67of7DsvRDU6BLLI0p+k1GojDLz9+lZsnCpCRTa/lOokvyPBvp8S5x+A24hME3yyQuIipcP70KJ6H7Qupww==", + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "@types/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", + "requires": { + "@types/react": "*" + } + }, "@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -19983,6 +20345,11 @@ "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==", "dev": true }, + "@types/scheduler": { + "version": "0.16.3", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" + }, "@types/serve-index": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz", @@ -20023,6 +20390,11 @@ "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==", "dev": true }, + "@types/warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", + "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==" + }, "@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -21002,6 +21374,12 @@ "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", "dev": true }, + "bootstrap": { + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz", + "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==", + "requires": {} + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -21189,6 +21567,11 @@ "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==", "dev": true }, + "classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "clean-css": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz", @@ -21748,6 +22131,11 @@ } } }, + "csstype": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz", + "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==" + }, "damerau-levenshtein": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz", @@ -21837,6 +22225,11 @@ "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==", "dev": true }, + "dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==" + }, "destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -21951,6 +22344,15 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -23798,6 +24200,14 @@ "side-channel": "^1.0.4" } }, + "invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "ipaddr.js": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz", @@ -27433,6 +27843,15 @@ "react-is": "^16.13.1" } }, + "prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "requires": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + } + }, "proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -27563,6 +27982,25 @@ "whatwg-fetch": "^3.6.2" } }, + "react-bootstrap": { + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.2.tgz", + "integrity": "sha512-WDSln+mG4RLLFO01stkj2bEx/3MF4YihK9D/dWnHaSxOiQZLbhhlf95D2Jb20X3t2m7vMxRe888FVrfLJoGmmA==", + "requires": { + "@babel/runtime": "^7.17.2", + "@restart/hooks": "^0.4.6", + "@restart/ui": "^1.4.1", + "@types/react-transition-group": "^4.4.4", + "classnames": "^2.3.1", + "dom-helpers": "^5.2.1", + "invariant": "^2.2.4", + "prop-types": "^15.8.1", + "prop-types-extra": "^1.1.0", + "react-transition-group": "^4.4.2", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + } + }, "react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -27678,12 +28116,34 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==", "dev": true }, + "react-router": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.9.0.tgz", + "integrity": "sha512-51lKevGNUHrt6kLuX3e/ihrXoXCa9ixY/nVWRLlob4r/l0f45x3SzBvYJe3ctleLUQQ5fVa4RGgJOTH7D9Umhw==", + "requires": { + "@remix-run/router": "1.4.0" + } + }, + "react-router-dom": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.9.0.tgz", + "integrity": "sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==", + "requires": { + "@remix-run/router": "1.4.0", + "react-router": "6.9.0" + } + }, "react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -27751,6 +28211,17 @@ } } }, + "react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -27816,9 +28287,9 @@ } }, "regenerator-runtime": { - "version": "0.13.9", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", - "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, "regenerator-transform": { "version": "0.15.0", @@ -29008,8 +29479,7 @@ "tslib": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", - "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==", - "dev": true + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" }, "tsutils": { "version": "3.21.0", @@ -29085,6 +29555,17 @@ "which-boxed-primitive": "^1.0.2" } }, + "uncontrollable": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", + "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", + "requires": { + "@babel/runtime": "^7.6.3", + "@types/react": ">=16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + } + }, "unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", @@ -29248,6 +29729,14 @@ "makeerror": "1.0.12" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", diff --git a/code/package.json b/code/package.json index 7aad26ebc..50547fbdf 100644 --- a/code/package.json +++ b/code/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@babel/eslint-parser": "^7.18.9", + "bootstrap": "^5.2.3", "eslint": "^8.21.0", "eslint-config-airbnb": "^19.0.4", "eslint-plugin-import": "^2.26.0", @@ -11,7 +12,9 @@ "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-bootstrap": "^2.7.2", + "react-dom": "^18.2.0", + "react-router-dom": "^6.9.0" }, "scripts": { "start": "react-scripts start", diff --git a/code/public/images/back.png b/code/public/images/back.png new file mode 100644 index 000000000..4b1a11784 Binary files /dev/null and b/code/public/images/back.png differ diff --git a/code/public/images/burger-bar.png b/code/public/images/burger-bar.png new file mode 100644 index 000000000..084a66091 Binary files /dev/null and b/code/public/images/burger-bar.png differ diff --git a/code/public/images/popcorn-logo.jpg b/code/public/images/popcorn-logo.jpg new file mode 100644 index 000000000..7ce1a4d07 Binary files /dev/null and b/code/public/images/popcorn-logo.jpg differ diff --git a/code/public/images/popcorn.png b/code/public/images/popcorn.png new file mode 100644 index 000000000..8c2362018 Binary files /dev/null and b/code/public/images/popcorn.png differ diff --git a/code/public/index.html b/code/public/index.html index e6730aa66..7929c8301 100644 --- a/code/public/index.html +++ b/code/public/index.html @@ -13,7 +13,8 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - Technigo React App + + Movie Night | Nina & Joanna diff --git a/code/src/App.js b/code/src/App.js index f2007d229..75bf7c757 100644 --- a/code/src/App.js +++ b/code/src/App.js @@ -1,9 +1,34 @@ import React from 'react'; +import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'; +import Header from 'components/Header'; +import PopularMovies from 'pages/PopularMovies'; +import NotFound from 'pages/NotFound'; +import MovieDetails from 'pages/MovieDetails'; +import UpcomingMovies from 'pages/UpcomingMovies'; +import TVSeries from 'pages/TVSeries'; +import TVSeriesDetails from 'pages/TVSeriesDetails'; +import './index.css'; +import './moviedetails.css'; export const App = () => { return ( -
- Find me in src/app.js! -
+ + +
+
+ + } /> + } /> + } /> + } /> + } /> + } /> + } /> + +
+ + ); } + +// https://api.themoviedb.org/3/movie/popular?api_key=52f9f6dc03440f8be0c16de930243dfe&language=en-US&page=1 diff --git a/code/src/components/BackButton.js b/code/src/components/BackButton.js new file mode 100644 index 000000000..7dd03434b --- /dev/null +++ b/code/src/components/BackButton.js @@ -0,0 +1,11 @@ +import React from 'react'; + +const BackButton = ({ onBackButtonClick }) => { + return ( + + ) +}; + +export default BackButton; \ No newline at end of file diff --git a/code/src/components/Header.js b/code/src/components/Header.js new file mode 100644 index 000000000..541a11f75 --- /dev/null +++ b/code/src/components/Header.js @@ -0,0 +1,44 @@ +/* eslint-disable jsx-a11y/no-static-element-interactions */ +/* eslint-disable jsx-a11y/click-events-have-key-events */ + +import React, { useState } from 'react'; +import { Link, NavLink } from 'react-router-dom'; +import 'header.css'; + +const Header = () => { + const [showNavbar, setShowNavbar] = useState(false) + const handleShowNavbar = () => { + setShowNavbar(!showNavbar) + } + return ( +
+
+
+ + Movie Page Logo + + +

MOVIE NIGHT

+ +
+
+ menu +
+
+
    +
  • + Popular +
    • +
  • + Upcoming +
    • +
  • + TV Series +
    • +
+
+
+
+ ) +}; +export default Header; diff --git a/code/src/components/Loader.js b/code/src/components/Loader.js new file mode 100644 index 000000000..9e773676f --- /dev/null +++ b/code/src/components/Loader.js @@ -0,0 +1,16 @@ +import React from 'react'; +import 'bootstrap/dist/css/bootstrap.css'; +import Spinner from 'react-bootstrap/Spinner'; + +const Loader = () => { + return ( +
+
+
+
+

Loading...

+
+ ) +} + +export default Loader; \ No newline at end of file diff --git a/code/src/header.css b/code/src/header.css new file mode 100644 index 000000000..00ada072b --- /dev/null +++ b/code/src/header.css @@ -0,0 +1,132 @@ +*{ + box-sizing: border-box; +} + + .navbar-wrapper { + height: 60px; + display: flex; + flex-direction: row; + width: 100%; + height: 80px; + background-color: rgb(35, 44, 50); + align-items: center; + position:fixed; + z-index: 99; + } + +.navbar-container { + max-width: 1100px; + margin-right: 0; + padding: 0 15px; + display: flex; + justify-content: space-between; + align-items: center; + height: 100%; + z-index: 1; + width: 100vw; +} + +.logo-container{ + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap:1.2em; + margin-left: 0; +} + +.logo-image { + border-radius: 50%; + max-width: 50px; + max-height: 50px; +} + +.logo-title{ + color: white; + font-size: 1.5em; + margin: 0; +} + +.menu-icon{ + display:none; +} + +.nav-elements ul { + display: flex; + justify-content: space-between; + list-style-type: none; + font-size: 2em; +} + +.nav-elements ul li:not(:last-child) { + margin-right: 60px; +} + +.nav-elements ul a { + font-size: 0.7em; + font-weight: 400; + color: white; + text-decoration: none; +} + +.nav-elements ul a.active { + color: red; + font-weight: 500; + position: relative; +} + +.nav-elements ul a.active::after { + content: ''; + position: absolute; + bottom: -4px; + left: 0; + width: 100%; + height: 2px; + background-color: #574c4c; +} + + @media (max-width: 768px) { + .nav-elements ul li:not(:last-child) { + margin-right: 30px; + } + + .logo-title{ + display:none; + } + } + + @media (max-width: 600px) { + .menu-icon { + display: block; + cursor: pointer; + } + + .nav-elements { + position: absolute; + right: 0; + top: 80px; + background-color: rgb(35, 44, 50); + width: 0px; + transition: all 0.3s ease-in; + overflow: hidden; + height:max-content; + } + + .nav-elements.active { + width: 270px; + background-color: rgb(35, 44, 50); + height:max-content; + z-index: 99; + } + + .nav-elements ul { + display: flex; + flex-direction: column; + } + + .nav-elements ul li { + margin-right: unset; + margin-top: 22px; + } + + } \ No newline at end of file diff --git a/code/src/index.css b/code/src/index.css index 4a1df4db7..6d7a5fb77 100644 --- a/code/src/index.css +++ b/code/src/index.css @@ -1,3 +1,9 @@ +/***** Mobile *****/ +* { + box-sizing: border-box; +} + + body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", @@ -11,3 +17,97 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } + +.outer-wrapper { + max-width: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + flex-direction: row; + padding: 10px; + gap: 2vh; + box-sizing: border-box; +} + +.movie-grid-container { + display: grid; + grid-template-columns: repeat(2, 1fr); + margin-top: 20px; +} + + +.movie-article { + display: block; + position: relative; + width: 100%; + background-color: black; + transition: opacity 0.3 ease; + +} + +.movie-article img { + width: 100%; + height: auto; + object-fit: cover; + margin-bottom: 10px; + margin: 0; + padding: 0; + opacity: 1; +} + +.movie-article:hover img { + filter: brightness(40%); +} + + +.movie-details { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: flex-end; + padding: 10px; + opacity: 0; + transition: opacity 0.3 ease; +} + +.movie-article:hover .movie-details { + opacity: 1; +} + +.movie-details h1, +.movie-details p { + margin: 0; + padding: 0; + color: white; +} + +.popular-movies-section { + display: grid; +} + +.section-title{ + color:whitesmoke; + font-size: 2em; +} + +/***** TABLET *****/ +@media (min-width: 668px) and (max-width: 1024px){ + .movie-grid-container { + display: grid; + grid-template-columns: repeat(2, 1fr); + } +} + +/***** DESKTOP *****/ +@media (min-width: 1025px) { + .movie-grid-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + } + } \ No newline at end of file diff --git a/code/src/moviedetails.css b/code/src/moviedetails.css new file mode 100644 index 000000000..568a30774 --- /dev/null +++ b/code/src/moviedetails.css @@ -0,0 +1,145 @@ +/***** mobile first *****/ +* { + box-sizing: border-box; + } + + 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; + background-color: black; + } + + code { + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + monospace; + } + +.movie-details-section { + position: absolute; + top: 0; + display: flex; + flex-direction: column; + width: 100%; +} + +.movie-background { + height: 100vh; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + position: relative; + opacity: 0.8; +} + +.details-image { + display: flex; + width: 250px; + border: 5px solid #fff; + margin-bottom: 10px; + margin-left: 50px; +} + +.movie-details-text { + background-color: rgba(0, 0, 0, 0.615); + padding: 5px; + color: white; + font-size: 1.2em; + margin: 50px; + max-width: 600px; +} + +.movie-summary { + display: flex; + flex-direction: column; + margin-top: 30px; +} + +.title { + font-size: 17px; +} + +.back-button { + display: flex; + justify-content: center; + align-self: flex-start; + margin: 70px 0px 20px 0px; + background-color: transparent; + color: black; + padding: 0.3em 0.5em; + border: none; + border-radius: 1em; + cursor: pointer; +} +.back-button img { + width:55px; + height:55px; + background-color: white; + border-radius: 50%; + padding:5px; +} + +.back-button:hover{ + transform: scale(1.1); + transition: transform 0.4s; +} + +/***** TABLET *****/ +@media (min-width: 668px){ + .movie-background { + background-size: cover; + height: 100vh; + } + + .movie-details-title { + display: flex; + flex-direction: row; + + } + + .movie-summary { + display: flex; + align-items: flex-end; + height: 100%; + flex-direction: row; + padding: 50px; + margin: 0; + + } + + + } + +/***** DESKTOP *****/ +@media (min-width: 1025px) { + + .movie-background { + + height: 100vh; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + position: relative; + opacity: 0.8; + } + + .movie-details-section { + position: absolute; + display: flex; + flex-direction: column; + } + + .movie-summary { + display: flex; + align-items: flex-end; + height: 100%; + flex-direction: row; + padding: 50px; + margin: 0; + } + + + } \ No newline at end of file diff --git a/code/src/pages/MovieDetails.js b/code/src/pages/MovieDetails.js new file mode 100644 index 000000000..a8ed508d2 --- /dev/null +++ b/code/src/pages/MovieDetails.js @@ -0,0 +1,47 @@ +import React, { useState, useEffect } from 'react'; +import { useParams, useNavigate } from 'react-router-dom'; +import Loader from 'components/Loader'; +import BackButton from 'components/BackButton'; + +const MovieDetails = () => { + const [details, setDetails] = useState({}); + const [loading, setLoading] = useState(false); + const { movieId } = useParams(); + const navigate = useNavigate(); + + const onBackButtonClick = () => { + navigate(-1); + } + useEffect(() => { + fetch(`https://api.themoviedb.org/3/movie/${movieId}?api_key=52f9f6dc03440f8be0c16de930243dfe&language=en-US`) + .then((res) => res.json()) + .then((data) => setDetails(data)) + .catch((e) => console.error(e)) + .finally(() => setLoading(false)) + }, [movieId]) + + if (loading) { + return ( + + ); + } + + return ( +
+ {details && ( +
+
+ + {details.title} +
+

{details.title} ⭐ {Math.round(details.vote_average * 10) / 10}

+

{details.overview}

+
+
+
+ )} +
+ ) +} + +export default MovieDetails; \ No newline at end of file diff --git a/code/src/pages/NotFound.js b/code/src/pages/NotFound.js new file mode 100644 index 000000000..d8c7391b3 --- /dev/null +++ b/code/src/pages/NotFound.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { useNavigate } from 'react-router-dom'; + +const NotFound = () => { + const navigate = useNavigate(); + const onHomeButtonClick = () => { + navigate('/'); + } + return ( +
+

Sorry, no such page

+ +
+ ) +}; + +export default NotFound \ No newline at end of file diff --git a/code/src/pages/PopularMovies.js b/code/src/pages/PopularMovies.js new file mode 100644 index 000000000..bead9cda4 --- /dev/null +++ b/code/src/pages/PopularMovies.js @@ -0,0 +1,48 @@ +import React, { useState, useEffect } from 'react'; +import { Link } from 'react-router-dom'; +import Loader from 'components/Loader'; + +const PopularMovies = () => { + const [movies, setMovies] = useState([]); + const [loading, setLoading] = useState(false); + + useEffect(() => { + setLoading(true) + fetch('https://api.themoviedb.org/3/movie/popular?api_key=52f9f6dc03440f8be0c16de930243dfe&language=en-US&page=1') + .then((res) => res.json()) + .then((data) => { setMovies(data.results) }) + .catch((e) => console.error(e)) + .finally(() => setLoading(false)) + }, []) + + if (loading) { + return ( + + ); + } + + return ( +
+

Popular Movies

+
+ {movies.map((movie) => { + return ( +
+ + {movie.title} +
+

{movie.title}

+

Released: {movie.release_date}

+
+ +
+ ) + })} +
+
+ ) +} + +export default PopularMovies; \ No newline at end of file diff --git a/code/src/pages/TVSeries.js b/code/src/pages/TVSeries.js new file mode 100644 index 000000000..2433ba95f --- /dev/null +++ b/code/src/pages/TVSeries.js @@ -0,0 +1,48 @@ +import React, { useState, useEffect } from 'react'; +import { Link } from 'react-router-dom'; +import Loader from 'components/Loader'; + +const TVSeries = () => { + const [tvSeries, setTvSeries] = useState([]); + const [loading, setLoading] = useState(false); + + useEffect(() => { + setLoading(true) + fetch('https://api.themoviedb.org/3/tv/top_rated?api_key=52f9f6dc03440f8be0c16de930243dfe&language=en-US') + .then((res) => res.json()) + .then((data) => { setTvSeries(data.results) }) + .catch((e) => console.error(e)) + .finally(() => setLoading(false)) + }, []) + + if (loading) { + return ( + + ); + } + + return ( +
+

Top TV Series

+
+ {tvSeries.map((show) => { + return ( +
+ + {show.title} +
+

{show.name}

+

First aired: {show.first_air_date}

+
+ +
+ ) + })} +
+
+ ) +} + +export default TVSeries; \ No newline at end of file diff --git a/code/src/pages/TVSeriesDetails.js b/code/src/pages/TVSeriesDetails.js new file mode 100644 index 000000000..df11d2f6a --- /dev/null +++ b/code/src/pages/TVSeriesDetails.js @@ -0,0 +1,48 @@ +import React, { useState, useEffect } from 'react'; +import { useParams, useNavigate } from 'react-router-dom'; +import Loader from 'components/Loader'; +import BackButton from 'components/BackButton'; + +const TVSeriesDetails = () => { + const [tvDetails, setTvDetails] = useState({}); + const [loading, setLoading] = useState(false); + const { tvSeriesId } = useParams(); + const navigate = useNavigate(); + + const onBackButtonClick = () => { + navigate(-1); + } + useEffect(() => { + setLoading(true); + fetch(`https://api.themoviedb.org/3/tv/${tvSeriesId}?api_key=52f9f6dc03440f8be0c16de930243dfe&language=en-US`) + .then((res) => res.json()) + .then((data) => setTvDetails(data)) + .catch((e) => console.error(e)) + .finally(() => setLoading(false)) + }, [tvSeriesId]) + + if (loading) { + return ( + + ); + } + + return ( +
+ {tvDetails && ( +
+
+ + {tvDetails.title} +
+

{tvDetails.title} ⭐ {Math.round(tvDetails.vote_average * 10) / 10}

+

{tvDetails.overview}

+
+
+
+ )} +
+ ) +} + +export default TVSeriesDetails; \ No newline at end of file diff --git a/code/src/pages/UpcomingMovies.js b/code/src/pages/UpcomingMovies.js new file mode 100644 index 000000000..f28122231 --- /dev/null +++ b/code/src/pages/UpcomingMovies.js @@ -0,0 +1,48 @@ +import React, { useState, useEffect } from 'react'; +import { Link } from 'react-router-dom'; +import Loader from 'components/Loader'; + +const UpcomingMovies = () => { + const [upcomingMovies, setUpcomingMovies] = useState([]); + const [loading, setLoading] = useState(false); + + useEffect(() => { + setLoading(true) + fetch('https://api.themoviedb.org/3/movie/upcoming?api_key=52f9f6dc03440f8be0c16de930243dfe&language=en-US&page=1') + .then((res) => res.json()) + .then((data) => setUpcomingMovies(data.results)) + .catch((e) => console.error(e)) + .finally(() => setLoading(false)); + }, []) + + if (loading) { + return ( + + ); + } + + return ( +
+

Upcoming Movies

+
+ {upcomingMovies.map((movie) => { + return ( +
+ + {movie.title} +
+

{movie.title}

+

Released: {movie.release_date}

+
+ +
+ ) + })} +
+
+ ) +} + +export default UpcomingMovies; \ No newline at end of file