https://github.com/fernandabitten/financas-pessoais
🧠💻🌐 Aplicação full stack para controle de finanças pessoais 🟢 Node.js 🟨 JavaScript 🛣️ Express 📦 express-session 🔐 bcrypt 💾 SQLite3 🧠 Gemini API (Google) 🌐 Render (deploy) 🧱 HTML 🎨 CSS 🎨 Figma
https://github.com/fernandabitten/financas-pessoais
bcrypt css3 express express-session figma gemini-api html5 javascipt node render sqlite3
Last synced: about 2 months ago
JSON representation
🧠💻🌐 Aplicação full stack para controle de finanças pessoais 🟢 Node.js 🟨 JavaScript 🛣️ Express 📦 express-session 🔐 bcrypt 💾 SQLite3 🧠 Gemini API (Google) 🌐 Render (deploy) 🧱 HTML 🎨 CSS 🎨 Figma
- Host: GitHub
- URL: https://github.com/fernandabitten/financas-pessoais
- Owner: Fernandabitten
- License: mit
- Created: 2025-07-23T22:00:06.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-08-03T07:09:26.000Z (11 months ago)
- Last Synced: 2025-10-11T05:08:00.380Z (8 months ago)
- Topics: bcrypt, css3, express, express-session, figma, gemini-api, html5, javascipt, node, render, sqlite3
- Language: HTML
- Homepage: https://fernandabitten.github.io/financas-pessoais/frontend/login.html
- Size: 207 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Projeto Finanças Pessoais
👉 [Acesse o deploy aqui!!](https://fernandabitten.github.io/financas-pessoais/frontend/login.html)
## Sobre o projeto
Aplicação full stack para controle de finanças pessoais, permitindo cadastro de usuários, autenticação segura por sessão, lançamentos financeiros, relatórios dinâmicos, exportação de dados e análise automática via inteligência artificial. Inclui modo escuro/claro, edição de perfil e acompanha protótipo original no Figma.
Este projeto foi desenvolvido como **Projeto Final** da disciplina **Desenvolvimento Web II** do **IFCE**, cujo objetivo é aplicar na prática os conceitos de **requisições HTTP** e **APIs RESTful**, utilizando os métodos **GET**, **POST**, **PUT** e **DELETE** para manipular recursos via uma interface web. **Persistencia dos dados com SQLite, Node.js, autenticação, controle de Sessões e Proteção de Rotas, utilizando bcrypt e express-session**
## Tecnologias Utilizadas
- **Frontend**:
HTML5,
CSS3,
JavaScript (Vanilla),
Chart.js,
- **Backend**:
Node.js,
Express.js,
PostgreSQL (Aiven),
bcrypt (hash de senhas),
express-session (gerenciamento de sessões),
dotenv (variáveis de ambiente)
- **Hospedagem**:
- Frontend: GitHub Pages
- Backend: Render
- Banco de dados: Aiven (PostgreSQL)
---
## Funcionalidades
- ### Cadastro, edição e autenticação de usuários
- Registro com nome, email e senha (senhas criptografadas)
- Gerenciamento de sessões (express-session)
- Login seguro e proteção de rotas
- Edição de nome e senha
- ## Lançamentos financeiros
- Cadastrar entradas/saídas com tipo, valor, categoria, descrição, data
- Listagem, edição, exclusão e filtros (tipo/categoria/período)
- Visualização de totais (entradas, saídas, saldo)
- ## Relatórios dinâmicos e gráficos
- Listas e totais atualizados em tempo real pelo DOM
- Gráficos via Chart.js: pizza por categoria e barras por período
- ## Exportação de dados
- Download dos lançamentos em formato SVG
- ## Resumo financeiro com IA
- Geração automática de análise e sugestões financeiras pelo Gemini (Google Generative AI)
- Resumo de desempenho, dicas práticas e consolidados em JSON por categoria
- ## Design
- Prototipação visual original feita no **Figma** e serve como guia para a implementação das páginas HTML.
Acesse o protótipo interativo clicando no link abaixo:
👉 [Protótipo no Figma](https://www.figma.com/proto/cHjB1mahWFq8FTedooHL8X/Sistema-de-Gest%C3%A3o-Finnanceira-Pessoal?node-id=54-806&p=f&t=O1E4mtFvgd4wAINR-0&scaling=min-zoom&content-scaling=fixed&page-id=48%3A1436&starting-point-node-id=54%3A806)
Você deve ter uma conta Figma para acessá-lo.
---
## Estrutura do projeto
```
financas-pessoais/
├── backend/
│ ├── controllers/
│ │ ├── authController.js # Lógica de cadastro e login
│ │ ├── transactionController.js # Lógica dos lançamentos financeiros
│ │ └── aiServiceController.js # Lógica para resumos IA
│ ├── middleware/
│ │ └── authMiddleware.js # Proteção de rotas/sessão
│ ├── models/
│ │ └── transaction.js # Modelo dos lançamentos
│ │ ├── userModel.js # Modelo dos usuarios
│ ├── routes/
│ │ ├── authRoutes.js # Rotas de cadastro/login
│ │ ├── transactionRoutes.js # Rotas dos lançamentos financeiros
│ │ └── aiServiceRoutes.js # Rotas para resumos IA
│ ├── services/
│ │ └── aiService.js # Serviço de integração IA
│ ├── db.js # Conexão e inicialização do banco
│ ├── .env # Variáveis ambiente
│ ├── .env.exemplo # Exemplo de variáveis de ambiente necessárias para rodar a aplicação. Preencha com seus próprios valores e renomeie para .env
│ ├── server.js # Inicialização do servidor Node.js
│ ├── package.json # Dependências backend
│ └── package-lock.json
├── frontend/
│ ├── components/ # Componentes HTML reutilizáveis
│ │ ├── header.html
│ │ ├── sidebar.html
│ │ ├── table.html
│ │ └── ... # Outros componentes HTML reutilizáveis
│ ├── images/
│ │ └── ... # Imagens e ícones de interface
│ ├── scripts/
│ │ ├── index.js # Lógica principal: CRUD, filtros, DOM, fetch
│ │ ├── componente.js # Carrega e insere HTML dinâmico
│ │ └── ... # Outros scripts específicos
│ ├── styles/
│ │ ├── style.css
│ │ ├── styles-auth.css
│ │ └── ... # Outros CSS (dashboard, temas, etc)
│ ├── index.html # Estrutura principal da aplicação; carrega componentes dinâmicos
│ ├── login.html # Tela de login/cadastro
│ ├── register.html # Tela deCadastro de usuário
└── └── README.md
o
```
## Configuração e Execução
1. Clone o repositório
```
git clone https://github.com/Fernandabitten/financas-pessoais.git
cd financas-pessoais
```
2. Configuração backend
- Crie o arquivo .env no backend e preencha:
```
NODE_ENV=development # Troque para production para produção
SESSION_SECRET=sua_chave_secreta # Segredo utilizado para sessões
GEMINI_API_KEY=sua_chave_api_gemini # Chave API Gemini para integração IA
# Configuração do banco PostgreSQL (Aiven)
DB_HOST=sua_url_do_postgresql # ex: pg-xxxx.aivencloud.com
DB_PORT=5432 # Porta padrão do PostgreSQL (ajuste se diferente)
DB_USER=seu_usuario
DB_PASSWORD=sua_senha
DB_NAME=nome_do_banco
```
> O backend utiliza PostgreSQL (hospedado na Aiven). Preencha as variáveis acima com os dados do banco fornecidos pela plataforma
3. Instale as dependências do backend
```
cd backend
npm install
```
4. Inicie o servidor backend:
```
npm start
```
5. Acesse o frontend:
- Use um servidor local (ex: Live Server do VSCode) para abrir frontend/login.html.
> O backend deve estar rodando para autenticação e operações.
## Como usar:
1. Cadastre-se e faça login.
2. Registre lançamentos financeiros em contas a pagar e contas a receber.
3. Utilize filtros para visualizar totais e gráficos.
4. Baixe seus registro em SVG.
5. Obtenha resumo e dicas personalizadas via IA
## Links Importantes
- 🔗 Frontend: [Deploy no GitHub Pages](https://fernandabitten.github.io/financas-pessoais/frontend/login.html)
- 🔗 Backend: [Deploy no Render](https://financas-pessoais-eyy5.onrender.com/)
- 🔗 Protótipo: [Figma](https://www.figma.com/proto/cHjB1mahWFq8FTedooHL8X/Sistema-de-Gest%C3%A3o-Finnanceira-Pessoal?node-id=54-806&p=f&t=O1E4mtFvgd4wAINR-0&scaling=min-zoom&content-scaling=fixed&page-id=48%3A1436&starting-point-node-id=54%3A806)
---
## Galeria de Imagens
Ver Screenshots
## Licença
Este projeto está licenciado sob a licença MIT.
## Como Contribuir
1. Faça um fork do projeto
2. Crie uma branch para sua contribuição
3. Faça commits descritivos e claros
4. Abra um pull request explicando suas mudanças
#### "Fique à vontade para adaptar conforme suas necessidades, explorar novas ideias e construir soluções inovadoras!"