Volver a Proyectos
Destacado11 mar 2026

DevSnap.

Herramienta web para generar imágenes hermosas de código con explicaciones impulsadas por IA. Editor Monaco, personalización en tiempo real, URLs públicas compartibles y OG images dinámicas.

D
Stack Tecnológico
Framer MotionNext.jsTailwind CSSPostgreSQLVercelTypeScript
Detalles

Sobre el Proyecto

🎨 DevSnap

Generador de imágenes de código con IA y plataforma de compartición para desarrolladores.

✨ Características

  • Editor Monaco con 20+ temas y syntax highlighting (el mismo editor de VS Code)
  • Explicación de código con Google Gemini 2.5 Flash en streaming real
  • Panel de personalización con fondos, fuentes, padding y estilos de ventana
  • Export PNG de alta resolución (2x) y copia al portapapeles
  • URLs públicas compartibles con contador de vistas atómico
  • OG Images dinámicas — el código aparece como preview en redes sociales
  • Rate limiting con Upstash Redis (10 req/IP/día)
  • Galería pública con filtros por lenguaje y paginación
  • Dashboard personal con analytics y gráfico de vistas
  • Autenticación con Google y GitHub (NextAuth v5)
  • Diseño editorial elegante con dark mode completo

🛠️ Stack Técnico

  • Frontend: Next.js 15, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion, Monaco Editor, Zustand, TanStack Query
  • Backend: Next.js API Routes, Prisma ORM, Neon PostgreSQL, NextAuth v5, Gemini AI, Upstash Redis
  • Deploy: Vercel
¿Te gustó este proyecto?

Explora más proyectos