Generador de Códigos QR

Una aplicación web moderna, modular y fácil de usar para generar varios tipos de códigos QR, incluyendo vCard, URL, Email, WiFi, eventos de calendario y ubicaciones geográficas.

🛠️ Stack Tecnológico

• React 19 – Librería UI
• TypeScript – Tipado seguro
• Tailwind CSS & daisyUI – Estilos y componentes
• React Hook Form – Gestión de formularios
• Zod – Validación y gestión de formularios
• qrcode.react – Renderizado de códigos QR
• React Icons (io5) – Iconografía
• Vite – Herramienta de build

✨ Funcionalidades

• Múltiples Tipos de QR: vCard, URL, Email, WiFi, Calendario, Ubicación
• Vista Previa en Vivo: Visualiza tu código QR mientras completas el formulario
• Diseño Responsivo: Optimizado para móvil y escritorio
• Opciones de Descarga: Exporta QR como SVG o PNG, descarga vCard
• Validación de Formularios: Feedback en tiempo real usando Zod y React Hook Form
• UI Accesible y Moderna: Construido con Tailwind CSS y daisyUI

🧑‍💻 Buenas Prácticas

• Separación de Responsabilidades: Componentes, tipos, utilidades y esquemas organizados en directorios dedicados.
• Tipado Seguro: Toda la lógica y props están estrictamente tipados.
• Componentes Reutilizables: Selector de tipo de QR, formularios y layout son modulares.
• Responsabilidad Única: Cada componente y utilidad hace una sola cosa bien.
• Sin Sobre-ingeniería: Solo se implementan las características y abstracciones necesarias.
• Diseño Consistente: Usa un sistema de diseño unificado para todos los elementos UI.

📸 Capturas

Escritorio

Móvil

📂 Estructura del Proyecto

src/
  components/
    layout/ # Header, Footer, Main layout
    qr/ # Formularios y selectores de QR
  lib/
    types.ts # Tipos e interfaces compartidas
    utils.ts # Funciones utilitarias
    zod.ts # Esquemas Zod
App.tsx