MCP LLM Streaming Platform

Netflix Clone

View Demo · Report Bug · Request Feature

Table of Contents

Prerequests

Which features this project deals with

Third Party libraries used except for React and RTK

Contact

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，他们计划尽快支持所有其他版本。因此，如果可以使用，请更换 维特 随着 涡轮增压器.
• 添加可访问性以获得更好的用户体验。
• 添加测试。