## Prerequests
- Create an account if you don't have on [TMDB](https://www.themoviedb.org/).
Because I use its free API to consume movie/tv data.
- And then follow the [documentation](https://developers.themoviedb.org/3/getting-started/introduction) to create API Key
- Finally, if you use v3 of TMDB API, create a file named `.env`, and copy and paste the content of `.env.example`.
And then paste the API Key you just created.
## Which features this project deal with
- How to create and use [Custom Hooks](https://reactjs.org/docs/hooks-custom.html)
- How to use [Context](https://reactjs.org/docs/context.html) and its provider
- How to use lazy and Suspense for [Code-Splitting](https://reactjs.org/docs/code-splitting.html)
- How to use a new [lazy](https://reactrouter.com/en/main/route/lazy) feature of react-router to reduce bundle size.
- How to use data [loader](https://reactrouter.com/en/main/route/loader) of react-router, and how to use redux dispatch in the loader to fetch data before rendering component.
- How to use [Portal](https://reactjs.org/docs/portals.html)
- How to use [Fowarding Refs](https://reactjs.org/docs/forwarding-refs.html) to make components reusuable
- How to create and use [HOC](https://reactjs.org/docs/higher-order-components.html)
- How to customize default theme of [MUI](https://mui.com/)
- How to use [RTK](https://redux-toolkit.js.org/introduction/getting-started)
- How to use [RTK Query](https://redux-toolkit.js.org/rtk-query/overview)
- How to customize default classname of [MUI](https://mui.com/material-ui/experimental-api/classname-generator)
- Infinite Scrolling(using [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API))
- How to make awesome carousel using [slick-carousel](https://react-slick.neostack.com)
## Third Party libraries used except for React and RTK
- [react-router-dom@v6.9](https://reactrouter.com/en/main)
- [MUI(Material UI)](https://mui.com/)
- [framer-motion](https://www.framer.com/docs/)
- [video.js](https://videojs.com)
- [react-slick](https://react-slick.neostack.com/)
## Install with Docker
```sh
docker build --build-arg TMDB_V3_API_KEY=your_api_key_here -t netflix-clone .
docker run --name netflix-clone-website --rm -d -p 80:80 netflix-clone
```
## Todo
- Make the animation of video card portal more similar to Netflix.
- Improve performance. I am using `context` and `provider` but all components subscribed to the context's value are re-rendered. These re-renders happen even if the part of the value is not used in render of the component. there are [several ways](https://blog.axlight.com/posts/4-options-to-prevent-extra-rerenders-with-react-context/) to prevent the re-renders from these behaviours. In addition to them, there may be several performance issues.
- Replace bundler([Vite](https://vitejs.dev/guide)) with [Turbopack](https://turbo.build/pack/docs/why-turbopack). Turbopack is introduced in Next.js conf recently. It's very fast but it's nor ready to use right now. it just support Next.js, and they plan to support all others as soon as possible. so if it's ready to use, replace [Vite](https://vitejs.dev/guide) with [Turbopack](https://turbo.build/pack/docs/why-turbopack).
- Add accessibilities for better UX.
- Add Tests.
================================================
FILE: firebase.json
================================================
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
================================================
FILE: index.html
================================================
Netflix
================================================
FILE: package.json
================================================
{
"name": "netflix-clone-using-react-typescript-mui",
"version": "0.1.1",
"type": "module",
"private": true,
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@emotion/react": "^11.10.0",
"@emotion/styled": "^11.10.0",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.10.0",
"@reduxjs/toolkit": "^1.8.3",
"framer-motion": "^7.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.2",
"react-router-dom": "^6.9.0",
"react-slick": "^0.29.0",
"slick-carousel": "^1.8.1",
"video.js": "^8.3.0",
"videojs-youtube": "^3.0.1",
"vite-tsconfig-paths": "^3.5.2"
},
"devDependencies": {
"@types/react": "^18.0.24",
"@types/react-dom": "^18.0.8",
"@types/react-slick": "^0.23.10",
"@vitejs/plugin-react": "^2.2.0",
"typescript": "^4.6.4",
"vite": "^3.2.1"
}
}
================================================
FILE: public/index.html
================================================
Netflix
================================================
FILE: public/manifest.json
================================================
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
================================================
FILE: public/robots.txt
================================================
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
================================================
FILE: src/CustomClassNameSetup.ts
================================================
import { unstable_ClassNameGenerator as ClassNameGenerator } from "@mui/material/className";
ClassNameGenerator.configure((componentName) => {
let newComponentName = componentName;
// you can replace Mui, default prefix of every component with new one you want
newComponentName = newComponentName.replace("Mui", "Netflix");
// you can replace default classname of component with new one you want
newComponentName = newComponentName.replace("Button", "Btn");
return newComponentName;
});
================================================
FILE: src/components/AgeLimitChip.tsx
================================================
import Chip, { ChipProps } from "@mui/material/Chip";
export default function AgeLimitChip({ sx, ...others }: ChipProps) {
return (
span": { p: 0 },
...sx,
}}
variant="outlined"
/>
);
}
================================================
FILE: src/components/DetailModal.tsx
================================================
import { forwardRef, useCallback, useRef, useState } from "react";
import Box from "@mui/material/Box";
import Grid from "@mui/material/Grid";
import Container from "@mui/material/Container";
import Stack from "@mui/material/Stack";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import Dialog from "@mui/material/Dialog";
import DialogContent from "@mui/material/DialogContent";
import Slide from "@mui/material/Slide";
import { TransitionProps } from "@mui/material/transitions";
import CloseIcon from "@mui/icons-material/Close";
import AddIcon from "@mui/icons-material/Add";
import ThumbUpOffAltIcon from "@mui/icons-material/ThumbUpOffAlt";
import VolumeUpIcon from "@mui/icons-material/VolumeUp";
import VolumeOffIcon from "@mui/icons-material/VolumeOff";
import Player from "video.js/dist/types/player";
import MaxLineTypography from "./MaxLineTypography";
import PlayButton from "./PlayButton";
import NetflixIconButton from "./NetflixIconButton";
import AgeLimitChip from "./AgeLimitChip";
import QualityChip from "./QualityChip";
import { formatMinuteToReadable, getRandomNumber } from "src/utils/common";
import SimilarVideoCard from "./SimilarVideoCard";
import { useDetailModal } from "src/providers/DetailModalProvider";
import { useGetSimilarVideosQuery } from "src/store/slices/discover";
import { MEDIA_TYPE } from "src/types/Common";
import VideoJSPlayer from "./watch/VideoJSPlayer";
const Transition = forwardRef(function Transition(
props: TransitionProps & {
children: React.ReactElement;
},
ref: React.Ref
) {
return ;
});
export default function DetailModal() {
const { detail, setDetailType } = useDetailModal();
const { data: similarVideos } = useGetSimilarVideosQuery(
{ mediaType: detail.mediaType ?? MEDIA_TYPE.Movie, id: detail.id ?? 0 },
{ skip: !detail.id }
);
const playerRef = useRef(null);
const [muted, setMuted] = useState(true);
const handleReady = useCallback((player: Player) => {
playerRef.current = player;
setMuted(player.muted());
}, []);
const handleMute = useCallback((status: boolean) => {
if (playerRef.current) {
playerRef.current.muted(!status);
setMuted(!status);
}
}, []);
if (detail.mediaDetail) {
return (
);
}
return null;
}
================================================
FILE: src/components/GenreBreadcrumbs.tsx
================================================
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Breadcrumbs, { BreadcrumbsProps } from "@mui/material/Breadcrumbs";
const Separator = (
);
interface GenreBreadcrumbsProps extends BreadcrumbsProps {
genres: string[];
}
export default function GenreBreadcrumbs({
genres,
...others
}: GenreBreadcrumbsProps) {
return (
{genres.map((genre, idx) => (
{genre}
))}
);
}
================================================
FILE: src/components/GridPage.tsx
================================================
import withPagination from "src/hoc/withPagination";
import { MEDIA_TYPE } from "src/types/Common";
import { CustomGenre, Genre } from "src/types/Genre";
import GridWithInfiniteScroll from "./GridWithInfiniteScroll";
interface GridPageProps {
genre: Genre | CustomGenre;
mediaType: MEDIA_TYPE;
}
export default function GridPage({ genre, mediaType }: GridPageProps) {
const Component = withPagination(
GridWithInfiniteScroll,
mediaType,
genre
);
return ;
}
================================================
FILE: src/components/GridWithInfiniteScroll.tsx
================================================
import { useRef, useEffect } from "react";
import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import Typography from "@mui/material/Typography";
import VideoItemWithHover from "./VideoItemWithHover";
import { CustomGenre, Genre } from "src/types/Genre";
import { PaginatedMovieResult } from "src/types/Common";
import useIntersectionObserver from "src/hooks/useIntersectionObserver";
interface GridWithInfiniteScrollProps {
genre: Genre | CustomGenre;
data: PaginatedMovieResult;
handleNext: (page: number) => void;
}
export default function GridWithInfiniteScroll({
genre,
data,
handleNext,
}: GridWithInfiniteScrollProps) {
const intersectionRef = useRef(null);
const intersection = useIntersectionObserver(intersectionRef);
useEffect(() => {
if (
intersection &&
intersection.intersectionRatio === 1 &&
data.page < data.total_pages
) {
handleNext(data.page + 1);
}
}, [intersection]);
return (
<>
{`${genre.name} Movies`}
{data.results
.filter((v) => !!v.backdrop_path)
.map((video, idx) => (
))}
);
}
================================================
FILE: src/components/HeroSection.tsx
================================================
import { useEffect, useState, useMemo, useCallback, useRef } from "react";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import VolumeUpIcon from "@mui/icons-material/VolumeUp";
import VolumeOffIcon from "@mui/icons-material/VolumeOff";
import Player from "video.js/dist/types/player";
import { getRandomNumber } from "src/utils/common";
import MaxLineTypography from "./MaxLineTypography";
import PlayButton from "./PlayButton";
import MoreInfoButton from "./MoreInfoButton";
import NetflixIconButton from "./NetflixIconButton";
import MaturityRate from "./MaturityRate";
import useOffSetTop from "src/hooks/useOffSetTop";
import { useDetailModal } from "src/providers/DetailModalProvider";
import { MEDIA_TYPE } from "src/types/Common";
import {
useGetVideosByMediaTypeAndCustomGenreQuery,
useLazyGetAppendedVideosQuery,
} from "src/store/slices/discover";
import { Movie } from "src/types/Movie";
import VideoJSPlayer from "./watch/VideoJSPlayer";
interface TopTrailerProps {
mediaType: MEDIA_TYPE;
}
export default function TopTrailer({ mediaType }: TopTrailerProps) {
const { data } = useGetVideosByMediaTypeAndCustomGenreQuery({
mediaType,
apiString: "popular",
page: 1,
});
const [getVideoDetail, { data: detail }] = useLazyGetAppendedVideosQuery();
const [video, setVideo] = useState(null);
const [muted, setMuted] = useState(true);
const playerRef = useRef(null);
const isOffset = useOffSetTop(window.innerWidth * 0.5625);
const { setDetailType } = useDetailModal();
const maturityRate = useMemo(() => {
return getRandomNumber(20);
}, []);
const handleReady = useCallback((player: Player) => {
playerRef.current = player;
}, []);
useEffect(() => {
if (playerRef.current) {
if (isOffset) {
playerRef.current.pause();
} else {
if (playerRef.current.paused()) {
playerRef.current.play();
}
}
}
}, [isOffset]);
useEffect(() => {
if (data && data.results) {
const videos = data.results.filter((item) => !!item.backdrop_path);
setVideo(videos[getRandomNumber(videos.length)]);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [data]);
useEffect(() => {
if (video) {
getVideoDetail({ mediaType, id: video.id });
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [video]);
const handleMute = useCallback((status: boolean) => {
if (playerRef.current) {
playerRef.current.muted(!status);
setMuted(!status);
}
}, []);
return (
{video && (
<>
{detail && (
)}
handleMute(muted)}
sx={{ zIndex: 2 }}
>
{!muted ? : }
{`${maturityRate}+`}
{video.title}
{video.overview}
{
setDetailType({ mediaType, id: video.id });
}}
/>
)}
);
}
================================================
FILE: src/components/Logo.tsx
================================================
import Box, { BoxProps } from "@mui/material/Box";
import { Link as RouterLink } from "react-router-dom";
import { MAIN_PATH } from "src/constant";
export default function Logo({ sx }: BoxProps) {
return (
);
}
================================================
FILE: src/components/MainLoadingScreen.tsx
================================================
import CircularProgress from "@mui/material/CircularProgress";
function MainLoadingScreen() {
return (
