├── src ├── App.css ├── assets │ ├── logo.png │ ├── cards │ │ ├── card1.jpg │ │ ├── card2.jpg │ │ ├── card3.jpg │ │ ├── card4.jpg │ │ ├── card5.jpg │ │ ├── card6.jpg │ │ ├── card7.jpg │ │ ├── card8.jpg │ │ ├── card9.jpg │ │ ├── card10.jpg │ │ ├── card11.jpg │ │ ├── card12.jpg │ │ ├── card13.jpg │ │ ├── card14.jpg │ │ └── Cards_data.js │ ├── hero_banner.jpg │ ├── hero_title.png │ ├── info_icon.png │ ├── play_icon.png │ ├── profile_img.png │ ├── facebook_icon.png │ ├── twitter_icon.png │ ├── youtube_icon.png │ ├── back_arrow_icon.png │ ├── instagram_icon.png │ ├── netflix_favicon.ico │ ├── netflix_spinner.gif │ ├── caret.svg │ ├── search_icon.svg │ └── bell_icon.svg ├── index.css ├── main.jsx ├── pages │ ├── player │ │ ├── Player.css │ │ └── Player.jsx │ ├── Home │ │ ├── Home.jsx │ │ └── Home.css │ └── Login │ │ ├── Login.css │ │ └── Login.jsx ├── components │ ├── Footer │ │ ├── Footer.css │ │ └── Footer.jsx │ ├── TitleCard │ │ ├── TitleCard.css │ │ └── TitleCard.jsx │ └── Navbar │ │ ├── Navbar.jsx │ │ └── Navbar.css ├── App.jsx └── firebase.js ├── README.md ├── postcss.config.js ├── public ├── netflix_favicon.ico └── background_banner.jpg ├── vite.config.js ├── tailwind.config.js ├── .gitignore ├── index.html ├── .eslintrc.cjs └── package.json /src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Netflix-Clone 2 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/netflix_favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/public/netflix_favicon.ico -------------------------------------------------------------------------------- /src/assets/cards/card1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/cards/card1.jpg -------------------------------------------------------------------------------- /src/assets/cards/card2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/cards/card2.jpg -------------------------------------------------------------------------------- /src/assets/cards/card3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/cards/card3.jpg -------------------------------------------------------------------------------- /src/assets/cards/card4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/cards/card4.jpg -------------------------------------------------------------------------------- /src/assets/cards/card5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/cards/card5.jpg -------------------------------------------------------------------------------- /src/assets/cards/card6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/cards/card6.jpg -------------------------------------------------------------------------------- /src/assets/cards/card7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/cards/card7.jpg -------------------------------------------------------------------------------- /src/assets/cards/card8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/cards/card8.jpg -------------------------------------------------------------------------------- /src/assets/cards/card9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/cards/card9.jpg -------------------------------------------------------------------------------- /src/assets/hero_banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/hero_banner.jpg -------------------------------------------------------------------------------- /src/assets/hero_title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/hero_title.png -------------------------------------------------------------------------------- /src/assets/info_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/info_icon.png -------------------------------------------------------------------------------- /src/assets/play_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/play_icon.png -------------------------------------------------------------------------------- /src/assets/profile_img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/profile_img.png -------------------------------------------------------------------------------- /public/background_banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/public/background_banner.jpg -------------------------------------------------------------------------------- /src/assets/cards/card10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/cards/card10.jpg -------------------------------------------------------------------------------- /src/assets/cards/card11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/cards/card11.jpg -------------------------------------------------------------------------------- /src/assets/cards/card12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/cards/card12.jpg -------------------------------------------------------------------------------- /src/assets/cards/card13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/cards/card13.jpg -------------------------------------------------------------------------------- /src/assets/cards/card14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/cards/card14.jpg -------------------------------------------------------------------------------- /src/assets/facebook_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/facebook_icon.png -------------------------------------------------------------------------------- /src/assets/twitter_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/twitter_icon.png -------------------------------------------------------------------------------- /src/assets/youtube_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/youtube_icon.png -------------------------------------------------------------------------------- /src/assets/back_arrow_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/back_arrow_icon.png -------------------------------------------------------------------------------- /src/assets/instagram_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/instagram_icon.png -------------------------------------------------------------------------------- /src/assets/netflix_favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/netflix_favicon.ico -------------------------------------------------------------------------------- /src/assets/netflix_spinner.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/code-with-zain-hunzai/Netflix-Clone/HEAD/src/assets/netflix_spinner.gif -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: [ 4 | "./index.html", 5 | "./src/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background-color: black; 11 | color: white; 12 | font-family: 'poppins'; 13 | } -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | import { BrowserRouter } from 'react-router-dom' 6 | 7 | ReactDOM.createRoot(document.getElementById('root')).render( 8 | 9 | 10 | 11 | 12 | , 13 | ) 14 | -------------------------------------------------------------------------------- /src/assets/caret.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Netflix Clone 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/assets/search_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/player/Player.css: -------------------------------------------------------------------------------- 1 | .player{ 2 | height: 100vh; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | justify-content: center; 7 | } 8 | 9 | .player img{ 10 | position: absolute; 11 | top: 20px; 12 | left: 20px; 13 | width: 50px; 14 | cursor: pointer; 15 | } 16 | .player iframe{ 17 | border-radius: 10px; 18 | } 19 | 20 | .player-info{ 21 | display: flex; 22 | align-items: center; 23 | justify-content: space-between; 24 | width: 90%; 25 | } -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /src/assets/bell_icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | padding: 30px 4%; 3 | max-width: 1000px; 4 | margin: 0 auto; 5 | } 6 | 7 | .footer-icons { 8 | display: flex; 9 | gap: 20px; 10 | margin: 40px 0; 11 | } 12 | 13 | .footer-icons img { 14 | width: 30px; 15 | cursor: pointer; 16 | } 17 | 18 | .footer ul { 19 | display: grid; 20 | grid-template-columns: auto auto auto auto; 21 | gap: 15px; 22 | margin-bottom: 30px; 23 | list-style: none; 24 | 25 | } 26 | 27 | .Copyright-text { 28 | color: gray; 29 | font-size: 14px; 30 | } 31 | 32 | @media (max-width:800px) { 33 | .footer-icons img { 34 | width: 25px; 35 | } 36 | .footer ul{ 37 | grid-template-columns: auto auto; 38 | gap: 8px; 39 | font-size: 14px; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "netflix-clone", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "firebase": "^10.12.4", 14 | "react": "^18.3.1", 15 | "react-dom": "^18.3.1", 16 | "react-firebase-hooks": "^5.1.1", 17 | "react-router-dom": "^6.25.1", 18 | "react-toastify": "^10.0.5" 19 | }, 20 | "devDependencies": { 21 | "@types/react": "^18.3.3", 22 | "@types/react-dom": "^18.3.0", 23 | "@vitejs/plugin-react": "^4.3.1", 24 | "autoprefixer": "^10.4.19", 25 | "eslint": "^8.57.0", 26 | "eslint-plugin-react": "^7.34.3", 27 | "eslint-plugin-react-hooks": "^4.6.2", 28 | "eslint-plugin-react-refresh": "^0.4.7", 29 | "postcss": "^8.4.39", 30 | "tailwindcss": "^3.4.6", 31 | "vite": "^5.3.4" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react' 2 | import Home from './pages/Home/Home' 3 | import Login from './pages/Login/Login' 4 | import { Routes, Route, useNavigate } from 'react-router-dom' 5 | import Player from './pages/player/Player' 6 | import { onAuthStateChanged } from 'firebase/auth' 7 | import { auth } from './firebase' 8 | import { ToastContainer, toast } from 'react-toastify'; 9 | import 'react-toastify/dist/ReactToastify.css'; 10 | 11 | function App() { 12 | 13 | const navigate = useNavigate(); 14 | 15 | useEffect(() => { 16 | onAuthStateChanged(auth, async (user) => { 17 | if (user) { 18 | console.log("Login") 19 | navigate('/') 20 | } else { 21 | console.log("logout") 22 | navigate('./login') 23 | } 24 | }) 25 | }, []) 26 | return ( 27 | <> 28 | 29 | 30 | } /> 31 | } /> 32 | } /> 33 | 34 | 35 | ) 36 | } 37 | 38 | export default App 39 | -------------------------------------------------------------------------------- /src/components/TitleCard/TitleCard.css: -------------------------------------------------------------------------------- 1 | .title-Card { 2 | margin-top: 50px; 3 | margin-bottom: 30px; 4 | } 5 | 6 | .title-card h2 { 7 | margin-bottom: 8px; 8 | } 9 | 10 | .card-list { 11 | display: flex; 12 | gap: 10px; 13 | overflow-x: scroll; 14 | } 15 | 16 | .card-list img { 17 | width: 240px; 18 | border-radius: 4px; 19 | cursor: pointer; 20 | } 21 | 22 | .card-list::-webkit-scrollbar { 23 | display: none; 24 | } 25 | 26 | .card-list .card { 27 | position: relative; 28 | } 29 | 30 | .card-list .card p { 31 | position: absolute; 32 | bottom: 10px; 33 | right: 10px; 34 | text-decoration: none; 35 | color: #fff; 36 | } 37 | 38 | @media (max-width:800px) { 39 | .title-Card { 40 | margin-top: 20px; 41 | margin-bottom: 0; 42 | } 43 | 44 | .title-Card h2 { 45 | font-size: 20px; 46 | } 47 | 48 | .card-list img { 49 | width: 200px; 50 | } 51 | 52 | .card-list p { 53 | font-size: 12px; 54 | } 55 | } 56 | 57 | @media (max-width:800px) { 58 | .title-Card h2 { 59 | font-size: 15px; 60 | } 61 | 62 | .card-list img { 63 | width: 165px; 64 | } 65 | 66 | .card-list p { 67 | font-size: 10px; 68 | } 69 | } -------------------------------------------------------------------------------- /src/components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './Footer.css' 3 | import youtube_icon from '../../assets/youtube_icon.png' 4 | import twitter_icon from '../../assets/twitter_icon.png' 5 | import instagram_icon from '../../assets/instagram_icon.png' 6 | import facebook_icon from '../../assets/facebook_icon.png' 7 | const Footer = () => { 8 | return ( 9 |
10 |
11 | 12 | 13 | 14 | 15 |
16 | 30 |

© 1997 -2024 Netflix Inc.

31 |
32 | ) 33 | } 34 | 35 | export default Footer 36 | -------------------------------------------------------------------------------- /src/firebase.js: -------------------------------------------------------------------------------- 1 | import { createUserWithEmailAndPassword, getAuth, signInWithEmailAndPassword, signOut } from 'firebase/auth'; 2 | import { initializeApp } from "firebase/app"; 3 | import { addDoc, collection, getFirestore } from 'firebase/firestore'; 4 | import { toast } from 'react-toastify'; 5 | 6 | const firebaseConfig = { 7 | apiKey: "AIzaSyCcIMUECGLs3jgY8Bn6EBB7EnP7fWANSWM", 8 | authDomain: "netflix-clone-2c006.firebaseapp.com", 9 | projectId: "netflix-clone-2c006", 10 | storageBucket: "netflix-clone-2c006.appspot.com", 11 | messagingSenderId: "867736539827", 12 | appId: "1:867736539827:web:bf96e679e37d610fe056c6" 13 | }; 14 | 15 | const app = initializeApp(firebaseConfig); 16 | const auth = getAuth(app); 17 | const db = getFirestore(app); 18 | 19 | const signup = async (name, email, password) => { 20 | try { 21 | const res = await createUserWithEmailAndPassword(auth, email, password); 22 | const user = res.user; 23 | await addDoc(collection(db, "user"), { 24 | uid: user.uid, 25 | name, 26 | authProvider: "local", 27 | email 28 | }); 29 | } catch (error) { 30 | console.log(error); 31 | toast.success(error.code.split('/')[1].split('-').join("")); 32 | } 33 | }; 34 | 35 | const login = async (email, password) => { 36 | try { 37 | const res = await signInWithEmailAndPassword(auth, email, password); 38 | } catch (error) { 39 | console.log(error); 40 | toast.error(error.code.split('/')[1].split('-').join(" ")) 41 | } 42 | }; 43 | 44 | const logout = () => { 45 | signOut(auth); 46 | }; 47 | 48 | export { auth, db, login, signup, logout }; 49 | -------------------------------------------------------------------------------- /src/pages/Home/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Home.css' 3 | import Navbar from '../../components/Navbar/Navbar' 4 | import hero from '../../assets/hero_banner.jpg' 5 | import hero_title from '../../assets/hero_title.png' 6 | import play from '../../assets/play_icon.png' 7 | import info from '../../assets/info_icon.png' 8 | import TitleCard from '../../components/TitleCard/TitleCard'; 9 | import Footer from '../../components/Footer/Footer'; 10 | const Home = () => { 11 | return ( 12 |
13 | 14 |
15 | 16 |
17 | 18 |

