Este projeto teve como objetivo o desenvolvimento do desafio proposto de construir a visualização de uma tabela com os dados vindos de uma api simulada do json server.

Foi adotada uma abordagem de menor uso de bibliotecas externas, e um maior uso do Typescript com componentes modularizados para simplificação do fluxo de dados.

1. Funcionalidades

a. Processamento dos dados para exibição (e.g. formato de datas e telefone)
b. Filtragem (por nome, cargo, data de admissão ou telefone) no front
c. Ordenação (campos ordenáveis) via query params

2. Responsividade

Tamanhos web e mobile, adaptando a tabela para uma melhor UX ao comparar as informações (e.g. Sticky cards). Animações ao expandir informações, adaptações e pontos de quebras de linha oportunas nos textos das diferentes colunas, além da área de ação no botão aumentada no mobile.

3. Testes

Foram criados testes visando aumentar a confiabilidade das funcionalidades do projeto em qualquer uma das configurações que permite (e.g. mobile ou web, default ou custom table) com destaque para as operações de filtragem e ordenação, além dos estados como o de carregamento, exibição dos dados e sem dados, visto que são partes importantes do funcionamento e precisam ser detectados rapidamente qualquer possível incongruência.

Ferramentas de teste

Foi utilizado o Jest e Testing Library / React para isso, provendo o ferramental básico de teste para rodar e simular a DOM, respectivamente, além de eventos de usuário com o user-event. As demais bibliotecas utilizadas são de suporte adicional para os testes, como suporte para uso de typescript, svg ou path aliases, por exemplo.

---

📄 Pré-requisitos

• Node.js versão 20 ou superior
• Package manager (e.g. npm, yarn)
• JSON Server (de preferência 0.17.4)
• Navegador compatível com ES6+ (Chrome, Edge, Firefox, etc.)

---

🚀 Começando

• instalação das dependências:

  npm i

       ou

  yarn

• inicie o servidor de desenvolvimento com:

  npm run dev

       ou

  yarn dev

Abra http://localhost:5173 com o browser. Esta é a porta padrão do Vite.

• instale o json server para acessar os dados via api simulada:

npm i -g json-server@0.17.4

OBS: você pode usar esta versão do json-server para uma melhor funcionalidade → v0.17.4

• inicie e deixe executando a api simulada com:

json-server --watch db.json

se tiver problemas, execute:

npx json-server db.json 

       ou

yarn dlx json-server@0.17.4 db.json

Agora pode verificar em http://localhost:3000/employees.

para executar os testes, basta rodar:

yarn test

É possível verificar de maneira gráfica os arquivos e dependências no bundle final, entre com:

yarn build

caso não abra no browser, você pode usar o live-server para abri-lo em dist\index.html

🔨 Ferramentas utilizadas

---

node v20.17.0
npm v8.19.4
yarn v4.6.0

---

react v19
vite v6.1.0
json-server v0.17.4
@uidotdev/usehooks v2.4.1 → com hooks utilitários, como um para responder a tamanhos de tela
jest v29.7.0
@testing-library/react v16.2.0
@testing-library/user-event v14.6.1

---

→ Context API, para gerenciamento dos estados
→ fetch API, para requisições http
→ tratamento para reduzir o número de buscas ao digitar
→ foi adicionado tratamento para nomes (abreviação dos nomes do meio)
→ e ajuste dinâmico para uma melhor exibição das fotos
(ou iniciais do nome caso não tenha uma foto → é possível verificar isso apagando alguma string do campo image no db.json)