├── src
    ├── App.css
    ├── axios.js
    ├── constants
    │   └── constants.js
    ├── urls.js
    ├── index.js
    ├── Components
    │   ├── NavBar
    │   │   ├── NavBar.css
    │   │   └── NavBar.js
    │   ├── RowPost
    │   │   ├── RowPost.css
    │   │   └── RowPost.js
    │   └── Banner
    │   │   ├── Banner.css
    │   │   └── Banner.js
    └── App.js
├── .gitignore
├── public
    ├── manifest.json
    └── index.html
└── package.json


/src/App.css:
--------------------------------------------------------------------------------
1 | *{
2 |     margin: 0;
3 |     padding: 0;
4 | }
5 | body{
6 |     background-color: #111;
7 | }


--------------------------------------------------------------------------------
/src/axios.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import { baseUrl } from './constants/constants';
3 | const instance = axios.create({
4 |     baseURL: baseUrl,
5 |   });
6 | 
7 |   export default instance;
8 | 


--------------------------------------------------------------------------------
/src/constants/constants.js:
--------------------------------------------------------------------------------
1 | export const baseUrl='https://api.themoviedb.org/3';
2 | export const API_KEY = '3ac6b23dedea0a361ca6f411e280c5ed';
3 | export const imageUrl = 'https://image.tmdb.org/t/p/original';


--------------------------------------------------------------------------------
/src/urls.js:
--------------------------------------------------------------------------------
1 | 
2 | import { API_KEY } from "./constants/constants"
3 | export const originals = `discover/tv?api_key=${API_KEY}&with_networks=213`
4 | export const action = `discover/movie?api_key=${API_KEY}&with_genres=28`


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import App from './App';
 4 | 
 5 | const root = ReactDOM.createRoot(document.getElementById('root'));
 6 | root.render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>
10 | );


--------------------------------------------------------------------------------
/src/Components/NavBar/NavBar.css:
--------------------------------------------------------------------------------
 1 | .navbar{
 2 |     position: fixed;
 3 |     top: 0;
 4 |     width: 100%;
 5 |     height: 30px;
 6 |     padding: 20px;
 7 |     display: flex;
 8 |     justify-content: space-between;
 9 |     background-color: transparent;
10 | }
11 | 
12 | .logo{
13 |     position: fixed;
14 |     left: 20px;
15 |     width: 80px;
16 | 
17 | }
18 | .avatar{
19 |     position: fixed;
20 |     right: 20px;
21 |     width: 30px;
22 | 
23 | }


--------------------------------------------------------------------------------
/.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 | 
25 | /constants
26 | assets


--------------------------------------------------------------------------------
/src/Components/NavBar/NavBar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './NavBar.css'
 3 | function NavBar() {
 4 |   return (
 5 |     <div className='navbar'>
 6 |         <img className='logo' src='https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1920px-Netflix_2015_logo.svg.png' alt=''/>
 7 |         <img className='avatar' src='https://i.pinimg.com/originals/0d/dc/ca/0ddccae723d85a703b798a5e682c23c1.png' alt='' />
 8 |     </div> 
 9 |   )
10 | }
11 | 
12 | export default NavBar


--------------------------------------------------------------------------------
/src/Components/RowPost/RowPost.css:
--------------------------------------------------------------------------------
 1 | .row{
 2 |     margin-left: 20px;
 3 |     color: #fff;
 4 | 
 5 | }
 6 | .posters{
 7 |     display: flex;
 8 |     padding: 20px;
 9 |     overflow-x: scroll;
10 |     overflow-y: hidden;
11 | }
12 | .poster{
13 |     max-height: 250px;
14 |     margin-right:10px;
15 | }
16 | .smallPoster{
17 |     max-height: 150px;
18 |     margin-right:10px;
19 | 
20 |     
21 | }
22 | .posters::-webkit-scrollbar{
23 |     display: none;
24 | }
25 | .poster:hover{
26 |     transform: scale(1.1);
27 | }


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import NavBar from "./Components/NavBar/NavBar";
 3 | import './App.css'
 4 | import Banner from "./Components/Banner/Banner";
 5 | import RowPost from "./Components/RowPost/RowPost";
 6 | import {originals,action} from './urls'
 7 | function App() {
 8 |   return (
 9 |     <div className="App">
10 |       <NavBar/>
11 |       <Banner/>
12 |       <RowPost url={originals} title='Netflix Originals'/>
13 |       <RowPost url={action} title='Action' isSmall />
14 |     </div>
15 |   );
16 | }
17 | 
18 | export default App;
19 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ntflx",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.16.5",
 7 |     "@testing-library/react": "^13.4.0",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "axios": "^1.3.4",
