Descripción del Proyecto

ZodSmith Builder nació de una necesidad real: durante un proyecto a gran escala, tuve que crear docenas de esquemas Zod manualmente. Escribir código de validación repetitivo, gestionar tipos y mantener todo consistente se volvió tedioso y propenso a errores.

En lugar de escribir esquemas a mano, ZodSmith proporciona un canvas visual donde podés diseñar tus estructuras de datos con la simplicidad del arrastrar y soltar. Cada cambio actualiza el código generado en tiempo real, mostrándote exactamente qué esquema Zod y tipos TypeScript se producirán.

La herramienta sirve tanto como un impulsor de productividad para desarrolladores experimentados como un recurso educativo para quienes están aprendiendo la API de Zod.

Características Principales

Constructor Visual de Esquemas

• Reordenamiento de campos con arrastrar y soltar con animaciones suaves
• Vista previa del código en tiempo real que se actualiza mientras diseñás
• Tarjetas de campos mostrando tipos y reglas de validación de un vistazo
• Edición inline para cambios rápidos de nombres de campos
• Panel lateral para configuración detallada de cada campo
• Diseño responsive que funciona en cualquier tamaño de pantalla

Soporte Completo de Tipos de Campo

Soporte para todos los tipos esenciales de Zod con sus validaciones:

• String: longitud mín/máx, email, URL, UUID, patrones regex
• Number: mín/máx, positivo/negativo, entero, multipleOf
• Boolean: validación simple verdadero/falso
• Date: validación de fecha con restricciones opcionales
• Enum: conjuntos de valores predefinidos
• Array: arrays tipados con mín/máx elementos

Generación Inteligente de Código

Tres modos de salida para diferentes casos de uso:

• Solo Esquema Zod: Solo el código de validación
• Tipo TypeScript: Tipo inferido del esquema
• Módulo Completo: Archivo completo con imports, esquema y export del tipo

Opciones configurables incluyen convenciones de nomenclatura, estilos de export, comentarios y preferencias de formato.

Impulsores de Productividad

• 8 plantillas predefinidas: Usuario, Producto, Dirección, Respuesta API, Post de Blog, Formulario de Contacto, Login, Configuración
• Importar TypeScript: Pegá interfaces existentes y convertilas a esquemas Zod
• Auto-guardado: Nunca perdés tu trabajo con persistencia en localStorage
• Multi-idioma: Soporte para inglés y español
• Soporte de temas: Modo claro/oscuro con detección del sistema

Arquitectura Técnica

Stack Frontend

Construido con patrones modernos de React y mejores prácticas:

• React 19 con componentes funcionales y hooks
• TypeScript 5.9 para type safety completo
• Vite 7 para desarrollo ultrarrápido y builds optimizados
• Tailwind CSS 4 con tokens de diseño personalizados

Componentes UI

• shadcn/ui para componentes accesibles y personalizables
• Radix UI primitivos para interacciones complejas
• Lucide React para iconografía consistente
• Motion para animaciones y transiciones suaves

Gestión de Estado

• Zustand para estado global simple y performante
• Zod (¡por supuesto!) para validación interna

Librerías Clave

• dnd-kit para funcionalidad de arrastrar y soltar accesible
• i18next para internacionalización
• Biome para linting y formateo
• Vitest con Testing Library para tests

Flujo de Trabajo de Desarrollo

El flujo típico es directo:

1. Crear: Empezar de cero, elegir una plantilla o importar TypeScript
2. Diseñar: Agregar campos y ordenarlos visualmente
3. Configurar: Establecer validaciones, descripciones y requerimientos
4. Previsualizar: Ver el código generado actualizarse en tiempo real
5. Exportar: Copiar el código directamente a tu proyecto

Mejoras Futuras

• Soporte para objetos anidados y tipos complejos
• Composición de esquemas y referencias
• Exportar/importar configuraciones de esquemas
• Formatos de salida adicionales (JSON Schema, Yup)
• Funciones de edición colaborativa