Desafio para ingressar como Front-end Developer na 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.
Estamos buscando alguém para trabalhar com o desenvolvimento web direcionado para nossa apresentação institucional. Nessa atividade, iremos contar contigo para:
- Atualizar e implementar funcionalidades em nosso website institucional;
- Implementar integrações de nosso website com ferramentas de marketing como RD Station e Google Analytics;
- Implementar integrações com ferramentas de gestão de conteúdo (CMS), Wordpress, Contentful ou similares para disponibilizar e organizar posts em nosso blog ou e-commerce e similares;
- Dar suporte à equipe de marketing em atividades que envolvem funcionalidades web;
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.
Neste desafio avaliaremos sua capacidade de implementar uma landing page com design pré definido, para ser visualizada em dispositivo desktop.
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
- Ao clicar em "Ver Mais" usuário deve ser redirecionado para https://dynamox.net/dynapredict/.
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;
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;
- A utilização de React é obrigatória para ambos os desafios;
- O restante das ferramentas fica a seu critério;
- Componentes reutilizáveis;
- Organização e documentação do código;
- Usabilidade;
- Layout responsivo (seja criativo!);
- Utilização de NextJS ou Gatsby no desafio 01;
- 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-ac/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;
-
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. 🚀