La herramienta definitiva para planificar, organizar y gestionar ferias, eventos y stands comerciales de manera profesional y eficiente.
FeriaCheck es una aplicación web moderna y completa que transforma la planificación de eventos en una experiencia intuitiva y productiva. Diseñada específicamente para profesionales del sector de ferias, eventos y stands comerciales, combina la simplicidad de uso con funcionalidades avanzadas de gestión de proyectos.
- 🏪 Empresarios preparando participación en ferias comerciales
- 🎨 Artesanos organizando eventos de venta directa
- 🍽️ Sector Gastronómico gestionando food trucks y stands
- 🎭 Organizadores coordinando eventos temáticos y medievales
- 👥 Equipos trabajando en proyectos de eventos corporativos
- ✅ Sistema de Prioridades: Alta, Media y Baja con colores neon
- 🏷️ Categorización Automática: 6 áreas clave del negocio
- 🔍 Filtros Avanzados: Por estado, prioridad, categoría y búsqueda en tiempo real
- 📊 Progreso Visual: Barra de progreso y contadores actualizados automáticamente
- 🎨 Feria Artesanal - Para creadores y artesanos
- 🍕 Evento Gastronómico - Para restaurantes y food trucks
- ⚔️ Feria Medieval/Temática - Para eventos especializados
- 💼 Stand de Servicios - Para empresas de servicios
- ✨ Plantillas Personalizables - Crea y guarda tus propias plantillas
- 🌙 Modo Oscuro/Claro con colores neon para etiquetas
- 📱 Diseño 100% Responsive optimizado para todos los dispositivos
- 🎓 Tutorial Interactivo integrado con 5 pasos guiados
- 🎨 Interfaz Moderna con Material Design y animaciones suaves
- 📄 Exportación a PDF profesional con diseño personalizado
- 📱 Compartir en WhatsApp con resumen del progreso
- 💾 Sincronización Local para trabajo offline
- 🔄 Sistema de Respaldo y restauración de datos
- HTML5: Estructura semántica y accesible
- CSS3: Variables CSS, Flexbox, Grid, Animaciones y Media Queries
- JavaScript ES6+: Módulos, Clases, Arrow Functions, Destructuring
- 🔄 ES6 Modules: Separación clara de responsabilidades
- 🏗️ Clases: Organización orientada a objetos
- 📡 Observer Pattern: Sistema de notificaciones entre módulos
- 🎯 Event-Driven: Arquitectura basada en eventos desacoplados
- 💾 LocalStorage: Persistencia robusta en el navegador
- 🎛️ State Management: Gestión centralizada del estado
- ✅ Data Validation: Validación y sanitización de datos
- 🔄 Cache Management: Sistema inteligente de caché
FeriaCheck/
├── 📄 index.html # Punto de entrada HTML principal
├── 🎨 css/ # Estilos CSS organizados modularmente
│ ├── main.css # Estilos base, variables y modo oscuro
│ ├── components.css # Componentes UI (modales, botones, tutorial)
│ └── responsive.css # Media queries y diseño adaptativo
├── ⚙️ js/ # Lógica JavaScript modular
│ ├── app.js # Aplicación principal y orquestación
│ ├── tasks.js # Gestión completa de tareas
│ ├── templates.js # Sistema de plantillas
│ ├── storage.js # Gestión de almacenamiento local
│ ├── tutorial.js # Sistema de tutorial interactivo
│ └── utils.js # Funciones utilitarias y helpers
└── 📊 data/ # Datos estáticos y configuración
└── templates.js # Plantillas predefinidas del sistema
- 🌐 Navegador: Chrome 60+, Firefox 55+, Safari 12+, Edge 79+
- 💻 Plataforma: Windows, macOS, Linux, iOS, Android
- 📱 Dispositivo: Desktop, Tablet, Móvil
- 🔌 Conexión: Funciona offline (solo para sincronización)
# 1. Clonar el repositorio
git clone https://github.com/yourusername/FeriaCheck.git
# 2. Navegar al directorio
cd FeriaCheck
# 3. Abrir en el navegador
# Opción A: Doble clic en index.html
# Opción B: Servidor local (recomendado para desarrollo)
python -m http.server 8000
# Luego abrir: http://localhost:8000- 🎓 Ver Tutorial: Al abrir la app por primera vez, se muestra automáticamente
- 📋 Seleccionar Plantilla: Elige una predefinida o crea una personalizada
- ➕ Agregar Tareas: Usa el formulario rápido o el modal detallado
- ✅ Gestionar Progreso: Marca tareas como completadas, edita o elimina
- 📊 Monitorear: Sigue tu avance con la barra de progreso visual
- 📤 Exportar: Genera PDFs o comparte por WhatsApp
- 🚀 Comenzar con Plantilla - Explica el sistema de plantillas
- ➕ Agregar Tareas Nuevas - Muestra cómo crear tareas
- 🔍 Filtrar y Buscar - Explica el sistema de filtros
- 📊 Seguimiento de Progreso - Muestra las herramientas de monitoreo
- 🛠️ Gestionar Tareas - Explica edición, eliminación y organización
- 🎯 Navegación Intuitiva: Botones Anterior/Siguiente
- 🔘 Puntos de Navegación: Clic directo a cualquier paso
- 🎨 Visual Atractivo: Iconos y animaciones
- 💾 Persistente: Se recuerda si ya lo viste
- 🔄 Reutilizable: Accesible desde el botón ❓ en cualquier momento
- 🎭 Orquesta todos los módulos del sistema
- 🎯 Maneja eventos de la interfaz de usuario
- 🔄 Gestiona el ciclo de vida de la aplicación
- 🌐 Expone funciones globales para el tutorial
- ✅ CRUD completo de tareas
- 🔍 Filtrado inteligente y búsqueda avanzada
- 📊 Estadísticas y cálculo de progreso
- 🔔 Sistema de notificaciones y eventos
- 📥 Carga automática de plantillas predefinidas
- ✨ Creación y gestión de plantillas personalizadas
- 📤 Importación/exportación de configuraciones
- 🔄 Duplicación y modificación de plantillas existentes
- 💾 Interfaz robusta con localStorage
- 🔄 Persistencia automática de todos los datos
- 💿 Sistema de backup y restauración
- 🧹 Limpieza y gestión de datos
- 🎓 Gestión del tutorial interactivo
- 💾 Persistencia del estado del tutorial
- 🎯 Navegación entre pasos
- 🔄 Reinicio y reutilización
- 🛠️ Funciones helper reutilizables
- ✅ Validaciones de datos
- 📅 Formateo de fechas y texto
- ⚡ Optimizaciones (debounce, throttle)
// js/newFeature.js
export class NewFeature {
constructor() {
this.initialized = false;
}
init() {
if (this.initialized) return;
this.setupEventListeners();
this.initialized = true;
}
setupEventListeners() {
// Configurar event listeners
}
}// app.js
import { NewFeature } from './newFeature.js';
class FeriaCheckApp {
constructor() {
this.newFeature = new NewFeature();
// ... otros módulos
}
init() {
// ... inicialización de otros módulos
this.newFeature.init();
}
}/* css/components.css */
.new-feature {
/* Estilos específicos */
}
/* Modo oscuro */
body.dark-mode .new-feature {
/* Estilos para modo oscuro */
}Los colores se definen en variables CSS en css/main.css:
:root {
--primary: #7b2cbf; /* Púrpura principal */
--secondary: #0f4c75; /* Azul secundario */
--accent: #ff9f43; /* Naranja de acento */
--success: #28a745; /* Verde de éxito */
--warning: #ffc107; /* Amarillo de advertencia */
--danger: #dc3545; /* Rojo de peligro */
--info: #17a2b8; /* Azul informativo */
--light: #f8f9fa; /* Gris claro */
--dark: #343a40; /* Gris oscuro */
}- 🎨 Colores NEON para etiquetas y prioridades
- 🌙 Tema oscuro con gradientes modernos
- ✨ Efectos de sombra para elementos importantes
- 💾 Persistencia automática de preferencias
- 📝 Crear desde cero con el modal de plantillas
- 📤 Importar archivos JSON existentes
- 🔄 Duplicar plantillas existentes y modificar
- 💾 Guardar y reutilizar en futuros proyectos
/* Mobile First */
@media (max-width: 767px) { /* Mobile */ }
@media (min-width: 768px) { /* Tablet */ }
@media (min-width: 992px) { /* Desktop */ }
@media (min-width: 1200px) { /* Large */ }
@media (min-width: 1600px) { /* Ultra-wide */ }- 📱 Sidebar colapsable con overlay
- 👆 Touch-friendly para todos los controles
- 📜 Scroll optimizado para dispositivos táctiles
- 🎯 Controles adaptados al tamaño de pantalla
- 🔄 Orientación automática (portrait/landscape)
- 🖥️ Sidebar fijo siempre visible
- ⌨️ Atajos de teclado para power users
- 🖱️ Hover effects para mejor UX
- 📊 Vista expandida de información
- 🛡️ Sanitización de Input: Prevención completa de XSS
- ✅ Validación de Datos: Verificación antes de procesar
- 🔐 LocalStorage Seguro: Solo datos de la aplicación
- 🧹 Limpieza Automática: Eliminación de datos corruptos
- 📝 Longitud de texto y caracteres permitidos
- 📅 Formato de fechas y rangos válidos
- 🔢 Tipos de datos y conversiones seguras
- 🚫 Prevención de inyección de código malicioso
- ⚡ Lazy Loading: Carga bajo demanda de recursos
- 🔍 Debounce: Optimización de búsqueda en tiempo real
- 🎯 Throttle: Control de eventos frecuentes
- 🎨 CSS Optimizado: Variables y reutilización de estilos
- 💾 Cache Inteligente: Almacenamiento eficiente de datos
- 🚀 Tiempo de carga: < 2 segundos
- 📱 Responsive: Adaptación instantánea a cambios de pantalla
- 💾 Memoria: Uso eficiente de recursos del navegador
- 🔄 Fluidez: 60 FPS en todas las animaciones
- ✅ Gestión de tareas (CRUD completo)
- ✅ Sistema de plantillas (predefinidas y personalizadas)
- ✅ Filtros y búsqueda (en tiempo real)
- ✅ Modo oscuro/claro (con persistencia)
- ✅ Responsive design (todos los dispositivos)
- ✅ Exportación PDF (con diseño personalizado)
- ✅ Compartir WhatsApp (con resumen del progreso)
- ✅ Tutorial interactivo (5 pasos guiados)
- ✅ Sistema de respaldo (importar/exportar)
| Navegador | Versión Mínima | Estado |
|---|---|---|
| Chrome | 60+ | ✅ Full |
| Firefox | 55+ | ✅ Full |
| Safari | 12+ | ✅ Full |
| Edge | 79+ | ✅ Full |
| Opera | 47+ | ✅ Full |
- 📱 Móviles: iPhone, Android (portrait y landscape)
- 📱 Tablets: iPad, Android tablets
- 💻 Laptops: 13" a 17" (todas las resoluciones)
- 🖥️ Desktop: Monitores 1080p a 4K
- 🖥️ Ultra-wide: Monitores 21:9 y 32:9
- 🍴 Fork el proyecto
- 🌿 Crea una rama para tu feature (
git checkout -b feature/AmazingFeature) - 💾 Commit tus cambios (
git commit -m 'Add some AmazingFeature') - 🚀 Push a la rama (
git push origin feature/AmazingFeature) - 🔄 Abre un Pull Request
- 📝 Código limpio y bien documentado
- 🧪 Testing de nuevas funcionalidades
- 📱 Responsive design para todos los dispositivos
- ♿ Accesibilidad siguiendo estándares WCAG
- 🌐 Internacionalización preparada para múltiples idiomas
feat: nueva funcionalidad
fix: corrección de bug
docs: actualización de documentación
style: cambios de estilo/formato
refactor: refactorización de código
test: agregar o modificar tests
chore: tareas de mantenimiento
Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.
MIT License
Copyright (c) 2024 FeriaCheck
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
- 🎨 Font Awesome - Iconografía profesional y consistente
- 📄 jsPDF - Generación de PDFs de alta calidad
- 🖼️ html2canvas - Captura de pantalla para exportación
- 🎊 canvas-confetti - Efectos visuales de celebración
- 👥 Usuarios beta que probaron y dieron feedback
- 🎪 Profesionales del sector que compartieron sus necesidades
- 🌍 Comunidad open source por las herramientas utilizadas
- 📚 Documentación: Revisa este README completo
- 🐛 Issues: Busca en los issues existentes de GitHub
- 💬 Discusiones: Usa la sección de Discussions de GitHub
- 📧 Email: ginterdonatop@gmail.com
Al reportar un problema, incluye:
- 🖥️ Sistema operativo y versión
- 🌐 Navegador y versión
- 📱 Dispositivo (si es móvil/tablet)
- 📝 Descripción detallada del problema
- 🎯 Pasos para reproducir el error
- 📸 Capturas de pantalla si es posible
- 🔄 Sincronización en la nube con múltiples dispositivos
- 📧 Notificaciones por email y recordatorios
- 👥 Colaboración en equipo con roles y permisos
- 📊 Reportes avanzados y analytics
- 🗓️ Integración con calendarios (Google, Outlook)
- 📱 Aplicación móvil nativa para iOS y Android
- 🔔 Notificaciones push en tiempo real
- 🌐 Múltiples idiomas (inglés, francés, portugués)
- 🤖 Inteligencia artificial para sugerencias de tareas
- 📈 Analytics avanzados y métricas de productividad
- 🔗 Integración con CRM y ERP empresariales
- 💰 Gestión de presupuestos y costos
- 🎯 Machine Learning para optimización de flujos de trabajo
- 🚀 Facilidad de Uso: Tutorial integrado y interfaz intuitiva
- ⚡ Productividad: Sistema de prioridades y filtros inteligentes
- 📱 Accesibilidad: Funciona en cualquier dispositivo sin instalación
- 🎨 Personalización: Temas, plantillas y categorías adaptables
- 💾 Confiabilidad: Funciona offline con sincronización automática
- 🎪 Especialización: Diseñado específicamente para ferias y eventos
- 🎓 Aprendizaje: Tutorial interactivo que guía al usuario
- 🌈 Experiencia Visual: Colores neon y modo oscuro premium
- 🔄 Flexibilidad: Plantillas predefinidas + personalización total
- 📊 Profesionalismo: Exportación PDF y compartir en WhatsApp
- 📅 Fecha de Lanzamiento: Agosto 2025
- 🔄 Última Actualización: Agosto 2025
- 📁 Archivos del Proyecto: 15+
- 🎨 Líneas de CSS: 1000+
- ⚙️ Líneas de JavaScript: 800+
- 📱 Dispositivos Soportados: 100+
- 🌐 Navegadores Compatibles: 5+
- 🎯 Casos de Uso: 10+
🎪 Desarrollado con ❤️ para la comunidad de ferias y eventos de Emprendedores
FeriaCheck - Transformando la planificación de tus Ferias y Eventos en una experiencia extraordinaria.
¿Tienes preguntas o sugerencias? ¡Nos encantaría escucharte! 🌟