Школа на два языка, где всё работает на одной базе.

ylcvalencia.es — платформа двуязычного учебного центра Your Language Club в Валенсии. Публичный сайт на трёх языках, личные кабинеты студента и преподавателя, боты в Telegram и WhatsApp с ИИ-ассистентом, магазин с онлайн-оплатой, своя CRM с расписанием, посещаемостью и расчётом зарплат, контент-движок блога и система B2B-контрактов работают на одном бэкенде и общей базе. Школа ведёт два строго раздельных направления: испанский для русскоязычных и англоязычных экспатов, английский для испанцев.

Клиент: учебный центр Your Language Club, Валенсия · Сайт: https://ylcvalencia.es · Категория: платформа

Коротко о главном

• Два направления в одной системе: испанский для экспатов и английский для испанцев не смешиваются нигде.
• Три языка публичной части: русский, español и English.
• Кабинеты студента и преподавателя с расписанием и посещаемостью.
• Боты в Telegram и WhatsApp с ИИ-ассистентом.
• Магазин курсов с онлайн-оплатой и B2B-контракты для компаний.
• Своя CRM, включая зарплатный модуль для преподавателей.

Технологический стек

• Frontend: Next.js 16 (App Router, Turbopack, output standalone) + React 19 + TypeScript 6, Tailwind CSS 4 (@theme inline), авторский дизайн, полный адаптив.
• i18n: next-intl 4, три локали интерфейса (RU / ES / EN), авто-определение языка (navigator.language → Accept-Language → IP), hreflang.
• Backend: Express (Node 22) — REST API брифов, идей, цен, CRM, загрузки медиа, админских эндпоинтов.
• БД: Prisma 6 + SQLite (персистентный том на VPS), PostgreSQL 16 + Redis 7 в Docker под высоконагруженные модули.
• Telegram-бот: grammY (TypeScript) с памятью контекста.
• WhatsApp-бот: WhatsApp Business Cloud API.
• AI: OpenAI GPT + Anthropic Claude, RAG на материалах школы, два пресета ассистента (преподаватель испанского / английского).
• Платежи: Stripe + локальный испанский эквайринг, идемпотентные вебхуки.
• Email: SMTP + Mailgun, DKIM / SPF, MailHog для разработки.
• Автоматизация: n8n (брифы, лиды, рассылки, ночные джобы).
• Инфраструктура: Contabo Cloud VPS, Ubuntu 24.04, pm2 (нативно web + brief-api) + Docker Compose (Postgres / Redis / n8n), nginx, Let's Encrypt SSL.
• CI/CD: GitHub Actions — авто-деплой при push в main (tsc-check → build → rsync → pm2 reload → healthcheck), один деплой в момент времени.
• Аналитика и мониторинг: Plausible, healthcheck-эндпоинты, ротация логов pm2.

С чего всё началось

Языковая школа в Валенсии живёт в двух непересекающихся мирах. Русскоязычные и англоязычные экспаты учат испанский, испанцы учат английский. Разный язык интерфейса, разные тексты, разные каналы связи и разные ожидания от общения.

Собирать под это два сайта означало удвоить работу и получить два источника правды о расписании и оплатах. Поэтому направления развели внутри одной платформы: общая база и общий бэкенд, но собственный путь для каждой аудитории.

Вторая часть задачи была административной. Расписание, посещаемость и зарплаты преподавателей до этого жили в таблицах, а корпоративные клиенты требовали отдельного учёта по контрактам. Всё это ушло в CRM, встроенную в ту же систему, где учится студент.

Полный список реализованных функций

🌐 Сайт и страницы

• Три локали интерфейса (RU / ES / EN) с авто-определением языка и редиректом на /<locale>/
• Два раздельных направления: испанский для русскоговорящих/экспатов (/ru/, /en/), английский для испанцев (/es/) — каталоги, тон и SEO-семантика не смешиваются
• Видео-hero на первом экране + слайдер испанских городов с авто-переходами
• Каталог курсов: 10 шаблонов для испанского + 9 для английского, отдельная страница каждого курса
• 8 SEO-лендингов уровней (A1 / A2 / B1 / B2 × 2 направления) со списком курсов и FAQ
• Интерактивный квиз подбора курса (wizard из 5 шагов → заявка в WhatsApp)
• Бесплатный тест уровня, страницы «О школе», «Методология», «Преподаватели» (8 профилей с видео-визитками), «Активности», «Календарь», «Галерея» (замена 360°-туров)
• Детские дневные лагеря (Day-camps) на школьные каникулы, без проживания
• Лента 43 реальных Google-отзывов (свайп на тач, карточки одной высоты)
• Лента испаноязычных стран мира с фотографиями
• Говорящий маскот-FAB (60 реплик, наклон к курсору, свайп-скрытие на 10 минут)
• FAQ-движок: 12 наборов по страницам, 15 вопросов × 3 локали, нативные <details>, FAQPage-разметка
• Прелоадер с shimmer-эффектом, ScrollToTop, страница 404
• Полная мобильная адаптация: верхний брендинг-бар, нижний таб-бар по высоте вьюпорта, bottom-sheet навигация с lock-scroll и safe-area

🔐 Авторизация и роли

• Вход по телефону или email + пароль, восстановление пароля
• 6 ролей с битами прав (capabilities): гость, студент, преподаватель, админ, директор, разработчик
• Capability-фильтрация навигации: каждый видит только доступные разделы
• Dev-режим с переключением эффективной роли для тестирования прав
• Персональные оверрайды прав поверх роли (директорская выдача доступов)

👤 Личный кабинет

