Dashboard web responsivo desenvolvido para acompanhar o mercado de criptomoedas em tempo real, reunindo preços, ranking por capitalização de mercado, volume, variações, favoritos e gráficos históricos em uma interface moderna e intuitiva.
O projeto consome dados da API pública da CoinGecko e foi desenvolvido com foco em experiência do usuário, responsividade, organização de dados e tratamento de possíveis falhas na comunicação com a API.
O painel apresenta uma visão geral do mercado e permite acompanhar as principais criptomoedas em um único ambiente.
Entre as informações disponíveis estão:
- preço atual;
- variação nas últimas 24 horas;
- volume negociado;
- capitalização de mercado;
- posição no ranking;
- indicadores gerais do mercado.
- 📈 Ranking das 100 maiores criptomoedas por capitalização de mercado.
- 💰 Preços atualizados através da CoinGecko API.
- 📊 Capitalização, volume e variação de preço em 24 horas.
- 🌎 Indicadores globais do mercado.
- 🔎 Pesquisa de moedas por nome ou símbolo.
- ⭐ Sistema de favoritos persistente.
- 🚀 Filtro das maiores altas.
- 📉 Filtro das maiores baixas.
↕️ Ordenação por capitalização, preço, variação e volume.- 💱 Conversão entre BRL, USD e EUR.
- 📋 Visualização detalhada de cada criptomoeda.
- 📈 Gráficos históricos de preços.
- 🕒 Períodos de 24h, 7d, 30d, 90d e 365d.
- 🔄 Atualização automática dos dados a cada 60 segundos.
- 💾 Cache local para reduzir chamadas à API.
- 📑 Paginação dos resultados.
⚠️ Tratamento de erros e falhas temporárias da API.- 🌙 Modo claro e escuro persistente.
- 📱 Interface totalmente responsiva.
- ♿ Recursos básicos de acessibilidade.
O dashboard permite pesquisar rapidamente uma criptomoeda e reorganizar os resultados de acordo com diferentes critérios.
É possível visualizar:
- todas as moedas;
- moedas favoritas;
- maiores altas;
- maiores baixas.
O usuário também pode alterar a moeda de referência entre Real (BRL), Dólar (USD) e Euro (EUR) e escolher entre os modos claro e escuro.
As preferências são armazenadas localmente para permanecerem disponíveis após recarregar a página.
Cada criptomoeda possui uma visualização detalhada com informações adicionais sobre seu desempenho no mercado.
O painel de detalhes apresenta dados como:
- preço atual;
- posição no ranking;
- variação em 24 horas;
- capitalização de mercado;
- volume negociado;
- máxima e mínima;
- oferta circulante;
- gráfico histórico de preços.
O usuário pode alternar o período do gráfico para analisar diferentes momentos do ativo.
| Tecnologia | Utilização |
|---|---|
| HTML5 | Estrutura e semântica da aplicação |
| CSS3 | Interface, responsividade e temas |
| JavaScript ES6+ | Lógica, filtros e integração com API |
| Chart.js | Visualização dos gráficos históricos |
| CoinGecko API | Dados atualizados do mercado |
| LocalStorage | Favoritos e preferências do usuário |
O projeto utiliza a CoinGecko API para obter informações atualizadas sobre o mercado de criptomoedas.
Entre os dados consumidos estão preços, capitalização de mercado, volume, variações e histórico de preços.
Como APIs públicas podem possuir limites de requisições, o Crypto Dashboard implementa uma estratégia simples de cache local e atualização controlada.
Em caso de indisponibilidade temporária da API, os últimos dados armazenados podem ser utilizados quando disponíveis.
O LocalStorage é utilizado para manter determinadas preferências diretamente no navegador.
Isso permite preservar informações como:
- criptomoedas favoritas;
- preferência de tema;
- configurações utilizadas pela aplicação;
- dados temporários utilizados pelo sistema de cache.
Nenhum cadastro ou banco de dados externo é necessário.
crypto-dashboard/
│
├── images/
│ ├── banner.png
│ ├── dashboard-principal.png
│ ├── filtro-modoclaro.png
│ └── detalhescripto.png
│
├── index.html
├── styles.css
├── app.js
├── README.md
└── LICENSE
Clone o repositório:
git clone https://github.com/marcelogomesdev/crypto-dashboard.gitAcesse a pasta:
cd crypto-dashboardDepois, abra o arquivo index.html diretamente no navegador.
Para desenvolvimento local, também é possível utilizar uma extensão como Live Server no Visual Studio Code.
O projeto é compatível com hospedagem estática e pode ser publicado gratuitamente através do GitHub Pages.
Para publicar:
- Acesse Settings no repositório.
- Entre em Pages.
- Em Build and deployment, selecione Deploy from a branch.
- Escolha a branch
main. - Selecione a pasta
/ (root). - Clique em Save.
Após o processamento, o GitHub disponibilizará o endereço público da aplicação.
O Crypto Dashboard foi desenvolvido como projeto de portfólio para aplicar, na prática, conceitos importantes do desenvolvimento Front-end, incluindo:
- consumo de APIs REST;
- JavaScript assíncrono;
- manipulação do DOM;
- tratamento e apresentação de dados;
- persistência com LocalStorage;
- cache no navegador;
- filtros e ordenação;
- visualização de dados;
- responsividade;
- tratamento de erros;
- experiência do usuário.
Os dados apresentados pelo Crypto Dashboard possuem caráter exclusivamente informativo.
O projeto foi desenvolvido para fins educacionais e de portfólio e não constitui recomendação de investimento.
Marcelo Gomes dev
Desenvolvedor Front-end e estudante de Análise e Desenvolvimento de Sistemas, desenvolvendo projetos voltados para aplicações web, dados e soluções digitais.
Crypto Dashboard
Acompanhe o mercado de criptomoedas em tempo real.
Desenvolvido por Marcelo Gomes dev