Teste Técnico Frontend

Tagview

CSS, React, Angular, Vue

Campinas - Brasil

Software house

1 - 10

/tagview-tecnologia
/tagview
tagview.com.br

A Tagview Tecnologia é uma empresa especializada no desenvolvimeto de soluções Web com tecnologias e métodos ágeis.

Sobre o Teste

Para o desafio técnico do TagChatter, você precisará criar uma aplicação web usando AngularJS, ReactJS ou VueJS. A aplicação consiste em um chat onde os usuários podem conversar e destacar mensagens. Os dados devem ser obtidos de uma API REST e atualizados a cada 3 segundos. Além disso, você precisa implementar a funcionalidade de destacar mensagens ao clicar em um ícone específico e tratar erros aleatórios ao enviar mensagens.

Instruções do Teste

Link para o teste técnico original

Baixar Arquivos do Teste Técnico

TagChatter

Olá!

Estamos empolgados que você se interessou em fazer parte da equipe Tagview! Montamos um desafio baseado em alguns problemas semelhantes aos que resolvemos no nosso dia a dia para que possamos conhecer um pouco mais sobre você.

Preview

Implementação

TagChatter é uma aplicação web onde os usuários conseguem conversar entre si e destacar mensagens.

Em src você encontra um esqueleto da aplicação com alguns exemplos, leia o código com atenção e implemente a sua solução à partir dele.

Os dados devem ser obtidos através da API e você deve usar o layout como base no desenvolvimento.

API

Desenvolvemos uma API REST que deve ser usada para obter os dados dos usuários e mensagens.

Você pode acessar as informações detalhadas e testar os endpoints acessando tagchatter.herokuapp.com/docs

Layout

Você pode visualizar detalhes do layout clicando aqui. Ao criar uma conta no Figma você conseguirá visualizar as medidas e baixar os ícones necessários.

Requisitos técnicos

  1. Deve ser feito um request para /me onde serão obtidos os dados necessários para exibir a imagem do usuário e o seu ID, utilizado no envio de mensagem
  2. A lista de mensagens deve ser atualizada a cada 3 segundos
  3. Ao clicar no ícone papagaio deve-se:
    • Fazer um request para PUT /messages/:messageId/parrot
    • Destacar a mensagem na interface, seguindo o layout
    • Incrementar o contador
  4. Ao clicar no botão enviar, ao lado do campo de texto, deve-se fazer um request para POST /messages e adicionar a nova mensagem na lista exibida
  5. O request para enviar mensagens (POST /messages) falha intencionalmente com uma probabilidade de 25%, retornando um erro 500. Idealmente a sua implementação deve tratar esses erros aleatórios, exibindo um alert (ou outro componente na interface) e permitindo que o usuário tente enviar a mensagem novamente mas você pode desabilitar os erros passando o parâmetro stable. Consulte a documentação da API para mais detalhes.

Bônus (opcional) :star2:

Adicionalmente você pode implementar o unparrot de mensagens, quando o usuário clicar no ícone papagaio de uma mensagem já destacada:

  1. Fazer um request para PUT /messages/:messageId/unparrot
  2. Remover o destaque da mensagem na interface
  3. Decrementar o contador

Requisitos adicionais

  • Você pode continuar a implementação sem nenhum framework ou utilizar AngularJS, ReactJS ou VueJS
  • Você pode utilizar qualquer outra biblioteca adicional que achar necessário (jQuery, por exemplo)
  • As requisições para a API devem ser feitas client-side. Não queremos que você divida a sua aplicação em várias páginas.

Submissão

Envie o URL de um repositório git público para [email protected]. Usamos bastante o GitLab e o GitHub.

Boa sorte!

Nossa análise vai além do resultado final então se você tiver um problema implementando algum detalhe nos envie a sua solução mesmo assim.

Critérios de avaliação

  • Capacidade em assimilar um conteúdo novo
  • Organização
  • Atenção aos requisitos
  • Empenho em entregar algo, mesmo que minimamente funcional
  • Tratamento de erros

Caso tenha dúvidas, envie um e-mail para [email protected] :man_technologist: