【源码】基于 React 和 Express 的社交网络系统

项目简介

本项目是基于 React 和 Express 构建的社交网络系统，结合了前端 React 框架与后端 Express 框架的优势。前端借助 React 实现用户界面，利用 Redux 进行状态管理，使用 React-Query 处理数据获取和缓存，提升了用户交互体验和性能；后端采用 Express 搭建服务器，以 MongoDB 存储数据，还集成多种第三方中间件，保障系统的安全性和稳定性。用户能在系统内进行注册、登录、发布推文、添加评论、关注其他用户等操作。

项目的主要特性和功能

前端特性

1. 具备登录注册功能，提供接口支持表单数据提交，用 React-Query 处理异步请求，结合 Redux 管理用户状态。
2. 利用 Redux 管理用户信息和应用状态，保证数据在不同组件间的一致性与可维护性。
3. 运用 React.memo 和 useMemo 避免组件不必要的重新渲染，优化应用性能。
4. 拥有首页信息流、推文发布表单、评论功能、用户个人资料页面、搜索功能等丰富的用户交互界面。

后端特性

1. 使用 MongoDB 数据库存储用户信息、推文、评论等数据。
2. 集成 Multer 处理文件上传，bcryptjs 加密用户密码，jsonwebtoken 实现用户身份认证，compression 进行 gzip 压缩提高响应速度。
3. 通过 Express 路由管理不同功能的请求，如用户注册、登录、推文发布、评论添加等。

安装使用步骤

前端

1. 确保已安装 Node.js 和 npm。
2. 下载项目源码后，进入前端项目目录。
3. 执行 npm install 安装项目依赖。
4. 执行 npm start 启动前端开发服务器，默认访问地址为 http://localhost:3000。

后端

1. 启动 MongoDB 服务：执行 sudo mongod --dbpath /usr/local/mongodb/data/db。
2. 进入后端项目目录（cd./server）。
3. 执行 yarn 安装项目依赖。
4. 执行 yarn start 启动后端服务器，默认端口为 8090。

注意事项

• 项目使用了环境变量，需在项目根目录创建 .env 文件，并配置相关环境变量，如 REACT_APP_API_URL、ACCESS_TOKEN 等。
• 修改完 tsx 文件后，需要执行 npm run build 编译生成对应的 js 文件，然后重新启动服务器。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】