Una escuela de dos idiomas donde todo corre sobre una misma base.

En breve: ylcvalencia.es es la plataforma del centro bilingüe Your Language Club en Valencia. La web pública en tres idiomas, las áreas personales de alumno y profesor, los bots de Telegram y WhatsApp con asistente de IA, la tienda con pago online, el CRM propio con horarios, asistencia y cálculo de nóminas, el motor de contenido del blog y el sistema de contratos B2B funcionan sobre un mismo backend y una base común. La escuela lleva dos líneas estrictamente separadas: español para expatriados rusos y angloparlantes, e inglés para españoles.

Cliente: centro Your Language Club, Valencia · Web: https://ylcvalencia.es · Categoría: plataforma

¿Qué es lo esencial del proyecto?

• Dos líneas en un mismo sistema: el español para expatriados y el inglés para españoles no se mezclan en ningún punto.
• Tres idiomas en la parte pública: ruso, español e inglés.
• Áreas de alumno y de profesor con horarios y asistencia.
• Bots en Telegram y WhatsApp con asistente de IA.
• Tienda de cursos con pago online y contratos B2B para empresas.
• CRM propio, incluido el módulo de nóminas para el profesorado.

¿Con qué está hecho el proyecto?

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.

¿Cómo empezó todo?

Una escuela de idiomas en Valencia vive en dos mundos que no se tocan. Los expatriados rusos y angloparlantes aprenden español; los españoles aprenden inglés. Distinto idioma de interfaz, distintos textos, distintos canales y distintas expectativas de trato.

Montar dos webs para eso significaba duplicar el trabajo y acabar con dos fuentes de verdad sobre horarios y pagos. Por eso las líneas se separaron dentro de una misma plataforma: base y backend comunes, pero un recorrido propio para cada público.

La segunda parte del encargo era administrativa. Horarios, asistencia y nóminas del profesorado vivían hasta entonces en hojas de cálculo, y los clientes corporativos exigían un control aparte por contratos. Todo eso pasó al CRM integrado en el mismo sistema donde estudia el alumno.

¿Qué se ha implementado?

🌐 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

¿Cuál es el resultado?

¿Dónde saber más sobre este caso?

La historia completa — por qué las páginas en ruso venden español, las páginas en español venden inglés, y por qué no son traducciones entre sí: lea el artículo en LinkedIn.