santiagogustavo / startupfest-ratings Goto Github PK

Os itens marcados com (+) são feedbacks positivos, assim como os (-) são negativos ou que necessitam melhora. Os demarcados com (?) têm "peso neutro" na avaliação do desafio, porém são pontos importantes / interessantes de ressaltar

Feedbacks do Código

• (+) Utilização do Firebase para contabilização de votos
• (+) Utilização do Apollo para consumo da API GraphQL
• (+) Ótima componentização e separação de responsabilidades entre os componentes
• (+) Separação de template e styles por componente ((+) também foi utilizado o styled-components)
• (+) Utilização de um module-resolver plugin pro Babel, tirando aqueles "overusages" de '..' nos imports. Ex:

// Em vez de:
import { someFn } from '../../../utils';

// Substitui-se por
import { someFn } from 'utils';

• (+) Utilização de packages para controle de commit como husky, commitizen, o que indica preocupação com qualidade do history de commits do projeto (Provavelmente do React Boiler Room, criado por você mesmo 👏 )

• (?) Existe o enzyme e outros tools que englobam o enzyme para testes de componentes react. Só não achei nenhum teste unitário (Provavelmente do React Boiler Room)²

• (?) Existe um script node de adicionar pages com base num JSON de rotas (Provavelmente do React Boiler Room)³

• (-) Em Results.jsx:82 existem dois setState's em seguida, o que causa dois rerender's seguidos (- performance), poderia ser evitado usando um setState só:

this.setState({
    isLoading: false,
    ratings: sorted
});

• (? / -) Falta de separação de uma camada de Services da camada de UI / Presentation.

Como assim?

Esse é um ponto que pode ser controverso, visto que depende do perfil do projeto, por isso foi marcado como "? / -".

Em projetos maiores (que tendem a serem mantidos) o ideal é separar a cama de UI (React) da camada aonde tem o controlador de negócios (Services). Nesse camada, é aonde você pegará os dados do GraphQL / Firebase, fará o tratamentos necessários (mapeamento de dados, filtragem, etc...) e traduzirá (talvez por um connector do apollo-react) pra camada de UI.

Feedbacks de UI / UX / Comportamentais

• (+) Utilização de uma branding / logomarca

• (+) Boa disposição de Layout

• (+) Boa utilização de tipografia

• (+) A n i m a t i o n s 😆

• (+) Utilização de cores para exprimir significados (Ex: Cores por categoria de StartUp)

• (+) Componentes visuais são auto explicativos

• (+) Utilização de feedback visual corretamente ao carregar recursos na página (Loading)

• (+) Ao submeter um voto o usuário é automaticamente redirecionado à pagina de resultados para ver o novo resultado contabilizado pelo seu voto

• (-) Não é possivel ver os resultados parciais por categoria (Saber o ranking por categoria, como mostrado no protótipo do site)

• (-) É possível submeter um voto mesmo sem preencher nenhuma estrela

• (-) Toda vez que há retorno para a página das startups as cores associadas a cada tipo de categoria são "resetadas" (não são mais as mesmas de antes). Isso causa confusão no usuário, pois a intenção da utilização de cores por categoria é de permitir fácil associação e exercitar a memória muscular do usuário quanto a essa cor específica.

PS: Se ficar com algum ponto em dúvida pode comentar aqui mesmo