我在几个小时内建立了一个电影流媒体网站 - 这是它的进展情况

我在 48 小时内建立了一个电影流媒体网站 - 这是如何进行的

几周前，我偶然发现了几个电影流媒体网站，它们似乎根本没有任何后端。他们使用 TMDB 等 API 来提取电影数据，并使用 vidsrc.dev 来流式传输实际视频。这让我开始思考：“为什么不自己尝试一下呢？”如果我可以构建类似的东西（电影流媒体网站），但没有后端，只有 React 和一些巧妙的 API，会怎么样？

所以，我决定挑战自己。我给自己设定了一个 48 小时的挑战，要建立一个电影流媒体网站。没有后端，没有数据库——只有前端的 React，以及一些用于提取电影数据和处理流媒体的 API。我想，“我将从头开始，看看我能取得什么成就，并一路学习很多东西。”

如果您是一名开发人员，您就会知道想要解决一些大问题的感觉。我花了很多时间学习 React、遵循教程并构建小项目。虽然这些很有趣并且有教育意义，但我想要一些更具挑战性的东西——一些真实的东西。我实际上可以使用的东西。电影流媒体网站似乎是一个完美的主意。

为什么？那么，电影流媒体网站无处不在，对吗？但并非所有这些都有复杂的后端；有些使用简单的 API 来提取电影数据和流内容。我想我也可以做同样的事情，学习很多关于 React 的知识，当然，最终会得到一个有趣的小项目来与其他人分享。但真正激励我的是亲自动手并从头开始构建一些有用的东西的想法。这不是关于完美，甚至不是让一切都正确——而是关于构建一些有效的东西，然后找出如何改进它。

旅程：启动项目

一旦有了这个想法，我就立即开始构建该网站。第一步是设置 React 应用程序。最初的设置很顺利——得益于我完成的所有这些教程，我熟悉了 React。然而，当我必须将所有东西连接在一起时，真正的挑战开始了。

该网站的核心是从 TMDB（最流行的电影数据库之一）中提取电影数据。我还需要一种流媒体电影的方法，这就是 vidsrc.dev 的用武之地。它很简单：我使用 TMDB 获取电影标题、海报和详细信息，然后从 vidsrc 中提取实际的流媒体链接。

但事情是这样的——React 非常适合构建 UI，但是当涉及到构建具有大量组件和逻辑的应用程序时，它可能会变得有点混乱。我有很多重复的代码。电影流媒体页面和连续剧流媒体页面具有几乎相同的代码，用于显示媒体、处理错误和呈现界面。我一开始并没有过多考虑可重用性，但从长远来看，它最终让我痛苦不已。

这不仅仅是重复代码的问题，而是缺乏结构的问题。我没有重复使用组件并创建更加模块化的方法，而是复制并粘贴了大量逻辑。这导致了一些技术债务，而且说实话，代码不太干净。但当时，我更专注于让事情快速运转，而不是让一切变得完美。

出了什么问题：我的代码丑陋的真相

代码可以工作，但远非完美。正如我之前提到的，有很多重复的代码。我构建电影和连续剧流媒体组件的方式不可扩展。例如，我硬编码了太多，现在很难在不触及大量现有代码的情况下添加新功能。

应用程序的电影和连续剧部分本质上是相同的。我没有创建可重用的组件或将逻辑分解为可管理的部分。现在，我计划重新审视代码并重构它。该计划是通过将其分解为可重复使用的更小的组件来使其更加模块化。我还想将逻辑抽象为处理常见任务的函数，例如获取数据或渲染组件，因此我不必重复自己。

这是提高项目可维护性的重要一步。我需要专注于使应用程序可扩展且更简洁，而不是仅仅将代码放在一起以赶上最后期限。我还在考虑使用 Tailwind CSS 之类的东西来改进样式并使应用程序响应更快。我已经学会了如何让 UI 在小屏幕上工作，但我绝对可以改进设计和用户流程，使其更加精致。

下一步：改进和扩展项目

尽管该网站已经启动并运行，但我仍然想用它做很多事情。接下来的步骤对于将其变成不仅实用而且专业的东西至关重要。

首先，我计划重构代码以提高可重用性。我将重写这些组件，以确保它们可以在站点的不同部分中重用，而无需重复逻辑。这将使添加新功能（例如用户身份验证或电影推荐）变得更加容易。

说到用户身份验证，我正在考虑使用 PocketBase 来处理用户帐户。这将允许用户注册、登录和个性化他们的电影体验——甚至可以保存他们最喜欢的电影或创建自定义播放列表。这是我希望在最初 48 小时内有时间做的事情之一，但它绝对在路线图上。

我正在探索的另一个令人兴奋的想法是使用 Tauri 构建应用程序的桌面版本。 Tauri 允许我将 React 应用程序打包成适用于 Windows、Mac 和 Linux 的本机桌面应用程序。这将为用户打开一个全新的可访问性水平，并使流媒体体验更加无缝。

更大的图景：成长、学习和前进

归根结底，整个经历都是关于成长的。建立这个网站教会了我很多东西——不仅仅是 React，还包括解决问题、时间管理和重构的重要性。该项目并不完美，但这是一个巨大的学习机会。

事情是这样的：我还没说完。还有很多需要改进的地方，我很高兴能够解决这些问题。我现在还没有所有的答案，但我致力于学习和改进。这就是开发的美妙之处——它不是第一次就把所有事情都做对，而是一次就把所有事情都做对。这是随着时间的推移迭代和成长。

所以，对于任何想要开始一个项目的人来说——不要害怕弄脏你的手。即使你的代码一开始并不完美，你也会一路学到很多东西。谁知道呢？也许你的下一个 48 小时项目会变得更大更好。

我会做更多的项目，敬请期待更多。

在 https://lensloria.netlify.app/ 找到该网站
在 https://github.com/Debronejacobs/React-Based-Web-App-for-Streaming-Movies-and-TV-Shows.git

中查找代码

以上是我在几个小时内建立了一个电影流媒体网站 - 这是它的进展情况的详细内容。更多信息请关注PHP中文网其他相关文章！