3 |
3 | 8 | Sobre o desafio | 9 | Layout | 10 | Entrega | 11 | Bônus 12 |
13 | 14 | ## 💻 Sobre o desafio 15 | 16 | Este desafio consiste no desenvolvimento da interface de uma landing page e uma dashboard. Os mockups estão no figma: 17 | 18 | - Projeto: https://www.figma.com/file/B8scopEM014WR4Oh58UaDb/%5BEduSynch%5D--Front-End-Test 19 | - Landing Page: https://www.figma.com/file/B8scopEM014WR4Oh58UaDb/%5BEduSynch%5D--Front-End-Test?node-id=1%3A1741 20 | - Dashboard: https://www.figma.com/file/B8scopEM014WR4Oh58UaDb/%5BEduSynch%5D--Front-End-Test?node-id=1%3A2555 21 | - Protótipo: https://www.figma.com/proto/B8scopEM014WR4Oh58UaDb/%5BEduSynch%5D--Front-End-Test?node-id=1%3A9253&scaling=min-zoom&page-id=1%3A9229&starting-point-node-id=1%3A9253&hide-ui=1 22 | 23 | Deverá ser utilizado ReactJS (opcional a utilização de algum framework como NextJS) para desenvolvimento da landing e dashboard; 24 | 25 | OBSERVAÇÃO: Para interações com API, sugerimos o uso de uma fake API, como o json-server. 26 | 27 | ## 🔖 Layout 28 | 29 | Você pode visualizar o layout do projeto através desse link. Vale lembrar que você precisa ter uma conta no Figma para acessá-lo. (O cadastro é gratuito) 30 | 31 | ## ⚡️ Funcionalidades 32 | 33 | #### Landing page: 34 | 35 | - Os dados das crypto moedas no topo da página deverão ser carregados da API Rest (SUGESTÃO: https://www.coinapi.io/) 36 | - O Banner do topo deverá ser em forma de carrossel (Mais detalhes no figma) 37 | - Os dados das crypto moedas na seção de "Top Cryptos" deverão ser carregados da API Rest (SUGESTÃO: https://www.coinapi.io/) 38 | - Ação do botão "View more +" deverá mostrar lista completa (10 itens); 39 | - Após expandir a lista, o texto "View more +" deverá ser substituido por "View less"; 40 | - O formulário de Newsletter no rodapé da página deverá ter interação a API Rest 41 | - Implementar ação de "Loading" desabilitando o botão de "Subscribe" até o retorno do servidor; 42 | - Enquanto a ação de subscribe estiver sendo processada o usuário não poderá alterar o campo e-mail (desabilitar o preenchimento do input de texto); 43 | - Após retorno de sucesso do servidor, o campo e-mail deve ser limpo e o botão "Subscribe" deve estar disponível novamente; 44 | - O botão "Sign in" deverá abrir um dialog conforme o layout; 45 | - O input de e-mail deverá ser validado (e-mail válido) 46 | - O input de password deverá ter a ação de mostrar / esconder a senha (clicando no ícone de olho); 47 | - "Forgot password?" não deverá ser implementado (apenas um link fake); 48 | - O botão de "Sign Up" e o link "Don’t have an account? Sign up to CoinSynch" deverão abrir o dialog "Sign Up" conforme o figma; 49 | - Os campos "Name", "Email", "Password", "Confirm Password" e o checkbox "I have read and accept the Privacy Policy and Terms of User Sign up." deverão ser obrigatórios; 50 | - O input de e-mail deverá ser validado (e-mail válido) 51 | - Os inputs Passwords e Confirm Password deverão ser iguais para se tornarem válidos; 52 | - Ao clicar no link "Already have and account? Sign in to CoinSynch" a aplicação deverá abrir o Dialog de "Sign in" no lugar do "Sign Up"; 53 | 54 | 55 | #### Dashboard: 56 | 57 | - O topo da página deverá ter as informações do usuário (Avatar e Nome, esses dados deverão ser consumidos da API Rest) 58 | - O topo também deverá ter um dropdown com uma única opção (Logout); 59 | - Menu lateral com tooltip deverá ter as funções de expandir e minimizar; 60 | - Conteúdo deve ser exibido com os dados consumidos da API; 61 | - O valor exibido no bloco "Balance in US$" deverá ser formatado; 62 | - O bloco "Daily Variation" deverá mostrar um gráfico com dados consumidos da API; 63 | - O bloco "My Wallet" deverá mostrar a lista com dados consumidos da API; 64 | - O botão "Add Crypto" deverá exibir o dialog "Add Crypto" com um select consumindo dados da API; 65 | - Ao clicar no botão "Add Crypto" a listagem no bloco "My Wallet" deverá ser atualizado; 66 | - Ao clicar no ícone da listagem do bloco "My Wallet", deverá ser exibido o dialog de "Transfer Crypto"; 67 | - O Select de "Transfer" deverá listar as opções "Transfer in" e "Transfer out"; 68 | - Caso usuário transfira todo o valor da moeda selecionada, o item deverá ser removido da listagem do bloco "My Wallet"; 69 | - O campo "Quantity" não deverá ter valor negativo; 70 | - Ao remover todas as moedas da sua carteira, deverá ser exibida a mensagem de "Empty data" no bloco "My Wallet". 71 | 72 | ## Entrega 73 | 74 | Ao submeter o desafio: 75 | 76 | - Ter atenção aos detalhes visuais, o mais próximo do mockup do figma; 77 | - O layout deverá ser fluído e responsivo, não desenvolver apenas testando os breakpoints; 78 | - Código limpo e bem organizado; 79 | - Estrutura semântica do HTML; 80 | - CSS bem estruturado; 81 | - Comentar o código, quando necessário, para explicar a intenção de trechos complexos; 82 | - Escrever um bom README explicando como instalar e executar o projeto; 83 | - Otimização dos assets; 84 | 85 | Enviar o link do repositório para dayan@edusynch.com / sean@edusynch.com / rodrigo@edusynch.com. 86 | 87 | ## Bônus 88 | 89 | - Utilização de alguma metodologia CSS (BEM); 90 | - Utilizar Next.js ou CRA (SSR é um bônus); 91 | - Implementação de Testes (unitário, integração, e2e...) 92 | --------------------------------------------------------------------------------