Volver a proyectos

Panel de desarrollador de la API

Dashboard interactivo para desarrolladores y clientes de la API de Freepik/Magnific: gráficos de consumo en tiempo real, control de presupuesto y cuotas, monitorización de errores y gestión autónoma de API keys con soporte para equipos enterprise.

Contexto y producto

Quienes construyen aplicaciones sobre la Plataforma de APIs de Freepik/Magnific necesitan visibilidad y control sobre su consumo: cuánto crédito han utilizado, qué volumen de peticiones procesan en tiempo real, cómo se comportan sus cuotas de rate limiting y cómo gestionar sus credenciales de manera autónoma.

El panel de desarrollador constituye la capa operativa y analítica de la plataforma, diseñada tanto para desarrolladores individuales como para grandes organizaciones B2B que integran modelos de IA generativa a escala.

Métricas, consumo y presupuesto

  • Analíticas en tiempo real: Visualización gráfica del tráfico por periodos, desglosando el volumen de peticiones y el consumo de créditos por familia de modelos (imagen, vídeo, audio y upscalers).
  • Control predictivo de presupuesto: Monitorización del saldo de créditos consumido frente al contratado, permitiendo anticipar recargas antes de que se interrumpa el servicio.
  • Transparencia en rate limits: Indicadores visuales sobre el estado de cuotas por minuto y por día según el plan activo (Free, Pro, Enterprise), evitando errores 429 imprevistos.

Gobernanza de API keys y equipos Enterprise

  • Gestión autónoma de credenciales: Generación instantánea, rotación periódica y revocación segura de API keys (x-magnific-api-key) directamente desde la consola sin necesidad de intermediación de soporte.
  • Soporte multi-usuario y roles de equipo: Reglas diferenciadas para miembros de organizaciones enterprise, permitiendo que equipos técnicos administren claves de forma granular mientras la organización actúa como unidad centralizada de facturación.

Arquitectura frontend y experiencia de usuario

El dashboard se desarrolló sobre Next.js, React y TypeScript con TanStack Query (react-query):

  • Gestión reactiva del estado: Cache optimista y sincronización periódica de estadísticas de consumo y estados de facturación.
  • Diseño responsive y modular: Componentes accesibles y altamente optimizados para ofrecer tiempos de respuesta inmediatos en la consulta de registros y auditoría de peticiones.
  • Integración con el ecosistema de la API: Conexión directa con la documentación oficial y las landings públicas de producto.