Aplicación web desarrollada con React para generar datos ficticios configurables destinados a pruebas, ejercicios, prototipos, bases de datos y aplicaciones.
El proyecto forma parte de una práctica guiada de Desarrollo Web FullStack y se desarrolla de forma incremental a lo largo de cuatro sesiones.
DevData Generator permite preparar conjuntos de datos ficticios sin escribir manualmente cada registro. Está pensado principalmente para estudiantes y desarrolladores que necesiten datos para probar:
- tablas y formularios;
- componentes y APIs;
- bases de datos y operaciones CRUD;
- importaciones y exportaciones;
- prototipos y demostraciones.
Las cuatro sesiones están completadas y el proyecto se encuentra preparado para la entrega final. La aplicación permite:
- elegir entre las plantillas Usuarios, Alumnos y Productos;
- indicar una cantidad entre 1 y 100 registros;
- seleccionar los campos incluidos;
- validar la configuración antes de generar;
- generar datos ficticios con Faker;
- consultar los registros en Tabla o JSON;
- descargar los mismos registros como JSON o CSV;
- generar y descargar sentencias SQL
INSERT; - copiar al portapapeles el JSON mostrado y descargado;
- mostrar un estado explicativo cuando todavía no existen resultados;
- utilizar una interfaz responsive validada en
390 × 844y1280 × 800; - navegar mediante teclado, utilizar controles etiquetados y reconocer el foco visible;
- alternar entre modo claro y oscuro, conservando la preferencia en
localStorage.
La generación, las vistas, la copia y las exportaciones parten del mismo conjunto de datos actual. Cambiar la configuración limpia los resultados anteriores para evitar mostrar datos desactualizados.
- nombre;
- apellidos;
- email;
- teléfono;
- edad;
- ciudad;
- UUID;
- fecha de alta.
- nombre;
- apellidos;
- email;
- teléfono;
- edad;
- ciudad;
- UUID;
- curso;
- fecha de matriculación.
- ID;
- nombre;
- categoría;
- precio;
- stock;
- activo.
| Formato | Vista | Descarga | Copia |
|---|---|---|---|
| JSON | Sí | Sí | Sí |
| CSV | No | Sí | No |
SQL INSERT |
No | Sí | No |
El SQL generado contiene sentencias INSERT descargables. La aplicación no ejecuta SQL ni afirma compatibilidad con múltiples dialectos.
La interfaz incluye:
- estado vacío antes de generar o después de limpiar resultados;
- diseño adaptable a móvil y escritorio;
- modo oscuro persistente;
- controles HTML nativos con etiquetas;
- mensajes de validación y de resultado de copia;
- navegación mediante teclado y foco visible;
- regiones desplazables para contenidos amplios.
Estas medidas representan accesibilidad básica. La validación final incluyó una prueba con Narrador de Windows, pero no constituye una auditoría WCAG completa ni una auditoría profesional de accesibilidad.
- React
- Vite
- JavaScript
- CSS
- ESLint
- Git
- GitHub
@faker-js/faker: generación de datos ficticios.
- PapaParse: se evaluó para CSV, pero la serialización se resolvió con una utilidad propia.
- FileSaver: se evaluó para descargas, pero se utilizó
Blob,URL.createObjectURLy un enlace temporal.
No se instalaron PapaParse ni FileSaver.
- Node.js
- npm
- Git
git clone https://github.com/Martret92/devdata-generator.git
cd devdata-generatornpm installnpm run devEn Windows puede utilizarse:
npm.cmd run dev| Comando | Descripción |
|---|---|
npm run dev |
Inicia el servidor de desarrollo de Vite |
npm run build |
Genera la compilación de producción |
npm run lint |
Ejecuta ESLint sobre el proyecto |
npm run preview |
Previsualiza la compilación de producción |
- Sesión 1: análisis y diseño
- Investigación de herramientas similares
- Wireframe aprobado
- Arquitectura orientativa de componentes
- Registro de prompts
- Cierre de la Sesión 2
- Cierre de la Sesión 3
- Pruebas finales
- Cierre de la Sesión 4
Estado: completada
Incluyó la investigación, definición del problema y usuarios, plantillas, wireframe, arquitectura orientativa y preparación técnica del proyecto.
Estado: completada
Incluyó configuración, validaciones, generación con Faker, Tabla, vista JSON y navegación básica mediante teclado.
Estado: completada
Incluyó las descargas JSON, CSV y SQL INSERT, copia JSON, corrección de la vista inicial, estado vacío, responsive, accesibilidad básica y modo oscuro persistente.
Commit funcional final:
b32b058 feat: add dark mode
b32b058daccbe8f97314029fa65814ddd0e7c07a
Estado: completada
Incluyó:
- auditoría técnica final;
- corrección del idioma y del título del documento;
- matriz física en Chrome, Edge y Firefox;
- revisión responsive en móvil y escritorio;
- zoom al 200 %;
- prueba con Narrador de Windows;
- lint, build y preview de producción;
- documentación final;
- preparación de capturas, demostración y presentación.
Candidato funcional probado:
108c3ba fix: correct document metadata
108c3ba5ca9b948f25f4cf9c3e8da1e64b121aff
El proyecto ha completado las cuatro sesiones previstas. No existe ninguna incidencia funcional abierta conocida en el candidato probado.
La documentación final y la posible etiqueta de versión deben aplicarse sobre un último commit documental validado, posterior a 108c3ba.
La IA se utilizó como apoyo para organizar requisitos, preparar tareas técnicas, revisar cambios y estructurar documentación. Las decisiones, los cambios del repositorio y las pruebas fueron revisados por el autor.
Las consultas relevantes están resumidas en el registro de prompts.
- Proyecto: NTEC ToolBox · DevData Generator
- Asignatura: Desarrollo Web FullStack
- Profesor: Óscar Burgos
- Autor: Jaime Martret
- Fecha prevista de entrega final: 31 de julio de 2026
Fuera del alcance obligatorio quedan ideas como:
- seed y relaciones entre entidades;
- Excel e importación de esquemas;
- API REST y estructuras anidadas;
- creación libre de plantillas;
- historial, edición avanzada y filtros.
Estos extras no están implementados y no forman parte de la entrega obligatoria.