front-end-challenge
front-end-challenge copied to clipboard
Muller esposito
Framework de Testes Utilizado: Cypress Framework Front-End Utilizado: ReactJs Linguagens para Estilização: CSS e SASS Padrão de Estilização: BEMCSS
Componentes da Aplicação:
- CardPost
- Componente responsável por renderizar na tela inicial os posts em forma cartões estilizados com aparência de pequenos cadernos.
- Scrolltop
- Componente responsável por rolar a página de volta para o topo.
Páginas da Aplicação:
- Home
- Faz a requisição à api de posts da Apiki que após recebida a estrutura de dados, renderiza os posts retornados através do componente CardPost, fazendo todo o tratamento de paginação exigido nos requisitos.
- PostDetails
- Em posse da propriedade slug recebida pelo roteamento, ao carregar está página faz uma requisição à api dessa vez solicitando os detalhes do post selecionado na página Home. Antes de renderizar é feito um tratamento no conteúdo retirando algumas tags de parágrafo e aplicado estilização no texto para deixar o texto melhor apresentável.
A aplicação si adapta as diferentes telas aplicando o conceito de responsividade.
SEO Infelizmente devido a limitação do framework ReactJs que trabalha de forma assíncrona na geração de suas páginas, fazendo com que os robôs dos motores de buscas não consigam enxergar as páginas do blog, isto é, às tornando não indexáveis, o requisito de SEO, por hora, não pode ser cumprido neste pull request. Já existem soluções que superam essa limitação no universo React como exemplo do NextJs, mas ainda não domino tal tecnologia e já a estou estudando atualmente. Com o NextJs a limitação de SEO quanto à indexação das páginas seria facilmente resolvida.