NotasMD

NotasMD

Editor de notas con Markdown, tags y búsqueda full-text, pensado para capturar ideas rápido sin salir del teclado.

Next.js 15TypeScriptSupabaseTailwind CSSTiptapZustandVitest
Ver en vivoVer repositorio

El problema

Usaba Notion para notas rápidas, pero era lento de abrir y el Markdown no se sentía nativo. Quería algo local-first, minimalista, con búsqueda instantánea que no dependiera de una app pesada solo para anotar una idea de 2 líneas.

Rol e impacto

Decisiones técnicas y desafíos

El reto fue guardar cada cambio sin que el editor "saltara" o perdiera la posición del cursor. Evalué debounce simple vs. un enfoque optimista con Zustand para el estado local y sync a Supabase cada 2 segundos.

Terminé usando Zustand + debounce de 800ms, porque el estado local se actualiza al instante (cero lag visual) y el sync a Supabase corre en segundo plano sin bloquear el input del usuario.

Comparé tsvector de Postgres (vía Supabase) contra una librería cliente como Fuse.js.

Elegí tsvector porque escala mejor a medida que crecen las notas y no dependo de cargar todo el dataset en el cliente para buscar.

Flujo de autosave

Cargando diagrama…
Editor → debounce local (Zustand) → sync a Supabase → resolución de conflictos

Stack detallado

CapaTecnologíaPor qué
FrontendNext.js 15, Tiptap, Zustand, TailwindTiptap permite extender el editor (código, checklists) sin reescribirlo
BackendSupabase (Postgres + tsvector, RLS)Búsqueda nativa en DB, multi-usuario seguro con RLS
TestingVitest, React Testing LibraryCobertura del parser de Markdown y lógica de tags

Galería

Editor con nota larga y syntax highlighting de MarkdownBúsqueda en vivo mientras se escribeBúsqueda en vivo mientras se escribe

Qué haría diferente

Implementaría sync offline-first desde el día uno con algo como PowerSync o RxDB, en vez de agregarlo después. El autosave actual asume conexión estable, y eso es una limitación real para uso en campo o con conexión intermitente.