JM.

Proyecto destacado

DevData Generator

Generador de datos ficticios ejecutado en el navegador que crea un único dataset reutilizable y expone el mismo resultado en tabla, JSON, CSV y SQL.

Se ejecuta completamente en el navegador; no requiere backend ni base de datos.

Volver al inicioVer repositorio

Resumen

DevData Generator es una herramienta ejecutada en el navegador para configurar datasets ficticios realistas y reutilizar un único resultado generado en salidas de tabla, JSON, CSV y SQL.

DevData Generator configurado con la plantilla Usuarios y tres registros generados mostrados en una tabla.
La interfaz real de DevData conecta la configuración del dataset, la generación, la vista previa y la exportación en un mismo flujo.

Cómo funciona

Una configuración validada cruza un único límite de generación y el resultado compartido se ramifica hacia las vistas previas y las exportaciones.

Un único resultado generado

Una generación produce un único resultado generatedData reutilizable. La vista de tabla, la vista JSON, la copia al portapapeles y todas las descargas reutilizan esos mismos registros.

generatedData

El mismo resultado se utiliza en

  • Vista de tabla
  • Vista JSON
  • Copia al portapapeles
  • Descargas y exportaciones

Invalidación predecible

Cambiar la configuración del dataset borra el resultado generado anterior para que los registros obsoletos no se presenten como actuales.

generatedData se borra cuando cambian

  • Cambia la plantilla
  • Cambian los campos seleccionados
  • Cambia la cantidad
Fuente verificadasrc/App.jsx
setSelectedTemplate(templateId)
setSelectedFields(newTemplate.fields.map((field) => field.id))
setGeneratedData([])

const handleFieldChange = (fieldId) => {
  setSelectedFields((currentFields) =>
    currentFields.includes(fieldId)
      ? currentFields.filter((id) => id !== fieldId)
      : [...currentFields, fieldId],
  )
  setGeneratedData([])
}

const handleNumberRecordsChange = (value) => {
  setNumberRecords(value)
  setGeneratedData([])
}

Los manejadores de plantilla, campos seleccionados y cantidad borran generatedData tras cambiar la configuración.

Formatos de salida

El mismo generatedData se serializa en tres representaciones reutilizables.

Salida ilustrativaDatos ilustrativos, no una ejecución registrada

JSON

                    [
  {
    "nombre": "Ana Torres",
    "email": "[email protected]"
  }
]

CSV

                    "nombre";"email"
"Ana Torres";"[email protected]"

SQL

                    INSERT INTO usuarios (nombre, email) VALUES ('Ana Torres', '[email protected]');

El mismo registro ilustrativo se muestra como JSON, CSV delimitado por punto y coma y una sentencia INSERT SQL descargable.

Arquitectura solo en el navegador

React coordina el flujo en el navegador. La utilidad de generación usa Faker y, después, los serializadores y las APIs nativas del navegador transforman y entregan el resultado compartido.

  1. React
  2. Utilidad de generación + Faker
  3. generatedData
  4. Serializadores + APIs del navegador

No requiere backend ni base de datos.

SQL se genera como texto descargable; no se ejecuta.