alpfilho / gazin-tech-desafio-frontend

Minha proposta para o desafio de desenvolvimento front-end da Gazin Tech

🎬 Desafio Front-end Gazin Tech

💻 Resultado Final:

📲 Destaques do Projeto:

💫 Biblioteca visual de componentes
✨ Temas dark e light
💫 Base de dados em português mantida pela comunidade
✨ Testes unitários para componentes
💫 Cache do front-end com geração estática incremental
✨ Imagens otimizadas
💫 CI / CD
✨ Typescript

📃 Escopo do desafio:

Leia o Desafio Completo.

Resumo:

Desenvolver uma aplicação Front-end na linguagem/framework de sua preferência, tendo como requisito ser em SPA (single-page application) e atender os requisitos listados abaixo.

Você deve seguir como base para o desenvolvimento do layout da aplicação o seguinte mockup:

► Mockup - Figma

[...]

Resolução:

Seguindo o enunciado do desafio e seus requisitos, desenvolvi em 60 horas de trabalho, um front-end SPA com React para exibir informações sobre filmes.

Eu ainda não tinha conhecimento em server side rendering, mas por notar que a Gazin utilizava NextJS em sua stack, decidi estudar e desenvolver o projeto usando o framework.

Portanto, para o front-end, utilizei:

1. next como base do desenvolvimento.

   Apesar de nascer como um framework para renderização da interface no servidor, o next oferece ferramentas muito robustas para otimização do front-end e eu o utilizei gerando as páginas de forma estática no momento da build. Utilizando funcionalidades recém lançadas da versão 12, conforme os usuários vão acessando, as páginas são re-geradas se necessário e "cacheadas".

2. styled-components e sanitize.css para estilização.

   Basicamente, toda a estilização foi criado do zero a partir de uma base normalizada. styled-components é uma biblioteca de estilizações CSS in JS com escopo fechado por componentes. sanitize.css é uma lista de estilos criados para normalizar o comportamento dos diferentes navegadores do mercado.

3. fontawesome para ícones.

4. framer-motion para animações.

   É uma biblioteca de animações focada em componentes React. É uma boa utilidade para desenvolver animações com rapidez, mas também oferece ferramentas para criar interações do zero.

Os componentes banner e listFilms utilizam um slider e um carousel que foram feitos do zero. Não utiizei bibliotecas prontas e desenvolvi uma solução otimizada para a aplicação.

Biblioteca visual de componentes e Storybook:

Storybook

Biblioteca Chromatic

A base de dados TMDB:

No desafio, foi sugerido usar a API do IMDB da RapidAPI. Mas depois de muitas horas insistindo e desenvolvendo uma integração que atendesse as necessidades do projeto, percebi que usar esta API iria limitar demais a aplicação final que eu estava desenvolvendo.

Os motivos foram:

1. O limite de requisições gratuítas do serviço é ridiculamente pequeno.

   Numa conta gratuíta era possível fazer apenas 500 requisições por mês. Apenas nos testes iniciais, mesmo fazendo cache em memória das requisições, eu já tinha gasto quase 200 requisições. Nos primeiros acessos de usuários reais eu já excederia o limite mensal e a aplicação seria inutilizada por várias semanas.

2. Péssima documentação de endpoints.

3. Resultados arbitrários e não normalizados.

4. A API retorna apenas informações em inglês (não existe opção de troca de idioma, como está escrito no enunciado do desafio).

Outra API da RapidAPI que abri mão de usar foi a de traduções do google translate, por conta do limite baixíssimo de 500 caracteres por mês. Isso mesmo, 500 caracteres de traduções por mês. Isso significa que ao traduzir um título "Iron Man" para "Homem de Ferro", eu já gastaria 8 caracteres da cota mensal, até espaços contam. Qualquer tradução de sinopse já gastaria fácil a cota de 500 caracteres.

Busquei outras provedoras de API que ofereciam dados da base do IMDB, mas todas tinham alguma limitação. Os dados não eram consistentes, não exisitia suporte integral ao português e o limite de requisições era baixo.

Então, o que eu decidi fazer para desenvolver uma aplicação com dados de qualidade, foi abrir mão da base de dados do IMDB (Internet Movie Database) e passar a usar a base de dados alternativa criada e mantida pela comunidade, TMDB (The Movie Database).

Esta é completamente aberta ao público, não há limite de requisições e é muito mais focada na internacionalidade, portanto, o português é completamente suportado, excluindo a necessidade de usar API's de tradução. A documentação é melhor que a da RapidAPI e os dados são melhor distribuídos entre os endpoints, diminuindo a quantidade de requests necessárias para obter informações completas.

Executar o projeto localmente:

1. Clone o projeto:

git clone https://github.com/alpfilho/gazin-tech-desafio-frontend.git

2. Copie o .env de exemplo e forneça uma Api Key do IMDB:

cp .env.local.example .env.local

3. Instale as dependências:

yarn install

4. Execute:

   • Para a versão de desenvolvimento:

     yarn dev

   • Para a versão de produção:

     yarn build;
     yarn start