Um planejador financeiro inteligente para metas internacionais, com conversão de câmbio em tempo real e cálculo automático de viabilidade — construído com design Mobile-First.
- Sobre o Projeto
- Estratégia de Design e Desenvolvimento
- Consumo de APIs e Dados Externos
- Pitch do Projeto
- Prototipagem e Interfaces (Figma)
- Identidade Visual e Pesquisa de UX
- Gestão do Projeto (Agile)
- Arquitetura de Código e Estrutura de Arquivos
- Controle de Versão e Workflow
| FX Target |
|---|
 |
Planejar uma viagem, um intercâmbio ou a compra de um bem no exterior em moeda estrangeira é um desafio matemático real, dada a volatilidade constante do mercado de câmbio. O FX Target nasceu para resolver essa dor de forma direta e visual: o usuário cadastra uma meta em moeda estrangeira, informa sua capacidade de poupança mensal e recebe, em tempo real, um veredito claro sobre a viabilidade do seu objetivo — sem precisar abrir uma planilha ou fazer contas manuais.
Público-alvo: viajantes, estudantes de intercâmbio e qualquer pessoa que precise projetar uma economia em moeda estrangeira com previsibilidade — diretamente pelo smartphone.
💡 Diferencial de Engenharia: o motor do sistema calcula dinamicamente o tempo necessário para atingir a meta, utilizando a cotação vigente no momento da requisição:
Tempo (meses) = (Meta em Moeda Estrangeira × Taxa de Câmbio) / Economia Mensal (moeda local)Se o tempo calculado for menor ou igual ao prazo estipulado pelo usuário, o projeto é marcado como Viável. Caso contrário, o sistema calcula automaticamente a quantidade de meses excedentes.
🔗 Aplicação em Produção: https://pedrobonetti01-ctrl.github.io/fx-target-project/
A escolha pelo Mobile-First não foi estética, e sim estratégica: a maior parte das decisões financeiras do dia a dia — e a consulta de metas de economia — acontece em momentos rápidos, no celular, entre uma tarefa e outra. Projetar primeiro para a menor tela força um exercício de priorização: apenas o essencial sobrevive ao layout, resultando em uma experiência mais limpa, rápida e objetiva. Depois de validada a base mobile, o layout foi expandido de forma progressiva para telas maiores, garantindo fluidez sem sacrificar a usabilidade em nenhum breakpoint.
O desenvolvimento seguiu uma estratégia de entregas focadas na dor principal do usuário. A V1.0 do FX Target contempla o fluxo completo de gestão de metas financeiras:
- ✅ Criação de Projetos Financeiros (metas ativas);
- ✅ Edição de metas já existentes;
- ✅ Exclusão de Projetos Financeiros ativos;
- ✅ Active Tracker — cronômetro regressivo que acompanha o prazo de cada meta em tempo real;
- ✅ Configurações de tema (claro/escuro), moeda padrão e gerenciamento de dados locais.
A precisão das cotações é o coração do FX Target, por isso a escolha recaiu sobre a AwesomeAPI, um serviço público e gratuito de câmbio em tempo real, amplamente utilizado por projetos financeiros brasileiros.
A aplicação consome o endpoint de cotações múltiplas, solicitando os pares de moedas necessários para os cálculos de conversão em uma única chamada:
https://economia.awesomeapi.com.br/json/last/USD-EUR,EUR-USD,BRL-USD
Estrutura da requisição (api.js):
/**
* Configuração e chamada da AwesomeAPI para taxas de câmbio em tempo real
*/
const API_CONFIG = Object.freeze({
BASE_URL: "https://economia.awesomeapi.com.br/json/last",
PAIRS: ["USD-EUR", "EUR-USD", "BRL-USD", "USD-BRL"],
TIMEOUT_MS: 8000,
FALLBACK_RATES: Object.freeze({
usdEur: 0.92,
eurUsd: 1.08,
brlUsd: 0.18,
usdBrl: 5.50
})
});
export async function fetchExchangeRates(options = {}) {
const { timeout = API_CONFIG.TIMEOUT_MS, useFallbackOnError = true } = options;
const endpoint = `${API_CONFIG.BASE_URL}/${API_CONFIG.PAIRS.join(",")}`;
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), timeout);
try {
const response = await fetch(endpoint, {
signal: controller.signal,
headers: { Accept: "application/json" }
});
clearTimeout(timeoutId);
if (!response.ok) {
throw new Error(`API Request failed with status ${response.status}`);
}
const data = await response.json();
return {
usdEur: safeParseFloat(data.USDEUR?.bid, API_CONFIG.FALLBACK_RATES.usdEur),
eurUsd: safeParseFloat(data.EURUSD?.bid, API_CONFIG.FALLBACK_RATES.eurUsd),
brlUsd: safeParseFloat(data.BRLUSD?.bid, API_CONFIG.FALLBACK_RATES.brlUsd),
usdBrl: safeParseFloat(data.USDBRL?.bid, API_CONFIG.FALLBACK_RATES.usdBrl)
};
} catch (error) {
clearTimeout(timeoutId);
console.error(`[CurrencyService] Error fetching rates: ${error.message}`);
if (useFallbackOnError) {
return { ...API_CONFIG.FALLBACK_RATES };
}
throw error;
}
}Solução adotada para precisão e resiliência:
| Etapa | Estratégia |
|---|---|
| Requisição | Chamada assíncrona única (fetch + async/await), buscando os pares de câmbio simultaneamente |
| Validação | Verificação explícita de response.ok antes de processar os dados |
| Parsing | Conversão dos valores de bid (string) para float, garantindo precisão nos cálculos matemáticos |
| Resiliência | Bloco try/catch com cotações de fallback fixas, prevenindo que uma instabilidade da API derrube a experiência do usuário |
O vídeo pitch foi roteirizado e editado no DaVinci Resolve, com o objetivo de apresentar, em poucos minutos, o problema enfrentado por quem planeja uma meta financeira internacional, a solução proposta pelo FX Target e uma demonstração prática do fluxo completo de criação e gestão de metas dentro da aplicação.
Pontos-chave abordados no vídeo:
- O problema da volatilidade cambial ao planejar metas no exterior;
- A proposta de valor do FX Target como ferramenta visual de acompanhamento de metas;
- Demonstração do fluxo de cadastro e cálculo de viabilidade;
- Apresentação da solução final e seus diferenciais na prática.
Antes da codificação, os fluxos de tela e a arquitetura da informação foram desenhados no Figma, garantindo uma experiência fluida e totalmente responsiva.
| Home | Criação de Metas | Listagem de Projetos |
|---|---|---|
 |
 |
 |
