PeluqueriApp

Descripción del Proyecto

Aplicación web completa para gestión de reservas de peluquerías desarrollada como Trabajo de Fin de Grado (TFG). Sistema moderno y responsive que digitaliza el proceso de citas, mejorando la experiencia del cliente y la eficiencia operativa del negocio.

Características principales

Sistema de reservas integrado con Calendly
Calendario interactivo con disponibilidad en tiempo real
Galería fotográfica de trabajos realizados
Carrusel de servicios con precios y descripciones
Interfaz responsive optimizada para móvil y tablet
Gestión de clientes con historial de citas
Notificaciones automáticas por email

Tecnologías utilizadas

Frontend:

Astro para SSG (Static Site Generation) ultrarrápido
React para componentes interactivos (islands architecture)
TypeScript para desarrollo type-safe
TailwindCSS para diseño responsive moderno
Swiper.js para carrusel fluido

Integración:

Calendly API para gestión de citas
Node.js para backend y lógica de negocio
Nodemailer para notificaciones automáticas
Vercel para hosting y deploy continuo

Diseño:

Mobile-first approach
Accesibilidad WCAG 2.1 nivel AA
Animaciones suaves con CSS y GSAP
Imágenes optimizadas con formato WebP

Funcionalidades para clientes

Explorar servicios con fotos, descripciones y precios
Ver disponibilidad en calendario interactivo
Reservar cita seleccionando fecha, hora y servicio
Recibir confirmación instantánea por email
Gestionar reservas (modificar o cancelar)
Historial de citas pasadas con recordatorio de servicios
Galería inspiración con trabajos del salón

Funcionalidades para peluquería

Dashboard administrativo con vista de citas del día/semana/mes
Gestión de horarios con bloqueo de franjas no disponibles
Base de clientes con notas y preferencias
Estadísticas de reservas y servicios más solicitados
Configuración de servicios, precios y duración
Recordatorios automáticos a clientes 24h antes

Diseño UI/UX

Paleta de colores:

Tonos cálidos y elegantes (dorado, beige, blanco)
Alto contraste para accesibilidad
Modo oscuro opcional

Componentes destacados:

Hero con video/imagen de fondo
Cards de servicios con hover effects
Formulario de contacto intuitivo
Testimonios de clientes
Mapa de ubicación integrado

Arquitectura técnica

Rendering híbrido: Static pages + dynamic islands
API RESTful para comunicación backend
Caché inteligente de disponibilidad
Validaciones robustas en formularios
Lazy loading de imágenes pesadas
PWA ready para instalación en móvil

Retos Técnicos Superados

1. Integración compleja con Calendly

Problema: Calendly tiene limitaciones en su API gratuita y no permite personalización total del widget de reservas.

Solución: Combiné iframe embed de Calendly (para funcionalidad de reservas) con queries a su API para mostrar disponibilidad en mi UI custom. Implementé middleware que sincroniza datos cada 5 minutos y cachea results para reducir llamadas API. Los usuarios ven calendario bonito nuestro pero reservan con Calendly por detrás.

2. Galería fotográfica de alto rendimiento

Problema: Salón de peluquería tiene +200 fotos de trabajos. Cargar todas causaba tiempo de carga de +8 segundos y consumo de 50MB de datos.

Solución: Implementé lazy loading con Intersection Observer que carga imágenes solo cuando entran en viewport. Convertí todas las fotos a WebP con Astro’s Image component (reducción 70% de peso). Usé thumbnails de baja resolución con progressive enhancement. Tiempo de carga inicial: <2 segundos, datos: 3MB.

3. Prevención de doble reserva

Problema: En tests con múltiples usuarios, detectamos race condition donde 2 personas reservaban la misma franja horaria simultáneamente.

Solución: Implementé sistema de “soft locks” con Redis que reserva temporalmente una franja por 2 minutos cuando alguien la está mirando. Si no completa reserva en ese tiempo, se libera automáticamente. Añadí retry logic que sugiere franjas alternativas si la seleccionada se ocupa mientras el usuario rellena el formulario. Doble reservas: 0 después de implementación.

4. Responsive design perfecto en móviles

Problema: 80% de usuarios acceden desde móvil. El calendario complejo de Calendly no se veía bien en pantallas pequeñas.

Solución: Creé vista de calendario completamente diferente para móvil: en lugar de grid semanal, mostré lista de días scrollable con botones de franjas horarias grandes (touch-friendly). Detección automática de orientación para ajustar layout. Redesign iterativo con 15 usuarios test hasta alcanzar SUS score de 85/100.

Resultados y validación

Métricas del TFG:

Nota final: 9.5/10
Mención especial por calidad técnica y UX
Implementación real en 2 peluquerías locales

Impacto en negocios:

Reducción 60% en llamadas telefónicas para citas
Incremento 35% en reservas (menos friction)
Satisfacción cliente: 4.8/5 estrellas
Tiempo gestión citas: -40%

Lighthouse Scores

Performance: 98/100
Accessibility: 96/100
Best Practices: 100/100
SEO: 100/100

Stack técnico completo

Development: Astro + React + TypeScript
Styling: TailwindCSS + custom CSS
Calendar: Calendly API + custom UI
Email: Nodemailer + templates HTML
Hosting: Vercel con CI/CD
Analytics: Google Analytics 4
Forms: React Hook Form + Zod validation

Este proyecto demuestra capacidad de desarrollar soluciones empresariales completas desde análisis de requisitos hasta despliegue en producción, con enfoque en UX y métricas de negocio reales.