Plataforma digital llave en mano para una escuela de idiomas.

ylcvalencia.es no es una web de presentación, sino una plataforma digital completa para Your Language Club, un centro de enseñanza bilingüe en Valencia. Reúne una web pública trilingüe (RU / ES / EN), áreas personales de alumno y profesor, bots de Telegram y WhatsApp con asistente IA, una tienda online, pagos online, un CRM propio con horario, asistencia y módulo de nóminas, un motor de contenido para el blog y un sistema de contratos B2B — todo sobre un mismo backend y una base de datos común. La escuela imparte dos itinerarios estrictamente separados: español para rusoparlantes y expatriados angloparlantes, e inglés para hispanohablantes.

Stack tecnológico

• Frontend: Next.js 16 (App Router, Turbopack, output standalone) + React 19 + TypeScript 6, Tailwind CSS 4 (@theme inline), diseño a medida, totalmente adaptable.
• i18n: next-intl 4, tres idiomas de interfaz (RU / ES / EN), autodetección del idioma (navigator.language → Accept-Language → IP), hreflang.
• Backend: Express (Node 22) — API REST para briefings, ideas, precios, CRM, subida de medios y endpoints de administración.
• Base de datos: Prisma 6 + SQLite (volumen persistente en el VPS), PostgreSQL 16 + Redis 7 en Docker para los módulos más exigentes.
• Bot de Telegram: grammY (TypeScript) con memoria de contexto.
• Bot de WhatsApp: WhatsApp Business Cloud API.
• IA: OpenAI GPT + Anthropic Claude, RAG sobre los materiales de la escuela, dos presets de asistente (profesor de español / profesor de inglés).
• Pagos: Stripe + pasarela bancaria española, webhooks idempotentes.
• Email: SMTP + Mailgun, DKIM / SPF, MailHog para desarrollo.
• Automatización: n8n (briefings, leads, campañas, jobs nocturnos).
• Infraestructura: Contabo Cloud VPS, Ubuntu 24.04, pm2 (web + brief-api de forma nativa) + Docker Compose (Postgres / Redis / n8n), nginx, SSL Let's Encrypt.
• CI/CD: GitHub Actions — auto-deploy al hacer push a main (tsc-check → build → rsync → pm2 reload → healthcheck), un único deploy a la vez.
• Analítica y monitoreo: Plausible, endpoints de healthcheck, rotación de logs de pm2.

Lista completa de funciones implementadas

🌐 Web y páginas

• Tres idiomas de interfaz (RU / ES / EN) con autodetección del idioma y redirección a /<locale>/
• Dos itinerarios separados: español para rusoparlantes / expatriados (/ru/, /en/), inglés para hispanohablantes (/es/) — los catálogos, el tono y la semántica SEO no se mezclan
• Hero en vídeo en la primera pantalla + slider de ciudades españolas con rotación automática
• Catálogo de cursos: 10 plantillas para español + 9 para inglés, página propia para cada curso
• 8 landings SEO de niveles (A1 / A2 / B1 / B2 × 2 itinerarios) con listado de cursos y FAQ
• Quiz interactivo de selección de curso (asistente de 5 pasos → solicitud por WhatsApp)
• Test de nivel gratuito, páginas «Sobre la escuela», «Metodología», «Profesorado» (8 perfiles con vídeo de presentación), «Actividades», «Calendario», «Galería» (en lugar de tours 360°)
• Campamentos urbanos infantiles para vacaciones escolares, sin alojamiento
• Feed con 43 reseñas reales de Google (swipe táctil, tarjetas a la misma altura)
• Feed de países de habla hispana con fotografías
• Mascota FAB parlante (60 frases, se inclina hacia el cursor, se oculta con swipe durante 10 minutos)
• Motor de FAQ: 12 sets por página, 15 preguntas × 3 idiomas, <details> nativo, marcado FAQPage
• Precargador con efecto shimmer, ScrollToTop, página 404
• Adaptación móvil completa: barra superior de marca, tab-bar inferior dimensionada al viewport, navegación bottom-sheet con lock-scroll y safe-area

🔐 Autenticación y roles

• Acceso por teléfono o email + contraseña, recuperación de contraseña
• 6 roles con bits de capacidades: invitado, alumno, profesor, admin, director, desarrollador
• Filtrado de la navegación por capacidades: cada usuario ve únicamente las secciones a las que tiene acceso
• Modo dev con cambio del rol efectivo para probar los permisos
• Overrides personales de permisos por encima del rol (accesos concedidos por dirección)

👤 Área personal

• Perfil de alumno, historial de cursos y pagos
• Área del profesor: su propio horario, sus grupos y la asistencia
• Navegación de pestañas sticky, salto al panel de administración para el personal
• Notificaciones por Telegram y email

🛠 CRM y administración

