Netflix克隆应用

Netflix Clone

View Demo · Report Bug · Request Feature

Home Page

Mini Portal

Detail Modal

Grid Genre Page

Watch Page with customer contol bar

预请求

• 创建一个帐户，如果你没有 TMDB. 因为我使用它的免费API来消费电影/电视数据。
• 然后按照 文档 创建API密钥
• 最后，如果使用TMDB API的v3，请创建一个名为 .env，并复制和粘贴以下内容 .env.example. 然后粘贴您刚才创建的API密钥。

本项目涉及哪些功能

• 如何创建和使用 定制挂钩
• 如何使用 上下文 及其提供者
• 如何使用懒惰和悬念 代码拆分
• 如何使用新 懒惰 react路由器的特点是减少包大小。
• 如何使用数据 加载器 以及如何在渲染组件之前在加载器中使用redux调度来获取数据。
• 如何使用 门户
• 如何使用 引人关注的参考文献 使组件可重用
• 如何创建和使用 高阶组件
• 如何自定义默认主题 Material-UI
• 如何使用 实时动态测量
• 如何使用 RTK查询
• 如何自定义默认类名 Material-UI
• 无限滚动（使用 交叉口观察员API)
• 如何使用制作很棒的旋转木马 光滑的旋转木马

除React和RTK之外使用的第三方库

• react-router-dom@v6.9
• MUI（材料用户界面）
• 帧运动
• video.js
• 反应灵敏

使用Docker安装

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

待办

• 使视频卡门户的动画更类似于Netflix。
• 提高性能。我正在使用 context 和 provider 但是订阅上下文值的所有组件都会被重新呈现。即使该值的一部分未在组件的渲染中使用，也会发生这些重新渲染。有 多种方式 以防止这些行为的重新渲染。除此之外，可能还有几个性能问题。
• 更换捆扎机(维特)与 涡轮增压器.Turbopack最近在Next.js配置文件中引入。它很快，但现在还不能使用。它只支持Next.js，他们计划尽快支持所有其他版本。因此，如果可以使用，请更换 维特 随着 涡轮增压器.
• 添加可访问性以获得更好的用户体验。
• 添加测试。