Desafio 07: GoFinances Web

🚀 Sobre o desafio

Nesse desafio a aplicação se conecta ao backend do Desafio 06, e exib as transações criadas e permitir a importação de um arquivo CSV para gerar novos registros no banco de dados.

Layout da aplicação

Essa aplicação possui um layout que você pode seguir para conseguir visualizar o seu funcionamento.

O layout pode ser acessado através da página do Figma, no seguinte link.

Você precisará uma conta (gratuita) no Figma pra inspecionar o layout e obter detalhes de cores, tamanhos, etc.

Funcionalidades da aplicação

• Listar as transações da sua API: A página Dashboardexibe uma listagem através de uma tabela, com o campo title, value, type e category de todas as transações que estão cadastradas na sua API.

• Exibir o balance da sua API: A página Dashboard, exibe o balance que é retornado do seu backend, contendo o total geral, junto ao total de entradas e saídas.

• Importar arquivos CSV: Na página Import, é permitido o envio de um arquivo no formato csv para 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.

Específicação dos 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 de income, outcome e o total da subtração de income - outcome que 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 nome Importar.

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 de import, e que seja possível exibir o nome do arquivo enviado para o input.

📝 Licença

Esse projeto está sob a licença MIT.