10 |     "react": "^18.2.0",
11 |     "react-dom": "^18.2.0",
12 |     "react-scripts": "5.0.1",
13 |     "react-youtube": "^10.1.0",
14 |     "web-vitals": "^2.1.4"
15 |   },
16 |   "scripts": {
17 |     "start": "react-scripts start",
18 |     "build": "react-scripts build",
19 |     "test": "react-scripts test",
20 |     "eject": "react-scripts eject"
21 |   },
22 |   "eslintConfig": {
23 |     "extends": [
24 |       "react-app",
25 |       "react-app/jest"
26 |     ]
27 |   },
28 |   "browserslist": {
29 |     "production": [
30 |       ">0.2%",
31 |       "not dead",
32 |       "not op_mini all"
33 |     ],
34 |     "development": [
35 |       "last 1 chrome version",
36 |       "last 1 firefox version",
37 |       "last 1 safari version"
38 |     ]
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/Components/Banner/Banner.css:
--------------------------------------------------------------------------------
 1 | .banner{
 2 |     background-size: cover;
 3 |     height: 448px;
 4 |     color: white;
 5 | }
 6 | .content{
 7 |     padding-top: 140px;
 8 |     height: 190px;
 9 |     padding-left: 15px;
10 | }
11 | .title{
12 |     font-size: 3rem;
13 |     font-weight: 800;
14 |     padding-bottom: 0.3rem;
15 | 
16 | }
17 | .button{
18 |     color: white;
19 |     outline: none;
20 |     border: none;
21 |     font-weight: 700;
22 |     border-radius: 5px;
23 |     padding-left: 2rem;
24 |     padding-right: 2rem;
25 |     padding-top: 0.5rem;
26 |     padding-bottom: 0.5rem;
27 |     background-color: rgb(51, 51,51, .5 );
28 |     cursor: pointer;
29 |     margin-right: 1rem;
30 | }
31 | .button:hover{
32 |     color: black;
33 |     background-color: #e6e6e6;
34 | }
35 | .description{
36 |     width: 45rem;
37 |     line-height: 1.3;
38 |     padding-top: 1rem;
39 |     font-size: 1rem;
40 |     height: 80px;
41 |     max-width: 400px;
42 |     
43 | }
44 | .fade_bottom{
45 |     height: 7.4rem;
46 |     background-image: linear-gradient(180deg,transparent,rgba(37,37,37,.61),#111);
47 | }


--------------------------------------------------------------------------------
/src/Components/Banner/Banner.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect,useState} from 'react'
 2 | import {API_KEY,imageUrl} from '../../constants/constants'
 3 | import axios from '../../axios'
 4 | import './Banner.css'
 5 | function Banner() {
 6 |     const [movie, setMovie] = useState()
 7 |     useEffect(() => {
 8 |         axios.get(`trending/all/day?api_key=${API_KEY}&language=en-US`).then((response)=>{
 9 |           console.log(response.data.results[0]);
10 |           setMovie(response.data.results[4])
11 |         })
12 |     }, [])
13 |     
14 |   return (
15 |     <div className='banner' style={{backgroundImage:`url(${movie?imageUrl+movie.backdrop_path:''})`}}>
16 |         <div className='content'>
17 |             <h1 className='title'>{movie?movie.title||movie.name||movie.original_name||movie.origonal_title:''}</h1>
18 |             <div className='banner_buttons'>
19 |                 <button className='button'>Play</button>
20 |                 <button className='button'>My List</button>
21 |             </div>
22 |             <h1 className='description'>{movie?movie.overview:''}</h1>
23 |         </div>
24 |         <div className="fade_bottom"></div>
25 |     </div>
26 |   )
27 | }
28 | 
29 | export default Banner


--------------------------------------------------------------------------------
/src/Components/RowPost/RowPost.js:
--------------------------------------------------------------------------------
 1 | import React,{useEffect,useState} from 'react'
 2 | import axios from '../../axios'
 3 | import {imageUrl,API_KEY} from '../../constants/constants'
 4 | import './RowPost.css' 
 5 | import YouTube from 'react-youtube'
 6 | 
 7 | 
 8 | function RowPost(props) {
 9 |   const [movies,setMovies] = useState([])
10 |   const [urlId,seturlId] = useState('')
11 |   useEffect(()=>{
12 |     axios.get(props.url).then((response)=>{
13 |       setMovies(response.data.results)
14 |     }).catch((err)=>{
15 |       alert('error')
16 |     })
17 |   },[])
18 |   const opts = {
19 |     height: '390',
20 |     width: '100%',
21 |     playerVars: {
22 |       // https://developers.google.com/youtube/player_parameters
23 |       autoplay: 1,
24 |     },
25 |   };
26 | const handleMovie = (id)=>{
27 | console.log(id);
28 | axios.get(`/movie/${id}/videos?api_key=${API_KEY}&language=en-US`).then((response)=>{
29 |     if(response.data.results.length !== 0){
30 |       seturlId(response.data.results[0])
31 |     }else{
32 |       console.log('Array empty');
33 |     }
34 |   })
35 | }
36 |   return (
37 |     <div className='row'>
38 |         <h2>{props.title}</h2>
39 |         <div className='posters'>
40 |           {movies.map((obj)=>
41 |           <img onClick={()=>handleMovie(obj.id)} className={props.isSmall ?'smallPoster':'poster'} src={`${imageUrl+obj.backdrop_path}`} alt="poster" 
42 |           />)}          
43 |         </div>
44 |         { urlId && <YouTube opts={opts} videoId={urlId.key}/>    }
45 |     </div>
46 |   )
47 | }
48 | 
49 | export default RowPost


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------