2023年使用MERN技术栈构建Facebook克隆 | Build Facebook clone with REACT JS AND THE MERN STACK 2022
构建一个完全先进的社交媒体 facebook 克隆应用程序并掌握 React js、Node js、Express js 和 Mongodb。
你将会学到的
- 构建功能齐全的高级社交媒体 Facebook 克隆应用程序 2022 版
- 掌握 react js 及其所有秘密和技巧,并在前端工作中轻松使用它
- 使用 node js 和 express js 构建可扩展的强大后端
- 了解如何使用 Mongodb 以及如何像专业人士一样添加、更新、删除和查询。
- 了解如何使用 Cloudinary 以一种新的出色方式存储您的图像,以及如何上传、搜索、过滤和打开使用 Cloudinary 的新视角。
- 建立一个强大的身份验证系统,您可以在其中注册、登录、重置密码
- 从头开始构建邮件系统,向用户发送电子邮件以获取电子邮件验证链接和重置代码密码。
- 使用 Formik 和 Yup 进行强大的高级表单验证,并了解使用的最佳表单验证技术
- 掌握在您以前没有做过的其他级别上处理日期,并学习如何正确地按年、月和日验证年龄
- 来自数据库的实时数据验证,以确保您的数据(如用户名)是唯一的,并创建一个循环函数来每次更新它
- 了解如何在您想要或信誉良好的每个特定日期安排对数据库的请求,我们将在一个月后使用它来删除所有未经验证的用户
- 了解如何使用 JSON Web 令牌、cookie…
- 了解如何使用 react redux 存储在我们所有的应用程序中共享一个全局存储。
- 学习并掌握 React router dom v6 并解决人们使用它的所有麻烦。
- 了解如何创建受保护的路由并保护您的应用程序和页面。
- 在所有不同设备中完全响应的应用程序,并学习高级技巧或响应能力。
- 了解如何专业地为您的应用程序添加暗模式,并使用切换器在亮模式和暗模式之间切换。
- 了解如何使用 useState、useReducer、useEffect、useRef、useCallback、事件监听器
- 了解如何创建可重复使用的功能,例如切换、点击外部、切换……
- 在此应用程序中,您将有一个主页,其中有您关注的人或朋友的菜单和帖子列表,您可以在其中无限滚动。
- 每个用户都会有一个个人资料页面,就像 Facebook 封面、个人资料图片、详细信息、照片、朋友、帖子一样
- 您可以使用您拥有的旧封面或新图像更新您的封面,使用 crooper 裁剪和缩放并选择您想要的图像部分
- 所以基本上你将学习如何使用图像裁剪、缩放、翻转、旋转
- 您可以像封面一样更新您的个人资料图片,您可以选择和缩放、裁剪….
- 当您更新封面或个人资料图片时,将自动创建一个帖子,说明用户更新了他/她的个人资料/封面图片。
- 您可以使用文本、表情符号、背景、图像以组织良好的方式创建帖子,就像 facebook 一样
- 您可以保存/取消保存帖子、下载图片、删除…
- 您可以使用文字、表情符号和图片进行评论,并直接查看添加的评论并显示更多评论功能。
- 您可以添加和编辑您的详细信息,例如其他姓名、简历、工作、工作场所、关系等……它们将在您的个人资料中可见,其他人也可以看到。
- 我们将会有一个和facebook一样的好友系统,你可以添加好友,/取消请求,关注/取消关注,接受请求/删除请求,取消好友…
- 您将拥有一个好友页面,您可以在其中查看您的好友请求、您发送的好友请求以及您的好友列表
- 我们还添加了实时搜索功能,您可以在其中搜索其他用户,他们将存储在您的搜索历史记录中,您可以随时将其删除。
要求
- 使用 React js 的基本知识
- 始终欢迎有合理的 Web 开发知识
说明
在本课程中,您将学习如何构建高级社交媒体 Facebook 克隆应用程序(2022 版),并掌握如何使用 React js、Node js、Express js、Mongodb 以及我们将在课程中使用的许多其他工具。
– 所以一开始我们将建立一个强大的身份验证系统,以便您可以注册、登录和重置密码,我们还将有一个使用 Formik 和 Yup 进行注册的验证系统,并带有友好的错误消息,以验证名称是否具有一定的长度或没有特殊字符,验证电子邮件和密码,验证日期以验证年龄,用户名将自动生成,我们将确保它是唯一的。
-我们还在创建一个邮件系统,我们将向用户发送验证链接和重置密码代码,并在用户注册后直接获得验证链接以激活帐户,因此我们也在学习如何创建 html 电子邮件。
– 我们有一个主页,您关注的人或朋友的所有帖子将与您的帖子混合显示,并按从最新到最旧的顺序排列。
– 您可以使用文本、表情符号、背景、图像创建帖子,并且可以像 Facebook 一样精美地完成。
-您可以对帖子做出反应并更改反应未反应,使用“喜欢”按钮来喜欢,不喜欢和删除现有反应,反应也将被显示和排序,并且您或删除的任何反应都将影响该直播而无需刷新。
– 您可以使用文字、表情符号和图片进行评论,评论也将被排序并在提交后直接更新。
-您可以保存/取消保存帖子、下载帖子图片、删除帖子…
-我们将对文件上传的大小和类型进行各种验证。
– 您将学习如何使用 crooper 裁剪、缩放、旋转、翻转图像。
– 您可以使用旧封面图片或带有裁剪缩放选项的新图片更新您的封面图片,并选择您要使用的图片部分,直接提交后,它将创建一个帖子,说明用户更新了他/她的封面图片。
– 您可以使用旧封面图片或新图片更新您的个人资料图片,并选择裁剪缩放并选择您要使用的图片部分,直接提交后它将创建一个帖子,说明用户更新了他/她的个人资料图片和您还可以使用文本和表情符号。
– 每个用户都有自己的个人资料,其中显示的所有详细信息包括封面、个人资料图片、详细信息(其他姓名、简历、工作、工作场所、关系…)、照片、朋友、帖子
-您可以更新所有详细信息并实时查看更改直接地。
– 我们将使用 Cloudinary 以一种新的创意方式上传我们的图像,您会印象深刻。
-我们有一个完整的友谊系统,您可以添加朋友,取消请求,接受请求,删除请求,取消朋友,关注,取消关注
-我们还有一个朋友页面,您可以在其中管理您所有的请求和朋友。
-当您键入新结果时,我们具有实时搜索功能,您单击的任何用户都将添加到您的搜索历史记录中,并且它也将按最新单击的顺序显示。
– 我们将在页面加载或从后端获取数据时使用骨架加载器,并在我们的应用程序中使用所有不同类型的加载器。
-我们将有受保护的路线。
– 我们将使用 react redux store 来设置一个全局 store 以在所有组件之间共享数据。
– 我们将使用详细解释的 react router dom v6。
– 我们将使用 cookie 和 JSON Web 令牌来临时存储数据。
– 我们将使用许多 react js 函数,如 useState、useEffect、useReducer、useRef、useCallback、事件监听器,并创建自定义挂钩。
此课程面向哪些人:
- 初级网络开发人员
- 初级网络开发人员
- React.js开发人员
- Node.js开发者
- Web开发人员
TheItzy » 2023年使用MERN技术栈构建Facebook克隆 | Build Facebook clone with REACT JS AND THE MERN STACK 2022