├── frontend ├── public │ ├── 404.png │ ├── tv.png │ ├── hero.png │ ├── kids.png │ ├── avatar1.png │ ├── avatar2.png │ ├── avatar3.png │ ├── favicon.png │ ├── hero-vid.m4v │ ├── device-pile.png │ ├── extraction.jpg │ ├── download-icon.gif │ ├── netflix-logo.png │ ├── video-devices.m4v │ ├── stranger-things-lg.png │ ├── stranger-things-sm.png │ └── screenshot-for-readme.png ├── postcss.config.js ├── src │ ├── utils │ │ ├── dateFunction.js │ │ └── constants.js │ ├── store │ │ ├── content.js │ │ └── authUser.js │ ├── pages │ │ ├── home │ │ │ ├── HomePage.jsx │ │ │ ├── HomeScreen.jsx │ │ │ └── AuthScreen.jsx │ │ ├── 404.jsx │ │ ├── LoginPage.jsx │ │ ├── SignUpPage.jsx │ │ ├── SearchHistoryPage.jsx │ │ ├── SearchPage.jsx │ │ └── WatchPage.jsx │ ├── main.jsx │ ├── components │ │ ├── skeletons │ │ │ └── WatchPageSkeleton.jsx │ │ ├── Footer.jsx │ │ ├── Navbar.jsx │ │ └── MovieSlider.jsx │ ├── hooks │ │ └── useGetTrendingContent.jsx │ ├── index.css │ └── App.jsx ├── tailwind.config.js ├── vite.config.js ├── index.html ├── README.md ├── .eslintrc.cjs └── package.json ├── .env.sample ├── backend ├── config │ ├── envVars.js │ └── db.js ├── routes │ ├── auth.route.js │ ├── tv.route.js │ ├── movie.route.js │ └── search.route.js ├── services │ └── tmdb.service.js ├── models │ └── user.model.js ├── utils │ └── generateToken.js ├── middleware │ └── protectRoute.js ├── server.js └── controllers │ ├── tv.controller.js │ ├── movie.controller.js │ ├── auth.controller.js │ └── search.controller.js ├── .gitignore ├── package.json └── README.md /frontend/public/404.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/NETFLIX-CLONE/HEAD/frontend/public/404.png -------------------------------------------------------------------------------- /frontend/public/tv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/NETFLIX-CLONE/HEAD/frontend/public/tv.png -------------------------------------------------------------------------------- /frontend/public/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/NETFLIX-CLONE/HEAD/frontend/public/hero.png -------------------------------------------------------------------------------- /frontend/public/kids.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/NETFLIX-CLONE/HEAD/frontend/public/kids.png -------------------------------------------------------------------------------- /frontend/public/avatar1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/NETFLIX-CLONE/HEAD/frontend/public/avatar1.png -------------------------------------------------------------------------------- /frontend/public/avatar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/NETFLIX-CLONE/HEAD/frontend/public/avatar2.png -------------------------------------------------------------------------------- /frontend/public/avatar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/NETFLIX-CLONE/HEAD/frontend/public/avatar3.png -------------------------------------------------------------------------------- /frontend/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/NETFLIX-CLONE/HEAD/frontend/public/favicon.png -------------------------------------------------------------------------------- /frontend/public/hero-vid.m4v: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/NETFLIX-CLONE/HEAD/frontend/public/hero-vid.m4v -------------------------------------------------------------------------------- /frontend/public/device-pile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/NETFLIX-CLONE/HEAD/frontend/public/device-pile.png -------------------------------------------------------------------------------- /frontend/public/extraction.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/NETFLIX-CLONE/HEAD/frontend/public/extraction.jpg -------------------------------------------------------------------------------- /frontend/public/download-icon.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/NETFLIX-CLONE/HEAD/frontend/public/download-icon.gif -------------------------------------------------------------------------------- /frontend/public/netflix-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/NETFLIX-CLONE/HEAD/frontend/public/netflix-logo.png -------------------------------------------------------------------------------- /frontend/public/video-devices.m4v: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/NETFLIX-CLONE/HEAD/frontend/public/video-devices.m4v -------------------------------------------------------------------------------- /frontend/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /frontend/public/stranger-things-lg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/NETFLIX-CLONE/HEAD/frontend/public/stranger-things-lg.png -------------------------------------------------------------------------------- /frontend/public/stranger-things-sm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/NETFLIX-CLONE/HEAD/frontend/public/stranger-things-sm.png -------------------------------------------------------------------------------- /frontend/public/screenshot-for-readme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RKNITH/NETFLIX-CLONE/HEAD/frontend/public/screenshot-for-readme.png -------------------------------------------------------------------------------- /.env.sample: -------------------------------------------------------------------------------- 1 | PORT=5000 2 | MONGO_URI=your_mongo_uri 3 | NODE_ENV=development 4 | JWT_SECRET=your_jwt_secret 5 | TMDB_API_KEY=your_tmdb_api_key -------------------------------------------------------------------------------- /frontend/src/utils/dateFunction.js: -------------------------------------------------------------------------------- 1 | export function formatReleaseDate(date) { 2 | return new Date(date).toLocaleDateString("en-US", { 3 | year: "numeric", 4 | month: "long", 5 | day: "numeric", 6 | }); 7 | } 8 | -------------------------------------------------------------------------------- /frontend/src/store/content.js: -------------------------------------------------------------------------------- 1 | import { create } from "zustand"; 2 | 3 | export const useContentStore = create((set) => ({ 4 | contentType: "movie", 5 | setContentType: (type) => set({ contentType: type }), 6 | })); 7 | -------------------------------------------------------------------------------- /frontend/tailwind.config.js: -------------------------------------------------------------------------------- 1 | import tailwindScrollbarHide from "tailwind-scrollbar-hide"; 2 | /** @type {import('tailwindcss').Config} */ 3 | export default { 4 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 5 | theme: { 6 | extend: {}, 7 | }, 8 | plugins: [tailwindScrollbarHide], 9 | }; 10 | -------------------------------------------------------------------------------- /backend/config/envVars.js: -------------------------------------------------------------------------------- 1 | import dotenv from "dotenv"; 2 | 3 | dotenv.config(); 4 | 5 | export const ENV_VARS = { 6 | MONGO_URI: process.env.MONGO_URI, 7 | PORT: process.env.PORT || 5000, 8 | JWT_SECRET: process.env.JWT_SECRET, 9 | NODE_ENV: process.env.NODE_ENV, 10 | TMDB_API_KEY: process.env.TMDB_API_KEY, 11 | }; 12 | -------------------------------------------------------------------------------- /frontend/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 | server: { 8 | proxy: { 9 | "/api": { 10 | target: "http://localhost:5000", 11 | }, 12 | }, 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /frontend/src/pages/home/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import { useAuthStore } from "../../store/authUser"; 2 | import AuthScreen from "./AuthScreen"; 3 | import HomeScreen from "./HomeScreen"; 4 | 5 | const HomePage = () => { 6 | const { user } = useAuthStore(); 7 | 8 | return <>{user ? : }; 9 | }; 10 | export default HomePage; 11 | -------------------------------------------------------------------------------- /frontend/src/utils/constants.js: -------------------------------------------------------------------------------- 1 | export const SMALL_IMG_BASE_URL = "https://image.tmdb.org/t/p/w500"; 2 | export const ORIGINAL_IMG_BASE_URL = "https://image.tmdb.org/t/p/original"; 3 | 4 | export const MOVIE_CATEGORIES = ["now_playing", "top_rated", "popular", "upcoming"]; 5 | export const TV_CATEGORIES = ["airing_today", "on_the_air", "popular", "top_rated"]; 6 | -------------------------------------------------------------------------------- /.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 | .env 16 | 17 | # Editor directories and files 18 | .vscode/* 19 | !.vscode/extensions.json 20 | .idea 21 | .DS_Store 22 | *.suo 23 | *.ntvs* 24 | *.njsproj 25 | *.sln 26 | *.sw? 27 | -------------------------------------------------------------------------------- /frontend/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 | -------------------------------------------------------------------------------- /frontend/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /backend/routes/auth.route.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import { authCheck, login, logout, signup } from "../controllers/auth.controller.js"; 3 | import { protectRoute } from "../middleware/protectRoute.js"; 4 | 5 | const router = express.Router(); 6 | 7 | router.post("/signup", signup); 8 | router.post("/login", login); 9 | router.post("/logout", logout); 10 | 11 | router.get("/authCheck", protectRoute, authCheck); 12 | 13 | export default router; 14 | -------------------------------------------------------------------------------- /backend/config/db.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose"; 2 | import { ENV_VARS } from "./envVars.js"; 3 | 4 | export const connectDB = async () => { 5 | try { 6 | const conn = await mongoose.connect(ENV_VARS.MONGO_URI); 7 | console.log("MongoDB connected: " + conn.connection.host); 8 | } catch (error) { 9 | console.error("Error connecting to MONGODB: " + error.message); 10 | process.exit(1); // 1 means there was an error, 0 means success 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /frontend/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /backend/routes/tv.route.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import { 3 | getSimilarTvs, 4 | getTrendingTv, 5 | getTvDetails, 6 | getTvsByCategory, 7 | getTvTrailers, 8 | } from "../controllers/tv.controller.js"; 9 | 10 | const router = express.Router(); 11 | 12 | router.get("/trending", getTrendingTv); 13 | router.get("/:id/trailers", getTvTrailers); 14 | router.get("/:id/details", getTvDetails); 15 | router.get("/:id/similar", getSimilarTvs); 16 | router.get("/:category", getTvsByCategory); 17 | 18 | export default router; 19 | -------------------------------------------------------------------------------- /backend/services/tmdb.service.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import { ENV_VARS } from "../config/envVars.js"; 3 | 4 | export const fetchFromTMDB = async (url) => { 5 | const options = { 6 | headers: { 7 | accept: "application/json", 8 | Authorization: "Bearer " + ENV_VARS.TMDB_API_KEY, 9 | }, 10 | }; 11 | 12 | const response = await axios.get(url, options); 13 | 14 | if (response.status !== 200) { 15 | throw new Error("Failed to fetch data from TMDB" + response.statusText); 16 | } 17 | 18 | return response.data; 19 | }; 20 | -------------------------------------------------------------------------------- /backend/models/user.model.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose"; 2 | 3 | const userSchema = mongoose.Schema({ 4 | username: { 5 | type: String, 6 | required: true, 7 | unique: true, 8 | }, 9 | email: { 10 | type: String, 11 | required: true, 12 | unique: true, 13 | }, 14 | password: { 15 | type: String, 16 | required: true, 17 | }, 18 | image: { 19 | type: String, 20 | default: "", 21 | }, 22 | searchHistory: { 23 | type: Array, 24 | default: [], 25 | }, 26 | }); 27 | 28 | export const User = mongoose.model("User", userSchema); 29 | -------------------------------------------------------------------------------- /backend/routes/movie.route.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import { 3 | getMovieDetails, 4 | getMoviesByCategory, 5 | getMovieTrailers, 6 | getSimilarMovies, 7 | getTrendingMovie, 8 | } from "../controllers/movie.controller.js"; 9 | 10 | const router = express.Router(); 11 | 12 | router.get("/trending", getTrendingMovie); 13 | router.get("/:id/trailers", getMovieTrailers); 14 | router.get("/:id/details", getMovieDetails); 15 | router.get("/:id/similar", getSimilarMovies); 16 | router.get("/:category", getMoviesByCategory); 17 | 18 | export default router; 19 | -------------------------------------------------------------------------------- /backend/routes/search.route.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import { 3 | getSearchHistory, 4 | removeItemFromSearchHistory, 5 | searchMovie, 6 | searchPerson, 7 | searchTv, 8 | } from "../controllers/search.controller.js"; 9 | 10 | const router = express.Router(); 11 | 12 | router.get("/person/:query", searchPerson); 13 | router.get("/movie/:query", searchMovie); 14 | router.get("/tv/:query", searchTv); 15 | 16 | router.get("/history", getSearchHistory); 17 | 18 | router.delete("/history/:id", removeItemFromSearchHistory); 19 | 20 | export default router; 21 | -------------------------------------------------------------------------------- /frontend/src/components/skeletons/WatchPageSkeleton.jsx: -------------------------------------------------------------------------------- 1 | const WatchPageSkeleton = () => { 2 | return ( 3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | ); 11 | }; 12 | export default WatchPageSkeleton; 13 | -------------------------------------------------------------------------------- /backend/utils/generateToken.js: -------------------------------------------------------------------------------- 1 | import jwt from "jsonwebtoken"; 2 | import { ENV_VARS } from "../config/envVars.js"; 3 | 4 | export const generateTokenAndSetCookie = (userId, res) => { 5 | const token = jwt.sign({ userId }, ENV_VARS.JWT_SECRET, { expiresIn: "15d" }); 6 | 7 | res.cookie("jwt-netflix", token, { 8 | maxAge: 15 * 24 * 60 * 60 * 1000, // 15 days in MS 9 | httpOnly: true, // prevent XSS attacks cross-site scripting attacks, make it not be accessed by JS 10 | sameSite: "strict", // CSRF attacks cross-site request forgery attacks 11 | secure: ENV_VARS.NODE_ENV !== "development", 12 | }); 13 | 14 | return token; 15 | }; 16 | -------------------------------------------------------------------------------- /frontend/src/hooks/useGetTrendingContent.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { useContentStore } from "../store/content"; 3 | import axios from "axios"; 4 | 5 | const useGetTrendingContent = () => { 6 | const [trendingContent, setTrendingContent] = useState(null); 7 | const { contentType } = useContentStore(); 8 | 9 | useEffect(() => { 10 | const getTrendingContent = async () => { 11 | const res = await axios.get(`/api/v1/${contentType}/trending`); 12 | setTrendingContent(res.data.content); 13 | }; 14 | 15 | getTrendingContent(); 16 | }, [contentType]); 17 | 18 | return { trendingContent }; 19 | }; 20 | export default useGetTrendingContent; 21 | -------------------------------------------------------------------------------- /frontend/.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": ["warn", { allowConstantExport: true }], 17 | "react/no-unescaped-entities": "off", 18 | "react/prop-types": "off", 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "netflix-clone", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "backend/server.js", 6 | "scripts": { 7 | "dev": "NODE_ENV=development nodemon backend/server.js", 8 | "start": "NODE_ENV=production node backend/server.js", 9 | "build": "npm install && npm install --prefix frontend && npm run build --prefix frontend" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "type": "module", 14 | "license": "ISC", 15 | "dependencies": { 16 | "axios": "^1.7.2", 17 | "bcryptjs": "^2.4.3", 18 | "cookie-parser": "^1.4.6", 19 | "dotenv": "^16.4.5", 20 | "express": "^4.19.2", 21 | "jsonwebtoken": "^9.0.2", 22 | "mongoose": "^8.5.1" 23 | }, 24 | "devDependencies": { 25 | "nodemon": "^3.1.4" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

MERN Netflix Clone 🎬

2 | 3 | 4 | About This Course: 5 | 6 | - ⚛️ Tech Stack: React.js, Node.js, Express.js, MongoDB, Tailwind 7 | - 🔐 Authentication with JWT 8 | - 📱 Responsive UI 9 | - 🎬 Fetch Movies and Tv Show 10 | - 🔎 Search for Actors and Movies 11 | - 🎥 Watch Trailers 12 | - 🔥 Fetch Search History 13 | - 🐱‍👤 Get Similar Movies/Tv Shows 14 | - 💙 Awesome Landing Page 15 | - 🌐 Deployment 16 | 17 | 18 | ### Setup .env file 19 | 20 | ```bash 21 | PORT=5000 22 | MONGO_URI=your_mongo_uri 23 | NODE_ENV=development 24 | JWT_SECRET=your_jwt_secre 25 | TMDB_API_KEY=your_tmdb_api_key 26 | ``` 27 | 28 | ### Run this app locally 29 | 30 | ```shell 31 | npm run build 32 | ``` 33 | 34 | ### Start the app 35 | 36 | ```shell 37 | npm run start 38 | ``` 39 | -------------------------------------------------------------------------------- /frontend/src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | const Footer = () => { 2 | return ( 3 | 27 | ); 28 | }; 29 | export default Footer; 30 | -------------------------------------------------------------------------------- /frontend/src/pages/404.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | 3 | const NotFoundPage = () => { 4 | return ( 5 |
9 |
10 | 11 | Netflix 12 | 13 |
14 |
15 |

Lost your way?

16 |

17 | Sorry, we can't find that page. You'll find lots to explore on the home page. 18 |

19 | 20 | Netflix Home 21 | 22 |
23 |
24 | ); 25 | }; 26 | export default NotFoundPage; 27 | -------------------------------------------------------------------------------- /backend/middleware/protectRoute.js: -------------------------------------------------------------------------------- 1 | import jwt from "jsonwebtoken"; 2 | import { User } from "../models/user.model.js"; 3 | import { ENV_VARS } from "../config/envVars.js"; 4 | 5 | export const protectRoute = async (req, res, next) => { 6 | try { 7 | const token = req.cookies["jwt-netflix"]; 8 | 9 | if (!token) { 10 | return res.status(401).json({ success: false, message: "Unauthorized - No Token Provided" }); 11 | } 12 | 13 | const decoded = jwt.verify(token, ENV_VARS.JWT_SECRET); 14 | 15 | if (!decoded) { 16 | return res.status(401).json({ success: false, message: "Unauthorized - Invalid Token" }); 17 | } 18 | 19 | const user = await User.findById(decoded.userId).select("-password"); 20 | 21 | if (!user) { 22 | return res.status(404).json({ success: false, message: "User not found" }); 23 | } 24 | 25 | req.user = user; 26 | 27 | next(); 28 | } catch (error) { 29 | console.log("Error in protectRoute middleware: ", error.message); 30 | res.status(500).json({ success: false, message: "Internal Server Error" }); 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /frontend/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .hero-bg { 6 | background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1)), url("/hero.png"); 7 | } 8 | 9 | .shimmer { 10 | animation: shimmer 2s infinite linear; 11 | background: linear-gradient(to right, #2c2c2c 4%, #333 25%, #2c2c2c 36%); 12 | background-size: 1000px 100%; 13 | } 14 | 15 | @keyframes shimmer { 16 | 0% { 17 | background-position: -1000px 0; 18 | } 19 | 100% { 20 | background-position: 1000px 0; 21 | } 22 | } 23 | 24 | .error-page--content::before { 25 | background: radial-gradient( 26 | ellipse at center, 27 | rgba(0, 0, 0, 0.5) 0, 28 | rgba(0, 0, 0, 0.2) 45%, 29 | rgba(0, 0, 0, 0.1) 55%, 30 | transparent 70% 31 | ); 32 | bottom: -10vw; 33 | content: ""; 34 | left: 10vw; 35 | position: absolute; 36 | right: 10vw; 37 | top: -10vw; 38 | z-index: -1; 39 | } 40 | 41 | ::-webkit-scrollbar { 42 | width: 8px; 43 | } 44 | 45 | ::-webkit-scrollbar-thumb { 46 | background-color: #4b5563; 47 | border-radius: 6px; 48 | } 49 | 50 | ::-webkit-scrollbar-track { 51 | background-color: #1a202c; 52 | } 53 | -------------------------------------------------------------------------------- /frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend", 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 | "axios": "^1.7.2", 14 | "lucide-react": "^0.408.0", 15 | "netflix-clone": "file:..", 16 | "react": "^18.3.1", 17 | "react-dom": "^18.3.1", 18 | "react-hot-toast": "^2.4.1", 19 | "react-player": "^2.16.0", 20 | "react-router-dom": "^6.25.0", 21 | "tailwind-scrollbar-hide": "^1.1.7", 22 | "zustand": "^4.5.4" 23 | }, 24 | "devDependencies": { 25 | "@types/react": "^18.3.3", 26 | "@types/react-dom": "^18.3.0", 27 | "@vitejs/plugin-react": "^4.3.1", 28 | "autoprefixer": "^10.4.19", 29 | "eslint": "^8.57.0", 30 | "eslint-plugin-react": "^7.34.3", 31 | "eslint-plugin-react-hooks": "^4.6.2", 32 | "eslint-plugin-react-refresh": "^0.4.7", 33 | "postcss": "^8.4.39", 34 | "tailwindcss": "^3.4.6", 35 | "vite": "^5.3.4" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /backend/server.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import cookieParser from "cookie-parser"; 3 | import path from "path"; 4 | 5 | import authRoutes from "./routes/auth.route.js"; 6 | import movieRoutes from "./routes/movie.route.js"; 7 | import tvRoutes from "./routes/tv.route.js"; 8 | import searchRoutes from "./routes/search.route.js"; 9 | 10 | import { ENV_VARS } from "./config/envVars.js"; 11 | import { connectDB } from "./config/db.js"; 12 | import { protectRoute } from "./middleware/protectRoute.js"; 13 | 14 | const app = express(); 15 | 16 | const PORT = ENV_VARS.PORT; 17 | const __dirname = path.resolve(); 18 | 19 | app.use(express.json()); // will allow us to parse req.body 20 | app.use(cookieParser()); 21 | 22 | app.use("/api/v1/auth", authRoutes); 23 | app.use("/api/v1/movie", protectRoute, movieRoutes); 24 | app.use("/api/v1/tv", protectRoute, tvRoutes); 25 | app.use("/api/v1/search", protectRoute, searchRoutes); 26 | 27 | if (ENV_VARS.NODE_ENV === "production") { 28 | app.use(express.static(path.join(__dirname, "/frontend/dist"))); 29 | 30 | app.get("*", (req, res) => { 31 | res.sendFile(path.resolve(__dirname, "frontend", "dist", "index.html")); 32 | }); 33 | } 34 | 35 | app.listen(PORT, () => { 36 | console.log("Server started at http://localhost:" + PORT); 37 | connectDB(); 38 | }); 39 | -------------------------------------------------------------------------------- /frontend/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { Navigate, Route, Routes } from "react-router-dom"; 2 | import HomePage from "./pages/home/HomePage"; 3 | import LoginPage from "./pages/LoginPage"; 4 | import SignUpPage from "./pages/SignUpPage"; 5 | import WatchPage from "./pages/WatchPage"; 6 | import Footer from "./components/Footer"; 7 | import { Toaster } from "react-hot-toast"; 8 | import { useAuthStore } from "./store/authUser"; 9 | import { useEffect } from "react"; 10 | import { Loader } from "lucide-react"; 11 | import SearchPage from "./pages/SearchPage"; 12 | import SearchHistoryPage from "./pages/SearchHistoryPage"; 13 | import NotFoundPage from "./pages/404"; 14 | 15 | function App() { 16 | const { user, isCheckingAuth, authCheck } = useAuthStore(); 17 | 18 | useEffect(() => { 19 | authCheck(); 20 | }, [authCheck]); 21 | 22 | if (isCheckingAuth) { 23 | return ( 24 |
25 |
26 | 27 |
28 |
29 | ); 30 | } 31 | 32 | return ( 33 | <> 34 | 35 | } /> 36 | : } /> 37 | : } /> 38 | : } /> 39 | : } /> 40 | : } /> 41 | } /> 42 | 43 |