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认证, 代码示例, 数据分析, 社交媒体管理, 自动化攻击