GitHub和LeetCode统计数据展示
一个高级的现代web应用程序，可以在一个漂亮的仪表板上显示您的GitHub和LeetCode统计数据。内置于 反应, 顺风 CSS，以及 Node.js.
🚀 特性
- 由MCP集成提供支持:
- 利用 模型上下文协议（MCP） 聚合来自多个开发人员平台的数据的概念。 - 充当中央“上下文服务器”，对来自 GitHub 和 力扣 形成一个统一的模式。
- 统一仪表板：并排查看GitHub和LeetCode统计数据。
- GitHub洞察:
- 简介概述（关注者、关注者、个人简介）。 - 贡献热图：使用GraphQL数据源可视化日常活动。 - 顶级存储库：通过GitHub MCP风格的集成提供详细的指标。
- LeetCode统计信息:
- 通过自定义连接器获取实时问题解决指标。
- 现代UI/UX:
- 深色模式：使用GitHub调色板的时尚深色主题。 - 响应式设计：移动和桌面的完全响应式布局。
🛠️ 技术栈
前端
- 反应：构建用户界面的核心框架。
- 维特：用于快速开发和构建的下一代前端工具。
- 顺风 CSS：实用程序优先的CSS框架，用于快速和自定义样式。
后端（“MCP”层）
- Node.js和Express：充当聚合器，处理安全令牌管理和API路由。
- GitHub连接器：使用 GitHub GraphQL API 检索有关用户活动和存储库的深层上下文。
- LeetCode连接器：与的接口 LeetCode GraphQL API 获取实时问题解决统计数据。
⚙️ 先决条件
- Node.js （建议使用v18或更高版本）
- GitHub命令行界面(
gh)：需要对GitHub API进行安全身份验证。
- 安装： - 登录：运行 gh auth login 在你的终端。
📦 安装和设置
- 克隆仓库
git clone https://github.com/karthikkondagurla/dev-dashboard.git
cd dev-dashboard- 安装依赖项
- 后端:
npm install- 前端:
cd client
npm install- 启动应用程序
您需要同时运行后端（API）和前端（UI）。
- 后端 （1号航站楼）：
# From root directory
node server.js*服务器在上运行 http://localhost:3000*
- 前端 （2号航站楼）：
# From client directory
cd client
npm run dev*应用程序运行 http://localhost:5173*
- 在浏览器中打开
访问 http://localhost:5173 查看您的仪表板！
📂 项目结构
├── client/ # React Frontend
│ ├── src/
│ │ ├── components/ # Reusable UI components (Heatmap, StatsGrid, etc.)
│ │ ├── App.jsx # Main application logic
│ │ └── index.css # Tailwind directives
│ ├── tailwind.config.js # Tailwind configuration (custom colors)
│ └── vite.config.js # Vite config (API proxy)
├── public/ # (Legacy static files)
├── server.js # Express API Server
├── query.graphql # GitHub GraphQL query
├── leetcode_query.graphql # LeetCode GraphQL query
└── package.json # Backend dependencies🔒 安全说明
此应用程序使用您的本地 gh 用于在GitHub上进行身份验证的CLI凭据。令牌在运行时安全获取 从不 硬编码或存储在存储库中。
______________________________________________________________________
*由...创建 Karthik Kondagurla*