Bitcoin (BTC) Wallet Dashboard – Technical Challenge Solution

Aplicação frontend desenvolvida com React + Vite + TypeScript + TailwindCSS, para gerenciamento de carteiras de Bitcoin (BTC), com conversão para moedas em tempo real, que consome:

• API local de usuários (json-server)
• API externa de conversão de moedas (AwesomeAPI)

Objetivo

Este projeto foi desenvolvido como solução para um desafio técnico de Front-End, com foco na aplicação correta das regras de negócio, organização por responsabilidades e uso de boas práticas de arquitetura frontend.

Tecnologias Utilizadas

• React
• Vite
• TypeScript
• TailwindCSS
• React Query (gerenciamento de estado assíncrono)
• React Hook Form + Zod (validação de formulários)
• json-server (API mock local)

Atendimento aos Requisitos Obrigatórios

• ✔ Identidade visual alinhada ao protótipo
• ✔ Listagem em tabela com dados da API /users
• ✔ Ações de editar (modal) e deletar por registro
• ✔ Inclusão de novas carteiras via modal
• ✔ Paginação server-side utilizando parâmetros do json-server
• ✔ Filtro full-text aplicado no servidor
• ✔ Conversão dinâmica BTC → moeda selecionada
• ✔ Implementação da regra de compra com cálculo bidirecional

O desafio tem seção "Bônus" atendida.

• ✔ Gerenciamento de estado
• ✔ Validação
• ✔ Testes

Funcionalidades Implementadas

1. Listagem de Usuários/Carteiras

• Tabela com dados relevantes da API /users
• Nome completo
• Email
• Endereço
• Data de abertura
• Saldo em BTC
• Endereço da carteira
• Valor convertido na moeda selecionada

Ações: Editar e Deletar

2. CRUD Completo

• Adicionar nova carteira
• Modal com validação
• Persistência no json-server
• Editar carteira
• Modal com dados preenchidos
• Atualização via PUT
• Deletar carteira
• Confirmação antes da exclusão
• Remoção via DELETE

3. Paginação (Server-side)

Implementada utilizando parâmetros do json-server:

?_page=1&_per_page=10

A paginação é realizada no servidor, não no frontend.

4. Filtro (Full-text Search)

Implementado utilizando:

?q=termo

A filtragem é aplicada no servidor conforme documentação do json-server.

5. Conversão de BTC para Moeda Selecionada

Integração com AwesomeAPI

Listagem de moedas disponíveis: https://economia.awesomeapi.com.br/json/available/uniq

Conversão BTC -> moeda: https://economia.awesomeapi.com.br/json/last/BTC-<MOEDA>

A aplicação utiliza o campo bid retornado pela API como taxa de compra.

Fórmula aplicada:

valor_convertido = valor_carteira (BTC) * bid

6. Regra de Negócio (Critério de Aceitação)

Ao criar ou editar uma carteira:

• O usuário pode informar um valor de compra na moeda selecionada
• O sistema calcula automaticamente o valor correspondente em BTC

Fórmula inversa aplicada:

btc = valor_moeda / bid

Também ocorre o recálculo ao alterar o BTC manualmente.

Explicação de Arquitetura Escolhida

A aplicação utiliza React Query para gerenciamento de cache, sincronização e revalidação automática de dados, evitando múltiplas requisições desnecessárias e melhorando a experiência do usuário.

Como Executar o Projeto

Primeiramente, é necessário clonar o projeto:

git clone https://github.com/jpvilarinho/btc-wallet-dashboard.git

1. Instalar dependências

npm install

2. Subir a API local

É necessário ter o json-server instalado globalmente:

npm i -g json-server

Depois de instalado:

npm run api

A API ficará disponível em: http://localhost:3004/users

3. Subir o Frontend

npm run dev

Acesse: http://localhost:5173

4. Rodar API + Front juntos

npm run start

Scripts Disponíveis

• npm run dev — inicia o frontend
• npm run api — inicia o json-server
• npm run start — inicia frontend e API juntos
• npm run test — executa testes (Vitest)

Estrutura do Projeto

src/
 ├── app/
 ├── components/
 ├── features/
 ├── lib/
 ├── test/
 ├── types/
 ├── main.tsx
 └── styles.css

A organização separa responsabilidades entre UI, serviços de API, tipagens e lógica de negócio.

Decisões Técnicas

• Paginação implementada no servidor para melhor escalabilidade.
• React Query utilizado para gerenciamento eficiente de cache e sincronização de dados.
• Zod adotado para validação baseada em schema com tipagem forte.
• Separação clara entre camada de UI, serviços de API e regras de negócio.

Pontos Técnicos Relevantes

• Tipagem forte com TypeScript
• Separação de responsabilidades
• Paginação e filtro aplicados no servidor
• Integração com API externa
• Validação de formulários
• Experiência do usuário com modais e feedback visual
• Cache de requisições com React Query

Considerações Finais

A aplicação foi desenvolvida com foco em:

• Legibilidade
• Modularização
• Aplicação correta das regras de negócio
• Experiência do usuário
• Fidelidade ao protótipo fornecido
• Boas práticas de organização de código