Jaime Martret

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.

Producto

Cómo funciona el producto

Una vista compacta de cómo configurar, generar, inspeccionar y reutilizar un dataset.

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.

Configurar dataset

Elegir plantilla, campos y número de registros.

Generar

Crear los registros ficticios configurados.

Dataset generado

Los registros producidos con la configuración actual.

Inspeccionar resultado

Ver los mismos registros como tabla o JSON.

Reutilizar resultado

Copiar o descargar los registros generados como JSON, CSV o SQL.

Sistema

Cómo se estructura el mismo flujo

Abre el flujo de producto para inspeccionar el estado, el límite de generación y sus consumidores.

Configurar dataset

Estado de entrada

Estado de configuración

Mantiene la plantilla, los campos y la cantidad de registros seleccionados.

Relaciones
Fluye hacia
  • Validación
Invalida
  • generatedData
Notas de implementación
  • App coordina el estado compartido del flujo.
  • No se usa Redux ni otra biblioteca de estado global.

Generar

Proceso

Validación

Comprueba la cantidad y que haya al menos un campo seleccionado.

Relaciones
Recibe de
  • Estado de configuración
Fluye hacia
  • generateData()
Proceso

generateData()

Crea los registros configurados usando el generador asociado a la plantilla seleccionada.

Relaciones
Recibe de
  • Validación
Depende de
  • Faker
Produce
  • generatedData
Dependencia

Faker

Proporciona los valores ficticios usados durante la generación.

Relaciones
Usado por
  • generateData()
Fuentesrc/utils/generateData.jsLa generación queda tras un único límite de utilidadVer evidencia
import { fakerES as faker } from '@faker-js/faker'
export function generateData({
  templateId,
  selectedFields,
  numberRecords,
}) {
  const generateRecord = recordGenerators[templateId]

  return Array.from({ length: numberRecords }, (_, index) =>
    generateRecord(selectedFields, index),
  )
}

La utilidad importa Faker, elige el generador de registros configurado y crea los registros solicitados mediante generateData().

Dataset generado

Estado compartido

generatedData

Guarda los registros actuales como resultado compartido de una generación.

Relaciones
Producido por
  • generateData()
Usado por
  • Vista previa
  • Exportación
Invalidado por
  • Estado de configuración
Cuándo
  • Cambia la plantilla
  • Cambian los campos seleccionados
  • Cambia la cantidad
Por qué importa
  • Todas las salidas visibles y descargables representan la misma generación.
Fuentesrc/App.jsxLos cambios de configuración borran el resultado compartidoVer evidencia
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.

Inspeccionar resultado

Consumidor

Vista previa

Presenta generatedData como tabla o JSON con formato.

Relaciones
Recibe de
  • generatedData
Notas de implementación
  • La tabla y la vista JSON consumen el mismo generatedData.

Reutilizar resultado

Consumidor

Exportación

Dirige generatedData hacia las transformaciones de copia y descarga.

Relaciones
Recibe de
  • generatedData
Fluye hacia
  • Serializadores de salida
Serializador

Serializadores de salida

Transforma generatedData en salida JSON, CSV o SQL.

Relaciones
Recibe de
  • Exportación
Fluye hacia
  • APIs del navegador
Notas de implementación
  • La vista, copia y descarga JSON reutilizan el mismo serializador JSON.
  • CSV y SQL usan serializadores dedicados.
  • La salida SQL se descarga como sentencias INSERT; no se ejecuta.
  • La aplicación no tiene base de datos.
Plataforma

APIs del navegador

Gestiona el portapapeles y las descargas de archivos en el navegador.

Relaciones
Recibe de
  • Serializadores de salida
Notas de implementación
  • La descarga de archivos usa APIs nativas del navegador.
SalidaRegistro de Usuarios ilustrativoUn resultado, tres representaciones serializadas

Datos 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.

Flujo del sistema

  1. Estado de configuraciónValidación
  2. ValidacióngenerateData()
  3. FakergenerateData()
  4. generateData()generatedData
  5. generatedDataVista previa
  6. generatedDataExportación
  7. ExportaciónSerializadores de salida
  8. Serializadores de salidaAPIs del navegador

Regla de invalidación separada

Estado de configuración — Invalida al cambiar la configuración — generatedData

Decisiones técnicas relacionadas

Abre cualquiera de las decisiones verificadas cuando necesites su contexto.

Decisión 01¿Por qué un único resultado generado compartido?La vista previa y las exportaciones reutilizan el mismo dataset generado.
Contexto
La vista previa y las exportaciones deben representar la misma generación.
Decisión
Generar una vez, guardar el resultado en generatedData y reutilizarlo en los consumidores posteriores.
Consecuencia
Las rutas de vista previa y exportación no vuelven a generar datos con Faker.
Decisión 02¿Por qué borrar el resultado al cambiar la configuración?Una configuración modificada invalida los registros generados anteriormente.
Contexto
Los datos anteriores dejan de corresponder con una plantilla, campos o cantidad modificados.
Decisión
Borrar generatedData cuando cambian esas entradas.
Consecuencia
La interfaz vuelve al estado vacío, pendiente de generar, hasta una nueva generación.
Perspectiva del proyecto

Producto

Cómo funciona el producto

Una vista compacta de cómo configurar, generar, inspeccionar y reutilizar un dataset.

Configuración ilustrativaUsuarios · 3 registros · 4 campos

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.
01

Configurar dataset

Elegir plantilla, campos y número de registros.

02

Generar

Crear los registros ficticios configurados.

03

Dataset generado

Los registros producidos con la configuración actual.

04

Inspeccionar resultado

Ver los mismos registros como tabla o JSON.

05

Reutilizar resultado

Copiar o descargar los registros generados como JSON, CSV o SQL.

Decisiones técnicas relacionadas

Abre cualquiera de las decisiones verificadas cuando necesites su contexto.

Decisión 01¿Por qué un único resultado generado compartido?La vista previa y las exportaciones reutilizan el mismo dataset generado.
Contexto
La vista previa y las exportaciones deben representar la misma generación.
Decisión
Generar una vez, guardar el resultado en generatedData y reutilizarlo en los consumidores posteriores.
Consecuencia
Las rutas de vista previa y exportación no vuelven a generar datos con Faker.
Decisión 02¿Por qué borrar el resultado al cambiar la configuración?Una configuración modificada invalida los registros generados anteriormente.
Contexto
Los datos anteriores dejan de corresponder con una plantilla, campos o cantidad modificados.
Decisión
Borrar generatedData cuando cambian esas entradas.
Consecuencia
La interfaz vuelve al estado vacío, pendiente de generar, hasta una nueva generación.