Sistema de gestión para centros de entretenimiento infantil con dashboard administrativo, gestión de ventas, inventario, servicios y exportación de menús digitales.
Frontend con SvelteKit: arquitectura híbrida (páginas estáticas pre-renderizadas para SEO y rutas dinámicas SSR para contenido administrativo). Componentes client-side reactivos para interactividad. Monorepo con pnpm workspaces: apps modulares (admin, reception, kidibar, monitor) y packages compartidos (utils, shared, ui). Sistema de diseño responsive con Tailwind CSS, componentes modulares reutilizables (Button, Modal, LoadingSpinner, ErrorBanner, SucursalSelector), y manejo de estado con Svelte stores (auth, metrics, reports, sucursales, products, services, packages). Exportación de menús a PDF y video: generación de menús digitales con HTML5 Canvas, renderizado de alta resolución con configuración de calidad (imageSmoothingQuality: "high"), exportación multi-página con paginación automática, compresión PDF "SLOW" para calidad de texto, captura de video con MediaRecorder API y FFmpeg para conversión a MP4, preview en tiempo real con animaciones suaves, y editor visual de layout con control de columnas, fuentes, colores y fondos personalizables.
Backend en FastAPI con Clean Architecture: separación en capas (routers → services → repositories), dependency injection con interfaces para testabilidad, middleware personalizado (autenticación JWT, autorización por roles, rate limiting con slowapi, bot protection, cache headers, security headers). Base de datos PostgreSQL (Neon serverless) con SQLAlchemy Async ORM, migraciones automáticas con Alembic, soft delete para auditoría, índices optimizados, y relaciones foreign key para integridad referencial. Sistema de roles jerárquico: super_admin (control total, gestión de usuarios), admin_viewer (solo lectura), recepcion (operaciones diarias, ventas, timers, cierre de día), kidibar (solo productos y ventas), monitor (solo visualización de timers activos). Sistema de autenticación JWT con tokens seguros, verificación de contraseñas con bcrypt, y exclusión de usuarios soft-deleted en queries.
Analytics y reportes: dashboard con métricas en tiempo real (revenue total, ticket promedio ATV, count de ventas, revenue por tipo, valor de inventario, alertas de stock bajo, timers activos, utilización de servicios), reportes avanzados con tabs modulares (ventas, inventario, servicios, clientes, arqueos), gráficos interactivos con Chart.js (time series, pie charts, bar charts), comparativas temporales (período actual vs anterior), análisis de series temporales con debouncing (500ms) para optimizar requests, y predicciones ML con algoritmos estadísticos (forecasting de ventas, predicción de capacidad, análisis de tendencias, detección de patrones semanales).
Sistema de timers en tiempo real: inicialmente con WebSockets para sincronización; la Vista Display pasó a polling para simplificar despliegue, evitar problemas de conexión persistente en pantallas/kioscos y compatibilidad con autoplay en PWA (Chrome/Brave). Backend mantiene broadcast periódico y activación automática de timers programados cada 15 s; el monitor público (Vista Display) usa polling adaptativo de timers activos y de alertas pendientes, con actualización en tiempo cuasi real y sonido de alarma al llegar a 0 (configurable desde Recepción → Timers). Gestión completa de catálogo: CRUD de sucursales con filtrado por múltiples sucursales, CRUD de productos con control de stock y alertas, CRUD de servicios con duraciones y precios configurables, CRUD de paquetes (combinaciones de servicios/productos), y gestión de usuarios con permisos granulares.
Optimizaciones de performance: Promise Guard para evitar requests duplicados concurrentes, cache client-side con TTL de 60 segundos para datos frecuentes, invalidación automática de cache en mutaciones (create/update/delete), debouncing en reportes para reducir llamadas API, y lazy loading de componentes pesados. Security headers: X-Frame-Options: DENY (prevents clickjacking), X-Content-Type-Options: nosniff (prevents MIME sniffing), Referrer-Policy: strict-origin-when-cross-origin, Strict-Transport-Security (HSTS) en producción con max-age de 1 año, y detección automática de entorno (desarrollo vs producción) con window.location.hostname.
SEO optimizado: títulos dinámicos por página con utilidad reutilizable (seo.ts), meta descriptions personalizadas, meta robots para indexación, svelte:head en layouts y páginas clave, y Lighthouse score 100/100 en SEO. Background tasks: limpieza automática de datos soft-deleted (cada 24 horas, retención de 30 días), broadcast de timers en tiempo real, y activación automática de timers programados.
Features destacados: dashboard admin con métricas agregadas y filtrado por sucursal, botón maestro de actualización con validaciones (2s mínimo, 30 max por sesión), panel de predicciones ML bajo demanda, exportación de reportes (Excel/PDF con openpyxl y reportlab), sistema de ventas completo con items (productos, servicios, paquetes), cierre de día con arqueo y validaciones, sistema de permisos granular por ruta, health checks con verificación de conectividad a BD, y manejo centralizado de errores con CORS headers consistentes.
Optimizaciones de deployment: multi-stage Docker builds para imágenes optimizadas (Alpine Linux 3.20), compresión automática de respuestas HTTP vía Fly.io proxy edge, precompress de assets estáticos en SvelteKit, eliminación de console.log en producción vía esbuild, y sistema de health checks para monitoreo. Arquitectura offline-first con assets locales, fuentes self-hosted, y sistema de iconos SVG (Lucide Icons) integrado.
Stack: TypeScript, SvelteKit 1.30.x, FastAPI 0.115.0, SQLAlchemy Async 2.0.36, PostgreSQL (Neon serverless), asyncpg, bcrypt, python-jose, slowapi, jsPDF, FFmpeg (WASM), Chart.js, Tailwind CSS, Docker, Fly.io. Deploy automatizado en Fly.io con zero-downtime, variables de entorno inyectadas en build-time para frontend (VITE_), configuración dual dev/prod con detección automática de entorno vía window.location.hostname, y monorepo con pnpm workspaces para modularidad y reutilización de código. Management system for children's entertainment centers with administrative dashboard, sales management, inventory, services and digital menu export.
Frontend with SvelteKit: hybrid architecture (pre-rendered static pages for SEO and dynamic SSR routes for administrative content). Reactive client-side components for interactivity. Monorepo with pnpm workspaces: modular apps (admin, reception, kidibar, monitor) and shared packages (utils, shared, ui). Responsive design system with Tailwind CSS, modular reusable components (Button, Modal, LoadingSpinner, ErrorBanner, SucursalSelector), and state management with Svelte stores (auth, metrics, reports, sucursales, products, services, packages). Digital menu export to PDF and video: HTML5 Canvas menu generation, high-resolution rendering with quality configuration (imageSmoothingQuality: "high"), multi-page export with automatic pagination, "SLOW" PDF compression for text quality, video capture with MediaRecorder API and FFmpeg for MP4 conversion, real-time preview with smooth animations, and visual layout editor with column control, fonts, colors and customizable backgrounds.
Backend in FastAPI with Clean Architecture: layer separation (routers → services → repositories), dependency injection with interfaces for testability, custom middleware (JWT authentication, role-based authorization, rate limiting with slowapi, bot protection, cache headers, security headers). PostgreSQL database (Neon serverless) with SQLAlchemy Async ORM, automatic migrations with Alembic, soft delete for auditing, optimized indexes, and foreign key relationships for referential integrity. Hierarchical role system: super_admin (full control, user management), admin_viewer (read-only), recepcion (daily operations, sales, timers, day closing), kidibar (products and sales only), monitor (active timers visualization only). JWT authentication system with secure tokens, password verification with bcrypt, and exclusion of soft-deleted users in queries.
Analytics and reports: dashboard with real-time metrics (total revenue, average ticket ATV, sales count, revenue by type, inventory value, low stock alerts, active timers, service utilization), advanced reports with modular tabs (sales, inventory, services, customers, cash counts), interactive charts with Chart.js (time series, pie charts, bar charts), temporal comparisons (current vs previous period), time series analysis with debouncing (500ms) to optimize requests, and ML predictions with statistical algorithms (sales forecasting, capacity prediction, trend analysis, weekly pattern detection).
Real-time timer system: initially with WebSockets for synchronization; the Display View moved to polling to simplify deployment, avoid persistent-connection issues on screens/kiosks, and PWA autoplay compatibility (Chrome/Brave). Backend keeps periodic broadcast and automatic activation of scheduled timers every 15 s; the public monitor (Display View) uses adaptive polling of active timers and pending alerts, with near real-time updates and alarm sound at 0 (configurable from Reception → Timers). Complete catalog management: CRUD of branches with multi-branch filtering, CRUD of products with stock control and alerts, CRUD of services with configurable durations and prices, CRUD of packages (service/product combinations), and user management with granular permissions.
Performance optimizations: Promise Guard to avoid duplicate concurrent requests, client-side cache with 60-second TTL for frequent data, automatic cache invalidation on mutations (create/update/delete), debouncing in reports to reduce API calls, and lazy loading of heavy components. Security headers: X-Frame-Options: DENY (prevents clickjacking), X-Content-Type-Options: nosniff (prevents MIME sniffing), Referrer-Policy: strict-origin-when-cross-origin, Strict-Transport-Security (HSTS) in production with 1-year max-age, and automatic environment detection (development vs production) with window.location.hostname.
Optimized SEO: dynamic titles per page with reusable utility (seo.ts), customized meta descriptions, meta robots for indexing, svelte:head in layouts and key pages, and Lighthouse score 100/100 in SEO. Background tasks: automatic cleanup of soft-deleted data (every 24 hours, 30-day retention), real-time timer broadcasts, and automatic activation of scheduled timers.
Key features: admin dashboard with aggregated metrics and branch filtering, master update button with validations (2s minimum, 30 max per session), on-demand ML predictions panel, report export (Excel/PDF with openpyxl and reportlab), complete sales system with items (products, services, packages), day closing with cash count and validations, granular permission system per route, health checks with database connectivity verification, and centralized error handling with consistent CORS headers.
Deployment optimizations: multi-stage Docker builds for optimized images (Alpine Linux 3.20), automatic HTTP response compression via Fly.io proxy edge, precompress of static assets in SvelteKit, console.log removal in production via esbuild, and health check system for monitoring. Offline-first architecture with local assets, self-hosted fonts, and integrated SVG icon system (Lucide Icons).
Stack: TypeScript, SvelteKit 1.30.x, FastAPI 0.115.0, SQLAlchemy Async 2.0.36, PostgreSQL (Neon serverless), asyncpg, bcrypt, python-jose, slowapi, jsPDF, FFmpeg (WASM), Chart.js, Tailwind CSS, Docker, Fly.io. Automated deployment on Fly.io with zero-downtime, environment variables injected at build-time for frontend (VITE_), dual dev/prod configuration with automatic environment detection via window.location.hostname, and monorepo with pnpm workspaces for modularity and code reusability. Sistema de gestión para centros de entretenimiento infantil con dashboard administrativo, gestión de ventas, inventario, servicios y exportación de menús digitales.
Frontend con SvelteKit: arquitectura híbrida (páginas estáticas pre-renderizadas para SEO y rutas dinámicas SSR para contenido administrativo). Componentes client-side reactivos para interactividad. Monorepo con pnpm workspaces: apps modulares (admin, reception, kidibar, monitor) y packages compartidos (utils, shared, ui). Sistema de diseño responsive con Tailwind CSS, componentes modulares reutilizables (Button, Modal, LoadingSpinner, ErrorBanner, SucursalSelector), y manejo de estado con Svelte stores (auth, metrics, reports, sucursales, products, services, packages). Exportación de menús a PDF y video: generación de menús digitales con HTML5 Canvas, renderizado de alta resolución con configuración de calidad (imageSmoothingQuality: "high"), exportación multi-página con paginación automática, compresión PDF "SLOW" para calidad de texto, captura de video con MediaRecorder API y FFmpeg para conversión a MP4, preview en tiempo real con animaciones suaves, y editor visual de layout con control de columnas, fuentes, colores y fondos personalizables.
Backend en FastAPI con Clean Architecture: separación en capas (routers → services → repositories), dependency injection con interfaces para testabilidad, middleware personalizado (autenticación JWT, autorización por roles, rate limiting con slowapi, bot protection, cache headers, security headers). Base de datos PostgreSQL (Neon serverless) con SQLAlchemy Async ORM, migraciones automáticas con Alembic, soft delete para auditoría, índices optimizados, y relaciones foreign key para integridad referencial. Sistema de roles jerárquico: super_admin (control total, gestión de usuarios), admin_viewer (solo lectura), recepcion (operaciones diarias, ventas, timers, cierre de día), kidibar (solo productos y ventas), monitor (solo visualización de timers activos). Sistema de autenticación JWT con tokens seguros, verificación de contraseñas con bcrypt, y exclusión de usuarios soft-deleted en queries.
Analytics y reportes: dashboard con métricas en tiempo real (revenue total, ticket promedio ATV, count de ventas, revenue por tipo, valor de inventario, alertas de stock bajo, timers activos, utilización de servicios), reportes avanzados con tabs modulares (ventas, inventario, servicios, clientes, arqueos), gráficos interactivos con Chart.js (time series, pie charts, bar charts), comparativas temporales (período actual vs anterior), análisis de series temporales con debouncing (500ms) para optimizar requests, y predicciones ML con algoritmos estadísticos (forecasting de ventas, predicción de capacidad, análisis de tendencias, detección de patrones semanales).
Sistema de timers en tiempo real: inicialmente con WebSockets para sincronización; la Vista Display pasó a polling para simplificar despliegue, evitar problemas de conexión persistente en pantallas/kioscos y compatibilidad con autoplay en PWA (Chrome/Brave). Backend mantiene broadcast periódico y activación automática de timers programados cada 15 s; el monitor público (Vista Display) usa polling adaptativo de timers activos y de alertas pendientes, con actualización en tiempo cuasi real y sonido de alarma al llegar a 0 (configurable desde Recepción → Timers). Gestión completa de catálogo: CRUD de sucursales con filtrado por múltiples sucursales, CRUD de productos con control de stock y alertas, CRUD de servicios con duraciones y precios configurables, CRUD de paquetes (combinaciones de servicios/productos), y gestión de usuarios con permisos granulares.
Optimizaciones de performance: Promise Guard para evitar requests duplicados concurrentes, cache client-side con TTL de 60 segundos para datos frecuentes, invalidación automática de cache en mutaciones (create/update/delete), debouncing en reportes para reducir llamadas API, y lazy loading de componentes pesados. Security headers: X-Frame-Options: DENY (prevents clickjacking), X-Content-Type-Options: nosniff (prevents MIME sniffing), Referrer-Policy: strict-origin-when-cross-origin, Strict-Transport-Security (HSTS) en producción con max-age de 1 año, y detección automática de entorno (desarrollo vs producción) con window.location.hostname.
SEO optimizado: títulos dinámicos por página con utilidad reutilizable (seo.ts), meta descriptions personalizadas, meta robots para indexación, svelte:head en layouts y páginas clave, y Lighthouse score 100/100 en SEO. Background tasks: limpieza automática de datos soft-deleted (cada 24 horas, retención de 30 días), broadcast de timers en tiempo real, y activación automática de timers programados.
Features destacados: dashboard admin con métricas agregadas y filtrado por sucursal, botón maestro de actualización con validaciones (2s mínimo, 30 max por sesión), panel de predicciones ML bajo demanda, exportación de reportes (Excel/PDF con openpyxl y reportlab), sistema de ventas completo con items (productos, servicios, paquetes), cierre de día con arqueo y validaciones, sistema de permisos granular por ruta, health checks con verificación de conectividad a BD, y manejo centralizado de errores con CORS headers consistentes.
Optimizaciones de deployment: multi-stage Docker builds para imágenes optimizadas (Alpine Linux 3.20), compresión automática de respuestas HTTP vía Fly.io proxy edge, precompress de assets estáticos en SvelteKit, eliminación de console.log en producción vía esbuild, y sistema de health checks para monitoreo. Arquitectura offline-first con assets locales, fuentes self-hosted, y sistema de iconos SVG (Lucide Icons) integrado.
Stack: TypeScript, SvelteKit 1.30.x, FastAPI 0.115.0, SQLAlchemy Async 2.0.36, PostgreSQL (Neon serverless), asyncpg, bcrypt, python-jose, slowapi, jsPDF, FFmpeg (WASM), Chart.js, Tailwind CSS, Docker, Fly.io. Deploy automatizado en Fly.io con zero-downtime, variables de entorno inyectadas en build-time para frontend (VITE_), configuración dual dev/prod con detección automática de entorno vía window.location.hostname, y monorepo con pnpm workspaces para modularidad y reutilización de código.