├── src ├── constants │ └── Config.js ├── assets │ ├── logo.png │ ├── tmovie.png │ ├── footer-bg.jpg │ └── boxicons-2.0.7 │ │ ├── fonts │ │ ├── boxicons.eot │ │ ├── boxicons.ttf │ │ ├── boxicons.woff │ │ └── boxicons.woff2 │ │ ├── LICENSE.txt │ │ └── css │ │ ├── transformations.css │ │ ├── animations.css │ │ └── boxicons.min.css ├── scss │ ├── _index.scss │ ├── _mixin.scss │ ├── _breakpoint.scss │ └── _variables.scss ├── index.js ├── components │ ├── input │ │ ├── input.scss │ │ └── Input.jsx │ ├── movie-list │ │ ├── movie-list.scss │ │ └── MovieList.jsx │ ├── page-header │ │ ├── PageHeader.jsx │ │ └── page-header.scss │ ├── button │ │ ├── Button.jsx │ │ └── button.scss │ ├── movie-grid │ │ ├── movie-grid.scss │ │ └── MovieGrid.jsx │ ├── footer │ │ ├── footer.scss │ │ └── Footer.jsx │ ├── movie-card │ │ ├── MovieCard.jsx │ │ └── movie-card.scss │ ├── modal │ │ ├── modal.scss │ │ └── Modal.jsx │ ├── header │ │ ├── Header.jsx │ │ └── header.scss │ └── hero-slide │ │ ├── hero-slide.scss │ │ └── HeroSlide.jsx ├── api │ ├── apiConfig.js │ ├── axiosClient.js │ └── tmdbApi.js ├── App.js ├── pages │ ├── Catalog.jsx │ ├── detail │ │ ├── CastList.jsx │ │ ├── VideoList.jsx │ │ ├── detail.scss │ │ └── Detail.jsx │ └── Home.jsx ├── routes │ └── Routes.jsx └── App.scss ├── public ├── favicon.png ├── robots.txt ├── manifest.json └── index.html ├── .gitignore ├── package.json └── README.md /src/constants/Config.js: -------------------------------------------------------------------------------- 1 | export const HOME_PAGE = "react-movie-app"; 2 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harryngdev/react-movie-app/HEAD/public/favicon.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harryngdev/react-movie-app/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/scss/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixin"; 3 | @forward "./breakpoint"; 4 | -------------------------------------------------------------------------------- /src/assets/tmovie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harryngdev/react-movie-app/HEAD/src/assets/tmovie.png -------------------------------------------------------------------------------- /src/assets/footer-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harryngdev/react-movie-app/HEAD/src/assets/footer-bg.jpg -------------------------------------------------------------------------------- /src/assets/boxicons-2.0.7/fonts/boxicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harryngdev/react-movie-app/HEAD/src/assets/boxicons-2.0.7/fonts/boxicons.eot -------------------------------------------------------------------------------- /src/assets/boxicons-2.0.7/fonts/boxicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harryngdev/react-movie-app/HEAD/src/assets/boxicons-2.0.7/fonts/boxicons.ttf -------------------------------------------------------------------------------- /src/assets/boxicons-2.0.7/fonts/boxicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harryngdev/react-movie-app/HEAD/src/assets/boxicons-2.0.7/fonts/boxicons.woff -------------------------------------------------------------------------------- /src/assets/boxicons-2.0.7/fonts/boxicons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/harryngdev/react-movie-app/HEAD/src/assets/boxicons-2.0.7/fonts/boxicons.woff2 -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import App from "./App"; 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById("root") 10 | ); 11 | -------------------------------------------------------------------------------- /src/scss/_mixin.scss: -------------------------------------------------------------------------------- 1 | @mixin flex($aligin-item, $justify-content) { 2 | display: flex; 3 | align-items: $aligin-item; 4 | justify-content: $justify-content; 5 | } 6 | 7 | @mixin overlay { 8 | background-color: rgba($color: #000000, $alpha: 0.6); 9 | } 10 | -------------------------------------------------------------------------------- /src/scss/_breakpoint.scss: -------------------------------------------------------------------------------- 1 | @use "./variables" as *; 2 | 3 | @mixin mobile { 4 | @media only screen and (max-width: $mobile-width) { 5 | @content; 6 | } 7 | } 8 | 9 | @mixin tablet { 10 | @media only screen and (max-width: $tablet-width) { 11 | @content; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/input/input.scss: -------------------------------------------------------------------------------- 1 | @use "../../scss/variables" as *; 2 | 3 | input { 4 | border: 0; 5 | background-color: $black; 6 | padding: 0.5rem 1.5rem; 7 | font-size: 1rem; 8 | border-radius: $border-radius; 9 | color: $txt-color; 10 | font-family: $font-family; 11 | } 12 | -------------------------------------------------------------------------------- /src/components/movie-list/movie-list.scss: -------------------------------------------------------------------------------- 1 | @use "./../../scss/breakpoint" as *; 2 | 3 | .movie-list { 4 | .swiper-slide { 5 | width: 15%; 6 | 7 | @include tablet { 8 | width: 30%; 9 | } 10 | 11 | @include mobile { 12 | width: 40%; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/api/apiConfig.js: -------------------------------------------------------------------------------- 1 | const apiConfig = { 2 | baseUrl: "https://api.themoviedb.org/3/", 3 | apiKey: "193593681eeeb9f10b20ee6506e9af8b", 4 | originalImage: (imgPath) => `https://image.tmdb.org/t/p/original/${imgPath}`, 5 | w500Image: (imgPath) => `https://image.tmdb.org/t/p/w500/${imgPath}`, 6 | }; 7 | 8 | export default apiConfig; 9 | -------------------------------------------------------------------------------- /src/components/input/Input.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import "./input.scss"; 4 | 5 | const Input = (props) => { 6 | return ( 7 | props.onChange(e) : null} 12 | /> 13 | ); 14 | }; 15 | 16 | export default Input; 17 | -------------------------------------------------------------------------------- /src/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | $body-bg: #0f0f0f; 2 | $main-color: #ff0000; 3 | $txt-color: #fff; 4 | 5 | $white: #fff; 6 | $black: #000; 7 | 8 | $box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; 9 | 10 | $header-height: 8rem; 11 | $header-shrink-height: 5rem; 12 | $border-radius: 30px; 13 | 14 | $mobile-width: 600px; 15 | $tablet-width: 1024px; 16 | 17 | $font-family: "Montserrat", sans-serif; 18 | -------------------------------------------------------------------------------- /src/components/page-header/PageHeader.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import "./page-header.scss"; 4 | 5 | import bg from "../../assets/footer-bg.jpg"; 6 | 7 | const PageHeader = (props) => { 8 | return ( 9 |
10 |

