Una aplicación web moderna y elegante para consultar en tiempo real los precios de las principales criptomonedas del mercado. Construida con React, TypeScript y Vite para ofrecer una experiencia de usuario fluida y profesional.
Ver aplicación en funcionamiento
- Cotización en Tiempo Real: Precios actualizados de las top 20 criptomonedas
- Múltiples Monedas: Soporte para 8+ monedas fiat (USD, EUR, GBP, JPY, etc.)
- Información Detallada: Precio actual, máximo/mínimo diario, variación 24h
- Interfaz Responsive: Optimizada para desktop, tablet y móvil
- Manejo Robusto de Errores: Mensajes informativos y reintentos automáticos
- TypeScript: Tipado fuerte para mayor confiabilidad
- Hooks Personalizados: Lógica reutilizable y mantenible
- Styled Components: Estilos dinámicos y tema consistente
- Animaciones Suaves: Transiciones y efectos visuales elegantes
- Accesibilidad: ARIA labels y navegación por teclado
- Performance Optimizada: Memoización y lazy loading
- React 18 - Biblioteca de interfaz de usuario
- TypeScript - Superset de JavaScript con tipado estático
- Vite - Herramienta de construcción ultrarrápida
- Emotion/Styled - CSS-in-JS para estilos dinámicos
- CryptoCompare API - Datos de criptomonedas en tiempo real
- Axios - Cliente HTTP para peticiones API
- ESLint - Linter para código JavaScript/TypeScript
- Prettier - Formateador de código automático
- Node.js (versión 16 o superior)
- npm o yarn
# Clonar el repositorio
git clone https://github.com/cmurestudillos/cotizador-de-criptomonedas.git
# Navegar al directorio
cd cotizador-de-criptomonedas
# Instalar dependencias
npm install
# Ejecutar en modo desarrollo
npm run dev
# Construir para producción
npm run build
# Previsualizar build de producción
npm run previewsrc/
├── components/ # Componentes React reutilizables
│ ├── Cotizacion.tsx # Mostrar resultados de cotización
│ ├── Error.tsx # Manejo y display de errores
│ ├── Formulario.tsx # Formulario de selección
│ └── Spinner/ # Componente de carga
├── hooks/ # Hooks personalizados
│ ├── useMoneda.tsx # Hook para selección de moneda
│ └── useCriptomoneda.tsx # Hook para selección de cripto
├── assets/ # Imágenes y recursos estáticos
└── App.tsx # Componente principal
Esta aplicación utiliza la CryptoCompare API para obtener datos de criptomonedas:
- Endpoint Principal:
/data/pricemultifull - Lista de Criptos:
/data/top/mktcapfull - Rate Limit: 100,000 requests/mes (plan gratuito)
La aplicación está optimizada para diferentes tamaños de pantalla:
- Desktop: Diseño de dos columnas con sidebar
- Tablet: Layout adaptativo con elementos apilados
- Móvil: Interfaz vertical optimizada para touch
- ✅ Navegación por teclado completa
- ✅ Labels ARIA para lectores de pantalla
- ✅ Contraste de colores WCAG AA
- ✅ Estados de foco visibles
- ✅ Texto alternativo en imágenes
- Gráficos históricos de precios
- Favoritos y watchlist personalizada
- Notificaciones de precio
- Modo oscuro/claro
- PWA capabilities (offline)
- Calculadora de conversión
- Comparación entre criptomonedas
- Integración con portfolios
- Exportar datos a CSV/PDF
¡Las contribuciones son bienvenidas! Para contribuir:
- Fork del proyecto
- Crear una branch para tu feature (
git checkout -b feature/AmazingFeature) - Commit de tus cambios (
git commit -m 'Add some AmazingFeature') - Push a la branch (
git push origin feature/AmazingFeature) - Abrir un Pull Request
- Seguir las convenciones de código existentes
- Añadir tests para nuevas funcionalidades
- Documentar cambios en el README
- Mantener el código TypeScript tipado
Este proyecto está bajo la Licencia MIT - ver el archivo LICENSE para más detalles.
- CryptoCompare por proporcionar la API gratuita
- React Community por las increíbles herramientas
- Emotion por hacer que los estilos sean divertidos
⭐ ¡Si te gusta este proyecto, dale una estrella en GitHub! ⭐
