Webapp Financeira
Webapp Finanças
O aplicativo pode ser acessado pelo link: https://financeira.thomazcm.com/
Tópicos
🔹 Acesso
🔹 Autor
| 🪧 Vitrine.Dev | |
|---|---|
| ✨ Nome | Webapp Financeira |
| 🏷️ Tecnologias | Spring, VueJS, Bootstrap, MongoDB |
| 🚀 URL | https://financeira.thomazcm.com/ |
Sobre o projeto
Aplicativo Web para controle de finanças pessoais dos usuários cadastrados. Desenvolvido para fornecer uma interface para as funcionalidades da API REST que fornece o back-end para o funcionamento do aplicativo.
O repositório da API pode ser acessado em: https://github.com/thomazcm/rest-api-financeira
O projeto foi desenvolvido em Java usando o framework Spring com Thymeleaf para o servidor e gerenciamento das views, e Vue.js para a interface do usuário e comunicação client-side com a API.
Acesso
https://financeira.thomazcm.com/
Disponibiliza opções para:
- Cadastro de um novo usuário para que tenha seu próprio registro de despesas e receitas
- Criação rápida de uma conta para demonstração temporária, já com diversos registros salvos
Caso queira rodar o aplicativo localmente
Para hospedar o aplicativo localmente, é preciso que a API back-end também esteja sendo executada, as instruções podem ser encontradas aqui.
Estando a API online, prossiga para os próximos passos para executar o aplicativo web.
Funcionalidades
✔️ Cadastro de Usuários e Autenticação Stateless + Stateful
O aplicativo web utiliza autenticação por JWT para administrar o acesso dos usuários aos dados. Os dados estão armazenados em um banco de dados MongoDB que é acessado por uma API REST em um servidor distinto e atua fazendo a comunicação entre o aplicativo web e o banco de dados. Quando um usuário inicia uma sessão, a aplicação web solicita um Token JSON Web Token (JWT) à API, que é armazenado no sessionStorage do navegador. O token é usado para autenticar pedidos subsequentes à API através do esquema de autenticação Bearer Token.
Se o JWT expirar, o client-side envia um pedido ao servidor da aplicação web para obter um novo token da API. Esta abordagem combina os benefícios de segurança e gestão da autenticação Stateful com os benefícios de escalabilidade e desempenho do uso de uma API separada para armazenamento de dados.
✔️ Cadastro, edição e exclusão de novas despesas e receitas
✔️ Exibição das receitas e despesas do usuário por mês, bem como um resumo gráfico com base nas categorias das despesas
✔️ Geração de usuário demo temporário com despesas e receitas variadas já cadastradas para demonstração
✔️ Layout responsivo para Desktop e Mobile
Executando o projeto
O aplicativo pode ser acessado pelo link: https://financeira.thomazcm.com
Caso queira hospedar uma versão localmente, siga os passos abaixo:
Pré-requisitos
Para executar o servidor localmente, você precisa ter instalado as seguintes ferramentas: JDK, Git e Maven.
Além disso, para que o aplicativo funcione corretamente, é preciso que a API de acesso ao banco de dados também esteja sendo executada. Você pode acessar o repositório da API e as intruções para executá-la aqui.
Para que o banco de dados de autenticação do aplicativo funcione, é preciso ter uma conta grauita no MongoDB Cloud, que pode ser a mesma utilizada no servidor da API.
Rodando o servidor do aplicativo web
- Clone este repositório
git clone https://github.com/thomazcm/webapp-financeira
Na página do MongoDB Atlas, clique em "Browse Collections" e crie uma nova Database com o nome que deseja usar.
Volte até a pagina inicial, clique em "Connect" e em seguida "Connect your Application". Salve a URI para se conectar ao seu banco de dados.
Popule o arquivo env.properties na pasta raiz do repositório com as configurações do seu banco de dados:
DB_URI=
DB_DATABASE=
#DB_URI=Cole aqui a sua URI do MongoDB
#DB_DATABASE=Nome da database que foi criada
- Por fim, navegue na linha de comando até a raiz do projeto e execute o comando:
mvnw spring-boot:run
## O servidor inciará na porta:8081 - acesse a página de login pelo navegador em <http://localhost:8081/login>
Tecnologias Utilizadas
As seguintes ferramentas foram usadas na construção do projeto
Tecnologias
- Spring Boot 2.7.2 - Framework
- Vue.Js - Interface do usuário
- Maven - Gerenciamento de Dependências
- Thymeleaf - Gerenciamento de views e templates
- Boostrap 4 - Layout
Persistência e Deploy
Ferramentas
Licença
Este projeto esta sob a licença MIT. Consulte o arquivo LICENSE.md para mais informações.
Autor
Thomaz Machado🚀
Projeto desenvolvido por Thomaz Machado. Entre em contato!
