Galera, gostaria de um review de um site antes de mandar para o cliente, dicas, críticas e etc

[wilsongomes-swe]

Galera,
finalizando um site em SPA, vou enviar ao cliente hoje ao final da tarde, gostaria de opiniões de vocês sobre como está e o que melhorar:

Site: https://preview-pba.netlify.com/
(Os dados são fictícios vindos de um crawler meu que escaneia um site semelhante ao que o cliente queria, eles vão cadastrar todos os dados por uma app de administração de conteudo, ams queria um review referente a questões de UX, UI e desenvolvimento)

Ele está em react e ainda sem server side rendering, mas é algo futuro e que estará na release final.

A questão de usar SPA para um site comum foi algo solicitado pelo cliente, e é meu primeiro site em React (já fiz 2 projetos de aplicações, mas são até certo ponto bem diferentes.).

Valeu!
Abs

[ninetails]

Show, parabéns!

Não conseguirei dar pitaco técnico pois estou no celular, não consigo ver código fonte etc.

Realmente vi que tá bem simples. Em relação a UI, não me senti bem em relação às cores. Vermelho e preto tendem a ser um pouco agressivos visualmente falando, lembra temática DOOM rs.

As escolhas de fontes pro subtítulo na home também achei que passariam pouca seriedade, a família lembra bem Comics (não necessariamente a Sans).

Sobre responsivo, abri no celular e tudo responsivo, sem scroll horizontal <3 mas a imagem do topo expandiu, não dá pra ler o texto anexo às imagens. Talvez seria legal pensar em algo mais adaptativo.

O loading com placeholder ficou show.

Quando uma página tem uma "paginação" para ver mais, a setinha indica que talvez tenha mais conteúdo mas não indica o que. Talvez muita gente pode passar despercebida em relação a mais conteúdo.

Sobre o SPA, faz as rotas tudo bonitinho mas se dá reload, perde-se a página. Claro que isso tá mapeado e ótimo, sugeriria talvez ter usado o Gatsby ou o Next (se n me engano ele tem export) prum futuro. Mas o que eu ia criticar é que tem como configurar via netlify.toml para que todas as páginas sejam redirecionadas para a index.html.

Sem ver código fonte acho que seria isso que eu poderia falar pra melhorar para hoje. Lembro tb que maioria do que disse são opiniões pessoais.

Boa sorte :D

[wilsongomes-swe]

Shoow @ninetails muito obrigado, estou colocando projetos em produção mas ainda muito o que aprender.

Vou juntar as observações do cliente com as observações que mandou e fazer revisões, valeu msm por todas.

O responsivo ainda estou brigando com esse banner ai kk

Vou ver como fazer aquela paginação ficar intuitiva.

Valeu pelo toque do netlifly, reparei isso, mas ia depois ver a documentação como resolver, já vou ver pelo link que mandou, muito obrigado!

Quanto ao código gostaria muito de umas dicas também, mas para não quebrar nada do contrato este não posso postar. Mas finalizando um outro projeto pessoal e este mandarei aqui para ver o que indicam para melhorar, sempre, tanto em arquitetura e código como nas questões de UI e UX.

Valeu muito!
Abs

[ninetails]

Posso dar uma olhada mas depois, aí ver semântica e o que tu usou ;D

[ninetails]

Mais feedback :D Desculpa a demora, mas como foi prometido, continuarei. Eu sei também que provavelmente este deve ser somente uma POC simples, mas o feedback mesmo assim tentarei dar um pouco completo pra tu ter terceiras opiniões em coisas que podem ser features lá na frente.

O topo da home tá estranho mesmo, as imagens não ficam alinhadas no Desktop e o intervalo tá muito rápido, tb não há feedback quando troca. Também vi que o alinhamento depende da altura do viewport, quando diminui ao abrir o inspetor, a imagem também diminuiu (talvez pq esteja usando cover?).

Navegação por tab dá umas loucuras de vez em quando na home.

Outra coisa da home, tem muita imagem carregada no primeiro load. Sei que é difícil pensar em imagens responsivas quando dados vêm de uma API, mas um Lazyload pfv.

Ativar o PWA talvez poderia ajudar um pouco (pelo menos em relação a cachear essas imagens ou sei lá).

Aproveitando, também passar o Lighthouse é recomendável, já que já vem no Google Chrome,

Também tem uns console.log loko lá

Diria também que poderia ter um cuidado maior em relação a semântica.

Na tag <html> o lang tá setado para inglês (en).

A Home não possui tags <h1>, a de assinaturas possui 3. Poderia ter mais uso de tags semânticas do HTML5, a de sobre tem 2 header porém o segundo não é envolvido em section ou article.

Tem um <link> perdido apontando para https://preview-pba.netlify.com/teste.json no <head> do site.

No <nav> tem um <li> vazio. Se for só para espaçamento, jogar isso no css do nav ou algum outro elemento. No menu o bullet também poderia virar um :after dos elementos, não teria o porquê deixar um elemento solto lá.

Usar strong ao invés de b.

^{_{DO NOT CLICK HERE}}

Quanto ao código gostaria muito de umas dicas também, mas para não quebrar nada do contrato este não posso postar.

^{_{Quando vc fez o build para produção, deixou ligado sourcemaps. Dito isso:}}

Daria para botar/tirar o título usando os novos Hooks ao invés dos componentDidMount e componentWillUnmount usando o useLayoutEffect.

Pra home, a maioria das coisas vem de API. Seria legal dar uma lida em React.Suspense. Apesar de também não ter visto rerender desnecessário, vi que não usou nenhum React.memo ou shouldComponentUpdate, talvez nem precise mas é coisa daora pra dar uma olhada.

E talvez tirar o emotion já que já tá usando sass mas sem botar css-in-js em nenhum componente.

(se precisar que eu reposte este comentário sem esta parte, só avisar)

Desculpe a desorganização novamente pq fui achando e adicionando e parei por aí pois a lista já tá um pouco grande. Peço desculpas e como dizem, sou um daqueles chatão de Code Review. Tomare que tenha conseguido o cliente, sucesso man! Qualquer coisa tamos ae.