├── .gitattributes ├── public ├── favicon.ico ├── logo192.png ├── logo512.png ├── tmovie.png ├── robots.txt ├── manifest.json └── index.html ├── src ├── assets │ ├── 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 │ ├── movie-card │ │ ├── MovieCard.jsx │ │ └── movie-card.scss │ ├── footer │ │ ├── footer.scss │ │ └── Footer.jsx │ ├── 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 ├── config │ └── Routes.jsx └── App.scss ├── .gitignore ├── README.md └── package.json /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicmtrex/Tmovies/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicmtrex/Tmovies/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicmtrex/Tmovies/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/tmovie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicmtrex/Tmovies/HEAD/public/tmovie.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/assets/tmovie.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicmtrex/Tmovies/HEAD/src/assets/tmovie.png -------------------------------------------------------------------------------- /src/assets/footer-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicmtrex/Tmovies/HEAD/src/assets/footer-bg.jpg -------------------------------------------------------------------------------- /src/scss/_index.scss: -------------------------------------------------------------------------------- 1 | @forward "./variables"; 2 | @forward "./mixin"; 3 | @forward "./breakpoint"; 4 | -------------------------------------------------------------------------------- /src/assets/boxicons-2.0.7/fonts/boxicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicmtrex/Tmovies/HEAD/src/assets/boxicons-2.0.7/fonts/boxicons.eot -------------------------------------------------------------------------------- /src/assets/boxicons-2.0.7/fonts/boxicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicmtrex/Tmovies/HEAD/src/assets/boxicons-2.0.7/fonts/boxicons.ttf -------------------------------------------------------------------------------- /src/assets/boxicons-2.0.7/fonts/boxicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicmtrex/Tmovies/HEAD/src/assets/boxicons-2.0.7/fonts/boxicons.woff -------------------------------------------------------------------------------- /src/assets/boxicons-2.0.7/fonts/boxicons.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hicmtrex/Tmovies/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/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/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/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: process.env.REACT_APP_API_KEY, 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/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/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 -------------------------------------------------------------------------------- /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/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 | 16 | export default PageHeader; 17 | -------------------------------------------------------------------------------- /.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 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.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/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 './config/Routes'; 11 | 12 | function App() { 13 | return ( 14 | 15 | ( 17 | <> 18 |
19 | 20 |