🚀 CryptoVue - Real-Time Cryptocurrency Dashboard

Dashboard moderno e profissional para acompanhamento de criptomoedas em tempo real.

✨ Features

• 📊 Dados em Tempo Real - Preços atualizados via CoinGecko API
• 📈 Gráficos Interativos - Charts com múltiplos períodos (24H, 7D, 30D, 90D, 1Y)
• ⭐ Watchlist - Acompanhe suas cryptos favoritas
• 🔔 Alertas de Preço - Notificações quando atingir valores alvo
• 🔍 Busca Avançada - Encontre qualquer criptomoeda instantaneamente
• 🎨 UI Moderna - Design glassmorphism com animações suaves
• 📱 100% Responsivo - Funciona perfeitamente em todos os dispositivos
• 🌎 Multi-idioma (pt-BR / en-US) — Implementado com I18nContext
• ⚡ Alta Performance - Cache inteligente e renderização otimizada

🛠️ Tecnologias

Core

Estilização

Libs

API & Ferramentas

🚀 Como Rodar

# Instalar dependências
npm install

# Rodar em desenvolvimento
npm run dev

# Build para produção
npm run build

🔗 Live Demo: https://crypto-dashboard-wr.netlify.app/

📖 Funcionalidades

1. Visualização de Mercado

• Top 50 criptomoedas por market cap
• Estatísticas globais de mercado
• Sparklines de 7 dias

2. Filtros Inteligentes

• All Cryptos: Todas as moedas
• Watchlist: Suas favoritas
• Top Gainers: Maiores altas 24h
• Top Losers: Maiores quedas 24h

3. Detalhes Completos

• Preço atual e variação 24h
• Market cap e volume
• High/Low 24h
• ATH/ATL (all-time high/low)
• Gráficos históricos interativos

4. Sistema de Alertas

• Configure alertas de preço personalizados
• Notificações quando metas são atingidas
• Histórico de alertas disparados

📁 Estrutura do Projeto

src/
├── components/       # Componentes React
│   ├── Header.tsx
│   ├── StatsOverview.tsx
│   ├── CryptoCard.tsx
│   ├── CryptoChart.tsx
│   ├── CryptoDetailModal.tsx
│   ├── PriceAlertModal.tsx
│   ├── AlertsList.tsx
│   ├── SearchBar.tsx
│   ├── FilterTabs.tsx
│   └── LoadingSkeleton.tsx
├── services/         # APIs externas
│   └── coingecko.ts
├── store/            # Zustand stores
│   └── useCryptoStore.ts
├── types/            # TypeScript types
│   └── crypto.ts
├── utils/            # Funções utilitárias
│   └── formatters.ts
├── hooks/            # Custom hooks
│   └── useCryptoData.ts
├── App.tsx
├── main.tsx
└── index.css

🎯 Destaques Técnicos

• ✅ TypeScript com tipagem forte em 100% do código
• ✅ Clean Architecture (separação de concerns)
• ✅ Custom Hooks para lógica reutilizável
• ✅ State Management moderno com Zustand
• ✅ API Integration com cache inteligente
• ✅ Error Handling robusto
• ✅ Loading States e skeletons
• ✅ Responsive Design mobile-first
• ✅ Performance otimizada

📝 Commits

O projeto foi desenvolvido com commits semânticos:

feat: initialize project with react and typescript
feat: integrate coingecko api client
feat: create zustand store for state management
feat: add utility functions for formatting
feat: create custom hook for crypto data fetching
feat: create crypto list component with real-time data
feat: implement price chart with recharts
feat: add price alert system with notifications
feat: create detailed crypto info modal
style: implement glassmorphism design system
feat: add auto-refresh for real-time updates
perf: optimize api calls with caching strategy
feat: implement responsive mobile layout
docs: add comprehensive readme

📄 Licença

MIT License

🙏 Agradecimentos

• CoinGecko - API de dados
• Lucide - Ícones
• Recharts - Gráficos