Skip to content

GustavoDEVVV/Axis

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Axis

Plataforma de educação financeira com IA para análise de perfil de investidor, acompanhamento de mercado em tempo real e aprendizado sobre investimentos.


Descrição

O Axis é uma landing page interativa que reúne, em um só lugar, ferramentas essenciais para quem está começando (ou já está) no mundo dos investimentos: cotações de criptomoedas e ações em tempo real, um conversor de moedas, conteúdo educacional sobre finanças e um chatbot com IA que conduz uma entrevista e define o perfil de risco e o nível de conhecimento financeiro do usuário.

O projeto foi criado como uma peça de portfólio pessoal, com foco em aplicar, na prática, integração com APIs externas, persistência de dados e uma IA generativa conduzindo um fluxo conversacional de forma autônoma.


Demonstração

Produção:


Tecnologias

Front-end

  • React + Vite
  • CSS puro (variáveis CSS, dark mode)
  • Chart.js (gráficos de preço)
  • GSAP (animações de texto e scroll)

Back-end

  • Python
  • Flask
  • Flask-CORS

Banco de Dados

  • PostgreSQL (hospedado no Neon)
  • SQLAlchemy (ORM)

Inteligência Artificial

  • Google Gemini API (google-generativeai)

APIs Externas

  • CoinGecko (cotações de criptomoedas)
  • Brapi (cotações de ações da B3)

Infraestrutura

  • Git / GitHub
  • Render (deploy do backend)
  • Vercel (deploy do frontend)
  • Neon (PostgreSQL serverless gratuito)

Arquitetura

Usuário
  ↓
Frontend (React / Vercel)
  ↓
Backend (Flask / Render)
  ↓                    ↓
PostgreSQL (Neon)   APIs externas (CoinGecko, Brapi, Gemini)

O frontend nunca se comunica diretamente com as APIs externas ou com o banco de dados — tudo passa pelo backend Flask, que centraliza cache, autenticação de chaves e regras de negócio.


Estrutura de Pastas

Axis/
│
├── backend/
│   ├── app.py
│   ├── database.py
│   ├── requirements.txt
│   ├── runtime.txt
│   ├── Procfile
│   │
│   └── routes/
│       ├── ping.py
│       ├── cripto.py
│       ├── acoes.py
│       ├── cambio.py
│       └── chat.py
│
├── frontend/
│   ├── index.html
│   ├── vite.config.js
│   │
│   └── src/
│       ├── App.jsx
│       ├── main.jsx
│       │
│       ├── components/
│       │   ├── Navbar.jsx
│       │   ├── HeroSection.jsx
│       │   ├── MercadoSection.jsx
│       │   ├── ConversorSection.jsx
│       │   ├── EducacaoSection.jsx
│       │   ├── IASection.jsx
│       │   └── ChatBot.jsx
│       │
│       ├── hooks/
│       │   └── useScrollAnimation.js
│       │
│       ├── styles/
│       │   ├── global.css
│       │   └── (um .css por componente)
│       │
│       └── assets/
│           ├── video_hero.mp4
│           └── educacao/
│
└── README.md

Pré-requisitos

  • Python 3.11+
  • Node.js 18+
  • Conta gratuita no Neon (PostgreSQL)
  • Chave de API do Google AI Studio (Gemini)

Instalação

Backend

cd backend
python -m venv venv
venv\Scripts\activate
pip install -r requirements.txt

Frontend

cd frontend
npm install

Variáveis de Ambiente

Backend (backend/.env)

DATABASE_URL=postgresql://usuario:senha@host/banco?sslmode=require
GEMINI_API_KEY=sua_chave_gemini

Frontend (frontend/.env)

VITE_API_URL=https://axis-0go1.onrender.com
Variável Descrição
DATABASE_URL String de conexão do PostgreSQL (Neon)
GEMINI_API_KEY Chave da API do Google Gemini
BRAPI_TOKEN Token da Brapi para consulta de ações da B3
VITE_API_URL URL base do backend consumida pelo frontend

Como Executar

Backend:

cd backend
venv\Scripts\activate
python app.py

Frontend:

cd frontend
npm run dev

O frontend roda em http://localhost:5173 e o backend em http://127.0.0.1:5000.


Rotas da API

GET /api/ping

Healthcheck simples da API.

GET /api/cripto

Retorna lista das principais criptomoedas com preço, variação 24h e mini-histórico, com cache local para reduzir chamadas à CoinGecko.

