Plataforma Profissional de Análise de Criptomoedas com gráficos de velas profissionais, métricas on-chain, modelos preditivos e sistema de alertas inteligente.
Desenvolvido por Rafael Marques Lins - Ad Rock Digital Mkt
- ✅ Dashboard Principal - Interface moderna e responsiva com dados em tempo real
- ✅ Top 20 Criptomoedas - Lista atualizada com preços e variações 24h
- ✅ Análise Técnica Avançada - RSI, Momentum, SMA, Bollinger Bands
- ✅ Fear & Greed Index - Indicador de sentimento do mercado atualizado automaticamente
- ✅ Dominância do Bitcoin - Percentual de dominância e market cap total
- ✅ Gráficos Interativos - Charts avançados com TradingView widgets
- ✅ Lightweight Charts by TradingView - Biblioteca profissional de alta performance
- ✅ Candlestick Charts Personalizáveis - Timeframes de 1min até 1d
- ✅ Volume Profile Integrado - Análise de volume em histograma sincronizado
- ✅ Indicadores Técnicos Completos - RSI, MACD, Bollinger Bands, Médias Móveis, Fibonacci
- ✅ Detecção Automática de Padrões - Doji, Martelo, Engolfo, Triângulo Ascendente/Descendente
- ✅ Suporte e Resistência Automáticos - Identificação inteligente de níveis críticos com força
- ✅ Alertas de Rompimento - Notificações sonoras e visuais para breakouts
- ✅ Renderização Otimizada - Performance superior com canvas WebGL
- ✅ Análise de Padrões em Tempo Real - Detecção contínua de formações gráficas
- ✅ Interface Responsiva - Gráficos adaptáveis a qualquer tamanho de tela
- ✅ Zoom e Pan Interativos - Navegação intuitiva nos dados históricos
- ✅ Endereços Ativos - Monitoramento da atividade da rede Bitcoin
- ✅ Hashrate em Tempo Real - Segurança e saúde da rede
- ✅ Fluxo de Exchanges - Entrada/saída de BTC (indicador de acúmulo/distribuição)
- ✅ Mempool Analytics - Transações pendentes e taxas médias
- ✅ Movimentações de Baleias - Tracking de grandes transferências
- ✅ Saúde da Rede - Score composto de descentralização, segurança e atividade
- ✅ Fluxo Institucional - Análise de acúmulo/distribuição institucional
- ✅ Gráficos Históricos - 30 dias de dados on-chain com tendências
- ✅ Simulação Completa - "Se eu tivesse investido R$ X por semana desde [data]"
- ✅ Cenários Pré-definidos - Conservador, Moderado, Agressivo, Bear Market
- ✅ Gráficos de Performance - Evolução do investimento vs valor atual
- ✅ Comparação de Estratégias - DCA vs Compra Única (Lump Sum)
- ✅ Métricas Detalhadas - ROI, preço médio, total de compras, período
- ✅ Exportação de Dados - CSV com histórico completo de compras
- ✅ Análise de Vantagens - Explicação dos benefícios do DCA
- ✅ Gráfico S2F vs Preço Real - Modelo original com dados históricos
- ✅ Eventos de Halving - Histórico completo e próximos eventos
- ✅ Previsões Futuras - Cenários conservador, base e otimista até 2030
- ✅ Indicador de Fase - Subvalorizado, Justo ou Sobrevalorizado
- ✅ Countdown Halving - Dias restantes para próximo halving
- ✅ Desvio do Modelo - Percentual de diferença do preço teórico
- ✅ Análise de Ciclos - Padrões de 4 anos pós-halving
- ✅ Alertas Multi-Condição - Preço, técnicos, on-chain, padrões, sentimento
- ✅ Ações Personalizadas - Som, visual, email, webhook
- ✅ Sinais Técnicos Live - RSI, MACD, Bollinger, Volume Profile
- ✅ Detecção de Padrões - Alertas automáticos para formações gráficas
- ✅ Configurações Globais - Controle centralizado de notificações
- ✅ Histórico de Disparos - Log completo de alertas executados
- ✅ Sistema Inteligente - Prevenção de spam e alertas redundantes
- ✅ Persistência no Supabase - Favoritos salvos no banco de dados
- ✅ Sincronização em Tempo Real - Atualizações instantâneas
- ✅ Interface Intuitiva - Toggle de favoritos com ícone de coração
- ✅ Dashboard de Favoritos - Seção dedicada para moedas favoritas
- ✅ Alertas de Preço - Definir alertas para preços específicos
- ✅ Alertas de Variação - Monitorar mudanças percentuais
- ✅ Persistência no Banco - Todos os alertas salvos no Supabase
- ✅ Status de Ativação - Ativar/desativar alertas individualmente
- ✅ Notificações em Tempo Real - Alertas disparados automaticamente
- ✅ Notícias do Mercado Cripto - Feed atualizado com últimas notícias
- ✅ Categorização - Notícias organizadas por categorias
- ✅ Timestamps - Data e hora de publicação
- ✅ Links Externos - Acesso direto às fontes das notícias
- ✅ Tracking de Assets - Acompanhamento de investimentos
- ✅ Cálculo de P&L - Profit & Loss em tempo real
- ✅ Distribuição de Ativos - Visualização da alocação do portfólio
- ✅ Performance Analytics - Métricas detalhadas de performance
- ✅ Alertas em Tempo Real - Sistema de notificações ativo
- ✅ Indicadores Técnicos - Resumo dos principais indicadores
- ✅ Controle de Som - Ativação/desativação de alertas sonoros
- ✅ Histórico de Alertas - Visualização de alertas anteriores
- ✅ Design Responsivo Mobile-First - Otimizado para todas as resoluções
- ✅ Sidebar Profissional - Menu lateral com logo Ad Rock e footer informativo
- ✅ Bottom Navigation Mobile - Navegação rápida em dispositivos móveis
- ✅ Pull-to-Refresh - Atualização intuitiva com gesto de arrastar
- ✅ Safe Areas iOS/Android - Suporte para notch e barras do sistema
- ✅ Busca Global - Pesquisa instantânea com atalho Ctrl+K
- ✅ Hamburger Menu Mobile - Menu lateral adaptativo com Sheet
- ✅ Tema Escuro/Claro - Alternância de temas com persistência
- ✅ Toast Notifications - Feedback visual elegante para ações
- ✅ Loading Skeletons - Estados de carregamento profissionais
- ✅ Layout Moderno - Interface clean e profissional
- ✅ Lazy Loading - Carregamento otimizado de componentes pesados
- ✅ Error Boundary Global - Tratamento robusto de erros
- ✅ Touch Interactions - Gestos otimizados para mobile
- ✅ Adaptive Layouts - Grids que se adaptam ao tamanho da tela
- Busca global inteligente (Ctrl+K ou Cmd+K)
- Favoritos e notícias em destaque
- Estatísticas de mercado principais
- Lista de top cryptos com indicadores
- Portfolio overview e alertas ativos
- Pull-to-refresh para atualização rápida
- Tracking completo de assets
- Análise de performance detalhada
- Métricas de P&L em tempo real
- Distribuição e alocação de ativos
- Gráficos de velas com Canvas nativo
- Indicadores técnicos completos
- Detecção automática de padrões
- Suporte/resistência inteligente
- Sistema de alertas de breakout
- Métricas da blockchain Bitcoin
- Fluxo de exchanges e baleias
- Saúde da rede e hashrate
- Análise institucional
- DCA Simulator: Simulação de investimento programado
- Stock-to-Flow: Modelo S2F com previsões
- Análise de ciclos e halvings
- Cenários de preço futuros
- Alertas multi-condição avançados
- Sinais técnicos em tempo real
- Configurações personalizadas
- Histórico de disparos
- Resumo completo do mercado
- Indicadores principais
- Recomendações estratégicas
- Pontos de atenção
- Interface original do dashboard
- Tabela completa de cryptos
- Gráficos básicos
- Funcionalidades essenciais
Certifique-se de ter instalado em sua máquina:
- Node.js (versão 18 ou superior)
- npm ou yarn (gerenciador de pacotes)
-
Clone ou baixe o projeto
# Se você tem acesso ao repositório Git git clone [URL_DO_REPOSITORIO] cd cripto_dashboard # OU baixe o ZIP e extraia
-
Instale as dependências
npm install # ou yarn install -
Inicie o servidor de desenvolvimento
npm run dev # ou yarn dev -
Acesse o dashboard
- Abra seu navegador
- Acesse:
http://localhost:5173 - O dashboard estará rodando localmente! 🎉
npm run dev- Inicia o servidor de desenvolvimentonpm run build- Gera build de produçãonpm run preview- Visualiza o build de produçãonpm run lint- Executa verificação de código
- CoinGecko API - Dados de criptomoedas em tempo real
- Alternative.me API - Fear & Greed Index
- Supabase - Backend para persistência de dados (favoritos e alertas)
- Canvas API - Renderização de gráficos de velas customizados
- WebSocket Simulation - Dados em tempo real simulados
O projeto inclui integração com Supabase para armazenar:
- Favoritos do usuário
- Alertas customizados
- Alertas avançados multi-condição
- Configurações personalizadas
- Histórico de notificações
As tabelas necessárias estão definidas em src/sql/schema.sql
Para funcionalidade completa, configure suas chaves de API:
- CoinGecko: Obtenha em coingecko.com/api
- CoinMarketCap: Obtenha em coinmarketcap.com/api
- Supabase: Configure seu projeto em supabase.com
As chaves podem ser configuradas através da interface ou no arquivo .env.
Para fazer deploy:
-
Gere o build
npm run build
-
Faça upload da pasta
dist/para seu servidor web -
Configure servidor para servir arquivos estáticos e SPA
-
Gere o build:
npm run build
-
Suba os arquivos da pasta
dist/para o servidor -
No servidor, execute:
pm2 start npx --name cripto-frontend -- serve -s /home/adrock/cripto-dashboard -l 5173 pm2 save pm2 startup
O projeto estará acessível em http://[IP_DO_SERVIDOR]:5173
- React 18 - Framework frontend moderno
- TypeScript - Tipagem estática para JavaScript
- Vite - Build tool rápido e moderno
- Tailwind CSS - Framework CSS utilitário
- Shadcn/ui - Componentes UI acessíveis e customizáveis
- Recharts - Gráficos interativos e responsivos
- Lightweight Charts (TradingView) - Biblioteca profissional para candlestick charts
- TradingView Widgets - Charts profissionais de trading
- Lucide React - Biblioteca de ícones moderna
- Algoritmos de Detecção de Padrões - Reconhecimento automático de formações
- Cálculos de Indicadores Técnicos - RSI, MACD, Bollinger, Fibonacci
- Simulações Matemáticas - DCA, Stock-to-Flow, previsões
- Análise de Suporte/Resistência - Identificação inteligente de níveis
- React Query (TanStack Query) - Gerenciamento de estado server otimizado
- React Hook Form - Gerenciamento de formulários performático
- Zod - Validação de esquemas TypeScript
- React Suspense - Carregamento assíncrono de componentes
- Lazy Loading - Code splitting automático
- Supabase - Backend as a Service (BaaS)
- PostgreSQL - Banco de dados relacional (via Supabase)
- Real-time subscriptions - Atualizações em tempo real
- LocalStorage - Fallback para dados offline
- CoinGecko API - Dados de criptomoedas
- Alternative.me API - Fear & Greed Index
- Simulação de APIs On-Chain - Métricas da blockchain
- WebSocket connections - Dados em tempo real
- Next Themes - Sistema de temas (claro/escuro) com persistência
- Sonner - Toast notifications elegantes e não intrusivas
- Class Variance Authority - Sistema de variantes CSS robusto
- Tailwind Merge - Merge inteligente de classes CSS
- Radix UI - Componentes acessíveis e customizáveis
- Sheet/Drawer - Modais e menus laterais mobile-friendly
- Command Menu - Interface de busca tipo spotlight
- Pressione
Ctrl+K(Windows/Linux) ouCmd+K(Mac) - Digite o nome da criptomoeda ou recurso
- Resultados categorizados em: Criptomoedas, Páginas, Recursos
- Use setas ↑↓ para navegar e Enter para selecionar
- ESC para fechar
- Use o menu inferior fixo para acesso rápido
- Arraste para baixo (pull-to-refresh) para atualizar dados
- Menu hamburguer no topo para navegação completa
- Todos os recursos adaptados para toque
- Acesse a seção "Trading Pro" no menu lateral
- Selecione o timeframe desejado (1m, 5m, 1h, 1d, etc.)
- Ative/desative indicadores técnicos conforme sua estratégia
- Configure alertas para rompimentos de padrões
- Monitore as zonas de suporte e resistência automáticas
- Fluxo de Exchanges: Saída > Entrada = Bullish (acúmulo)
- Endereços Ativos: Crescimento = Adoção aumentando
- Hashrate: Alta = Rede mais segura
- Movimentações de Baleias: Monitore grandes transferências
- Use o simulador para testar diferentes valores semanais
- Compare cenários conservador vs agressivo
- Analise o preço médio de entrada vs preço atual
- Exporte dados para acompanhamento externo
- S2F > 100: Bitcoin mais escasso que ouro
- Preço abaixo do modelo: Possível oportunidade
- Pós-halving: Historicamente períodos de alta
- Desvio > 50%: Zona de possível correção
- Defina condições específicas (preço, RSI, volume)
- Configure múltiplas ações (som + visual + email)
- Use timeframes apropriados para sua estratégia
- Monitore o histórico de disparos para ajustes
Rafael Marques Lins
Ad Rock Digital Mkt
- 🌐 Website: adrock.com.br
- 📧 Email: [email protected]
- 💬 WhatsApp: +55 41 99125-5859
- 💻 GitHub: github.com/adrockmkt/dashboard_cripto
Agência especializada em marketing digital e desenvolvimento de soluções tecnológicas para o mercado financeiro e cripto.
© 2025 Ad Rock Digital Mkt - Todos os direitos reservados
Dashboard desenvolvido com React, TypeScript, Tailwind CSS e as melhores práticas de desenvolvimento web moderno.