{props.children}

11 |
12 | ); 13 | }; 14 | 15 | export default PageHeader; 16 | -------------------------------------------------------------------------------- /src/assets/boxicons-2.0.7/LICENSE.txt: -------------------------------------------------------------------------------- 1 | Boxicons License 2 | -------------------------Boxicons is an open source project , you can use them in your commercial projects too. 3 | The icons (.svg) files are free to download are licensed under CC 4.0 . 4 | The fonts files are licensed under SIL OFL 1.1 5 | Attribution is not required but is appreciated 6 | Other files which are not fonts or icons are licensed under the MIT License -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.png", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "favicon.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "favicon.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/components/page-header/page-header.scss: -------------------------------------------------------------------------------- 1 | @use "../../scss/variables" as *; 2 | 3 | .page-header { 4 | padding: $header-height 0 2rem; 5 | text-align: center; 6 | margin-bottom: 2rem; 7 | position: relative; 8 | background-position: top; 9 | background-size: cover; 10 | background-repeat: no-repeat; 11 | 12 | h2 { 13 | position: relative; 14 | z-index: 99; 15 | } 16 | 17 | &:after { 18 | content: ""; 19 | position: absolute; 20 | bottom: 0; 21 | left: 0; 22 | width: 100%; 23 | height: 100px; 24 | background-image: linear-gradient(to top, $body-bg, rgba($black, 0)); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import "swiper/swiper.min.css"; 2 | import "./assets/boxicons-2.0.7/css/boxicons.min.css"; 3 | import "./App.scss"; 4 | 5 | import { BrowserRouter, Route } from "react-router-dom"; 6 | 7 | import Header from "./components/header/Header"; 8 | import Footer from "./components/footer/Footer"; 9 | 10 | import Routes from "./routes/Routes"; 11 | 12 | function App() { 13 | return ( 14 | 15 | ( 17 | <> 18 |
19 | 20 | 21 | 22 |