Get a quote
All projects

Systems & AI · Web platform · EdTech · Live

MEDATLAS 3D

An anatomy study platform: a navigable 3D model in the browser, connected to a database of anatomical structures, with AI-generated quizzes and spaced-repetition flashcards.

Industry
Systems & AI
Deliverable
Web platform · EdTech
Status
Live
Stack
Next.js 15 · React 19 · Three.js · React Three Fiber · Zustand · Prisma · PostgreSQL · NextAuth · OpenAI API · Tailwind
Open the system View repository
MEDATLAS 3D viewer: skeleton rendered over a grid, with a side panel of 14 toggleable anatomical layers, a toolbar and a minimap.
Viewer — 14 anatomical systems as toggleable layers.
MEDATLAS home: headline "Explore o Corpo Humano em 3D", a 3D figure on the right and four indicators — 14 anatomical systems, 3D in the browser, SM-2 spaced repetition and AI tutor.
Home — real-time 3D scene in the browser.

Case study

How it was built

The problem, the architecture decisions and the technical challenges along the way.

Problem

Anatomy is spatial content studied from flat material. Printed atlases show fixed sections, and the available 3D tools are usually paid or disconnected from the studying itself: you rotate a bone in one tab, and what you need to memorize is in another.

Solution

The 3D model and the study material on the same screen. The student selects a structure and gets, right there, its clinical description, anatomical relations, associated pathologies, questions and flashcards — with progress recorded to guide the next session.

Architecture

Browser — Next.js 15 (App Router) + React 19
   │
   ├─ Three.js / React Three Fiber ──→ .glb model + SSAO, Bloom and Vignette
   ├─ Zustand ──→ state isolated by domain: viewer · quiz · study
   │
   ↓  API routes
   ├─ /api/structures/[id]   structure, relations and pathologies
   ├─ /api/search            search by anatomical system
   ├─ /api/ai/chat   (Edge)  ──→ OpenAI, streamed response
   └─ /api/ai/quiz           ──→ OpenAI, question generation
   ↓
Prisma ORM ──→ PostgreSQL  (20 models: structures, quiz, progress, conversations)

Technical challenges

  • Separating the 3D scene from application state.Mixing the two makes the scene re-render on every menu click. I solved it by isolating state in three Zustand stores by domain, keeping scene components free of application logic.
  • Post-processing without killing the frame rate— SSAO, Bloom and Vignette applied with layer and clipping-plane control.
  • Content outside the code.All anatomical material lives in the database and comes in through seeding, so it can grow without touching the application.

My role

The whole project: modeling the 20 entities, 3D integration, API routes, AI question generation and tutor, interface and architecture documentation.

Outcome

A working MVP with viewer, search, clinical content, quizzes, flashcards (SM-2 algorithm) and a streaming tutor. The repository was missing its configuration files and wouldn’t install; I rebuilt the manifests and it now passes tsc --noEmit and completes next build. Authentication is on: NextAuth v5 with credentials (bcrypt), JWT sessions and the dashboard protected on the server. What is still pending — email verification and dashboard metrics from the database — is stated in the README instead of being presented as done.

Live system: you can create an account, search structures and navigate the 3D model.

Need a custom system?

Tell me the problem you need to solve — that’s where I start.

Get a quote
WhatsApp