Curadoria de filmes

Depois do trabalho alguns amigos quiseram assistir um filme juntos. O problema apareceu logo: "Que filme vamos assistir?". Cada um parecia ter seu próprio gosto para filmes e estava difícil decidir.

Para resolver isso, Vanessa deu a ideia:

Vamos fazer um app online com uma lista de filmes onde todos poderão dizer quais filmes acham bons ou ruins. O que acham?

O Bruno respondeu:

Acho que vale a pena. Deveríamos fazer um MVP desse app só com funcionalidades básicas e ver se nos ajuda.

Todos acharam uma boa ideia. Os requisitos do MVP do projeto "Curadoria de filmes" foram definidos como no próximo tópico.

Curadoria de filmes. Requisitos do MVP.

• Apenas código front-end será escrito para esse projeto: html5, css e javascript.
• Será usada a API versão 4 de filmes do The Movies Database
• Pré-processadores css podem ser usados à vontade.
• O projeto deve ser uma single page application (SPA) escrita utilizando Angular 1.x, VueJS 2.x ou React.
• O projeto consiste apenas em 3 telas: Tela inicial, Filmes curtidos, Filmes não curtidos.
• Cada tela precisa ter uma url própria;
• As telas devem ser responsivas;
• Não é preciso se goo com persistência dos dados. É esperado que os dados sobre "Filmes curtidos / filmes não curtidos" seja perdido com o recarregamento da página, mas não na troca de abas do projeto.
• Repetindo: ao trocar entre abas do projeto os dados sobre "filmes curtidos/filmes não curtidos" devem permanecer. Não é necessário que eles persistam depois de um recarregamento.
• Não precisa se preocupar com contas de usuário. O MVP não possui dados de usuário.

Tela "Filmes não curados"

• É a tela inicial;
• Exibe um card de filme de uma lista de filmes;
• Um botão "Não curti!" que adiciona o filme na lista de "Filmes não curtidos";
• Um botão "Pular" que remove o filme da lista de filmes não curados;
• Um botão "Curti" que adiciona o filme na lista de "Filmes curtidos.";
• Essa lista vem da API do The Movie Database;
• A lista de filmes contém apenas filmes que ainda não foram curados.

Informações do card de filme

• Título do filme;
• Foto de destaque;
• Ano do filme;
• Categoria do filme;
• Classificação/rating do filme;
• Trecho da sinopse clicável com até 100 caracteres seguidos de "...";
• Ao clicar no trecho da sinopse a sinopse completa deverá aparecer em um modal bloqueante;

Tela "Filmes curtidos"

• Apresenta todos os filmes que foram marcados como "Filmes curtidos".
• A lista desses filmes é ordenada de acordo com a data em que o filme foi curado, os curados a menos tempo aparecem no topo.
• No MVP não é possível descurtir um filme depois que ele estiver nessa lista.

Tela "Filmes não curtidos"

• Apresentam todos os filmes que foram marcados como "Filmes não curtidos".
• A lista desses filmes é ordenada de acordo com a data em que o filme foi curado, os curados a menos tempo aparecem no topo.
• No MVP não é possível curtir um filme depois que ele estiver nessa lista.

Design do projeto

As telas do filmes estão no Marvel. Você pode verifica-las nos seguintes links:

Mobile

• Filmes não curados
• Modal de sinopse
• Menu aberto
• Filmes curtidos
• Filmes não curtidos

Desktop

• Filmes não curados
• Filmes curtidos. Estado vazio
• Filmes não curtidos. Estado vazio
• Filmes curtidos
• Filmes não curtidos
• Modal de sinopse

Especificações de design

• Cores/opacidade do degradê vermelho do fundo: De #ff1c1c ao #ff5656 60% alfa;
• Tamanho da foto principal no mobile: 294 x 350;
• Tamanho da foto principal no desktop: 700 x 460;
• Tamanho da foto do card de lista no mobile: 145 x 174;
• Breakpoint phone - até 320px de largura;
• Breakpoint desktop - a partir de 321px de largura;
• Tamanho da foto do card de lista no desktop: 294 x 350.

Assets

Confira aqui no repositório os assets desse projeto

Implementação inicial opcional

• O desenvolvedor @teles começou parte do projeto nesse repositório e se quiser você pode continuar seu projeto a partir desse código.

IMPORTANTE: Usar a implementação desses recursos não é imprescindível e não vale pontos extras.

Critérios de avaliação

• Fidelidade ao layout solicitado;
• Fidelidade às funcionalidades solicitadas;
• Componentização e extensibilidade dos componentes Javascript;
• Clareza de nomenclatura do CSS;
• HTML estruturado de forma semântica;
• Adesão ao mobile first.

Pontos extras

• Desenvolvimento de testes unitários no Javascript;
• Uso de mock de chamadas Ajax nos testes unitários;
• Padronização do código: seguir algum styleguide de Javascript e/ou CSS;
• Aplicação de alguma forma de dados estruturados ao HTML;
• Aplicação das animações de transição.