我从头构建了一个 DEV.to 克隆（包括 API！）👨‍💻🥳

嘿，大家好，我想展示我的最新项目：DEV 克隆。

我为什么这么做

我做这个项目的动机很简单：我学习了前端（React）和后端（MongoDB、Node、Express）技术，并想构建一个全栈 React 应用，学习两者如何协同工作。最初，我决定做一个博客网站，用来记录我学到的新知识。后来，我了解到了 DEV.to（相信我，我几个月前才知道这个网站），所以我决定做一个克隆版。

心态：

一开始，我决定不回避构建原网站上已有的任何复杂功能。即使它是一个克隆版本（而且可能没人会用到它），它仍然是一个真实应用的克隆版本，以这种心态构建它会让你成为更优秀的开发者。例如，你会编写高效的查询，因为你关心服务器的响应速度。

科技

• 用户界面：React
• 路由：React Router
• 实时通知：Socket.io
• 后端：Express
• 数据库：MongoDB
• ORM：Mongoose
• 图片托管：Cloudinary

废话不多说！我们来看看克隆的具体操作：

登录/注册

该应用程序由本地身份验证（使用 JWT）以及 Google、Facebook、GitHub 和 Twitter 的 OAuth 服务组成：

喜欢 / 独角兽 / 书签

和原版一样，有 3 个“反应”功能：喜欢、独角兽（我尚未解开它的秘密）和书签。

新帖

用户可以创建/更新/删除帖子。

（此处 gif 无法使用，因此我仅添加了一张图片）

评论和回复

用户可以评论/回复，但与原始 DEV 不同，我将克隆的评论部分限制为仅一个线程。

实时通知

当用户被关注或其帖子收到其他用户的点赞或评论时，他会收到通知。

关注标签

用户每次创建新帖子时都可以添加标签（目前没有设置限制）。如果标签不存在，则会创建并附加到帖子中。此外，用户还可以关注/取消关注标签，并按标签筛选帖子。

编辑个人资料

用户可以通过提供有关其工作、技能/语言、个人简介、社交媒体和位置的信息来更新他们的个人资料。

搜索

用户可以搜索帖子（目前只能通过标题搜索）。

我学到了什么：

区分好项目和伟大项目最重要的因素有三个：

1. UI：人们评判你的仿制品时，首先会比较的是UI。所以我尽量让它尽可能接近原版。在桌面和移动设备上都保持UI与原版一致是一个挑战，但我做到了。

2. 功能：正如你所见，我尝试实现了原版 DEV 的所有核心功能。一开始，我完全不知道如何实现通知等实时功能。但当你尝试那些你不知道如何去做的事情时，你的成长速度最快。

3. 代码可读性：你编写的代码不仅仅是为了机器。在现实世界中，你编写的代码是为了让其他人阅读。能够编写易于阅读的代码是一项必备技能。

就是这样

我为 DEV 克隆版付出了很多努力，希望你喜欢。欢迎随时咨询任何关于这个项目的问题！

您可以在我的GitHub repo中访问该代码。

这是已部署的站点