https://github.com/naneshoru/desafio-front-end
https://github.com/naneshoru/desafio-front-end
jest json-server react react-testing-library usehooks user-event vite
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/naneshoru/desafio-front-end
- Owner: Naneshoru
- Created: 2025-02-24T15:33:59.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-03-09T17:58:50.000Z (3 months ago)
- Last Synced: 2025-04-13T12:14:40.864Z (about 2 months ago)
- Topics: jest, json-server, react, react-testing-library, usehooks, user-event, vite
- Language: TypeScript
- Homepage:
- Size: 3.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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.
---
## :page_facing_up: 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.)
---
## :rocket: Começando
• instalação das dependências:
```bash
npm i
```
ou
```bash
yarn
```
• inicie o servidor de desenvolvimento com:
```bash
npm run dev
```
ou
```bash
yarn dev
```
Abra [http://localhost:5173](http://localhost:5173) com o browser. Esta é a porta padrão do Vite.
• instale o json server para acessar os dados via api simulada:
```bash
npm i -g [email protected]
```
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:
```bash
json-server --watch db.json
```
se tiver problemas, execute:
```bash
npx json-server db.json
```
ou
```bash
yarn dlx [email protected] db.json
```
Agora pode verificar em [http://localhost:3000/employees](http://localhost:3000/employees).
para executar os testes, basta rodar:
```bash
yarn test
```
É possível verificar de maneira gráfica os arquivos e dependências no bundle final, entre com:
```bash
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)