Vulcanode é uma plataforma web para criação visual de árvores de crafting e grafos de composição modular — estruturas hierárquicas usadas tanto para receitas e itens de jogos (ex: a cadeia de materiais para forjar uma arma mais forte) quanto para agrupamentos do mundo real (ex: listar e somar móveis divididos por cômodos de uma casa, com custo total agregado automaticamente).
Tudo roda no navegador: não há cadastro, login ou servidor guardando os seus projetos.
- Canvas fluido construído sobre React Flow, com nós em círculo, quadrado arredondado, losango (meta) e hexágono (estação/processo).
- Hierarquia invertida: componentes na base conectam-se para cima em direção ao pai/meta, somando custos automaticamente em cascata.
- Progresso em cascata: marque componentes como concluídos; desmarcar um filho desfaz automaticamente a conclusão de todos os pais que dependiam dele.
- Colapsar/expandir ramificações para manter árvores densas performáticas e organizadas.
- Catálogo completo de ícones (Lucide, carregados sob demanda) para identificar cada componente.
- Compartilhamento sem servidor: gere um link compacto do projeto (dados codificados na própria URL) em modo Edição ou apenas Visualização.
- Exportação em PNG da árvore inteira, em alta resolução, com um clique.
- Tema claro/escuro com paleta consistente em todo o board, sidebar e modais.
- Templates prontos para começar rápido: orçamento de casamento/moradia e crafting de RPG.
- Next.js 16 (App Router) + React 19 + TypeScript
- @xyflow/react (React Flow) v12 para o canvas de nós e conexões
- Zustand com
persistpara estado e armazenamento local - Tailwind CSS v4 + shadcn/ui (sobre
@base-ui/react) - lz-string para compactar o payload dos links de compartilhamento
- html-to-image para exportação em PNG
- lucide-react para o catálogo de ícones
src/
app/ # rotas (landing, /app do board, /terms, /privacy)
components/ # canvas, nós, edges, modais, UI compartilhada
store/ # Zustand (estado do projeto, templates, codec de compartilhamento)
lib/ # utilitários