Back to Projects
In development
Demo
Next.jsReactTypeScriptTailwind CSSSupabaseMotionRecharts2026

WEB Marcadores

Web app to organize favorite links in nested folders, with a bookmark grid, detail panel with metadata and tags, and a dark file-explorer-style UI. Supabase auth with SSR sessions via @supabase/ssr. Includes a demo mode without .env.local (in-memory data, login button or /demo route), keyboard shortcuts with hotkeys-js, Shortcuts and Profile views, and usage charts with Recharts. Motion animations and Tailwind CSS v4.

View DemoView Code

Project Screenshots

WEB Marcadores — vista previa

1 / 12

What I learned

  • SSR sessions with Supabase on App Router without leaking cookies into client components
  • Ship /demo with in-memory data so the UI works without a .env
  • Reorder folders and bookmarks with pragmatic-drag-and-drop
  • Global shortcuts (hotkeys-js) that do not steal focus from inputs

Technical Details

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