ФПК МГППУ

Клиент

Факультет повышения квалификации МГППУ — структурное подразделение Московского государственного психолого-педагогического университета, которое реализует программы дополнительного профессионального образования, повышения квалификации и профессиональной переподготовки для специалистов в области психологии и педагогики.

Задача

Создать современный веб-портал для представления образовательных программ, который позволит:

• Публиковать и управлять каталогом программ дополнительного образования
• Предоставлять пользователям удобный поиск и фильтрацию программ
• Обеспечивать онлайн-подачу заявок на обучение
• Интегрироваться с корпоративной системой авторизации через ADFS
• Управлять контентом через CMS без участия разработчиков

Решение

Современный стек и производительность

Проект построен на Next.js 15 с использованием React 19 и TypeScript для типобезопасности. Применение Server Components и React Server Actions обеспечивает оптимальную производительность и SEO-оптимизацию.

Для стилизации использован Tailwind CSS 4 с кастомной системой дизайн-токенов, что позволяет быстро создавать адаптивные интерфейсы. Компоненты UI построены на Radix UI для обеспечения доступности и семантической корректности.

Headless CMS с Directus

В качестве системы управления контентом выбран Directus — headless CMS с открытым исходным кодом. Это решение позволяет:

• Не-техническим сотрудникам легко управлять программами, объявлениями и документами
• Гибко настраивать структуру данных под требования бизнеса
• Автоматически генерировать API для всех коллекций
• Использовать визуальный редактор для контента страниц

Интеграция с Directus реализована через официальный SDK с кешированием запросов на уровне React для оптимизации производительности.

Умная система фильтрации

Каталог программ включает продвинутую систему фильтрации:

• Поиск по названию с поддержкой кириллицы
• Фильтры по цене с dual-range slider для выбора диапазона
• Фильтры по длительности (часы и минуты обучения)
• Множественный выбор тегов программ
• Фильтрация по преподавателям с автодополнением
• Фильтры по формату обучения (очно, онлайн, смешанный)
• Сортировка по релевантности, цене, длительности

Все фильтры работают в реальном времени без перезагрузки страницы благодаря клиентским хукам и мемоизации.

Детальные страницы программ

Каждая программа имеет полноценную страницу с:

• Hero-секцией с изображением и ключевой информацией
• Описанием программы с поддержкой HTML-контента
• Информацией о преподавателях с фотографиями и биографиями
• Расписанием потоков с датами начала и окончания
• FAQ-секцией с ответами на частые вопросы
• Формой подачи заявки с валидацией и загрузкой документов
• Похожими программами на основе тегов

Для SEO реализована генерация структурированных данных (JSON-LD) по схеме Schema.org для курсов.

Система подачи заявок

Форма подачи заявки включает:

• Выбор потока обучения из доступных дат
• Валидацию полей с помощью Zod и React Hook Form
• Загрузку документов с предпросмотром и валидацией типов
• Интеграцию с 1С для передачи данных заявки
• Обработку ошибок с понятными сообщениями для пользователя
• Согласия на обработку персональных данных с обязательными чекбоксами

Интеграция с корпоративной авторизацией

Реализована интеграция с Active Directory Federation Services (ADFS) через NextAuth v5:

• Единый вход (SSO) для сотрудников и студентов МГППУ
• Автоматическое обновление токенов доступа
• Безопасное хранение сессий
• Редиректы после авторизации с сохранением контекста

Личный кабинет пользователя

После авторизации пользователи получают доступ к личному кабинету с вкладками:

• Профиль — редактирование персональных данных
• Заявки — просмотр статусов поданных заявок на программы
• Заявки на участие — управление заявками на конкретные потоки
• Документы — доступ к шаблонам документов и загруженным файлам

Данные профиля загружаются из корпоративного API МГППУ с обработкой ошибок и автоматическим обновлением токенов.

Адаптивный дизайн

Интерфейс полностью адаптирован для всех устройств:

• Мобильная версия с оптимизированной навигацией
• Планшеты с адаптивной сеткой компонентов
• Десктоп с расширенными возможностями фильтрации

Использованы современные паттерны UX: sticky-фильтры на десктопе, bottom sheet для мобильных действий, скелетоны для состояний загрузки.

Дополнительные функции

• Секция объявлений с категориями и фильтрацией
• Страница "О нас" с блочной структурой контента из CMS
• Каталог документов с категоризацией
• Анкеты и тесты для сбора обратной связи
• Страницы преподавателей с информацией о программах
• Темная тема с переключателем в навигации
• SEO-оптимизация с мета-тегами и Open Graph

Оптимизация и производительность

• ISR (Incremental Static Regeneration) для страниц программ с ревалидацией каждые 2 минуты
• Кеширование запросов к Directus на уровне React
• Оптимизация изображений через Next.js Image с lazy loading
• Code splitting для уменьшения размера бандла
• Docker-контейнеризация для простого развертывания

Результат

Портал успешно запущен и используется для:

• Публикации более 100 образовательных программ
• Приема заявок от слушателей
• Управления контентом без участия разработчиков
• Интеграции с корпоративными системами МГППУ

Проект демонстрирует современный подход к разработке образовательных платформ с акцентом на удобство использования, производительность и масштабируемость.