Sistemas & IA · Plataforma web · EdTech · No ar
MEDATLAS 3D
Plataforma de estudo de anatomia: um modelo 3D navegável no navegador, ligado ao banco de estruturas anatômicas, com quiz gerado por IA e flashcards com repetição espaçada.
- Segmento
- Sistemas & IA
- Entrega
- Plataforma web · EdTech
- Status
- No ar
- Tecnologias
- Next.js 15 · React 19 · Three.js · React Three Fiber · Zustand · Prisma · PostgreSQL · NextAuth · OpenAI API · Tailwind
Estudo de caso
Como foi construído
O problema, as decisões de arquitetura e os desafios técnicos que apareceram no caminho.
Problema
Anatomia é um conteúdo espacial estudado em material plano. Atlas impressos mostram cortes fixos, e as ferramentas 3D disponíveis costumam ser pagas ou desconectadas do estudo em si: você gira um osso numa aba, e o que precisa memorizar está em outra.
Solução
Modelo 3D e material de estudo na mesma tela. O estudante seleciona uma estrutura e recebe ali a descrição clínica, as relações anatômicas, as patologias associadas, as questões e os flashcards daquela estrutura — com o progresso registrado para orientar a próxima sessão.
Arquitetura
Navegador — Next.js 15 (App Router) + React 19 │ ├─ Three.js / React Three Fiber ──→ modelo .glb + SSAO, Bloom e Vignette ├─ Zustand ──→ estado isolado por domínio: viewer · quiz · study │ ↓ rotas de API ├─ /api/structures/[id] estrutura, relações e patologias ├─ /api/search busca por sistema anatômico ├─ /api/ai/chat (Edge) ──→ OpenAI, resposta em streaming └─ /api/ai/quiz ──→ OpenAI, geração de questões ↓ Prisma ORM ──→ PostgreSQL (20 modelos: estruturas, quiz, progresso, conversas)
Desafios técnicos
- Separar cena 3D de estado de aplicação.Misturar as duas coisas faz a cena re-renderizar a cada clique de menu. Resolvi isolando o estado em três stores Zustand por domínio, deixando os componentes de cena sem lógica de aplicação.
- Pós-processamento sem derrubar o frame rate— SSAO, Bloom e Vignette aplicados com controle de camadas e de plano de corte.
- Conteúdo fora do código.Todo o material anatômico vive no banco e entra por seed, para poder crescer sem tocar na aplicação.
Minha responsabilidade
Projeto inteiro: modelagem das 20 entidades, integração 3D, rotas de API, geração de questões e tutor por IA, interface e documentação de arquitetura.
Resultado
MVP funcional com visualizador, busca, conteúdo clínico, quiz, flashcards (algoritmo SM-2) e tutor em streaming. O repositório estava sem os arquivos de configuração e não instalava; reconstruí os manifestos e hoje ele passa em tsc --noEmit e conclui o next build. A autenticação está ligada: NextAuth v5 com credenciais (bcrypt), sessão em JWT e o painel protegido no servidor. O que segue pendente — verificação de email e as métricas do painel vindas do banco — está declarado no README em vez de ser apresentado como pronto.
Sistema no ar: dá para criar conta, buscar estruturas e navegar no modelo 3D.
Precisa de um sistema sob medida?
Me conta o problema que você precisa resolver — é por onde eu começo.