Volver a Proyectos
En desarrollo
Demo
Next.jsReactTypeScriptTailwind CSSSupabaseMotionRecharts2026

WEB Marcadores

Aplicación web para organizar enlaces favoritos en carpetas anidadas, con cuadrícula de marcadores, panel de detalle con metadatos y etiquetas, y una interfaz oscura tipo explorador de archivos. Autenticación con Supabase y sesión SSR mediante @supabase/ssr. Incluye modo demo sin .env.local (datos en memoria, acceso por botón en login o ruta /demo), atajos de teclado con hotkeys-js, vistas de Atajos y Perfil, y gráficos de uso con Recharts. Animaciones con Motion y estilos con Tailwind CSS v4.

Ver DemoVer Código

Capturas del Proyecto

WEB Marcadores — vista previa

1 / 12

Qué aprendí

  • Sesión SSR con Supabase en App Router sin filtrar cookies a client components
  • Montar /demo con datos en memoria para enseñar la UI sin .env
  • Reordenar carpetas y marcadores con pragmatic-drag-and-drop
  • Atajos globales (hotkeys-js) que no roban el foco de inputs

Detalles Técnicos

  • •Next.js 16 (App Router), React 19, TypeScript
  • •Supabase (@supabase/supabase-js, @supabase/ssr)
  • •Tailwind CSS v4, Motion, Recharts
  • •hotkeys-js para atajos; pragmatic-drag-and-drop para arrastre
  • •Vercel Analytics