O projeto desenvolvido é o GoFinances Web, a continuação de uma aplicação para armazenar transações financeiras de entrada e saída e permitir o cadastro e a listagem dessas transações, além de permitir a criação de novos registros no banco de dados a partir do envio de um arquivo csv. Nessa etapa foi utilizado o que foi aprendido sobre ReactJS junto com TypeScript, utilizando rotas e envio de arquivo por formulário.

Funcionalidades   |    Configurações necessárias   |    Clonando o repositório   |    Iniciando a aplicação   |    Tecnologias | Ferramentas | Recursos   |    Licença

Durante as aulas do RocketSeat GoStack Bootcamp foram aprendidos conteúdos relacionados a ReactJS junto com TypeScript, utilizando a biblioteca Styled Components para estilizar a aplicação. Para treinar o que foi aprendido até o momento foi feita a conexão com o back-end desenvolvido no exercício anterior e a estilização da aplicação, exibindo as transações criadas e permitindo a importação de um arquivo CSV para gerar novos registros no banco de dados.

Funcionalidades

• Criação de transações financeiras de entrada e saída;
• Listagem das transações registradas;
• Criação de novos registros no banco de dados a partir do envio de um arquivo csv.

✔️ Configurações necessárias

Seguem as configurações neessárias para visualizar a aplicação em sua máquina.

• Git;
• Node;
• Yarn.

🔽 Clonando o repositório

1. Pelo terminal, acesse o diretório em que deseja ter o repositório clonado e execute o comando a seguir.

# clonando o repositório
git clone https://github.com/belapferreira/fundamentos-reactjs

2. Clone o back-end conforme orientações do repositório que pode ser acessado através do link Back-end GoFinances.

🔰 Iniciando a aplicação

1. Inicie o back-end conforme orientações do repositório que pode ser acessado através do link Back-end GoFinances;
2. Pelo terminal, acesse o diretório do repositório do front-end clonado e execute os comandos abaixo.

# instalando as dependências
yarn install

# iniciando a aplicação
yarn start

🔍 Realizando os testes

1. Foi usado um template que contém testes para orientar o que esperava-se dos blocos de códigos a serem programados. Para verificar se qualquer alteração realizada atende aos requisitos solicitados, acesse o terminal e execute o seguinte comando:

# testando atendimento aos requisitos
yarn test

Na pasta assets que faz parte da pasta src há um arquivo chamado teste.csv que pode ser utilizado para testar a funcionalidade da rota de importação.

Você pode utilizar ferramentas como o Insomnia, o Postman e o Postwoman para testar as rotas e requisições configuradas e o DBeaver para acompanhar a criação das tabelas e registros no banco de dados.

🔧 Tecnologias | Ferramentas | Recursos

Esse projeto foi desenvolvido utilizando os seguintes recursos:

• Axios;
• Editor Config;
• Eslint;
• Filesize;
• Jest;
• History;
• Polished;
• Prettier
• React;
• React DOM;
• React Dropzone;
• React Router Dom;
• React Scripts;
• Styled Components;
• TypeScript.

📝 License

Esse projeto está sob MIT license. Veja LICENSE para mais informações.

---

Feito por Bela Ferreira 💙 Contato: https://www.linkedin.com/in/belapferreira 😊