AI导哈

开发者数据展示工具

一个现代化的Web应用程序，用于在单一仪表板中展示GitHub和LeetCode的统计数据，提供统一的视图和实时数据更新。

  • by karthikkondagurla
  • JavaScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 karthikkondagurla/dev-dashboard

使用说明

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进行安全身份验证。

📦 安装和设置

  1. 克隆仓库

    git clone https://github.com/karthikkondagurla/dev-dashboard.git
cd dev-dashboard

  2. 安装依赖项

    • 后端:
      npm install
    • 前端:
      cd client
npm install

  3. 启动应用程序

    您需要同时运行后端（API）和前端（UI）。

    • 后端 （1号航站楼）：

      # From root directory
node server.js

      服务器在上运行 http://localhost:3000

    • 前端 （2号航站楼）：

      # From client directory
cd client
npm run dev

      应用程序运行 http://localhost:5173

  4. 在浏览器中打开 访问 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

相关 MCP