Next.js、Material UI、MongoDB 个人仪表板

最初发表在我的个人博客上

动机

作为一名开发者，我致力于通过撰写博客文章、开发和维护开源库以及构建业余项目来为社区做出贡献，我希望有一个地方可以让我一站式查看和追踪所有这些活动。因此，我决定创建我的个人项目仪表盘。

技术栈

对于我选择使用的技术栈：

• Next.js
• TypeScript
• 材质 UI
• Recharts - 图表库
• react-spring - 动画库
• MongoDB Atlas - 云托管的 Mongo 数据库

概述

该应用程序具有“经典”仪表板布局：

• 标题
• 深色和浅色主题切换
• 带切换功能的侧边栏
• 内容区域
• 页脚

此外，该应用程序使用ESLint自定义规则、更漂亮的代码格式、带有lint-staged 的​​ husky git hooks 。

页面

仪表板由 5 个页面组成：

1. 我的博客文章概览、npm 软件包演示和业余爱好应用程序统计
2. dev.to 统计信息
3. GitHub 统计数据
4. Twitter 统计数据
5. NPM 软件包统计

第 1 页 - 我的博客文章概览、npm 软件包演示和业余爱好应用程序统计信息

第一页展示了我个人网站上博客文章、我开发和维护的 npm 包演示以及我业余时间编写的业余应用程序的主要统计数据。这些统计数据以表格形式呈现，包括：

• 出版日期
• 标题，也可作为相应博客文章/演示/应用程序的链接
• 本周与上周相比的周数
• 总观看次数
• 带有图表的模态窗口，显示上个月每天的浏览次数

已发布、过去 7 天浏览量和总浏览量列均可排序。默认情况下，数据按过去 7 天的浏览量排序。博客文章表支持分页。

浏览量数据存储在MongoDB Atlas数据库中。有一个专用的 Next.js API 路由用于与数据库通信。为了收集这些统计数据，我开发了一个自定义钩子 - useViewCounter。

在这个页面上实现的另一个可能比较棘手的部分是按特定列对Material UI表进行排序的功能。以下是我实现它的方法。

第 2 页 - dev.to 统计数据

我秉承“公开学习”的理念。当我在项目中学习到新知识并撰写相关文章时，我日后肯定会对这个主题有更深入的了解。此外，我希望这也能帮助其他开发者在“获取新知识”的道路上前进。

要使用 dev.to API，您只需要获取API 密钥。具体操作请参阅官方文档。

页面顶部有两张统计卡片，分别显示关注者数量和今日帖子总数。数据分别来自https://dev.to/api/followers/users和https://dev.to/api/articles/meAPI。“流水号”动画使用react-spring库实现。

此外，还有粉丝数量动态图表。但 dev.to API 仅提供当前粉丝数量的数据。我该从哪里获取前几天的数据？为了能够显示这些数据，我们需要：

1. 将关注者数量存储在数据库中（为此我使用MongoDB Atlas）
2. 运行cron（计划）任务，让其每天执行（GitHub Actions可以提供帮助）

粉丝数卡片右下角的数字显示的是最近一周粉丝数的变化情况。

页面的主要部分由卡片组成，卡片上包含每篇博文的信息。这些数据是通过https://dev.to/api/articles/meAPI 获取的。每张卡片包含以下信息：

• 文章标题
• 出版日期
• 浏览量、反应和评论数量
• 标签列表
• 封面图片

该卡片可点击。点击后，文章将在新标签页中打开，并使用 API 中的 URL 数据。

所有博客文章均可按发布日期（默认排序）、浏览量、回复或评论数排序。此博客文章介绍了如何实现此功能。

第 3 页 - GitHub 统计信息

在使用GitHub REST API之前，您需要创建一个个人访问令牌。以下是创建方法的说明。

页面顶部显示了 GitHub用户的常规个人资料数据和主要统计指标。用户个人资料数据是来自端点的响应https://api.github.com/user，其中包括：

• 姓名
• 简历
• 头像
• 地点
• 公司和其他简介信息。

关注者数量和公共存储库数量也来自上述端点。

但是总 star 数和总 fork数的数据是根据每个 repo 的数据计算的。要获取所有用户 repo 的信息，您需要查询https://api.github.com/user/repos端点。

与 dev.to 关注者数量相同，GitHub 总 repos、总关注者、总 stars 和总 fork 的数据在预定的 GitHub 操作的帮助下每天存储在数据库中。

该页面的存储库部分显示包含每个存储库数据的卡片，例如：

• 仓库名称
• 网站（如果存在）
• 描述
• 星标数量、分叉数量、观察者数量
• 语言
• 创建日期和更新日期
• 执照

卡片可按星级（默认）、分叉和最后更新日期进行排序。

我有一个单独的应用程序，它使用 GitHub REST API - GitHub API 仪表板，这是我之前开发的，可能需要更新。用户可以输入任何现有的 GitHub 用户名，并查看该用户的公开信息，包括个人资料信息、编程语言结构以及代码库数据。

第 4 页 - Twitter 统计数据

我不是一个很活跃的（委婉地说）Twitter用户。我的意思是，我会看别人的推文，但自己却不经常发推文。也许这种情况最终会改变，但现在就是这样。

正如文档中所述，要访问 Twitter API，您需要：

1. 申请并获得开发者账户批准
2. 获取您的应用程序的密钥和令牌。

具体来说，对于我的仪表板，我使用 API 和 Bearer Token 的 v1.1 进行授权。

页面顶部显示有关 Twitter个人资料的常规信息。这些数据来自https://api.twitter.com/1.1/users/showAPI，包括：

• 屏幕名称
• 姓名
• 描述
• 地点
• 创建个人资料的时间
• 关注者数量
• 图片网址等等。

与 dev.to 和 GitHub 关注者数量相同，Twitter 关注者的数据在预定的 GitHub 操作的帮助下每天存储在数据库中。

页面“推文”部分的数据来自https://api.twitter.com/1.1/statuses/user_timelineAPI。此 API 返回推文的文本内容、发布日期、转发次数和点赞次数等。我直观地区分了一条推文是对其他推文的回复，还是一条独立的推文。

如果一条推文从 API截断中返回，我会计算其完整内容的链接。

推文卡可以按发布日期（默认）、转发和点赞进行排序。

第 5 页 - NPM 软件包统计

在为我参与的项目开发某个功能时，有时我会将其作为公共库发布到NPM上。这样任何开发者（包括我自己）都可以使用它，我很高兴能为社区做一些有用的事情。

如果您想发布您的库，我写了一篇关于如何将自定义 React 组件发布到 NPM 的博客文章。

查询 NPM 注册表 API 无需获取 API 密钥或令牌。对于仪表板，我仅使用提供软件包下载计数数据的端点。您可以在此处https://api.npmjs.org/downloads/阅读更多相关信息。

我目前有4 个公共 NPM 库。仪表盘上列出了每个库的统计信息：

• 上个月每日下载量的图表
• 平均每日下载量（计算得出）
• 每周下载量

如你所见，React 进度条库是迄今为止我所有库中下载量最高的。这些强大的 UI 组件库非常棒，我很喜欢使用它们。但有时你只需要一个简单的可自定义组件。我正好遇到过这样的情况。这里有一篇关于如何在 5 分钟内创建自定义进度条组件的博客文章。

结论

我的个人仪表板的源代码可在此 repo中找到。这是实时版本（部署在Vercel上）。