Developer API Keys Management Portal with Usage Analytics

[JamesEjembi]

Problem Statement

Developers integrating with VeriNode APIs need to create and manage API keys with scoped permissions, view usage analytics, and test endpoints. A developer portal must be built with API key CRUD, permission scopes, usage dashboard (requests, latency, errors), and interactive API playground.

Technical Bounds

• API key CRUD: create key with name + scope checkboxes, copy on creation, revoke, list all keys.
• Scopes: node:read, node:write, staking:read, governance:read, governance:write, admin.
• Usage dashboard: per-key request count, error rate, p50/p95 latency, top endpoints over 1d/7d/30d.
• API playground: embedded Swagger UI with pre-filled API key for live testing.
• Rate limit display: current vs limit gauge per key tier.

Steps

1. Build ApiKeyList component: table with name, scopes, created date, last used, status, revoke button.
2. Build ApiKeyCreate form: name input, scope checkboxes, create button; display key once in modal with copy button.
3. Build UsageDashboard with time range selector, request count line chart, latency heatmap, error rate gauge.
4. Integrate Swagger UI component with dynamic Authorization header from selected API key.
5. Build RateLimitGauge showing usage vs limit (e.g., 450/1000 req/min).
6. Add webhook tester: POST /api/v1/dev/webhook stores and displays received webhooks in real-time.

[Thosine-01]

Hi! I’d love to take charge of building the Developer Portal for VeriNode. Providing developers with intuitive API key management, fine-grained permission scopes, live usage telemetry, and interactive testing tools is critical for driving platform adoption and simplifying integrations. I have extensive experience building full-stack developer portals, implementing secure API key management pipelines, and creating interactive API playgrounds.

I will construct the ApiKeyList and ApiKeyCreate components with fine-grained scope selection (node:*, staking:*, governance:*, admin), incorporating a single-exposure key generation modal and revocation controls. I'll build the UsageDashboard and RateLimitGauge components to render time-series request volumes, error rate gauges, and p50/p95 latency metrics over 1d/7d/30d windows. Additionally, I will integrate an interactive Swagger UI playground pre-populated with active API keys and build a real-time webhook tester (POST /api/v1/dev/webhook) with live payload stream updates.

[grantfox-oss]

🦊 GrantFox — @Thosine-01 has been assigned to this issue as part of the Third Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #171)
2. Your PR will be reviewed by the VeriNode-Labs maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Third Campaign campaign!

@Thosine-01's PR #209 was approved and merged by @JamesEjembi.

🏆 @Thosine-01: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (468 total points). Track your full progress on GrantFox.

👏 Great work, @Thosine-01! Keep contributing to VeriNode-Labs.