“Não espere resultados brilhantes se suas metas não forem claras”!
Sobre o desafio | Funcionalidades da aplicação | Especificação dos testes
Nesse desafio vou iniciar o Front-end da aplicação de gestão de transações, a GoFinances, e colocar em prática o que eu aprendi até o momento com ReactJS junto com Typescript, utiizando rotas e envio de arquivos por formulario
A Aplicação deve conectar com o backend já desenvolvido, e exibir as transações criadas e permitir a importação de um arquivo CSV para gerar novos registros no banco de dados.
Caso tenha interesse, segue os Links do Repositório:
- Back-end: Repositório - Back-end da Aplicação
-
Listar os repositórios da sua API: Sua páginaDashboarddeve ser capaz de exibir uma listagem através de uma tabela, com o campotitle,value,typeecategoryde todas as transações que estão cadastradas na sua API. -
Exibir o balance da sua API: Sua páginaDashboard, você deve exibir o balance que é retornado do seu backend, contendo o total geral, junto ao total de entradas e saídas. -
Importar arquivos CSV: Na sua páginaImport, você deve permitir o envio de um arquivo no formatocsvpara o seu backend, que irá fazer a importação das transações para o seu banco de dados. O arquivo csv deve seguir o seguinte modelo.
Em cada teste, tem uma breve descrição do que a aplicação deve cumprir para que o teste passe.
Caso você tenha dúvidas quanto ao que são os testes, e como interpretá-los, dé uma olhada em nosso FAQ.
Para esse desafio, temos os seguintes testes:
should be able to list the total balance inside the cards: Para que esse teste passe, sua aplicação deve permitir que seja exibido na sua Dashboard, cards contendo o total deincome,outcomee o total da subtração deincome - outcomeque são retornados pelo balance do seu backend.
should be able to list the transactions: Para que esse teste passe, sua aplicação deve permitir que sejam listados dentro de uma tabela, toda as transações que são retornadas do seu backend.
Dica: Para a exibição dos valores na listagem de transações, as transações com tipo income devem exibir os valores no formado R$ 5.500,00. Transações do tipo outcome devem exibir os valores no formado - R$ 5.500,00.
should be able to navigate to the import page: Para que esse teste passe, você deve permitir a troca de página através do Header, pelo botão que contém o nomeImportar.
Dica: Utilize o componente Link que é exportado do react-router-dom, passando a propriedade to que leva para a página /import.
should be able to upload a file: Para que esse teste passe, você deve permitir que um arquivo seja enviado através do componente de drag-n-drop na página deimport, e que seja possível exibir o nome do arquivo enviado para o input.
Fabiano Vilela - Desenvolvedor Front End
Gostaria de agradecer a todas as pessoas que me apoiam nessa jornada de início de carreira, especialmente a toda minha família e meus amigos que sempre estão me apoiando.