Aplicação desenvolvida visando explorar e experimentar algumas tecnologias como:
- TypeScript
- GraphQL / Apollo
- React Hooks
- Inicialize o projeto com o comando
docker-compose up. Prossiga mesmo com a falha. - Instale as dependências da aplicação com o comando
docker-compose run --rm app npm install - Instale as dependências da API com o comando
docker-compose run --rm api npm install - Com as dependências instaladas, execute novamente
docker-compose up
A aplicação conta com duas telas que serão descritas junto aos respectivos prints abaixo.
A Página de Listagem de Personagens é a página inicial da aplicação e realiza uma listagem inicial de Personagens por ordem alfabética.
A listagem conta também com um campo de busca que permite filtrar os Personagens pelo nome de acordo com o valor informado no campo:
Ao clicar no card de um Personagem, o usuário é levado até a Página de Personagem.
Uma feature de "Carregar mais" ou de paginação não foi implementada em função das queries envolvendo paginação com offset e cursores estarem não funcionais na API GraphQL utilizada junto ao projeto. (Items 3 e 4 TODO)
A Página de Personagem exibe o nome, foto e descrição do Personagem clicado.
Ao clicar no botão Load Character Series uma listagem de cards das séries que o Personagem participou ou participa é exibida na tela.
Clicando no botão Edit Character uma pequena modal permite que o nome, a foto e a descrição do Personagem sejam atualizados.
Ao alterar os valores nos campos da modal, os elementos na Página do Personagem (nome, título, descrição) são também são atualizados. Ao clicar em Submit os dados são persistidos no localStorage. Através do recurso de TypePolicies do Apollo Client, os dados editados do Personagem são exibidos na Página de Listagem e na Página do Personagem.
- Testes Unitários / Funcionais.
- Testes End-to-End.
- Correção das queries com paginação e cursores.
- Implementação das Features de Paginação / Load More.
- Permitir a edição das séries do Personagem.