CryptoWiki

CryptoWiki é uma aplicação web para monitoramento de criptomoedas, exibindo dados de mercado, detalhes de moedas e histórico de preços de forma visual e interativa.

Funcionalidades

• Visualização do panorama do mercado de criptomoedas (market cap, volume, dominância BTC, total de ativos, exchanges e mercados)
• Listagem paginada das principais criptomoedas com dados de preço, variação e capitalização
• Página de detalhes de cada moeda, com gráfico de histórico de preço e informações detalhadas
• Busca e navegação rápida entre moedas
• Interface responsiva e moderna

Tecnologias Utilizadas

• React 19 — Biblioteca principal para construção da interface
• TypeScript — Tipagem estática para maior robustez
• Vite — Bundler e ambiente de desenvolvimento rápido
• React Router DOM v7 — Roteamento SPA
• @tanstack/react-query — Gerenciamento de cache e requisições assíncronas
• TailwindCSS 4 — Estilização utilitária e responsiva
• Lucide React — Ícones SVG modernos
• Recharts — Gráficos responsivos para histórico de preços
• ESLint — Padronização e qualidade de código

Estrutura do Projeto

src/
  api/                # Funções para requisições à API CoinCap
  components/          # Componentes reutilizáveis (tabela, header, overview)
  hooks/               # Hooks customizados e tipagens
  pages/               # Páginas principais (Home, Detalhes, NotFound)
  utils/               # Funções utilitárias (formatadores)
  router.tsx           # Definição das rotas
  App.tsx              # Componente principal
  main.tsx             # Ponto de entrada

Técnicas e Boas Práticas

• Componentização: Separação clara entre componentes de UI, páginas e lógica de dados
• Hooks customizados: Centralização de tipagens e lógica de dados em hooks
• Gerenciamento de estado assíncrono: Uso do React Query para cache e atualização automática dos dados
• Paginação e carregamento incremental: Listagem de moedas com paginação dinâmica
• Formatação de dados: Funções utilitárias para exibir valores monetários e datas de forma amigável
• Responsividade: Layout adaptável para diferentes tamanhos de tela com TailwindCSS
• Acessibilidade: Uso de elementos semânticos e navegação por teclado

Como rodar o projeto

1. Instale as dependências:

   npm install

2. Rode o ambiente de desenvolvimento:

   npm run dev

3. Acesse em http://localhost:5173

API de Dados

Os dados são obtidos da CoinCap API, utilizando endpoints públicos para listagem, detalhes e histórico de preços das criptomoedas.

Licença

MIT }, }, ])

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])