💁‍♂️ 使用 MERN 堆栈等构建了 Dev.to 副本

Dev.to-clone

Dev.to-clone

使用 MERN 堆栈和更多功能创建的 Dev.to 克隆版（本质上是没有故事功能的 FB）🥳

目录

1. 启发

2. 体验

3. 使用的技术

4. 特征

5. 截图

6. 链接

7. 本地设置

8. 帮我个忙

9. 致谢

启发

首先，我在整个旅程中并没有想过要克隆其他网站，只是在4 个月前学习了 MERN 堆栈后才知道我的能力。

我像往常一样寻找一个可以确认和证明我的技能的前端导师项目，但我没有找到任何与后端相关的，只有网站提到的前端。

经过大量搜索后，我受到了一些克隆 dev.to 网站的人的启发，有些人只克隆了前端，而有些人则使用不同的技术堆栈克隆了前端和前端。

而且因为它已经被其他人克隆了尽管只有几个😌我必须做出一个精确的 克隆这个复制品有很多其他克隆版本所没有的功能。它让我有机会克隆出一个最好的博客网站，一个多页面、极具挑战性的网站。

我总共花了大约4 个月的时间，所以不要绝望：

只要你不停下来，走得多慢都没关系。

体验

这些不同的布局确实很有挑战性，特别是在移动设备上，而且浏览器支持也不是很好，所以我无法使用 css 中的一些东西，比如 :has() 伪类。

我深入研究了Redux 工具包和RTK 查询，学到了很多东西，比如惰性查询和缓存失效。
我提前练习了 Json Web Tokens（又名 JWT），用于在通过 Google/Github OAuth 或手动身份验证登录时发放访问和刷新令牌，并在令牌过期后自动注销。

熟悉了 Vercel/Render 部署，在这个过程中遇到了很多问题，充满了错误处理、压力和恐慌😂，这个阶段发生了很多事情。

最终，我对结果感到满意和高兴！

不要忘记尽可能多地分享这一点，让我们开始吧😇。

使用的技术

前端

• 反应
• Redux 工具包（高级 RTK）
• 顺风
• 样式化组件
• 成帧器运动
• 反应路由器
• Cloudinary（图片托管）

后端

• MongoDB
• 表达
• Node.js
• OAuth（谷歌/Github）
• 智威汤逊
• Socket.io（实时）
• Cloudinary
• 猫鼬
• Axios

特征

• 登录/注册
• 查看/编辑个人资料
• 谷歌/Github OAuth
• 极致的移动响应能力
• 实时通知
• CRUD 帖子/评论/回复/标签
• 关注/取消关注用户
• 关注/取消关注标签
• 点赞/独角兽/书签帖子
• 点赞评论
• 帖子、人物和标签的高级搜索引擎
• 过滤帖子
• 阅读清单
• 仪表板

截图

登录 / 注册 / 编辑 / 删除

谷歌/Github OAuth

创建/更新/编辑/删除帖子

反应/评论/关注实时通知（Toasted）

标签/阅读列表

仪表板

搜索引擎

链接

客户端：https://marwanm-devto-clone.vercel.app

服务器：https://marwanm-devto-clone-server.onrender.com

来源：https ://github.com/marwanm-dev/Devto-clone

如何在本地设置

克隆仓库

• 将repo克隆到本地机器

设置

• client安装和server子目录中的所有依赖项npm i

$ cd server && npm i
$ cd client && npm i

创造

• 通过MongoDB Atlas在本地或在线提供 MongoDB 数据库

• Cloudinary帐户

• Google Cloud Platform上的新项目

• 和子目录.env中的文件clientserver

• 环境变量

client/.env：

BASE_URL=
GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID}
GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET}

server/.env：

ACCESS_TOKEN_SECRET=
REFRESH_TOKEN_SECRET=

CLIENT_URL=

GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID}
GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET}

DB_NAME=
DB_USER=
DB_PASSWORD=

CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
CLOUDINARY_DEFAULT_URL= // default image url
CLOUDINARY_DEFAULT_PUBLIC_ID= // default image public_id

• 最后，npm run stack在两个子目录的根目录上运行

帮我个忙

社会的

• Github
• 领英
• Instagram
• 开发

分享

由于我是博客新手，因此我希望您尽可能多地分享此内容！

支持

• 给我买杯咖啡 - https://www.buymeacoffee.com/marwanm

信用

Dev.to 由我克隆