Pular para conteúdo

Projeto 08 – Dashboard de Criptomoedas 📉

Neste projeto, você vai construir um painel financeiro que consome dados reais do mercado de moedas digitais.

🎯 Objetivo

Dominar o Axios, instâncias de API, tratamento de erros e renderização condicional de dados externos.

🛠️ Requisitos

  • Uso de Axios para as requisições.
  • Criação de uma instância centralizada de API (api.js).
  • Uso de Async/Await.
  • Tratamento de estados de Erro e Loading.

📝 Passo a Passo

1. Escolha da API

Utilize a API pública da CoinGecko: https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1

2. Service API

Crie a pasta src/services e o arquivo api.js configurando a URL base da CoinGecko.

3. Componente Lista

No componente principal: - Dispare a busca no useEffect. - Mapeie o array de moedas para exibir: Nome, Logotipo, Preço Atual e Variação nas últimas 24h.

4. Refinamento de UX

  • Crie um botão "Atualizar Dados" que chama a função de busca novamente.
  • Estilize a tabela ou os cards para que fiquem com aspecto profissional (use Tailwind ou Styled Components).

✅ Critérios de Entrega

  • A aplicação deve mostrar dados reais de pelo menos 10 criptomoedas.
  • Se o usuário estiver sem internet, uma mensagem clara de erro capturada pelo catch deve aparecer.
  • O código deve estar organizado seguindo o padrão de Services.

Bônus

Adicione um input de busca para filtrar a lista localmente por nome da moeda!