# Challenge Front-end - Juntos Somos Mais

## Luiz Ortega

- [Link do teste](https://juntos-somos-mais-2022.vercel.app/)
- [LinkedIn](https://www.linkedin.com/in/luiz-ortega-b23b04194/)
- [Github](https://github.com/luiz-ortega)

## Aplicação - 4/5 _(2)_

A aplicação está funcionando idealmente, com combinação de filtros por estado, excelente ideia incluir o filtro por ordenação.

Pontos positivos:

- Página 404 funcionando;
- A página interna foi criada seguindo a ideia do header azul do card do user. Ponto positivo para o mapa que acompanha o dark mode do site!
- Paginação funcionando;
- O desenvolvedor se preocupou em inserir um tema em dark mode, que está bem bonito e fluído;
- Existem feedbacks de interação em grande parte dos componentes, o que é bom para a UX.

Oportunidades:

- A regra da busca está buscando por ocorrências no meio do nome e sobrenome para o que foi digitado. Ex: se o usuário buscar por `ar` será retornado **Ar**mando da Cruz, Alda B**ar**bosa;
- Paginação funciona corretamente, porém os intervalos de página não são dinâmicos e são travados de 5 em 5 páginas, ou seja, caso o usuário chegue na página 5, é preciso clicar na seta para renderizar as páginas de 6 a 10;
- Filtros de estado funcionam como deveriam, mas existe um delay após o clique na opção, que causa uma sensação de quebra.

## Arquitetura/Stack - 5/5 (2)

- Typescript
- NextJs
- Jest(testing-library)
- Mock Service Worker (MSW)
- Storybook
- Styled-componentes
- SWR
- Leaflet
- Axios
- Prettier
- Eslint
- react-hot-toast

Pontos positivos:

- Criou a documentação no Storybook que funcionou ao rodar localmente;
- Arquitetura de pastas intuitiva e bem separada;
- Usou bibliotecas que prezam pela qualidade de código;
- Excelente uso do generic types.

Oportunidades:

- Algumas funções estavam espalhadas pelo código. Neste caso, há a oportunidade de criar uma pasta helpers no src para centralizar essas funções;
- Houve arquivo que ficou um pouco extenso porque as tipagens estavam no mesmo arquivo. Talvez seria interessante criar um `component.type.ts` para exportar toda tipagem daquele contexto;
- Criou arquivos de index para exportar componentes, mas não parece ter utilizado muito bem.

## Documentação - 3/5

Pontos positivos:

- Doc do README funcional, tanto para rodar o Storybook quanto para a aplicação;

Oportunidades:

- Seria interessante subir a aplicação do Storybook online e disponibilizar um link para não haver a necessidade de ter que rodar o comando localmente;
- Apesar de ter documentado os passos para rodar as aplicações e informar as stacks que utilizou, talvez pudesse citar as decisões pessoais de cada stack e o quê o desafio proporcionou de experiências;
- Faltou mencionar o nome de algumas bibliotecas bem interessantes usadas no projeto.

## UI/UX - 4/5 _(2)_

Pontos positivos:

- O candidato não se focou em seguir o Figma do projeto, apesar disso, o layout e a interface ficaram bons tendo como resultado final um site bonito e agradável de utilizar;
- A página interna ficou muito bonita também;
- Usou a opção de tema escuro para o projeto, inclusive o efeito é aplicado ao mapa da página interna;
- Possui feedbacks de interação em grande parte da aplicação;
- Inseriu um loader no topo da tela, trazendo feedback adequado durante as transições de tela;
- Inseriu placeloader em ambas as telas;
- Criou um tema com variáveis de cor, tipografia e espaçamentos.

Oportunidades:

- Seria legal adicionar a opção de escolher a quantidade de usuários exibidos por página;
- Criação de feedback para o cenário onde não há nenhum card de usuário;
- Um ponto interessante seria dar um feedback para o usuário para casos onde o mesmo tenta fazer uma busca sem escrever nada;
- Uma melhoria de UX interessante seria ter um feedback de quais filtros estão aplicados e uma opção de remover os filtros. Essa oportunidade foi evidenciada ao observar a seguinte situação: Ao filtrar por um dos últimos estados da lista, o qual fica fora da visão, o usuário volta para o topo da página, logo ele pode acabar esquecendo o que foi selecionado previamente.

## Responsividade - 3/5

Pontos positivos:

- A aplicação é responsiva e possui quebras coerentes.

Oportunidades:

- Não fez uso do PWA e nem dos service workers;
- Ao usar o site na versão tablet (768px) e clicar no link "Mostrar todos" (filtro de estados), é causado um deslocamento de espaço à direita afastando os cards.

## Componentização - 5/5

Foi utilizado `styled-component` para estilização dos componentes e `Storybook` como documentação dos mesmos.

Pontos positivos:

- Estilização separada da lógica do componente.

Oportunidades:

- Algumas funções/tipagens poderiam ficar em arquivos separados, dessa forma, teria componentes mais limpos e legíveis.

## CSS - 5/5 _(2)_

Pontos positivos:

- Criação de um sistema de tema com a possibilidade de adicionar outros novos, considerando cores, espaçamentos e variáveis;
- Foi feito o uso do `flexbox` e do `grid`.

Oportunidades:

- Fez o uso das tags HTML como seletor para aplicar o css, no qual não é uma boa prática.

## JavaScript - 4/5 _(2)_

Pontos positivos:

- Desmostrou domínio no JavaScript/TypeScript.

Oportunidades:

- Não foi usado o conceito de imutabilidade em alguns lugares. Poderia ter sido usado o conceito de função fábrica com a finalidade de reutilizar código.

## HTML - 4/5 _(2)_

### Métricas Lighthouse - Listagem dos usuários:
- **Desktop**:
- Accessibility: 75
- Best Practices: 92
- SEO: 90
- **Mobile**:
- Accessibility: 75
- Best Practices: 92
- SEO: 92

### Métricas Lighthouse - Detalhes do usuário:
- **Desktop**:
- Accessibility: 86
- Best Practices: 92
- SEO: 90
- **Mobile**:
- Accessibility: 86
- Best Practices: 75
- SEO: 92

Pontos positivos:

- Se preocupou em usar as tags semânticas do HTML5;
- Fez o uso do `alt` nas imagens.

Oportunidades:

- Faltou a definição de alguns atributos semânticos;
- Talvez tenha invertido a ordem semântica dos componentents ao fazer um wrapper. Por exemplo, um wrapper com a tag `footer` e o componente de `Footer` é uma `div`.

## Performance - 4/5

### Métricas Lighthouse - Listagem dos usuários:
- **Desktop**:
- Performance: 69
- **Mobile**:
- Performance: 53

### Métricas Lighthouse - Detalhes do usuário:
- **Desktop**:
- Performance: 68
- **Mobile**:
- Performance: 51

Pontos positivos:

- O uso de funcionalidades visando a performance da aplicação.

## Testes - 5/5 _(2)_

Pontos positivos:

- Foi usado o Jest (testing-lirabry);
- Adicionado vários cenários de testes.

Oportunidades:

- Faltou definir a pasta do `coverage` no arquivo do `.gitignore`.

## Git - x/5

Pontos positivos:

- ...

Oportunidades:

- Adição do `.next` no `.gitignore`.

## BFF - x/5

Pontos positivos:

- As informações foram tratadas usando a técnica BFF aproveitando bem a arquitetura do NextJS.

---

### Média - x/5

Resumo final e média do teste.

- _Soma de todos os itens_
- _Items com (2) possuem peso em dobro_
- _Dividir tudo por 20_