Discovering his ties to a secret ancient order, a young man living in modern Istanbul embarks on a quest to save the city from an immortal enemt.

19 |
20 | 21 | 22 |
23 | 24 |
25 |
26 |
27 | 28 | 29 | 30 | 31 |
32 |
33 |
34 | ) 35 | } 36 | 37 | export default Home 38 | -------------------------------------------------------------------------------- /src/assets/cards/Cards_data.js: -------------------------------------------------------------------------------- 1 | import card_img1 from './card1.jpg'; 2 | import card_img2 from './card2.jpg'; 3 | import card_img3 from './card3.jpg'; 4 | import card_img4 from './card4.jpg'; 5 | import card_img5 from './card5.jpg'; 6 | import card_img6 from './card6.jpg'; 7 | import card_img7 from './card7.jpg'; 8 | import card_img8 from './card8.jpg'; 9 | import card_img9 from './card9.jpg'; 10 | import card_img10 from './card10.jpg'; 11 | import card_img11 from './card11.jpg'; 12 | import card_img12 from './card12.jpg'; 13 | import card_img13 from './card13.jpg'; 14 | import card_img14 from './card14.jpg'; 15 | 16 | const cards_data = [ 17 | { 18 | image:card_img1, 19 | name:"Kung Fu Panda" 20 | }, 21 | { 22 | image:card_img2, 23 | name:"Squid Game" 24 | }, 25 | { 26 | image:card_img3, 27 | name:"Squid Challange" 28 | }, 29 | { 30 | image:card_img4, 31 | name:"Jawan" 32 | }, 33 | { 34 | image:card_img5, 35 | name:"The Ghost" 36 | }, 37 | { 38 | image:card_img6, 39 | name:"Lucifer" 40 | }, 41 | { 42 | image:card_img7, 43 | name:"The Railway MEN" 44 | }, 45 | { 46 | image:card_img8, 47 | name:"Young Sheldon" 48 | }, 49 | { 50 | image:card_img9, 51 | name:"Sacred Games" 52 | }, 53 | { 54 | image:card_img10, 55 | name:"Adipurush" 56 | }, 57 | { 58 | image:card_img11, 59 | name:"Sukhee" 60 | }, 61 | { 62 | image:card_img12, 63 | name:"Mission Ganj" 64 | }, 65 | { 66 | image:card_img13, 67 | name:"Leo" 68 | }, 69 | { 70 | image:card_img14, 71 | name:"All of Us Are Dead" 72 | }, 73 | ] 74 | 75 | export default cards_data; -------------------------------------------------------------------------------- /src/components/Navbar/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import './Navbar.css' 3 | import logo from '../../assets/logo.png' 4 | import search from '../../assets/search_icon.svg' 5 | import bell from '../../assets/bell_icon.svg' 6 | import profile from '../../assets/profile_img.png' 7 | import caret from '../../assets/caret.svg' 8 | import { logout } from '../../firebase' 9 | 10 | const Navbar = () => { 11 | const [background, setBackground] = useState('transparent') 12 | 13 | const handleScroll = () => { 14 | if (window.scrollY > 50) { 15 | setBackground('rgb(20, 20, 20)') 16 | } else { 17 | setBackground('transparent') 18 | } 19 | } 20 | 21 | useEffect(() => { 22 | window.addEventListener('scroll', handleScroll) 23 | return () => { 24 | window.removeEventListener('scroll', handleScroll) 25 | } 26 | }, []) 27 | 28 | return ( 29 |
30 |
31 | 32 |
    33 |
  • Home
    • 34 |
  • Tv Shows
    • 35 |
  • Movies
    • 36 |
  • News & popular
    • 37 |
  • My List
    • 38 |
  • Browse by Languages
    • 39 |
40 |
41 |
42 | 43 |

Children

44 | 45 |
46 | profile 47 | caret 48 |
49 |

{logout()}}>Sign Out Of Netflix

50 |
51 |
52 |
53 |
54 | ) 55 | } 56 | 57 | export default Navbar 58 | -------------------------------------------------------------------------------- /src/components/Navbar/Navbar.css: -------------------------------------------------------------------------------- 1 | .navbar { 2 | width: 100%; 3 | padding: 20px 6%; 4 | display: flex; 5 | justify-content: space-between; 6 | position: fixed; 7 | font-size: 14px; 8 | color: #e5e5e5; 9 | background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7)10%, 10 | trasparent); 11 | z-index: 1; 12 | transition: background-color 0.3s ease; 13 | } 14 | 15 | .navbar-left { 16 | display: flex; 17 | align-items: center; 18 | gap: 50px; 19 | } 20 | 21 | .navbar-left img { 22 | width: 90px; 23 | } 24 | 25 | .navbar-left ul { 26 | display: flex; 27 | list-style: none; 28 | gap: 20px; 29 | } 30 | 31 | .navbar-left ul li { 32 | cursor: pointer; 33 | } 34 | 35 | .navbar-right { 36 | display: flex; 37 | gap: 20px; 38 | align-items: center; 39 | } 40 | 41 | .navbar-right .icon { 42 | width: 20px; 43 | cursor: pointer; 44 | } 45 | 46 | .navbar-right .profile { 47 | border-radius: 4px; 48 | width: 35px; 49 | } 50 | 51 | .navbar-profile { 52 | display: flex; 53 | align-items: center; 54 | cursor: pointer; 55 | gap: 10px; 56 | position: relative; 57 | } 58 | 59 | .navbar .dropdown { 60 | position: absolute; 61 | top: 100%; 62 | right: 0; 63 | width: max-content; 64 | background: #191919; 65 | padding: 12px 22px; 66 | border-radius: 2px; 67 | text-decoration: underline; 68 | z-index: 1; 69 | display: none; 70 | } 71 | 72 | .navbar .dropdown p { 73 | font-size: 13px; 74 | cursor: pointer; 75 | } 76 | 77 | .navbar-profile:hover .dropdown { 78 | display: flex; 79 | } 80 | 81 | @media (max-width:1050px) { 82 | .navbar { 83 | padding: 20px 4%; 84 | } 85 | 86 | .navbar-left ul { 87 | display: none; 88 | } 89 | 90 | .navbar img { 91 | height: 25px; 92 | } 93 | } 94 | 95 | @media (max-width:500px) { 96 | .navbar img { 97 | height: 20px; 98 | } 99 | 100 | .navbar-right { 101 | gap: 10px; 102 | } 103 | } -------------------------------------------------------------------------------- /src/pages/Login/Login.css: -------------------------------------------------------------------------------- 1 | .login { 2 | height: 100vh; 3 | background-image: linear-gradient(#0000007e, #0000007e), url(/public/background_banner.jpg); 4 | padding: 20px 8%; 5 | } 6 | 7 | .login-logo { 8 | width: 150px; 9 | } 10 | 11 | .login-form { 12 | width: 100%; 13 | max-width: 450px; 14 | background: rgba(0, 0, 0, 0.75); 15 | border-radius: 4px; 16 | padding: 60px; 17 | margin: auto; 18 | } 19 | 20 | .login-form h1 { 21 | font-size: 32px; 22 | font-weight: 500; 23 | margin-bottom: 28px; 24 | } 25 | 26 | .login-form input { 27 | width: 100%; 28 | height: 50px; 29 | background: #333; 30 | color: white; 31 | margin: 12px 0; 32 | border: 0; 33 | outline: 0; 34 | border-radius: 4px; 35 | padding: 16px 20px; 36 | font-size: 16px; 37 | font-weight: 500; 38 | } 39 | 40 | .login-form input::placeholder { 41 | font-size: 16px; 42 | font-weight: 500; 43 | } 44 | 45 | .login-form button { 46 | width: 100%; 47 | border: 0; 48 | outline: 0; 49 | padding: 16px; 50 | background: #e50914; 51 | color: white; 52 | border-radius: 4px; 53 | font-size: 16px; 54 | font-weight: 500; 55 | margin-top: 20px; 56 | cursor: pointer; 57 | } 58 | 59 | .form-help { 60 | display: flex; 61 | align-items: center; 62 | justify-content: space-between; 63 | color: #b3b3b3; 64 | font-size: 13px; 65 | } 66 | 67 | .remember { 68 | display: flex; 69 | align-items: center; 70 | gap: 5px; 71 | } 72 | 73 | .remember input { 74 | width: 18px; 75 | height: 18px; 76 | } 77 | 78 | .form-switch { 79 | margin-top: 40px; 80 | color: #737373; 81 | } 82 | 83 | .form-switch span { 84 | margin-left: 6px; 85 | color: #fff; 86 | font-weight: 500; 87 | cursor: pointer; 88 | } 89 | 90 | .login-spin { 91 | width: 100%; 92 | height: 100vh; 93 | display: flex; 94 | align-items: center; 95 | justify-content: center; 96 | } 97 | 98 | .login-spin img { 99 | width: 60px; 100 | } 101 | 102 | @media (max-width:500px){ 103 | .login{ 104 | padding: 15px 5%; 105 | } 106 | .login-form{ 107 | padding: 20px ; 108 | margin-top: 30px; 109 | } 110 | } -------------------------------------------------------------------------------- /src/components/TitleCard/TitleCard.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef, useState } from 'react'; 2 | import './TitleCard.css'; 3 | import cards_data from '../../assets/cards/Cards_data'; 4 | import { Link } from 'react-router-dom'; 5 | 6 | const TitleCard = ({ title, category }) => { 7 | const [apiDate, setApiData] = useState([]) 8 | const cardsRef = useRef(); 9 | 10 | const options = { 11 | method: 'GET', 12 | headers: { 13 | accept: 'application/json', 14 | Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJiMDRlNTAxZGNiNjdlOTAyNTlmNTE1MzMxZTUzNzBjNCIsIm5iZiI6MTcyMTYzNTY3OS4wNjU2NSwic3ViIjoiNjY5ZTExOGFhZTFiZmQyZWMxNGJlN2M4Iiwic2NvcGVzIjpbImFwaV9yZWFkIl0sInZlcnNpb24iOjF9.pI6ZlvuQ15Kelz4t8nywxZ3ZXimMsM-vI4L78_LkuHI' 15 | } 16 | }; 17 | 18 | const handleWheel = (event) => { 19 | event.preventDefault(); 20 | cardsRef.current.scrollLeft += event.deltaY; 21 | 22 | if (cardsRef.current.scrollLeft + cardsRef.current.clientWidth >= cardsRef.current.scrollWidth) { 23 | cardsRef.current.scrollLeft = 0; 24 | } 25 | if (cardsRef.current.scrollLeft === 0 && event.deltaY < 0) { 26 | cardsRef.current.scrollLeft = cardsRef.current.scrollWidth; 27 | } 28 | }; 29 | 30 | useEffect(() => { 31 | fetch(`https://api.themoviedb.org/3/movie/${category?category:"now_playing"}?language=en-US&page=1`, options) 32 | .then(response => response.json()) 33 | .then(response => setApiData(response.results)) 34 | .catch(err => console.error(err)); 35 | 36 | const currentCardsRef = cardsRef.current; 37 | currentCardsRef.addEventListener('wheel', handleWheel); 38 | return () => { 39 | currentCardsRef.removeEventListener('wheel', handleWheel); 40 | }; 41 | }, []); 42 | 43 | return ( 44 |
45 |

{title || 'Popular on Netflix'}

46 |
47 | {apiDate.map((card, index) => { 48 | return ( 49 | 50 | {card.name} 51 |

{card.original_title}

52 | 53 | ); 54 | })} 55 |
56 |
57 | ); 58 | }; 59 | 60 | export default TitleCard; 61 | -------------------------------------------------------------------------------- /src/pages/player/Player.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import './Player.css'; 3 | import backArrowIcon from '../../assets/back_arrow_icon.png'; 4 | import { useNavigate, useParams } from 'react-router-dom'; 5 | 6 | const Player = () => { 7 | 8 | const { id } = useParams(); 9 | const navigate = useNavigate(); 10 | 11 | const [apiData, setApiData] = useState({ 12 | name: '', 13 | key: '', 14 | published_at: '', 15 | type: '' 16 | }); 17 | 18 | const options = { 19 | method: 'GET', 20 | headers: { 21 | accept: 'application/json', 22 | Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJiMDRlNTAxZGNiNjdlOTAyNTlmNTE1MzMxZTUzNzBjNCIsIm5iZiI6MTcyMTYzNTY3OS4wNjU2NSwic3ViIjoiNjY5ZTExOGFhZTFiZmQyZWMxNGJlN2M4Iiwic2NvcGVzIjpbImFwaV9yZWFkIl0sInZlcnNpb24iOjF9.pI6ZlvuQ15Kelz4t8nywxZ3ZXimMsM-vI4L78_LkuHI' 23 | } 24 | }; 25 | 26 | useEffect(() => { 27 | fetch(`https://api.themoviedb.org/3/movie/${id}/videos?language=en-US`, options) 28 | .then(response => response.json()) 29 | .then(response => { 30 | if (response.results && response.results.length > 0) { 31 | const video = response.results[0]; 32 | setApiData({ 33 | name: video.name, 34 | key: video.key, 35 | published_at: video.published_at, // Adjust as necessary based on API response 36 | type: video.type 37 | }); 38 | } 39 | }) 40 | .catch(err => console.error(err)); 41 | }, []); 42 | 43 | return ( 44 |
45 | Back arrow icon navigate(-2)} /> 46 | 54 |
55 |

{apiData.published_at.slice(0, 10)}

56 |

{apiData.name}

57 |

{apiData.type}

58 |
59 |
60 | ); 61 | } 62 | 63 | export default Player; 64 | -------------------------------------------------------------------------------- /src/pages/Home/Home.css: -------------------------------------------------------------------------------- 1 | .hero { 2 | position: relative; 3 | } 4 | 5 | .hero-img { 6 | width: 100%; 7 | mask-image: linear-gradient(to right, transparent, black 75%); 8 | -webkit-mask-image: linear-gradient(to right, transparent, black 75%); 9 | } 10 | 11 | .hero-caption { 12 | position: absolute; 13 | width: 100%; 14 | padding-left: 6%; 15 | bottom: 0; 16 | } 17 | 18 | .hero-title { 19 | width: 90%; 20 | max-width: 420px; 21 | margin-bottom: 30px; 22 | } 23 | 24 | .hero-caption p { 25 | max-width: 700px; 26 | font-size: 17px; 27 | margin-bottom: 20px; 28 | } 29 | 30 | .hero-btns { 31 | display: flex; 32 | gap: 10px; 33 | margin-bottom: 50px; 34 | } 35 | 36 | .hero-btns .btn img { 37 | width: 25px; 38 | } 39 | 40 | .hero-btns .btn { 41 | border: 0; 42 | outline: none; 43 | padding: 8px 20px; 44 | display: inline-flex; 45 | align-items: center; 46 | gap: 10px; 47 | font-size: 25px; 48 | font-weight: 600; 49 | background: white; 50 | border-radius: 4px; 51 | cursor: pointer; 52 | } 53 | 54 | .hero-btns .btn.dark-btn { 55 | color: #fff; 56 | background: #6d6d6eb3; 57 | } 58 | 59 | .hero-btns .btn:hover { 60 | background: #ffffffbf; 61 | } 62 | 63 | .hero-btns .btn.dark-btn:hover { 64 | background: #6d6d6e66; 65 | } 66 | 67 | .more-cards { 68 | padding-left: 6%; 69 | } 70 | 71 | @media (max-width:1024px) { 72 | .hero-caption .title-Card { 73 | display: none; 74 | } 75 | 76 | .hero-btns { 77 | margin-bottom: 30px; 78 | } 79 | } 80 | 81 | @media (max-width:800px) { 82 | .hero-caption { 83 | padding: 4%; 84 | } 85 | 86 | .caption-img { 87 | margin-bottom: 10px; 88 | width: 40%; 89 | } 90 | 91 | .hero-caption p { 92 | font-size: 12px; 93 | margin-bottom: 10px; 94 | } 95 | 96 | .hero-btns .btn img { 97 | width: 20px; 98 | } 99 | 100 | .more-cards { 101 | padding-left: 4%; 102 | } 103 | } 104 | 105 | @media (max-width:500px) { 106 | .caption-img { 107 | display: none; 108 | } 109 | 110 | .hero-btns .btn img { 111 | width: 15px; 112 | } 113 | 114 | .hero-btns .btn { 115 | padding: 4px 10px; 116 | gap: 5px; 117 | font-size: 10px; 118 | } 119 | } -------------------------------------------------------------------------------- /src/pages/Login/Login.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import './Login.css'; 3 | import logo from '../../assets/logo.png'; 4 | import { login, signup, logout } from '../../firebase'; 5 | import netflix_spinner from '../../assets/netflix_spinner.gif' 6 | 7 | const Login = () => { 8 | const [signState, setSignState] = useState("Sign In"); 9 | const [name, setName] = useState(''); 10 | const [email, setEmail] = useState(''); 11 | const [password, setPassword] = useState(''); 12 | const [loading, setLoading] = useState(false) 13 | 14 | const user_auth = async (e) => { 15 | e.preventDefault(); 16 | setLoading(true) 17 | if (signState === 'Sign In') { 18 | await login(email, password); 19 | } else { 20 | await signup(name, email, password); 21 | } 22 | setLoading(false) 23 | }; 24 | 25 | return ( 26 | loading ?
27 | 28 |
: 29 |
30 | Logo 31 |
32 |

{signState}

33 |
34 | {signState === "Sign Up" && ( 35 | setName(e.target.value)} 38 | type="text" 39 | placeholder="Your name" 40 | /> 41 | )} 42 | setEmail(e.target.value)} 45 | type="email" 46 | placeholder="Email" 47 | /> 48 | setPassword(e.target.value)} 51 | type="password" 52 | placeholder="Password" 53 | /> 54 | 55 |
56 |
57 | 58 | 59 |
60 |

Need Help?

61 |
62 |
63 |
64 | {signState === "Sign In" ? ( 65 |

66 | New to Netflix? setSignState("Sign Up")}>Sign Up Now 67 |

68 | ) : ( 69 |

70 | Already have an account? setSignState("Sign In")}>Sign In Now 71 |

72 | )} 73 |
74 |
75 |
76 | ); 77 | }; 78 | 79 | export default Login; 80 | --------------------------------------------------------------------------------