https://github.com/leandroppf/gostack-desafio-fundamentos-reactjs

GoStack Desafio 07: GoFinances Web
https://github.com/leandroppf/gostack-desafio-fundamentos-reactjs

Last synced: 11 days ago
JSON representation

GoStack Desafio 07: GoFinances Web

• Host: GitHub
• URL: https://github.com/leandroppf/gostack-desafio-fundamentos-reactjs
• Owner: leandroppf
• Created: 2020-04-25T12:46:13.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T11:08:05.000Z (almost 2 years ago)
• Last Synced: 2024-04-28T06:25:08.331Z (7 months ago)
• Language: TypeScript
• Size: 4.41 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 21
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        




  Desafio 07: GoFinances Web



“Não espere resultados brilhantes se suas metas não forem claras”!




  

  

    

  

  

  

    

  



## :rocket: Sobre o desafio

Nesse desafio, o objetivo era continuar desenvolvendo a aplicação de gestão de transações, a GoFinances. Para esse desafio foi utilizado React.js junto com TypeScript, utilizando rotas e envio de arquivos por formulário.

Essa aplicação se conecta com o backend do [Desafio 06](https://github.com/leandroppf/gostack-desafio-typeorm-upload), e exibe as transações criadas e permitindo 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 criado pela equipe da Rocketseat.

O layout pode ser acessado através da página do Figma, no [seguinte link](https://www.figma.com/file/EgOhyj1Inz14dhWGVhRlhr/GoFinances?node-id=1%3A863).

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

- **`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](https://github.com/Rocketseat/bootcamp-gostack-desafios/blob/master/desafio-database-upload/assets/file.csv).

### Específicação dos testes

O template também possui testes automatizados e um dos objetivos é que o código criado passe em todos os testes listados abaixo:

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

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

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

---

Desafio concluído no dia 25/04/2020 por Leandro Pinto Pedroso Filho