Pular para o conteúdo
Voltar aos projetos
Produtos sob medida
Em produção

Praxis

Do sonho à tarefa, com ciência e IA

Praxis — Do sonho à tarefa, com ciência e IA

Contexto

O Praxis conecta sonhos a tarefas em cinco níveis. Mapas visuais, acompanhamento de progresso e métodos como WOOP e planos se-então ajudam a organizar próximos passos concretos.

O desafio

Representar a mesma árvore em mapa 2D, lista e constelação 3D exige consistência de hierarquia e progresso. A edição colaborativa precisa respeitar permissões e impedir relações inválidas entre os nós.

A arquitetura

React Flow renderiza o mapa e Three.js, carregado sob demanda, apresenta a constelação. Supabase reúne autenticação, PostgreSQL com RLS e sincronização Realtime. O produto inclui coach de IA opcional, assinaturas Stripe e instalação como PWA.

Fluxo da arquitetura

  1. Uma árvore

    • Cinco níveis, do sonho à tarefa
    • PostgreSQL com RLS
  2. Sincronização

    • Supabase Realtime
    • Um canal por mapa
  3. Três visualizações

    • Mapa 2D — React Flow
    • Lista
    • Constelação 3D — Three.js

Decisões de engenharia

Três visualizações, uma árvore

Mapa, lista e constelação compartilham dados e cálculo de progresso. O layout automático organiza a hierarquia e as posições manuais preservam os ajustes do usuário.

Colaboração em tempo real

Mapas compartilhados usam canais Realtime por mapa e políticas de acesso no PostgreSQL. Mudanças de pai são validadas para evitar ciclos e conexões entre níveis incompatíveis.

Constelação 3D sob demanda

Sonhos são distribuídos em uma esfera de Fibonacci e seus descendentes em cones orientados. Shaders exibem o progresso no preenchimento dos corpos.

Stack completa

React
TypeScript
Vite
Tailwind CSS
React Flow
Three.js
Supabase
PostgreSQL
Stripe
Artigo completoDe sonho a grafo: o que aprendi modelando metas, progresso e colaboração com React Flow e Three.js7 min de leituraLer o artigo