Teste Técnico Frontend

Chaordic- Linx

CSS, React, Typescript

Brasil

Software

1 - 10

/linxretail
/chaordic/
linx.com.br

A Linx é uma empresa líder de software de gestão de varejo.

Sobre o Teste

Neste desafio OMS challenger, você utilizará as tecnologias React, Redux, HTML semântico e pré-processador SASS para construir uma página de tratamento de entregas. Através da API Express e do arquivo ""pedido.json"", você criará um layout semelhante ao da tela ""Tratamento de entregas.pdf"". A página deverá ser desenvolvida do topo para o rodapé, seguindo a ordem do header, dados do cliente, dados do pagamento, dados do pedido, entrega F1 e entrega F2. Ao clicar em uma entrega, a tela deverá expandir para exibir os detalhes da entrega. Serão avaliados a estrutura dos componentes, organização do código, fidelidade ao PDF e porcentagem de layout desenvolvido. Você pode se diferenciar documentando os componentes, utilizando flexbox, hooks, TypeScript, atomic design, react refs e implementando testes. Boa sorte no desafio!

Instruções do Teste

Link para o teste técnico original

OMS challenger

O objetivo é construir uma página de tratamento de entregas, à partir de uma api utilizando express que responda ao arquivo pedido.json. O layout deverá ficar o mais próximo possivel da tela Tratamento de entregas.pdf.

Instruções

  • Forke esse repositório e faça o desafio numa branch com o seu nome (exemplo: nome-sobrenome);
  • Abra um pull request com sua implemetação inicial e no decorrer do desafio pode ir aplicando commits com seus ajustes
  • A tela deverá ser criada do topo para o rodapé. Criando primeiramente o header(Pedido, Status do pedido e Entregas relacionadas), Dados do Cliente, Dados do pagamento, Dados do Pedido, Entrega F1 e Entrega F2. Ao clicar em uma das entregas deverá expandir a tela com as inforemações de Dados da Entrega e Detalhes da Entrega
  • Caso tenha alguma dúvida envie um e-mail para [email protected]

O que iremos avaliar

  • Extrutura dos componentes.
  • Organização do código.
  • Fidelidade com o pdf.
  • Porcentagem do layout desenvolvido.

Requisitos

  • HTML o mais semântico possível.
  • Uso de react e redux.
  • O uso do pré-processador SASS.
  • HOC(Higher-Order Component).
  • Stateless e statefull components.
  • ComponentDidMount, ComponentDidUpdate.
  • Render props.
  • React props children.

Diferenciais

  • Documentação dos componentes.
  • Usar flex box.
  • Hooks
  • TypeScript
  • atomic design
  • Uso do react refs.
  • Implementação de testes