Solução do desafio 07: GoFinances Web

Template para iniciar o desafio

Sobre o desafio   |    Layout   |    Funcionalidades   |    Testes da aplicação   |    Execute o projeto   |    Licença

🚀 Sobre o desafio

Essa será uma aplicação que irá se conectar ao seu backend do GoFinances-API-typeorm, e exibir 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

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

Funcionalidades da aplicação

• Listar as transações da sua API: Sua página Dashboard deve ser capaz de exibir 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.

Dica: Você pode utilizar a função Intl para formatar os valores. Dentro da pasta utils no template você encontrará um código para te ajudar.

• Exibir o balance da sua API: Sua página Dashboard, 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ágina Import, você deve permitir 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.

Dica: Deixamos disponível um componente chamado Upload na pasta components para você ter já preparado uma opção de drag-n-drop para o upload de arquivos. PS: Caso você esteja no windows e esteja sofrendo com algum erro ao tentar importar CSV, altere o tipo de arquivo dentro do arquivo components/upload/index.ts de text/csv para .csv, application/vnd.ms-excel, text/csv.

Dica 2: Utilize o FormData() para conseguir enviar o seu arquivo para o seu backend.

💉 Testes da aplicação

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 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.

Dica: Deixamos disponível um componente chamado FileList na pasta components para ajudar você a listar os arquivos que enviar pelo componente de Upload, ele deve exibir o título do arquivo e o tamanho dele.

🏁 Execute o projeto localmente:

# Clone este repositório
$ git clone https://github.com/JonasCastro/GoFinances-Web.git

# Acesse a pasta do projeto no terminal/cmd
$ cd GoFinances-Web

# Instale as dependências
$ yarn

# Execute a aplicação
$ yarn start
 

📝 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

---

• Feito com 💙 by Jonas Castro 👋 Stay in touch!
• Desafio feito com 💜 by Rocketseat 👋 Entre na nossa comunidade!