Junte-se a outras 153 pessoas que estão fazendo esse mini projeto.

















Em uma listagem de pedidos, implemente busca textual, filtro, ordenação e paginação usando server components e estado na URL.
Quando um dev front-end pensa em busca, filtro, ordenação e paginação, provavelmente pensa em usar métodos como Array.filter()
ou Array.sort()
diretamente no front. Mas e se tivermos 100, 500, 1000 itens paginados de 10 em 10? Gerenciar isso pelo front é uma tarefa hercúlea - e pior, não muito eficiente.
Neste Mini Projeto, vamos implementar uma API que retorna uma listagem de pedidos. Por mais simples que pareça, essa é uma API poderosa: ela nos permite passar, como query parameters, busca textual, filtro, ordenação e paginação. E o melhor de tudo: todas essas informações ficarão na URL para fácil compartilhamento!
Tudo isso no front usando Next.js e Server Components!
O design e UI do front já estão implementados! O objetivo aqui é conseguir conectar a API e fazer as funcionalidades de busca, filtro, ordenação e paginação funcionarem.
Para isso, basta fazer um fork, clonar o código para a sua máquina, instalar as dependências e rodar pnpm run dev
ou npm run dev
!
A API que será utilizada foi desenvolvida por nós, do Codante. O endpoint principal (de listagem de pedidos) está em https://apis.codante.io/api/orders-api/orders
. A API é capaz de filtrar, ordenar, paginar e fazer uma busca textual.
A documentação da API está em https://apis-docs.codante.io/orders-api. Será necessário consultá-la para fazer este Mini Projeto.
Informação
Nenhum dos dados da API são reais e a base de dados é redefinida a cada hora.
Conectar dados da API à tabela
Dica
O valor do pedido está em centavos. Faça as conversões e transforme para o formato brasileiro de número.
Busca Textual
Filtro de Status
Ordenação de Campos
valor
).Paginação
Server e Client Components
useDebounce
para atrasar a execução da função de busca textual e evitar muitos requests.Neste mini projeto não será preciso implementar nenhum design - já fizemos isso por você.