Links do Figma:
| Recurso | Link |
|---|---|
| 🎨 Link do Protótipo (Projeto) | Explorar no Figma |
| 🚀 Link do Protótipo (Executado) | Testar no Figma |
ℹ️ Como o projeto segue a filosofia Mobile-First, os fluxos foram desenhados e validados primeiro para dispositivos móveis e adaptados continuamente para telas maiores.
A paleta de cores foi definida no Coolors, buscando um equilíbrio visual que transmitisse confiança e modernidade — atributos essenciais para uma aplicação que lida com dinheiro e planejamento financeiro. A curadoria priorizou tons com bom contraste entre texto e fundo, respeitando critérios básicos de acessibilidade (legibilidade em componentes de vidro/glassmorphism e em telas pequenas).
| Paleta de Cores (Coolors) |
|---|
 |
| Referência Visual | Sugestões de IA |
|---|---|
 |
 |
O processo de design foi enriquecido por duas frentes de pesquisa:
- Benchmarking visual: curadoria de referências no Pinterest, usadas como base para o moodboard organizado no Milanote;
- Refinamento assistido por IA: consultas pontuais a LLMs (Gemini e Claude) para validar heurísticas de usabilidade, revisar a hierarquia visual dos componentes e sugerir melhorias na experiência de preenchimento de formulários.
Essa combinação de curadoria manual com revisão assistida por IA ajudou a antecipar problemas de usabilidade antes mesmo da etapa de codificação.
A gestão de tarefas foi realizada via Kanban no Trello, simulando o fluxo de trabalho de squads de produto em empresas de tecnologia, com colunas de To Do, Doing e Done. Essa organização permitiu quebrar o desenvolvimento em ciclos diários bem definidos, facilitando o acompanhamento do progresso e a priorização das entregas até o fechamento da V1.0.
Estruturação HTML Semântica
A aplicação foi desenvolvida utilizando HTML5 semântico, priorizando a acessibilidade e a organização clara dos fluxos de dados com a tag <form>, agrupamento correto de inputs de escolha única (type="radio") e estrutura limpa para renderização dos dados de cotação.
Engenharia de CSS e Responsividade
A interface traz a identidade visual projetada no Figma através de técnicas modernas de CSS3 (Flexbox e CSS Grid), garantindo responsividade total alinhada à metodologia Mobile-First. Para aprimorar a experiência visual, foram aplicadas técnicas de profundidade como Glassmorphism (backdrop-filter: blur()), aumentando o contraste e a legibilidade dos elementos.
Para otimizar a usabilidade em dispositivos móveis, a interface utiliza uma estrutura dinâmica de cartões dispostos em linhas chave-valor baseada na semântica de Description Lists (
<dl>,<dt>,<dd>). Essa abordagem substitui tabelas tradicionais rígidas, garantindo um layout fluido em qualquer tamanho de tela, preservando a acessibilidade e mantendo o código limpo.
| Home Mobile | Criação de Metas | Interface Dinâmica |
|---|---|---|
 |
 |
 |
