Astro match

[0dayIg0r]

Astro Match

O que funciona

• As funcionalidades likes, desllike, e ver os matches. Também é possível resetar.

O que não funciona

Animações.

Link Surge

https://astromatch-opinion.surge.sh/

Imagens

[labenu-bot]

Parabéns pela entrega!

Requisitos do projeto ✅

Implementações	Feito
O usuário, ao acessar a aplicação, encontra a página inicial onde aparece um perfil para dar like ou não	✅
Ao clicar em like ou dislike, um novo perfil deve aparecer ao usuário	✅
É possível acessar a tela de matches contendo os perfis que deram match	✅
Na tela da lista de matches, deve ser possível ver a foto e o nome do perfil que deu match	✅
É possível resetar os matches através de um botão	✅
Ao resetar os matches, a lista desaparece da tela sem a necessidade de atualizá-la	-
Enquanto o novo perfil ou a lista de matches está carregando, aparece um loading na tela	-
Ajustou o tamanho das imagens no projeto	✅
Quando o usuário dá um match e recebe um match de volta, ocorre uma notificação deste fato	-
Quão fácil foi achar as informações no site?	Médio
O que você achou do design do site?	Médio
Funcionalidade extra	-

Feedback do código	Feito
Usou apenas componentes funcionais	✅
Criou uma única função para fazer a requisição choosePerson, recebendo true/false através do parâmetro	-
Usou um único idioma para escrever código (inglês ou português)	✅
Não gerou um loop infinito de requisições na tela de matches como resultado da utilização errônea das dependências do useEffect	✅
Nomes de variáveis, funções e componentes fazem sentido	-
Usou getProfile ao invés de choosePerson com resposta negativa para buscar perfis	-
Evitou misturar tipos de estilização (useStyles/styled components/className/etc)	✅
Fez componentização em vez de deixar tudo no App	✅
Criou link do surge	✅
Criou um bom readme com informações relevantes para o projeto	-

Comentários da pessoa avaliadora

Olá, Igor! Primeiramente, gostaria de parabenizá-lo por concluir mais uma etapa do processo da Labenu! Vi que você conseguiu implementar boa parte dos conceitos da semana, fazendo requisições funcionarem, integrar a API e rodar o projetinho! \o/

De toda forma, gostaria de fazer alguns comentários pontuais que talvez ajude você nos próximos projetos:

1. Ao tentar rodar o seu código e selecionar os perfis em likes e dislikes, percebi que não existe diferenciação entre os dois. Independente de clicar no coraçãozinho ou no x, o efeito pro código é de ter dado like :/ Isso se deve ao fato de você ter mockado o body utilizado na requisição de POST ChoosePerson com o valor da propriedade choice sempre sendo true. A ideia aqui é que, ao clicar nos botões, você alternasse esta propriedade entre false e true, onde o false representaria o nosso dislike e o true nosso like. Dessa forma, poderíamos criar um conjunto de matches onde somente quando tanto o usuário quanto os perfis apresentados dessem true que de fato o match ocorreria. Como sugestão, tente pensar em enviar esta informação nos eventos onClick dos \<button\>, assim alternando o valor de choice ;)

2. Notei que alguns componentes foram criados com nomes um pouco confusos("BsBack", "C.Maches", "IoMdRefresh"). Fique atento a nomeação, para que estes sejam construídos de tal forma a serem significativos e denotarem propósito no seu código. ;)

3. Uma prática muito interessante é a de criar uma documentação README.md que seja visível a qualquer pessoa que eventualmente observe o seu projeto. Caso esteja em dúvida, este arquivo corresponde ao campo onde você inclui as imagens e o link surge do seu projeto no github. Neste incluímos: o que funciona (ou não funciona no projeto), imagens, link surge, além de documentação de informações sobre a tecnologia utilizada ("Este projeto foi realizado utilizando React, ...) e o propósito do projeto ("Este é um projeto que simula as funcionalidades de um app de relacionamentos, ...). Dessa forma, qualquer avaliador ou recrutador que eventualmente veja o seu portfólio futuro saberá mais ou menos a intenção do projeto e suas limitações. :)

4. Observei que, ao clicar no botão de resetar matches dentro da tela de matches, apesar de uma mensagem de aviso aparecer, os matches permanecem até que saiamos da componentização da tela e voltemos :/ Como sugestão para contornar esta situação, você poderia utilizar o useEffect para promover um efeito parecido com o componenteDidUpdate, em que, ao clicar no botão de reset seria disparado a função de busca dos matches novamente ;)

5. Outra prática legal muito comum quando utilizamos requisições para busca de informações ou estruturas assíncronas é permitir ao usuário visualizar alguma mensagem que indique que as informações estão sendo carregadas (algo como uma mensagem na tela, sendo construída por um elemento JSX, no nosso caso). Como sugestão, você poderia ter pensado em criar uma renderização condicional do tipo ternário em que, caso as informações já existam (requisição já retornou com as informações) um elemento exibiria estas; mas, enquanto as informações não chegam um elemento simples (como \<p\>carregando...\</p\>, por exemplo) poderia ser exibido temporariamente para o usuário. Isto gera um efeito de fluidez muito interessante para o usuário. ;)

6. Outra prática recorrente quando estamos lidando com a experiência do usuário é dar avisos interativos sobre o que de fato está ocorrendo nas páginas. Porém, ao observar o seu projetinho, percebi que o usuário não recebe nenhuma informação quando o matche ocorre nem sobre quando algo ocorreu de errado durante a execução das diferentes partes do projeto :/ Como sugestão, você poderia explorar a utilização do método alert() nativo do JS, de tal forma a exibir mensagens pro usuário que sinalizem que tudo ocorreu bem (ou não). ;)

7. Notei que em algumas partes do seu código alguns console.log ficaram em aberto. Atente-se a este detalhe, visto que a exibição de consoles só deveriam ser vistos durante o processo de construção e/ou depuração. Em sites reais, estes podem servir de pontes de acesso a pessoas externas ao seu projeto, muitas das vezes com más intenções, dando clareza de brechas e funcionamento do seu código :/

8. Ao testar dar likes/dislikes para todos os perfis disponíveis percebi que, no momento que os perfis acabam (a API é limitada em perfis), seu código para de funcionar de forma correta, parando de permitir exibir a tela de perfis :/ Isto se deve ao fato de não existir uma instrução no código que renderize algum elemento diferente pra esta situação. Como sugestão, você pode pensar em algo parecido ao sugerido no item 5). Adicionalmente, você poderia repensar em onde o botão de resetar usuários apareceria, pois sem a possibilidade de exibir a tela, não é possível acessar o botao. Pense nisso! ;)

9. Apesar de estar tudo funcionando direitinho, senti que a estilização do seu projetinho tá quebrando um pouqunho, com os elementos não-alinhados e também as descrições fora de posicionamento :/ Pensando num app de relacionamentos, é super importante que pensemos na forma de chamar a atenção dos usuários, despertando o interesse no uso deste. Tente caprichar mais da próxima vez, sei que você vai mandar super bem! ;)

No mais, muito sucesso para ti nesta jornada! :)

Análise realizada por: Bruno