Desafio técnico para vaga de Desenvolvedor Frontend Senior na Pilar.

Front-end: Vue.js 3, Vite, Typescript, Tailwindcss

Acesse o arquivo do figma e tenha acesso as minhas insipirações para esse projeto e ao layout que eu desenvolvi 😊

Clique para acessar o Movie Now no Figma

Clique para acessar o Movie Now meu projeto para o desafio técnico da Pilar.

O projeto foi publicado usando o Firebase Hosting. Para que por meio desse eu pudesse acessar o projeto em tempo real e aprender mais sobre a ferramente e a configuração de 'enviroment variables'.

• Home Page

• Slider automático com lançamentos recentes

• Busca por filmes e séries por nome

• Lista de filmes em cartaz no cinema no Brasil (os 20 últimos lançamento disponíveis)

• Lista de filmes populares desenvolvido com Infinity Scroll, carregando mais itens conforme o usuário rola o carrosel

• Lista de filmes e séries com filtro por gênero e ordenação

• Página de detalhes do filme ou série

• [] Implementação do firebase auth
• [] Implementação de um sistema de favoritos salvo no firebase firestore
• [] Implementação de um sistema de comentários usando o Hyvor Talk
• [] Melhorias no design para melhorar a acessibilidade do layout
• [] Melhorias de SEO para mehorar o rank do site nos motores de busca

Clone o projeto

  git clone https://github.com/KlaytonJr/Pilar-Challenge-Web.git

Entre no diretório do projeto

  cd Pilar-Challenge-Web

Instale as dependências

  npm install

Inicie o servidor

  npm run dev

A nível de documentação, antes de fazer o deploy e da implementação do Lazy Loading para as imagens as métricas de performance eram as da imagem anterior. Após a implementação do Lazy Loading, as métricas de performance melhoraram bastante e com o deploy da aplicação as métricas melhoraram relativamente ao que era antes devido as otimizações feitas ao 'buildar' a aplicação.

Com base no Lighthouse, a aplicação tem um score de 100 em performance, 92 em acessibilidade, 91 em SEO e 100 em melhores práticas. Para melhorar a acessibilidade e SEO, pode ser feito u estudo a cerca do uso de meta tags, bem como o uso de tags semânticas para melhorar a indexação da aplicação e melhorias no design da aplicação para atender todos as objeções de acessibilidade, atendendo aos requisitos da WCAG (Web Content Accessibility Guidelines (WCAG) 2.1) da W3C.

Para rodar os testes unitários, execute o seguinte comando

  npm run test:unit

Para verificar a cobertura de testes, execute o seguinte comando

  npm run test:coverage

Em meus testes cheguei ao seguinte resultado de cobertura de testes

Para rodar os testes unitários, execute o seguinte comando

  npm run test:e2e:dev

Os testes automatizados com Cypress foram feitos para testar a navegação da aplicação e a busca de filmes e séries.