Технопарк РОСБИОТЕХ

Клиент

«Технопарк РОСБИОТЕХ» — крупнейший детский технопарк в центре Москвы, образовательная платформа для школьников, где учащиеся получают практический опыт работы с передовыми технологическими направлениями: от робототехники и программирования до биотехнологий и food-tech инноваций.

Задача

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

Решение

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

Проект построен на Next.js 15 с использованием App Router, что обеспечивает отличную производительность и SEO-оптимизацию. TypeScript гарантирует типобезопасность кода, а Tailwind CSS позволяет быстро создавать адаптивный и современный интерфейс.

Для компонентов использовалась библиотека Radix UI, которая обеспечивает доступность и кастомизацию интерфейса. Анимации реализованы с помощью Framer Motion и AOS (Animate On Scroll), что создает плавные переходы и улучшает пользовательский опыт.

Интеграция с Directus CMS

Одной из ключевых особенностей проекта является интеграция с Directus CMS. Это позволяет администраторам управлять контентом без необходимости изменять код: добавлять новости, редактировать описания программ, обновлять информацию о мастер-классах и летних интенсивах.

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

Управление образовательными программами

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

Реализованы отдельные разделы для:

• Образовательных программ — долгосрочные курсы с глубоким погружением в предмет
• Мастер-классов — краткосрочные интенсивы для быстрого освоения навыков
• Летних интенсивах — специальные программы на время каникул
• Экскурсий — возможность посетить технопарк и познакомиться с его деятельностью

Личный кабинет и аутентификация

Реализована система аутентификации на базе NextAuth с поддержкой SSO (Single Sign-On). Пользователи могут входить в личный кабинет, где доступна информация о зарегистрированных программах, истории обучения и персональных данных.

Личный кабинет включает:

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

На платформе реализованы различные формы для взаимодействия с пользователями:

• Форма записи на экскурсию — позволяет быстро оставить заявку на посещение технопарка
• Форма эксклюзивной программы — для создания индивидуальных образовательных траекторий
• Форма обратной связи — сбор отзывов и предложений от пользователей

Все формы используют React Hook Form с валидацией через Zod, что обеспечивает надежную проверку данных на клиенте и сервере.

Система новостей и контента

Реализован полноценный раздел новостей с категоризацией и фильтрацией. Новости загружаются из Directus CMS и отображаются в удобном формате с поддержкой изображений, тегов и дат публикации. На главной странице отображается карусель последних новостей, что позволяет пользователям быстро узнавать о важных событиях и обновлениях.

Адаптивный дизайн и доступность

Платформа полностью адаптивна и корректно отображается на всех устройствах — от мобильных телефонов до больших десктопных экранов. Использование Tailwind CSS обеспечивает консистентный дизайн и быструю разработку адаптивных компонентов.

Реализована поддержка темной темы через next-themes, что улучшает пользовательский опыт и снижает нагрузку на глаза при работе в темное время суток.

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

Проект использует современные практики оптимизации:

• Server Components для уменьшения размера бандла
• Динамический импорт компонентов где необходимо
• Оптимизация изображений через Next.js Image
• Кэширование данных с настраиваемой перевалидацией
• Standalone output для Docker-деплоя

Результаты

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

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