GET /api/cripto/<coin_id>/historico

Retorna o histórico de preços de 7 dias de uma criptomoeda específica.

GET /api/acoes

Retorna cotações de ações da B3 (PETR4, MGLU3, VALE3, ITUB4) via Brapi.

GET /api/cambio/moedas

Lista as moedas disponíveis para conversão.

GET /api/cambio?de=BRL&para=USD&valor=1000

Converte um valor entre duas moedas com base em taxas fixas configuradas no backend.

POST /api/chat

Envia uma mensagem para a IA (Gemini), de acordo com o modo selecionado (educacional, investimentos ou perfil).

Request:

{
  "session_id": "abc123",
  "modo": "perfil",
  "mensagem": "Quero descobrir meu perfil de investidor.",
  "historico": []
}

Response:

{
  "resposta": "Você já investiu antes? Me conta um pouco da sua experiência.",
  "resultado_final": null
}

Quando o modo perfil é concluído, resultado_final retorna o perfil de risco (conservador, moderado ou arrojado) e uma nota de 1 a 10 de conhecimento financeiro, que é salva no banco de dados.


Banco de Dados

Três tabelas principais, gerenciadas via SQLAlchemy:

usuarios (id, session_id, perfil, score, criado_em)
conversas (id, session_id, modo, mensagem, resposta, criado_em)
favoritos (id, session_id, cripto_symbol, criado_em)
  • usuarios — armazena o resultado do teste de perfil de investidor de cada sessão
  • conversas — histórico de mensagens trocadas com o chatbot
  • favoritos — criptomoedas marcadas como favoritas pelo usuário

Fluxo do Sistema

Usuário acessa a landing page
  ↓
Visualiza cotações em tempo real (Mercado)
  ↓
Usa o conversor de moedas
  ↓
Lê conteúdo educacional sobre investimentos
  ↓
Abre o ChatBot (painel lateral)
  ↓
Escolhe um modo: dúvida / análise / teste de perfil
  ↓
Conversa é processada pela Gemini API
  ↓
Se modo = perfil → resultado final é salvo no PostgreSQL

Funcionalidades

  • Cotações de criptomoedas em tempo real com gráfico de histórico de 7 dias
  • Cotações de ações da B3 com gráfico de histórico de 5 dias
  • Conversor de moedas (BRL, USD, EUR, BTC, ETH)
  • Seção educacional com carrossel sobre conceitos financeiros
  • Chatbot com IA (Gemini) em 3 modos: dúvidas gerais, análise de investimentos e teste de perfil de investidor
  • Classificação automática de perfil de risco (conservador / moderado / arrojado) e nota de conhecimento financeiro (1 a 10)
  • Histórico de conversas e resultados persistidos em banco PostgreSQL
  • Interface dark mode com animações GSAP (blur-to-focus) e scroll reveal

Roadmap

  • Seção de favoritos funcional (salvar/listar criptos marcadas)
  • Footer completo
  • Conversor com taxas de câmbio em tempo real (pós a API atual é limitada)
  • Página de histórico de conversas do usuário
  • Otimização de cache para reduzir limite de chamadas às APIs externas
  • Testes automatizados (backend)

Segurança

  • Variáveis sensíveis protegidas via .env (nunca commitadas; .gitignore configurado)
  • CORS configurado explicitamente no backend
  • Identificação de sessão via UUID gerado no client, sem dados pessoais
  • Cache e tratamento de erro nas integrações externas, evitando exposição de falhas de API ao usuário final

Deploy

Camada Serviço
Frontend Vercel
Backend Render
Banco de Dados Neon (PostgreSQL serverless)

O backend usa gunicorn como servidor WSGI de produção e runtime.txt para fixar a versão do Python (3.11.9). O frontend consome a URL do backend através da variável de ambiente VITE_API_URL, configurada separadamente em desenvolvimento e produção.


Convenção de Commits

Este projeto segue o padrão Conventional Commits:

feat:     nova funcionalidade
fix:      correção de bug
refactor: alteração de código sem mudança de comportamento
style:    ajustes visuais/formatação
docs:     documentação
chore:    tarefas de manutenção/configuração

Exemplo:

feat(chat): adiciona integração com Gemini API
fix: corrige conflito entre psycopg2 e psycopg2-binary
style: converte unidades px para rem no css

Autor

Gustavo Domingues

About

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors