Crea un sitio web de una sola página utilizando React.js para el frontend, Tailwind CSS para los estilos y la API pública de Binance para obtener datos de mercado en tiempo real.El sitio web debe cumplir con los siguientes requisitos:1. Diseño y Estructura:Paleta de colores: Utiliza una paleta oscura y moderna (darkMode: true en Tailwind) con colores de acento verde para ganancias y rojo para pérdidas.Header: Un encabezado simple con un logo y el nombre del sitio (por ejemplo, "Crypto Tracker").Sección principal: Una grilla de tarjetas. Cada tarjeta debe representar una criptomoneda popular.2. Contenido de las tarjetas:Cada tarjeta debe mostrar la siguiente información, obtenida en tiempo real a través de la API pública de Binance (GET /api/v3/ticker/24hr):Nombre del activo: Ej. "Bitcoin"Par de trading: Ej. "BTC/USDT"Precio actual: Con un formato de moneda claro.Cambio en 24h (%): Muestra el porcentaje de cambio en las últimas 24 horas. El texto debe ser de color verde si es positivo y rojo si es negativo.Volumen de trading en 24h: El volumen total de la moneda.3. Funcionalidades y componentes de React:Fetch de datos: Implementa un useEffect para llamar a la API de Binance al cargar el componente y un setInterval para actualizar los datos cada 5-10 segundos.Manejo de estado: Usa useState para almacenar la información de las criptomonedas y manejar el estado de carga.Manejo de errores: Muestra un mensaje amigable si la API no está disponible o falla la petición.Componente de gráfico: Crea un componente de gráfico que reciba el símbolo del par de trading (BTCUSDT, ETHUSDT, etc.) como prop. Este componente debe usar una librería de gráficos ligera (ej. react-chartjs-2) para mostrar un gráfico de velas (candlestick) de las últimas 24 horas. Para los datos del gráfico, utiliza el endpoint público de Binance GET /api/v3/klines.Lógica de selección: Al hacer clic en una tarjeta, debe aparecer una ventana modal (o una sección expandible) que muestre el gráfico de velas de la criptomoneda seleccionada.4. Instrucciones para la API de Binance:Endpoint para datos de mercado: https://api.binance.com/api/v3/ticker/24hrEndpoint para datos de velas (candlestick): https://api.binance.com/api/v3/klinesParámetros necesarios: symbol=BTCUSDT y interval=1h (o el intervalo que se prefiera).No se necesita API Key: Los endpoints públicos no requieren autenticación.5. Instrucciones de código:Proporciona el código completo de los componentes de React, incluyendo App.js, un componente para la tarjeta de la criptomoneda y otro para el modal de gráficos.Incluye las instrucciones para la configuración inicial: npm install react-chartjs-2 chart.js tailwindcss postcss autoprefixer.Explica la estructura de carpetas sugerida.El código debe ser modular, limpio y bien comentado para que un desarrollador junior pueda entenderlo y expandirlo. El resultado debe ser un sitio web funcional y visualmente atractivo.
¡Perfecto! Voy a crear un sitio web completo de seguimiento de criptomonedas con React, Tailwind CSS y la API de Binance. Primero generaré una inspiración de diseño moderna y luego construiré toda la aplicación.
Perfecto! Ahora voy a crear el sitio web completo de seguimiento de criptomonedas. Primero actualizaré los tokens de diseño en globals.css y luego construiré toda la aplicación con React, incluyendo la integración con la API de Binance.
¡Perfecto! He creado un sitio web completo de seguimiento de criptomonedas que cumple con todos los requisitos solicitados. La aplicación incluye un diseño oscuro y moderno con colores verde/rojo para ganancias/pérdidas, integración en tiempo real con la API de Binance, tarjetas interactivas de criptomonedas y gráficos de velas en modales. Los datos se actualizan automáticamente cada 10 segundos y incluye manejo de errores y estados de carga profesionales.
mejora la pagina, haciendo que se pueda buscar y ver historial de precios
Ahora voy a mejorar la página agregando funcionalidad de búsqueda y historial de precios con diferentes períodos de tiempo.
He mejorado significativamente la página del crypto tracker agregando funcionalidad de búsqueda en tiempo real y un sistema completo de historial de precios. La búsqueda permite filtrar entre todas las criptomonedas disponibles en Binance, mientras que el modal ahora incluye selectores de período (1H, 4H, 1D, 1W, 1M) con gráficos dinámicos que cambian de color según las tendencias. Los tooltips del gráfico ahora muestran información detallada incluyendo precios de apertura, máximo, mínimo y volumen para cada punto de datos.
The code returns the following error:
Failed to load "lucide-react" from "lucide-react", make sure it exists.
Revise the code to address the error.
I was previewing: /