{"id":27375188,"url":"https://github.com/naneshoru/desafio-front-end","last_synced_at":"2025-04-13T12:14:43.802Z","repository":{"id":279312747,"uuid":"938206366","full_name":"Naneshoru/desafio-front-end","owner":"Naneshoru","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-09T17:58:50.000Z","size":4092,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-13T12:14:40.864Z","etag":null,"topics":["jest","json-server","react","react-testing-library","usehooks","user-event","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Naneshoru.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-24T15:33:59.000Z","updated_at":"2025-03-24T08:49:11.000Z","dependencies_parsed_at":"2025-03-04T06:24:09.858Z","dependency_job_id":null,"html_url":"https://github.com/Naneshoru/desafio-front-end","commit_stats":null,"previous_names":["naneshoru/desafio-front-end"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Naneshoru%2Fdesafio-front-end","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Naneshoru%2Fdesafio-front-end/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Naneshoru%2Fdesafio-front-end/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Naneshoru%2Fdesafio-front-end/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Naneshoru","download_url":"https://codeload.github.com/Naneshoru/desafio-front-end/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248710445,"owners_count":21149191,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jest","json-server","react","react-testing-library","usehooks","user-event","vite"],"created_at":"2025-04-13T12:14:43.184Z","updated_at":"2025-04-13T12:14:43.756Z","avatar_url":"https://github.com/Naneshoru.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"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.\n\nFoi adotada uma abordagem de menor uso de bibliotecas externas, e um maior uso do Typescript com\ncomponentes modularizados para simplificação do fluxo de dados.\n\n#### 1. Funcionalidades \u003cbr\u003e\n  a. Processamento dos dados para exibição (e.g. formato de datas e telefone) \u003cbr\u003e\n  b. Filtragem (por nome, cargo, data de admissão ou telefone) no front \u003cbr\u003e\n  c. Ordenação (campos ordenáveis) via query params\n  \n#### 2. Responsividade \u003cbr\u003e\n   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.\n   \n#### 3. Testes \u003cbr\u003e\n  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.\n\n##### Ferramentas de teste \u003cbr\u003e\n  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.\n  \n---\n\n## :page_facing_up: Pré-requisitos\n\n• Node.js versão 20 ou superior \u003cbr\u003e\n• Package manager (e.g. npm, yarn) \u003cbr\u003e\n• JSON Server (de preferência 0.17.4) \u003cbr\u003e\n• Navegador compatível com ES6+ (Chrome, Edge, Firefox, etc.) \u003cbr\u003e\n\n---\n\n## :rocket: Começando\n\n• instalação das dependências:\n```bash\n  npm i\n```\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; ou\n```bash\n  yarn\n```\n\n• inicie o servidor de desenvolvimento com: \n```bash\n  npm run dev\n```\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; ou\n```bash\n  yarn dev\n```\n\u003cbr\u003e\n\nAbra [http://localhost:5173](http://localhost:5173) com o browser. Esta é a porta padrão do Vite.\n\n\u003cbr\u003e\n\n• instale o json server para acessar os dados via api simulada: \u003cbr\u003e\n\n```bash\nnpm i -g json-server@0.17.4\n```\n\nOBS: você pode usar esta versão do json-server para uma melhor funcionalidade → v0.17.4 \u003cbr\u003e\n\u003cbr\u003e\n\n• inicie e deixe executando a api simulada com:\n```bash\njson-server --watch db.json\n```\n\nse tiver problemas, execute: \n```bash\nnpx json-server db.json \n```\n\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; ou\n```bash\nyarn dlx json-server@0.17.4 db.json\n```\nAgora pode verificar em [http://localhost:3000/employees](http://localhost:3000/employees).\n\n\u003cbr\u003e\n\npara executar os testes, basta rodar:\n```bash\nyarn test\n```\n\n\u003cbr\u003e\n\nÉ possível verificar de maneira gráfica os arquivos e dependências no bundle final, entre com:\n```bash\nyarn build\n```\ncaso não abra no browser, você pode usar o live-server para abri-lo em dist\\index.html\n\n\u003cbr\u003e\n\n## 🔨 Ferramentas utilizadas\n\n---\nnode v20.17.0 \u003cbr\u003e \nnpm v8.19.4 \u003cbr\u003e \nyarn v4.6.0\n\n---\n\nreact v19 \u003cbr\u003e \nvite v6.1.0 \u003cbr\u003e \njson-server v0.17.4 \u003cbr\u003e \n@uidotdev/usehooks v2.4.1 → com hooks utilitários, como um para responder a tamanhos de tela \u003cbr\u003e \njest v29.7.0 \u003cbr\u003e \n@testing-library/react v16.2.0 \u003cbr\u003e \n@testing-library/user-event v14.6.1\n\n---\n\n→ Context API, para gerenciamento dos estados \u003cbr\u003e \n→ fetch API, para requisições http \u003cbr\u003e\n→ tratamento para reduzir o número de buscas ao digitar \u003cbr\u003e\n→ foi adicionado tratamento para nomes (abreviação dos nomes do meio) \u003cbr\u003e\n→ e ajuste dinâmico para uma melhor exibição das fotos \u003cbr\u003e\n(ou iniciais do nome caso não tenha uma foto → é possível verificar isso apagando alguma string do campo image no db.json)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaneshoru%2Fdesafio-front-end","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnaneshoru%2Fdesafio-front-end","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaneshoru%2Fdesafio-front-end/lists"}