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.
- 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.
Seguem as configurações neessárias para visualizar a aplicação em sua máquina.
- 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
- Clone o back-end conforme orientações do repositório que pode ser acessado através do link Back-end GoFinances.
- Inicie o back-end conforme orientações do repositório que pode ser acessado através do link Back-end GoFinances;
- 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
- 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.
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.
Esse projeto está sob MIT license. Veja LICENSE para mais informações.
Feito por Bela Ferreira 💙 Contato: https://www.linkedin.com/in/belapferreira 😊