Para manter a folha de estilo organizada e de fácil manutenção, o CSS foi modularizado por responsabilidade, evitando um único arquivo monolítico:
css/
├── variables.css # Paleta de cores, espaçamentos e tokens de design
├── header.css # Estilos do cabeçalho e navegação
├── footer.css # Estilos do rodapé e seção do autor
├── forms.css # Componentes de formulário (create-goal.html)
├── key-value-rows.css # Estrutura dinâmica de listagem de projetos
└── main.css # Reset, tipografia e estilos globais
Essa separação torna cada arquivo pequeno e previsível, facilitando localizar e ajustar um componente específico sem afetar o restante da interface — uma prática essencial para manter a escalabilidade do código.
Focado no ecossistema core da web para garantir performance extrema:
| Camada | Tecnologia |
|---|---|
| Frontend | HTML5 semântico (uso estrito de tags de acessibilidade) e CSS3 avançado (Flexbox/Grid) |
| Metodologia | Mobile-First real, focado na experiência do usuário |
| Lógica | JavaScript Vanilla (sem frameworks, foco em manipulação limpa da DOM) |
| APIs | Integração assíncrona com AwesomeAPI para cotações em tempo real |
| Persistência | Web Storage API para retenção de dados local |
Detalhes visuais e bio do autor
O versionamento do projeto foi gerido através do Git e hospedado no GitHub, priorizando a consistência do código e a integridade do repositório ao longo do desenvolvimento:
- Commits objetivos, registrando o progresso incremental da aplicação de forma clara e profissional;
- Integração contínua, garantindo a sincronização e a estabilidade da branch principal (
main) a cada nova implementação; - Controle de histórico, mantendo o rastro de alterações e a rastreabilidade das entregas da interface e das integrações.
A gestão de versão garantiu que a evolução do código ocorresse de maneira estruturada, resultando em um repositório limpo e pronto para produção.
| Registros de Terminal e Commits |
|---|
 |