Context and Product Overview
Developers and enterprise clients building products on top of the Freepik/Magnific API Platform require operational visibility and autonomous control over their integrations: tracking credit balances, monitoring live request volumes, reviewing rate limit quotas, and managing credentials securely.
The developer dashboard acts as the operational analytics cockpit of the platform, designed to serve both individual developers and enterprise organizations integrating generative AI models at high scale.
Usage Analytics, Consumption & Budget
- Real-Time Analytics: Visual time-series charts breaking down request volumes and credit expenditure per model family (image, video, audio, and upscalers).
- Predictive Budget Management: Live tracking of accumulated credit consumption against tier limits, enabling teams to top up before encountering service interruption.
- Contextual Rate Limiting: Clear visibility into per-minute and daily request quotas based on the active subscription tier (Free, Pro, Enterprise), preventing unexpected 429 errors.
API Key Governance and Enterprise Teams
- Autonomous Credential Management: Instant generation, scheduled rotation, and immediate revocation of API keys (
x-magnific-api-key) directly from the dashboard without contacting support. - Enterprise Team Rules: Granular permissions for organization members, allowing technical teams to provision scoped keys while keeping billing centralized at the organization level.
Frontend Architecture & Developer Experience
The dashboard was built using Next.js, React, TypeScript, and TanStack Query (react-query):
- Reactive State Management: Optimistic caching and background synchronization of live consumption metrics and billing status.
- Modular, Responsive UI: Accessible components optimized for fast data rendering and interactive metric filtering across timeframes.
- Ecosystem Integration: Seamless alignment with the official documentation and public product landings.