/teste-front-end-Dynamox

Teste para avaliação de desenvolvedor front end.

Desafio Front-end Dynamox

Desafio para ingressar como Front-end Developer na Dynamox

Sobre a Dynamox

A Dynamox é uma empresa de alta tecnologia que desenvolve sistemas de monitoramento e aquisição de dados de vibração e temperatura. Somos uma empresa especialista em análise de vibrações e monitoramento da condição de ativos industriais.

Todas as soluções são desenvolvidas por nossa equipe, desde o hardware até a aplicação web. Nossa equipe é formada por desenvolvedores de hardware, firmware, mobile (android e ios) e web (backend e frontend), além de engenheiros especializados na área de processamento de sinais para vibração e acústica.

Sobre a vaga e os desafios

Estamos buscando alguém que se identifique com o perfil da vaga e que possa integrar uma de nossas frentes de desenvolvimento:

  • Relações Públicas (presença institucional);
  • DynaPredict;

Para isso, sugerimos dois desafios. O primeiro para avaliar como você implementa um design definido para uma landing page e o segundo para avaliar suas abilidades em realizar operações básicas de CRUD e chamadas a uma api.

Desafio 01 - Landing page

Neste desafio avaliaremos sua capacidade de implementar uma landing page com design pré definido, para ser visualizada em dispositivo desktop.

Protótipo do Figma

Requisitos funcionais:

Header

  • Ao clicar no logo Dymamox, usuário deve ser redirecionado para https://dynamox.net/
  • Ao clicar em “DynaPredict”, usuário deve ser redirecionado para https://dynamox.net/dynapredict/
  • Ao clicar em "Sensores", usuário deve ser movido para a seção de sensores da landing page.
  • Ao clicar em "Contato", usuário deve ser movido para seção de contato da landing page.

Sensores

Contato

  • Ao clicar em "Enviar", website deve emitir alerta contendo o conteúdo dos campos do formulário de contato.

Critérios de avaliação:

  • Design: implementação do layout de acordo com o layout proposto;
  • Funcionalidades: redirecionamentos para links e seções e disparo de funções no browser;
  • Semântica e SEO: utilização de tags e metatags html adequados;

Tecnologias, frameworks e bibliotecas

  • A utilização de React é obrigatória;
  • O restante das ferramentas fica a seu critério;

Diferenciais

  • Componentes reutilizáveis;
  • Organização e documentação do código;
  • Usabilidade;
  • Layout responsivo (seja criativo!);
  • Utilização de NextJS ou Gatsby;

Desafio 02 - Autenticação e CRUD

Neste desafio avaliaremos sua capacidade de realizar operações básicas de criação, leitura, atualização e remoção de dados a uma api fake. Neste desafio, não serão avaliadas questões relacionadas ao design da aplicação.

Desenvolva uma tela de autenticação fake. O login pode ser feito com e-mail e senha fixos, porém as rotas devem ser privadas e as requests à API devem simular o envio do token JWT, que também poderá ser fake.

Requisitos funcionais:

  • Aplicação deverá ter telas de criação, edição e listagem de produtos, com os campos:

    • Nome;
    • Data de fabricação;
    • Produto perecível (booleano);
    • Data de validade;
    • Preço;

  • O usuário só deverá ter acesso às rotas de criação, edição e listagem de produtos caso esteja autenticado;

  • O usuário só poderá cadastrar data de validade caso o produto seja perecível;

  • A data de fabricação nunca deverá ser maior que a data de validade;

  • O preço deverá estar em reais (R$);

  • A tela de listagem deverá ter a possibilidade de ordenação dos campos e com uma paginação de 10 produtos por página.

  • O backend deve ser simulado com json-server, que cria uma API REST fake;

Tecnologias, frameworks e bibliotecas

  • A utilização de React é obrigatória;
  • A utilização de Redux para controle de estados globais é obrigatória;
  • O restante das ferramentas fica a seu critério;

Diferenciais

  • Utilizar Redux Saga para controle de efeitos colaterais assíncronos;
  • Componentes reutilizáveis;
  • Organização e documentação do código;
  • Usabilidade;
  • Layout responsivo (seja criativo!);

Pronto para começar os desafios?

  • Faça um "fork" desse repositório na sua conta do Github;
  • Crie uma branch com o seu nome, sobrenome e desafio: desafio-01/caroline-oliveira;
  • Após completar o desafio, crie um "pull request" para este repositório (dynamox-s-a/teste-front-end) comparando a sua branch com a master;
  • Faça isso para cada um dos desafios separadamente;
  • Receberemos uma notificação do seu pull request, faremos a avaliação da sua solução e entraremos em contato;

FAQ

  • Posso usar o create-react-app para completar o desafio? Sim, você pode usar qualquer cli para criar seu projeto

  • Posso usar o Next ou Gatsby para completar o desafio? Sim e até gostaremos de ver que usou alguma dessas ferramentas!

  • Preciso necessariamente fazer um fork do projeto? Sim, para que possamos saber quanto tempo você levou para executar o desafio

  • Posso usar MaterialUI no projeto? Sim e até gostaremos de ver que utilizou algum framework ou bibliotecas de react para UI.

  • Tenho mais dúvidas, com quem posso entrar em contato? Entre em contato com Calil (Front-end Developer)

Boa sorte. 🚀