Investment Calculator (React + Vite)

Simulador de investimentos com juros compostos, desenvolvido em React e empacotado com Vite. Preencha os campos de investimento e veja a projeção anual de valor, juros e capital investido.

---

Sumário

• Estrutura do projeto
• Tecnologias
• Requisitos
• Instalação
• Executar em desenvolvimento
• Build e Preview
• Scripts disponíveis
• Arquitetura e arquivos principais
• Lógica de cálculo

Estrutura do projeto

react-investiment-calculator/
├─ index.html
├─ package.json
├─ vite.config.js
├─ public/
│  └─ investment-calculator-logo.png
└─ src/
   ├─ index.jsx          # Bootstrap do React
   ├─ index.css          # Estilos globais (fonts e layout)
   ├─ App.jsx            # Estado global e renderização condicional
   ├─ assets/
   │  └─ investment-calculator-logo.png
   ├─ components/
   │  ├─ Header.jsx      # Cabeçalho com logo e título
   │  ├─ Main.jsx        # Container do formulário de inputs
   │  ├─ InvestInputs.jsx# Campos do formulário
   │  └─ InvestBoard.jsx # Tabela de resultados anuais
   └─ util/
      └─ investment.js   # Cálculo e formatter de moeda

Tecnologias

• React 19 (SPA com hooks)
• Vite 4 (dev server e build)
• JavaScript (ES6+)
• CSS3 (estilos globais)
• ESLint (qualidade de código)

Requisitos

• Node.js 18 ou superior (recomendado)
• npm 9 ou superior

Instalação

npm install

Executar em desenvolvimento

npm run dev

O Vite exibirá a URL local (ex.: http://localhost:5173). Abra no navegador.

Build e Preview

Geração de build de produção:

npm run build

Pré-visualização do build localmente:

npm run preview

Scripts disponíveis

• npm run dev — inicia o servidor de desenvolvimento (Vite)
• npm run build — gera o bundle de produção
• npm run preview — serve o build localmente
• npm run lint — roda o ESLint no projeto

Arquitetura e arquivos principais

• index.html — HTML base, aponta para src/index.jsx e define o elemento #root.
• src/index.jsx — cria a root do React e renderiza <App />.
• src/App.jsx — mantém o estado dos campos de investimento e controla a renderização da tabela. Exibe uma mensagem quando algum valor é inválido (nulo ou ≤ 0).
• src/components/Header.jsx — cabeçalho com logo e título.
• src/components/Main.jsx — seção que contém os campos de entrada.
• src/components/InvestInputs.jsx — define e renderiza os inputs: initial-investment, expected-return, anual-investment (grafia conforme código), duration-investment.
• src/components/InvestBoard.jsx — recebe os valores e renderiza a tabela com ano, valor acumulado, juros do ano, juros totais e capital investido.
• src/util/investment.js —
  • calculateInvestmentResults(...): calcula o resultado anual composto.
  • formatter: formata valores monetários (USD) via Intl.NumberFormat.

Lógica de cálculo

Em calculateInvestmentResults a cada ano:

1. Calcula os juros do ano: interest = currentValue * (expectedReturn / 100)
2. Atualiza o valor investido: currentValue += interest + annualInvestment
3. Armazena year, interest, valueEndOfYear e annualInvestment

A tabela em InvestBoard.jsx soma os juros ano a ano para exibir o total de juros e calcula o capital investido como valueEndOfYear - totalInterest.