FinControl - App de Controle Financeiro Pessoal

Um aplicativo de controle financeiro pessoal (Single Page Application) construído com Vanilla JavaScript, HTML, CSS e Vite.

📱 Funcionalidades

O projeto possui uma interface moderna e responsiva, com navegação estruturada em rotas via JavaScript (sem necessidade de recarregamento da página).

• Dashboard: Visão geral das suas finanças.
• Despesas: Gerenciamento e listagem de despesas (saídas).
• Ganhos: Gerenciamento e listagem de ganhos (entradas).
• Armazenamento: Utiliza um gerenciador de estado local (store.js) para controlar as transações.
• Responsividade: Menu lateral responsivo com adaptação para dispositivos móveis.

🛠 Tecnologias Utilizadas

• JavaScript (ES6+) - Lógica, roteamento customizado e manipulação de estado.
• HTML5 & CSS3 - Estruturação e estilização (UI/UX moderna).
• Vite - Bundler e servidor de desenvolvimento super rápido.

🚀 Como executar o projeto localmente

Pré-requisitos

Certifique-se de ter o Node.js instalado em sua máquina.

Passos para instalação e execução

1. Clone este repositório ou navegue até a pasta do projeto:

   cd finance_control

2. Instale as dependências do projeto:

   npm install

3. Inicie o servidor de desenvolvimento:

   npm run dev

4. Acesse a aplicação no seu navegador padrão pelo endereço fornecido pelo Vite (geralmente http://localhost:5173).

📦 Scripts Disponíveis

No diretório do projeto, você pode rodar os seguintes comandos configurados no package.json:

• npm run dev: Inicia a aplicação em modo de desenvolvimento local.
• npm run build: Compila a aplicação para produção, gerando os arquivos estáticos na pasta dist.
• npm run preview: Inicia um servidor local para visualizar a versão de produção (build) gerada localmente.

📂 Estrutura do Projeto

finance_control/
├── index.html        # Ponto de entrada da aplicação
├── package.json      # Configurações do npm e scripts
├── vite.config.js    # Configuração do Vite
└── src/
    ├── components/   # Componentes da interface
    ├── pages/        # Páginas principais (Dashboard, Despesas, Ganhos)
    ├── styles/       # Arquivos CSS Globais
    ├── main.js       # Inicialização da aplicação e montagem do layout
    ├── router.js     # Lógica de roteamento do SPA (Single Page Application)
    ├── store.js      # Gerenciamento de estado (Store)
    └── utils.js      # Funções utilitárias