Cotiza Criptos

Acerca del proyecto

Es una aplicación web que cotiza en tiempo real el precio de las 20 Criptomonedas con más valor o capitalización en el mercado.

Para usarla, elige una moneda o divisa y una criptomoneda y haz clic en cotizar. La aplicación mostrará el precio de la criptomoneda en la moneda elegida, junto con su imagen, el precio más alto y más bajo del día, su variación en las últimas 24 horas y la última actualización de los datos de la criptomoneda. También se pueden cotizar otras criptomonedas simplemente cambiando los datos.

Stack del proyecto

Para crear una experiencia de usuario rápida y altamente interactiva, he seleccionado cuidadosamente las tecnologías adecuadas para este proyecto. Utilicé React, una de las herramientas más populares para construir interfaces de usuario eficientes. Además, utilicé Vite para construir la aplicación de forma rápida, y Fetch para consultar la API de manera fácil y segura.

Mi papel

Creé la página web desde cero usando Vite y React para que cargue rápido y sea fácil de usar. También añadí fuentes de Google Fonts y trabajé con Styled Components para escribir el código de CSS. Usé Flexbox y Grid para que la página se vea bien en diferentes tamaños de pantalla y sea más profesional y atractiva para los visitantes.

Creé un componente para el formulario y programé un custom Hook reutilizable. El "Hook" recibe un array de opciones, ya sea de divisas o criptomonedas y las asigna a un "selected" dentro de una función "map". Finalmente, utilicé "useState" mostrar estas opciones en el formulario.

Hay dos listas que se deben llenar: una con nombres de divisas y otra con nombres de criptomonedas. La lista de divisas se llena con información de un archivo local, mientras que la lista de criptomonedas se llena con información de una API de Cripto Compare.

Para asegurarme de que se ha elegido una moneda y una criptomoneda en el formulario, utilicé el array method "includes". También hice un componente llamado "error", que muestra una alerta personalizada para validar el formulario en tiempo real.

Si no hay un error, se consulta la API y se pasa el state llamado "resultado" al componente "Resultado". Para acceder fácilmente a los datos de la criptomoneda, utilicé la técnica de "destructuring".

Finalmente, el componente Resultado retorna un fragmet con los datos de la criptomoneda.

Las imágenes de las criptomonedas se almacenan en el servidor de Cripto Compare. Para mostrarla, simplemente agregué los datos de la imagen al final de la url de Cripto Compare.

API

Cuando se abre la Aplicación, la API se consulta una vez para llenar el array de criptomonedas. Pero para ver la información actualizada de las criptomonedas, la API se consulta cada vez que se oprime el botón "cotizar".

¿Cómo consulté la API?

Para llenar el array de criptomonedas, utilicé una URL que trae las primeras 20 criptomonedas de la API. Usando la función "fetch", obtuve los datos de la URL. Luego convertí la respuesta en un objeto JSON y usé la función "map" para crear un nuevo array con los datos. Finalmente, actualicé el state de las criptomonedas con este nuevo array. Hice todo esto en una función asíncrona dentro de un "useEffect".

Para obtener información actualizada sobre una criptomoneda, utilicé el Hook useEffect para monitorear cambios en el estado de las monedas. Si hay datos disponibles en el state, entonces en un arrow function async aplico destructuring al objeto del state, extraigo la divisa y la criptomoneda seleccionada por el usuario y las inyecto como variables en la url de la API para construir una URL dinámica. Después, hago una solicitud fetch a la URL y asigno la respuesta en formato JSON al state del resultado.