⚡ Uma demonstração deste projeto está disponível aqui.
- Clone este repositório
git clone https://github.com/moovmooov/moovplus- Instale as dependências
bun install- Execute o projeto em modo de desenvolvimento
bun run dev- Sempre gosto de iniciar os projetos fazendo a ideia pelo Excalidraw para ter uma referência visual, você pode visualizar clicando aqui.
- A implementação do formulário foi um dos principais desafios, utilizando Dynamic Components do Vue.js em conjunto com validações dinâmicas do Zod.
- Utilizei o Maska para criar os masks dos inputs, acabei testando vários outros como o vue-the-mask e o vue-money3, mas o Maska foi o mais prático e global para as situações de CPF, CEP, e dinheiro.
- Para guardar os dados do formulário, utilizei o useState do Nuxt que é bem simples de usar é bem útil nesses casos onde a lógica não seria tão complexa, se fosse com mais dados e uma regra de negócio mais complexa, seria interessante incluir o Pinia para isso.
- Nuxt UI 2 tem componentes bem completos mas senti falta de um componente de Stepper, algo que descobri que veio no Nuxt UI 3, com a adição do Radix Vue que tem esse tipo de componente. Acabei instalando o Radix Vue a parte, mas depois decidi fazer o meu próprio componente de Stepper inves de baixar outra biblioteca de componentes.
- Achei interessante que o Vue tem a função nativa de debounced, que antes eu usava com Lodash, mas acabou sendo mais simples e direto de usar no campo de busca para que a interface evite de fazer uma requisição a cada letra digitada.
- Existe um bug na sessão de receitas, onde a paginação continua retornando o tamanho da lista total de resultados, mesmo com os filtros. Isso se deve por uma limitação da API, onde ela permite que você filtre por uma tag unica, mas não por mais de uma. Contornei isso apenas retornando 0 quando não houver receitas para os filtros selecionados, mas quando houver, ele continua retornando a paginação total.