• Профиль студента, история курсов и платежей
• Кабинет преподавателя: своё расписание, свои группы, посещаемость
• Sticky-навигация по вкладкам, переход в админку для сотрудников
• Уведомления через Telegram и email

🛠 CRM и админка

• Единый серверный каркас AdminShell с сайдбар-навигацией для всех админ-разделов
• Лиды: канбан-пайплайн с HTML5 drag-and-drop по стадиям
• Студенты: отдельная страница с фильтрами (направление, уровень CEFR, статус, поиск), карточка-модалка студента с deep-link ?student=<id>
• Расписание: сетка 7 дней × время, drag-and-drop групп по ячейкам, перенос блоков, цвет по уровню CEFR, sticky-палитра групп по уровням (A0–C2), фильтр «Моё расписание» по преподавателю
• Посещаемость: выбор группы и даты → bulk-отметки «пришёл / не пришёл»
• Преподаватели: зарплатный модуль — часы и ≈€/мес считаются автоматически из слотов расписания по ставке €/час
• Группы, записи, платежи, B2B-контракты — полный CRUD
• Рассылки: сбор аудитории из CRM по сегментам → deep-links wa.me / t.me
• Единый источник цвета статусов и уровней (Badge, levelColor, statusColor)
• Все админ-страницы gated через getMe / capability-check с редиректом на login

🛒 Онлайн-магазин

• Каталог из 4 категорий: учебники, мерч (с выбором размера), гифт-карты, цифровые материалы
• Карточка товара в 3 локалях (заголовок / описание / цена в евро), варианты-размеры, фото
• CRUD-админка товаров с модальным редактором и загрузкой изображений (base64 → локальный том, валидация MIME, лимит 5 МБ, кеш-заголовки)
• Корзина, оформление заказа, страницы успеха / ошибки оплаты
• Приём платежей через Stripe + испанский эквайринг, идемпотентные вебхуки
• Фолбэк на статический каталог при недоступности бэкенда

📝 Контент-движок (блог)

• Единая модель поста: одна запись = три локали (RU / ES / EN) в связке
• CRUD-админка с локаль-табами, статусами draft / published, авто-простановкой даты публикации
• Обложки через загрузку изображений на VPS
• Серверный рендер постов из API с фолбэком на статику, выбор контента по локали
• Блок «Похожие статьи», breadcrumbs, Markdown-параграфы

🤖 Боты и ИИ-ассистент

• Telegram-бот (grammY): меню курсов, расписание, профиль, реферальная ссылка, запись на пробное занятие
• WhatsApp-бот (Business Cloud API): максимум функций сайта в мессенджере
• ИИ-ассистент с двумя пресетами (преподаватель испанского для русскоязычных / преподаватель английского для испаноязычных), памятью контекста и RAG на материалах школы
• Прокси к OpenAI / Anthropic, логирование диалогов

📅 Расписание и календарь

• Календарь дат, расписания и испанских праздников на публичном сайте
• Внутреннее расписание групп в CRM с переносом блоков и фильтром по преподавателю

🧾 Брифы, идеи и заметки

• Форма брифинга с сохранением на сервере, админ-просмотр всех брифов
• Сбор идей в роадмап с сайта, админ-обработка (processed, addedTo, note)
• Общие заметки к экранам дизайн-системы (11 секций) с авторством

🎨 Дизайн-система

• 11 экранов-секций на одной странице /design/
• Атомы: Button (continuous flash + тени), Arrow, Logo, SpeechBubble, Highlight, CefrBadge, PhoneFrame, ScaleRow и др.
• Дизайн-токены — CSS-переменные --ylc-*, адаптивные размеры через clamp() везде
• Онлайн CSS-редактор для правки дизайна без передеплоя

🔍 SEO / GEO / AEO

• Sitemap.xml + robots.txt, canonical + hreflang между RU / ES / EN
• Микроразметка Schema.org: EducationalOrganization, Course, BlogPosting, FAQPage, BreadcrumbList
• OG / Twitter мета-теги, серверный prerender для корректного превью при шеринге
• Готовность к AI Overviews, llms.txt
• 8 SEO-лендингов уровней + страницы курсов под семантику по направлениям

⚡ Производительность и медиа

• Output standalone (минимальный Docker / Node-build)
• Самохостинг шрифтов (Onest, Caveat, JetBrains Mono) через next/font — без render-blocking
• Контентные фото loading="lazy" + decoding="async", hero-видео preload="auto" + fetchpriority="high"
• Выбор desktop / mobile-видео через matchMedia, leaf-маска фото через SVG clip-path
• Ленивый клиент Prisma — ошибка БД не роняет API

🛡 Безопасность и надёжность

• RBAC на capability-битах + персональные оверрайды прав
• Basic Auth на админских эндпоинтах через nginx
• Идемпотентные платёжные вебхуки, валидация загрузок (MIME + размер)
• Секреты вне git (локальный vault), маскирование в логах и коммитах
• Healthcheck-эндпоинты, авто-restart pm2 через systemd при ребуте

📦 Инфраструктура / DevOps

• Монорепо (apps/web + apps/brief-api), pm2 нативно + Docker Compose для БД
• Авто-деплой через GitHub Actions: tsc-check → next build → rsync → pm2 reload → healthcheck
• Concurrency-локи на деплой, кеш pnpm-store
• nginx-маршрутизация (web :3000, brief-api :4000, статическая презентация-роадмап), SSL с автопродлением
• Ручной rsync-деплой как резерв; ротация логов; персистентные тома данных

Результаты

Подробнее об этом кейсе

Полная история — почему русские страницы школы продают испанский, испанские английский, и почему это не переводы друг друга: читайте статью на LinkedIn.