HichamxMahboub/social_media_tool
GitHub: HichamxMahboub/social_media_tool
一个基于 Next.js 和 Express 分离架构的全栈社交媒体分析仪表板,演示多平台账户的 OAuth 连接、数据集中展示与分析可视化。
Stars: 0 | Forks: 0
# 社交媒体分析仪表板
一个全栈仪表板,用于探索如何将多个社交媒体账户连接、同步并集中在一个界面中查看。该项目展示了身份验证、API 结构、面向 OAuth 的账户流程、数据可视化、日志记录,以及 Next.js/Express 分离式架构。
## 本项目展示了什么
- 由独立 Express API 支持的 Next.js 仪表板。
- 基于 JWT 的注册和登录。
- 围绕 OAuth 2.0 组织的账户连接流程。
- 分析概览和帖子级别的可视化。
- 用于用户、账户和分析记录的 MongoDB 模型。
- 验证、速率限制、安全标头和结构化日志记录。
- 在无法访问外部提供商时,提供用于本地 UI 开发的模拟数据后备方案。
## 重要范围说明
真实的 Instagram、X/Twitter 和 TikTok 数据需要经过批准的开发者应用程序、有效的 OAuth 凭据,并遵守各平台当前的 API 条款。本仓库包含应用程序结构和本地开发流程;如果没有这些批准和凭据,不应将其作为生产环境的集成展示。
## 技术栈
| 层级 | 技术 |
|---|---|
| 仪表板 | Next.js, TypeScript, Tailwind CSS |
| API | Node.js, Express |
| 数据 | MongoDB, Mongoose |
| 安全 | JWT, bcrypt, Helmet, rate limiting, input validation |
| 集成 | 面向 OAuth 的路由和提供商配置 |
| 运维 | Winston 日志记录,基于环境的配置 |
## 仓库结构
```
backend/ Express API, models, routes, middleware, services
dashboard/ Next.js dashboard and API client
README.md Setup and project scope
PROGRESS.md Implementation notes
```
## 本地设置
前置条件:Node.js 18+ 和 MongoDB。
```
cd backend
npm install
cp .env.example .env
npm run dev
```
在另一个终端中:
```
cd dashboard
npm install
cp .env.example .env.local
npm run dev
```
默认本地地址:
- 仪表板:`http://localhost:3000`
- API:`http://localhost:5000`
## 环境配置
仅将凭据存储在本地环境文件中。切勿提交真实的提供商密钥。
后端示例:
```
PORT=5000
MONGODB_URI=mongodb://localhost:27017/social-analytics
JWT_SECRET=replace-with-a-long-random-value
NODE_ENV=development
```
前端示例:
```
NEXT_PUBLIC_API_URL=http://localhost:5000/api
```
特定于提供商的 client ID、client secret、回调 URL 和权限必须来自经过批准的开发者应用程序。
## 当前限制
- 外部平台访问取决于提供商的批准和 API 可用性。
- 本地仪表板演示可能会使用模拟数据。
- 在生产环境使用之前,应审查 token 加密和自动刷新流程。
- 自动化测试和生产部署强化仍是未来的工作。
## 为什么这很重要
本项目是一次关于集成边界的实践:在确保外部 API 受限时仍能进行本地开发的同时,分离 UI、API、持久化、身份验证和第三方提供商的关注点。
标签:Express, JWT认证, MITM代理, MongoDB, OAuth认证, 代码示例, 数据分析, 社交媒体管理, 自动化攻击