KENDALL MENDOZA

Crypto Real-Time Admin Dashboard Demo

Crypto Real-Time Admin Dashboard Demo

Demo dashboard that consumes a Cloudflare Worker backend to read normalized crypto market data.

Dashboard de demostración que consume un backend en Cloudflare Workers para leer datos normalizados de mercado cripto.

The data refreshes every 10 seconds and is limited to a curated list of assets for this demo.

Los datos se actualizan cada 10 segundos y están limitados a una lista curada de activos para este demo.

This page is for demonstration purposes only and does not provide financial advice.

Esta página existe solo con fines de demostración y no constituye asesoría financiera.

Read demo terms of use

Leer términos de uso del demo

Project Overview

Project Overview

This demo showcases a small end-to-end system that reads normalized crypto market data from a Cloudflare Worker and renders a simple React-based dashboard with a 10 second refresh cadence.

Este demo muestra un sistema pequeño de punta a punta que lee datos de mercado cripto normalizados desde un Cloudflare Worker y renderiza un dashboard sencillo en React con una cadencia de actualización de 10 segundos.

Tools

Herramientas

Challenges and how they were solved

Retos y cómo se resolvieron

• Local permissions and environment constraints
  File edits were restricted outside the web project directory and Node/npm were not available in the assistant environment. The solution was to drive setup from the user’s machine: initialize the Worker locally, install Wrangler, and keep portfolio edits within the web project.
• Restricciones de permisos y entorno local
  Ediciones de archivos restringidas fuera del directorio web y ausencia de Node/npm en el entorno del asistente. La solución fue realizar la configuración desde la máquina del usuario: inicializar el Worker localmente, instalar Wrangler y mantener los cambios del portafolio dentro del proyecto web.
• PowerShell execution policy blocking npx
  PowerShell refused to run npx due to execution policy. The workaround was to use the Node.js command prompt or update the execution policy, enabling Wrangler commands.
• Política de ejecución de PowerShell bloqueando npx
  PowerShell no permitía ejecutar npx por la política de ejecución. Se solucionó usando el Node.js command prompt o ajustando la política de ejecución para habilitar los comandos de Wrangler.
• Upstream errors from the public API
  Initial calls from the Worker returned non-2xx statuses. I added friendly headers (Accept and User-Agent), short-lived edge caching, and debug responses to inspect status and body, then confirmed normalized JSON in production.
• Errores upstream de la API pública
  Las llamadas iniciales del Worker devolvían estados no 2xx. Se agregaron cabeceras amigables (Accept y User-Agent), caché de corta duración en el edge y respuestas de debug para inspeccionar status y body, confirmando JSON normalizado en producción.
• Frontend status messaging
  The UI showed “Data error” even with valid data present. I refined the connection state to consider whether assets and chart points are loaded, switching to “Live data connected” whenever there is usable data.
• Mensajería de estado en frontend
  La UI mostraba “Data error” aun con datos válidos presentes. Se ajustó el estado de conexión para considerar si hay assets y puntos de gráfico cargados, cambiando a “Live data connected” cuando hay datos utilizables.
• Clean separation of concerns
  The Worker exposes a narrow, normalized JSON surface; the frontend merges static asset catalog with live fields and renders via React + SVG. This made debugging and iteration straightforward.
• Separación clara de responsabilidades
  El Worker expone una superficie JSON normalizada y pequeña; el frontend combina un catálogo estático con campos en vivo y renderiza con React + SVG. Esto facilitó la depuración y la iteración.