O Kairos Broker é uma Single Page Application (SPA) desenvolvida em Vue 3 + TypeScript, projetada para simular o painel de controle e as funcionalidades essenciais de uma corretora de valores. O projeto foca em uma arquitetura limpa e desacoplada, utilizando serviços mockados com persistência local (localStorage) para simular um ambiente de Back-end real.
- Autenticação Funcional: Fluxo completo de Login, Registro e Redefinição de Senha (via Modais), com validação de campos dinâmicos.
- Simulação de Trade: Execução de ordens de Compra e Venda que realizam:
- Atualização imediata do Saldo e Posições (Preço Médio, Quantidade).
- Registro das transações no extrato bancário e histórico de ordens.
- Portfólio Dinâmico: Visualização da rentabilidade total e cards de ativos, começando com um saldo inicial fixo (R$ 10.000,00).
- Busca Real: Listagem e busca de ativos com debounce e otimização de API (
stockService). - Acessibilidade (ARIA): Componentes críticos (Modais, Formulários, Navegação) configurados com atributos ARIA para melhor compatibilidade com leitores de tela.
O projeto utiliza o seguinte stack:
| Categoria | Pacotes |
|---|---|
| Core Framework | vue, vue-router, pinia |
| UI/Design | vuetify |
| Gráficos | apexcharts, vue3-apexcharts |
| Network | axios |
- Node.js (LTS recomendado)
- npm ou Yarn
-
Instale as dependências:
npm install
-
Configuração da API (Backend):
Crie um arquivo
.envna raiz do projeto. Para funcionar localmente e evitar o bloqueio de CORS, é obrigatório usar a configuração de Proxy do Vite (assumindo que você configurouproxy: {'/api': {...}}novite.config.ts).Exemplo de
.env:VITE_API_URL=/api -
Inicie o Servidor de Desenvolvimento:
npm run dev
O aplicativo estará disponível em http://localhost:5173. Todos os dados de usuário e portfólio serão salvos automaticamente no localStorage do seu navegador.