Creador y host de plantillas personalizadas para documentos y PDFs(en desarollo)

Una aplicación Next.js para crear documentos a partir de plantillas predefinidas almacenadas en PocketBase. Los usuarios pueden completar formularios dinámicos generados a partir de un esquema JSON, previsualizar el HTML resultante (compilado con Handlebars) y generar o ver archivos PDF almacenados en caché. Las imágenes se cargan y almacenan como recursos en PocketBase. Se implementan validaciones sólidas tanto del lado del cliente como del servidor.

Tabla de contenido

Descripción general

Características principales

Pila tecnológica

Estructura del proyecto

Arquitectura principal

Modelo de datos (PocketBase)

Rutas de la API

Flujos de frontend

Especificación del esquema de plantillas

Validaciones

Generación y almacenamiento en caché de PDF

Flujo de carga de imágenes

Autenticación y enrutamiento

Desarrollo local

Cómo agregar una nueva plantilla

Limitaciones conocidas y mejoras futuras

Índice de archivos

Descripción general

Este proyecto evolucionó de un concepto inicial de editor GrapeJS + Appwrite a un sistema optimizado centrado en:

Uso de plantillas predefinidas almacenadas en PocketBase

Generación de formularios dinámicos a partir de un esquema JSON

Compilación de plantillas con Handlebars (#if, #each) para que las secciones opcionales se muestren solo cuando existan datos

Generación y almacenamiento en caché de archivos PDF bajo demanda mediante Puppeteer

Validaciones sólidas para tipos de entrada, formato de correo electrónico, rangos numéricos e imágenes

El código base actual se centra en PocketBase como backend y ya no utiliza Appwrite en las rutas de tiempo de ejecución. El README original hace referencia a Appwrite y GrapeJS; utilice este documento actualizado en adelante.

Características principales

Centro de plantillas para cada ID de plantilla con:

Lista de documentos generados

Creación de nuevos documentos mediante un formulario

Acciones de edición y eliminación por documento

Haga clic en una tarjeta de documento para abrir/ver su PDF (generar si no está en caché)

Representación dinámica de formularios a partir del esquema con:

Compatibilidad con un formato de esquema de matriz "fields" y un esquema de objeto plano heredado

Tipos de campo: texto, área de texto, número, fecha, selección, imagen, matriz (grupo repetitivo)

Validaciones del lado del cliente (obligatorio, verificación de tipo, patrón, mínimo/máximo, longitud mínima/máxima, correo electrónico, opciones de selección, tamaño de la matriz)

Mensajes de error en tiempo real y botón de envío deshabilitado hasta que sea válido

Carga de imágenes:

Validación del lado del cliente de MIME y tamaño de archivo (configurable)

Validación del lado del servidor para aplicar tipos de imagen y límites de tamaño

Imágenes cargadas almacenadas en los recursos de PocketBase

Generación de PDF:

PDF en formato A4 mediante Puppeteer con printBackground

Almacenamiento en caché en los recursos de PocketBase por documento; Reutilización en vistas posteriores

Renderizado condicional (Handlebars):

Campos opcionales envueltos en bloques {{#if}}

Arrays renderizados con {{#each}}; omitidos cuando están vacíos

Tecnologías utilizadas

Framework: Next.js 15 (App Router) + React 19

Lenguaje: TypeScript

Estilo/Interfaz de usuario: Tailwind CSS + componentes shadcn/ui

Backend: PocketBase (autohospedado)

PDF: Puppeteer

Plantillas: Handlebars en el cliente para la previsualización