El objetivo de este proyecto es acceder a información de las 300 criptomonedas con mayor market cap y volumen diario utilizando las API de CoinGecko y CoinMarketCap, y visualizar esta información en gráficos de barra, coordenadas paralelas y mapa de arboles mediante la librería Nivo para JavaScript. Además, se ha creado un ranking unificador y se lo visualiza mediante un gráfico de torta. Este proyecto ha requerido el aprendizaje de nuevas tecnologías, incluyendo la librería Nivo y las APIs de CoinGecko y CoinMarketCap.
En esta documentación se econtrarán instrucciones detalladas para instalar y ejecutar el proyecto, así como información sobre las características principales y cómo utilizarlas.
El proyecto se desarrolló con TypeScript y Next.js, y utiliza una variedad de tecnologías y herramientas para lograr sus objetivos. Entre ellas, se encuentran:
- React: una biblioteca de JavaScript para construir interfaces de usuario.
- Tailwind CSS: un framework CSS para diseño de interfaces.
- DaisyUI: una librería de componentes para Tailwind.
- tRPC: una biblioteca de comunicación entre cliente y servidor.
- Nivo: una librería de gráficos para JavaScript.
- CoinGecko API: una API para acceder a información sobre criptomonedas.
- CoinMarketCap API: una API para acceder a información sobre criptomonedas.
Además, el proyecto se deployó en la plataforma de Vercel, lo que permite una fácil puesta en producción y escalabilidad.
Instalación Para instalar el proyecto, siga los siguientes pasos:
- Clonar el repositorio del proyecto en su máquina local mediante el comando
git clone https://github.com/jgcrosta/crypto-ranking.git. - Ejecutar el comando
pnpm installen la raíz del proyecto para instalar todas las dependencias. - Configurar las variables de entorno para la clave de la API de CoinMarketCap. Para ello, cree un archivo .env en la raíz del proyecto y agregue su clave privada.
- Ejecutar el comando
pnpm deven la raíz del proyecto para iniciar la aplicación.
El proyecto cuenta con las siguientes funcionalidades:
- Acceso a información de las 300 criptomonedas con mayor market cap a través de las APIs de CoinGecko y CoinMarketCap.
- Visualización de información mediante gráficos de barra, coordenadas paralelas y mapa de arboles, implementados con la librería Nivo para JavaScript.
- Cálculo de un ranking unificador que se muestra mediante un gráfico de torta.
- Filtro de visualización por cantidad de criptomonedas (10, 50, 100 o 300).
- Selección de fuente de información (CoinGecko, CoinMarketCap o ranking unificador).
- Selección de tipo de gráfico (gráfico de barra, coordenadas paralelas y mapa de arboles).
Este proyecto ha permitido desarrollar una aplicación web que provee información actualizada sobre las criptomonedas de mayor capitalización de mercado. Para ello, se han utilizado las tecnologías React, TypeScript, Tailwind, DaisyUI, Next.js, tRPC, Nivo y las APIs de CoinGecko y CoinMarketCap.
La aplicación ofrece diversas funcionalidades que permiten visualizar los datos obtenidos mediante gráficos de barra, coordenadas paralelas y mapa de arboles. Además, se ha desarrollado un cálculo de ranking unificador que se muestra mediante un gráfico de torta.
En resumen, este proyecto ha permitido desarrollar una aplicación web completa utilizando tecnologías modernas y relevantes, lo cual ha permitido obtener conocimientos y habilidades valiosas en el campo del desarrollo web.