Teste Técnico Frontend
Warren
CSS, Typescript, Jest, Cypress, Vue
Porto Alegre - Brasil
Finanças
100 - 500
Chega de complexidade quando o assunto é investimento.
Sobre o Teste
Para o desafio técnico "Desafio Warren - Web", deverão ser utilizadas as seguintes tecnologias: VueJs, TypeScript, Webpack, Less, Jest, Cypress e Axios. O desafio consiste em implementar uma tela de lista de transações com filtros e um modal para exibir os detalhes de cada transação. Será avaliado a documentação, testes, design da solução/arquitetura, código, padrões de nomenclaturas de CSS, usabilidade e o uso de algum framework moderno como Vue, React, Angular, entre outros. É importante notar que não é recomendado utilizar bibliotecas de componentes como Bootstrap ou Ant Design.
Instruções do Teste
Desafio Warren - Web
Contexto
O desafio será implementar uma tela de lista de transações apresentando os principais dados relacionado a cada uma delas, ao clicar em uma transação será exibido um modal contendo os detalhes desta transação. O desafio deverá conter as seguintes funcionalidades:
- Lista de transações agrupada por data
- Filtro por título
- Filtro por status
- Modal contendo os detalhes da transação
Telas
Segue abaixo alguns exemplos de telas para uma base, mas sinta-se à vontade para usá-las como referência ou não.
Lista de transações
Modais
Modal de depósito
Modal de resgate
Modal de Movimentação interna
Tecnologias
Aqui na Warren utilizamos as seguintes tecnologias, novamente sinta-se à vontade para usá-las ou não.
- VueJs
- TypeScript
- Webpack
- Less
- Jest
- Cypress
- Axios
O que será avaliado
Principal
- Documentação (comente sobre decisões técnicas, escolhas, requisitos, etc);
- Testes (muito importante!);
- Design da solução/arquitetura;
- Código (Modularização, Nomenclaturas, Padronização, Reutilização);
- Utilizar padrões de nomenclaturas de CSS;
- Preocupação com usabilidade;
- Utilizar alguma lib/framework moderno (Vue, React, Angular, outro);
Interessante (Não fundamental)
- Preocupação com performance;
- Preocupação com acessibilidade;
- Interface responsiva;
- TypeScript
Não recomendamos utilizar alguma lib de componentes como, por exemplo, bootstrap, Ant Design, entre outras.
Mocks utilizados para desenvolver o desafio:
GET: https://warren-transactions-api.herokuapp.com/api/transactions
[{"id": "5f89f9f257fe42957bf6dbfd","title": "Resgate","description": "et labore proident aute nulla","status": "created","amount": 2078.66,"date": "2018-12-22","from": "Aposentadoria","to": "Conta Warren"},{"id": "5f89f9f271e4213092bd4e41","title": "Depósito","description": "excepteur veniam proident irure pariatur","status": "created","amount": 148856.29,"date": "2017-07-23","from": "Trade","to": "Conta Warren"},{"id": "5f89f9f2f318e70ff298f528","title": "Movimentação interna","description": "eu officia laborum labore aute","status": "processed","amount": 25092.8,"date": "2016-08-25","from": "Férias","to": "Trade"}]
GET: https://warren-transactions-api.herokuapp.com/api/transactions/:id
{"id": "5f89f9f23e427f64fc2ea101","title": "Depósito","description": "aute aliqua eu excepteur et","status": "processing","amount": 51668.85,"date": "2020-01-01","from": "Férias","to": "Conta Warren"}