• Esqueleto único de servidor AdminShell con sidebar de navegación para todas las secciones de admin
• Leads: pipeline kanban con drag-and-drop HTML5 entre etapas
• Alumnos: página propia con filtros (itinerario, nivel CEFR, estado, búsqueda), ficha modal del alumno con deep-link ?student=<id>
• Horario: rejilla de 7 días × hora, drag-and-drop de grupos entre celdas, traslado de bloques, color por nivel CEFR, paleta sticky de grupos por nivel (A0–C2), filtro «Mi horario» por profesor
• Asistencia: se elige grupo y fecha → marcaje masivo «presente / ausente»
• Profesorado: módulo de nóminas — horas y ≈€/mes se calculan automáticamente a partir de los slots del horario según la tarifa €/h
• Grupos, matrículas, pagos, contratos B2B — CRUD completo
• Campañas: recogida de audiencia desde el CRM por segmentos → deep-links wa.me / t.me
• Única fuente de verdad para los colores de estados y niveles (Badge, levelColor, statusColor)
• Todas las páginas de admin protegidas por getMe / capability-check con redirección a login

🛒 Tienda online

• Catálogo de 4 categorías: libros de texto, merchandising (con elección de talla), tarjetas regalo, materiales digitales
• Ficha de producto en 3 idiomas (título / descripción / precio en euros), variantes de talla, fotos
• Admin CRUD de productos con editor modal y subida de imágenes (base64 → volumen local, validación de MIME, límite de 5 MB, cabeceras de caché)
• Carrito, checkout, páginas de éxito / error de pago
• Cobros mediante Stripe + pasarela española, webhooks idempotentes
• Fallback a catálogo estático cuando el backend no está disponible

📝 Motor de contenido (blog)

• Modelo único de post: una entrada = tres idiomas (RU / ES / EN) vinculados
• Admin CRUD con pestañas por idioma, estados draft / published, sellado automático de la fecha de publicación
• Portadas mediante subida de imágenes al VPS
• Renderizado en servidor de los posts desde la API con fallback estático, contenido seleccionado por idioma
• Bloque «Artículos relacionados», breadcrumbs, párrafos en Markdown

🤖 Bots y asistente IA

• Bot de Telegram (grammY): menú de cursos, horario, perfil, enlace de referido, reserva de clase de prueba
• Bot de WhatsApp (Business Cloud API): la mayoría de funciones de la web dentro de la mensajería
• Asistente IA con dos presets (profesor de español para rusoparlantes / profesor de inglés para hispanohablantes), memoria de contexto y RAG sobre los materiales de la escuela
• Proxy a OpenAI / Anthropic, logging de los diálogos

📅 Horario y calendario

• Calendario de fechas, horario y festivos españoles en la web pública
• Horario interno de los grupos en el CRM con traslado de bloques y filtro por profesor

🧾 Briefings, ideas y notas

• Formulario de briefing con almacenamiento en servidor, vista de admin de todos los briefings
• Recogida de ideas para la roadmap desde la web, procesado por admin (processed, addedTo, note)
• Notas compartidas para las pantallas del sistema de diseño (11 secciones) con autoría

🎨 Sistema de diseño

• 11 pantallas-secciones en una única página /design/
• Átomos: Button (continuous flash + sombras), Arrow, Logo, SpeechBubble, Highlight, CefrBadge, PhoneFrame, ScaleRow y otros
• Tokens de diseño — variables CSS --ylc-*, tamaños adaptativos con clamp() en todas partes
• Editor CSS online para retocar el diseño sin redeploy

🔍 SEO / GEO / AEO

• Sitemap.xml + robots.txt, canonical + hreflang entre RU / ES / EN
• Marcado Schema.org: EducationalOrganization, Course, BlogPosting, FAQPage, BreadcrumbList
• Metaetiquetas OG / Twitter, prerender en servidor para que las previews al compartir se vean bien
• Preparación para AI Overviews, llms.txt
• 8 landings SEO de niveles + páginas de curso alineadas con la semántica de cada itinerario

⚡ Rendimiento y medios

• Output standalone (build mínimo de Docker / Node)
• Tipografías autohospedadas (Onest, Caveat, JetBrains Mono) vía next/font — sin render-blocking
• Fotos de contenido con loading="lazy" + decoding="async", vídeo del hero con preload="auto" + fetchpriority="high"
• Elección de vídeo desktop / móvil mediante matchMedia, máscara de foto en forma de hoja con SVG clip-path
• Cliente Prisma perezoso — un error de base de datos no tira la API

🛡 Seguridad y fiabilidad

• RBAC con bits de capacidades + overrides personales de permisos
• Basic Auth en los endpoints de admin a través de nginx
• Webhooks de pago idempotentes, validación de las subidas (MIME + tamaño)
• Secretos fuera de git (vault local), enmascarado en logs y commits
• Endpoints de healthcheck, auto-restart de pm2 vía systemd al reiniciar

📦 Infraestructura / DevOps

• Monorepo (apps/web + apps/brief-api), pm2 de forma nativa + Docker Compose para las bases de datos
• Auto-deploy vía GitHub Actions: tsc-check → next build → rsync → pm2 reload → healthcheck
• Bloqueos de concurrencia en el deploy, caché de pnpm-store
• Routing de nginx (web :3000, brief-api :4000, presentación estática de la roadmap), SSL con renovación automática
• Deploy manual por rsync como respaldo; rotación de logs; volúmenes de datos persistentes