I built a spatial 3D knowledge graph with React Three Fiber & Gemini AI 🌌

DewTM — Mon, 12 Jan 2026 16:55:43 +0000

Hey developers! 👋

I've always felt that standard note-taking apps force our brains into unnatural, linear lists. Our thoughts are connected, chaotic, and spatial. So, I spent the last few weeks building an experiment to fix this.

It's called Echo Archive.

It's a spatial knowledge management system where your notes live in a 3D constellation.

🛠 The Tech Stack

I wanted to keep it lightweight but visually immersive.

Frontend: React 18 + Vite
3D Engine: Three.js & React Three Fiber (drei)
AI Core: Google Gemini AI (via API)
Styling: Tailwind CSS + Lucide Icons
Storage: LocalStorage (Privacy first, no cloud database)

🧠 The AI Integration

The coolest part was integrating Gemini. Since I'm using the gemini-2.5-flash model, I could implement:

Auto-Tagging: The AI reads the note and suggests categories based on context.
Smart Continue: Writer's block? The AI finishes your sentence.
Abstracts: It automatically generates a TL;DR summary at the top of long notes.

🌌 The Challenge: Mobile 3D Navigation

Making a 3D orbit control feel natural on a phone screen was tricky. I had to map touch events carefully to ensure you can pan the universe with one finger and zoom with two, without accidentally triggering the text editor.

🔗 Try it out

I just released v1.0 and would love some feedback on the navigation feeling!

Live Demo: https://echoarchive.tech

Let me know what you think about spatial interfaces. Are they the future or just a gimmick?

Cheers!

DEV Community: DewTM

I built a spatial 3D knowledge graph with React Three Fiber & Gemini AI 🌌

🛠 The Tech Stack

🧠 The AI Integration

🌌 The Challenge: Mobile 3D Navigation

🔗 Try it out