Разрабатываем цифровые продукты и обучаем IT в ведущем техническом вузе страны

1. 01Дизайн и пользовательский опытВы видите и проверяете продукт до того, как его начнут программировать, а готовый интерфейс понятен с первого раза и доступен всем.Исследование пользователейИнформационная архитектураFigmaClaude DesignДизайн-система и токеныДоступность (WCAG 2.2)Моушн-дизайнЮзабилити-тестированиеPrototypingDesign reviewUI kitAdobe IllustratorPhotoshopTildaПодробнееСвернуть

   Как устроено

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

   Исследование пользователей

   Интервью, разбор текущих процессов и сценариев: кто пользуется продуктом, в какой ситуации и какую задачу решает

   Информационная архитектура

   Структура разделов, навигации и ролей, чтобы каждый находил свою задачу за пару шагов

   Figma

   Макеты, прототипы и дизайн-система в одном общем файле

   Claude Design

   Быстрые прототипы, презентации и визуальные концепции на основе настоящей дизайн-системы проекта

   Дизайн-система и токены

   Цвета, шрифты, отступы и компоненты описаны один раз и передаются в разработку как код

   Доступность (WCAG 2.2)

   Контраст, управление с клавиатуры, поддержка экранных чтецов и читаемый текст с первого макета

   Моушн-дизайн

   Переходы и микровзаимодействия, которые объясняют, что происходит, а не украшают

   Юзабилити-тестирование

   Проверка ключевых сценариев на реальных пользователях до и после запуска

2. 02Интерфейсы и сайтыСтраницы быстро открываются, находятся поисковиками, работают на любом экране и на русском и английском.Vue 3 и Nuxt 4TypeScriptTailwind CSS 4 и Nuxt UIPinia и ZodReact и Next.jsTiptap, Vidstack, Chart.jsJavaScriptViteQuasarSSR · SSGPWAi18nStorybookWebSocketsПодробнееСвернуть

   Как устроено

   • Серверный рендеринг с гидратацией: первый экран приходит готовым HTML, затем страница становится интерактивной.
   • Одна библиотека компонентов для публичного сайта и панели администратора — правка попадает сразу в оба.
   • Контракты данных между интерфейсом и сервером лежат в общем пакете и проверяются с обеих сторон.
   • Переводы интерфейса через i18n; даты, числа и склонения подстраиваются под язык.

   Vue 3 и Nuxt 4

   Основной фреймворк. Страницы собираются на сервере, поэтому первый экран приходит готовым, а поисковики его индексируют

   TypeScript

   Типизированный код и в интерфейсе, и на сервере: целый класс ошибок ловится до релиза

   Tailwind CSS 4 и Nuxt UI

   Общие дизайн-токены и компоненты: экраны выглядят единообразно и собираются быстро

   Pinia и Zod

   Состояние приложения и проверка форм по тем же правилам, что и на сервере

   React и Next.js

   Когда команда заказчика уже работает на React

   Tiptap, Vidstack, Chart.js

   Редактор текстов, видеоплеер и графики для учебных платформ

3. 03Backend и APIНадёжная бизнес-логика, понятные правила, кто что может видеть и менять, и API, к которому подключаются другие системы.Node.js · NestJSKotlin · Spring Boot · KtorGoJavaRustPython · FastAPIREST · OpenAPIExpressQuarkusDjangoFlaskGraphQLgRPCWebSocketsOAuth 2.0 · JWTПодробнееСвернуть

   Как устроено

   • Модульный монолит или набор сервисов — в зависимости от нагрузки и команды, которая будет поддерживать систему.
   • Язык выбирается под сервис: TypeScript для бизнес-логики, Go для сетевых сервисов, Rust там, где критичны скорость и безопасность работы с памятью.
   • Права доступа проверяются на сервере для каждого действия, а не только скрываются в интерфейсе.
   • Долгие операции (рассылки, обработка видео) идут в фоновых очередях и не тормозят запросы пользователей.
   • У каждого сервиса с первого дня есть проверки работоспособности и метрики.

   Node.js · NestJS

   Основной стек для бизнес-логики и API: TypeScript end-to-end, модульная архитектура, guards для прав доступа

   Kotlin · Spring Boot · Ktor

   JVM-сервисы и интеграции для команд с Java-экосистемой

   Go

   Сетевые сервисы, gateways и воркеры, где важны скорость и экономия памяти

   Java

   Поддержка и развитие существующих Java-систем

   Rust

   Performance-critical компоненты: обработка данных, CLI и системные утилиты

   Python · FastAPI

   Data- и ML-задачи, аналитика, интеграции с моделями

   REST · OpenAPI

   Контракт API описывается автоматически и публикуется как интерактивная документация

4. 04Данные и файлыДанные хранятся надёжно и переживают обновления, а файлы и видео лежат на ваших серверах, а не в зарубежном облаке.PostgreSQL и MySQLDrizzle и TypeORMRedisBullMQMinIOKafka и RabbitMQMongoDBClickHouseElasticsearchS3PrismaMigrationsПодробнееСвернуть

   Как устроено

   • Любое изменение структуры базы — миграция в репозитории; базу в продакшене руками не правим.
   • Файлы и видео хранятся в объектном хранилище, в базе — только ссылки и описание.
   • Очереди повторяют упавшие задачи и не теряют их при перезапуске сервиса.

   PostgreSQL и MySQL

   Реляционные базы для основных данных: пользователи, курсы, оценки, документы

   Drizzle и TypeORM

   Типобезопасная работа с базой и версионируемые миграции

   Redis

   Кэш, сессии, счётчики и основа фоновых очередей

   BullMQ

   Очереди фоновых задач с повторами и отложенным запуском

   MinIO

   Объектное хранилище, совместимое с Amazon S3, развёрнутое на собственных серверах

   Kafka и RabbitMQ

   Для интеграций с большим потоком сообщений

5. 05Видео и медиаВидеоуроки идут без зависаний на любом интернете: качество подстраивается само, как на больших видеоплатформах.FFmpegHLSsharpVidstackWebRTCImage CDNAdaptive streamingПодробнееСвернуть

   Как устроено

   • Загруженное видео попадает в очередь; отдельный сервис перекодирования нарезает его на фрагменты в нескольких разрешениях.
   • Запрос пользователя не ждёт обработки: урок становится доступен, когда видео готово.
   • Оригиналы и обработанные файлы хранятся в объектном хранилище на собственных серверах.

   FFmpeg

   Перекодирует загруженное видео в адаптивный поток в нескольких качествах

   HLS

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

   sharp

   Быстрое масштабирование и оптимизация изображений

   Vidstack

   Видеоплеер на сайте

6. 06DevOps и инфраструктураРелизы выходят часто и предсказуемо, а неудачный откатывается одной командой.DockerDocker Swarm и KubernetesGitLab CI/CDTurborepo и pnpmNginxDocker ComposeHelmTerraformAnsibleTraefikLinuxSOPSПодробнееСвернуть

   Как устроено

   • До продакшена изменение проходит проверку форматирования, линтер, тесты, проверку типов и сборку.
   • Раздельные тестовое и боевое окружения; выкладка в продакшен запускается осознанно.
   • Откат любого сервиса на предыдущую версию одной командой.
   • Секреты хранятся в репозитории только в зашифрованном виде (SOPS), никогда открытым текстом.

   Docker

   Каждый сервис работает в контейнере — одинаково на ноутбуке разработчика и на сервере

   Docker Swarm и Kubernetes

   Оркестрация контейнеров под масштаб конкретного проекта

   GitLab CI/CD

   CI/CD-пайплайн: линтеры, тесты, typecheck, сборка и деплой на каждый merge

   Turborepo и pnpm

   Monorepo для всех приложений с инкрементальной сборкой

   Nginx

   Edge: маршрутизация, rate limiting, сжатие

7. 07ObservabilityУзнаём о проблеме раньше, чем о ней напишут пользователи.PrometheusAlertmanagerGrafanaLoki и PromtailOpenTelemetry и TempoUptime monitoringStructured logging · pinoSentryПодробнееСвернуть

   Как устроено

   • Структурированные логи в JSON (pino) — их можно искать и фильтровать.
   • Правила оповещений на недоступность сервисов, заполнение диска, состояние базы и очередей.
   • Доставку оповещений проверяем специально, а не при первой настоящей аварии.

   Prometheus

   Собирает метрики со всех сервисов, базы данных, Redis, контейнеров и сервера

   Alertmanager

   Присылает оповещения в Telegram, когда срабатывает правило

   Grafana

   Дашборды нагрузки, ошибок и времени ответа

   Loki и Promtail

   Централизованные логи всех сервисов с поиском

   OpenTelemetry и Tempo

   Трассировка запросов между сервисами, когда их много

8. 08Quality и тестированиеМеньше ошибок в продакшене и проект, который сможет подхватить другая команда.Jest и VitestESLint и PrettierСтрогий TypeScriptPlaywrightTestcontainersUnit · Integration · E2ECode reviewПодробнееСвернуть

   Как устроено

   • Каждое изменение проходит ревью и автоматический конвейер до слияния.
   • На ошибку, дошедшую до продакшена, пишется тест, чтобы она не вернулась.
   • Документация по развёртыванию и эксплуатации лежит рядом с кодом.

   Jest и Vitest

   Модульные и интеграционные тесты

   ESLint и Prettier

   Единый стиль кода и автоматический поиск опасных конструкций

   Строгий TypeScript

   Проверка типов в конвейере не пропускает выпуск с ошибками

9. 09AI в продуктахLLM-фичи и AI-ассистенты, которые работают в рамках прав доступа и проверяются evals.MCP (Model Context Protocol)Большие языковые моделиOpenAI APIAnthropic APIRAGEmbeddingsOllamaAgentsПодробнееСвернуть

   Как устроено

   • Ассистент получает токен с ограниченными правами и лимитом запросов; его действия попадают в журнал.
   • Оценку считают критерии, а не придумывает модель; итог подтверждает преподаватель.
   • Модель выбирается под требования к данным; где нужно, используем локальные модели.

   MCP (Model Context Protocol)

   Стандартный способ подключить ИИ-ассистентов к данным и действиям системы

   Большие языковые модели

   Черновая оценка работ студентов по критериям

10. 10Мобильные приложенияНативные приложения и мультиплатформенные решения для Android и iOS.Kotlin и Jetpack ComposeSwiftFlutterAndroidiOSDartPush notificationsOffline-firstПодробнееСвернуть

    Как устроено

    • Выбор между нативной и мультиплатформенной разработкой делаем по требованиям к интерфейсу, доступу к устройству и бюджету.
    • Мобильные приложения работают через тот же API и с теми же правами доступа, что и веб-версия.

    Kotlin и Jetpack Compose

    Нативные приложения для Android

    Swift

    Нативные приложения для iOS

    Flutter

    Один код для Android и iOS, когда важна скорость выхода

• 

  Михаил Портнов

  Основатель

• 

  Евгения Шишарина

  Продуктовый дизайнер

• 

  Анна Степанова

  Тимлид, fullstack-разработчик

• 

  Георгий Анохин

  Технический руководитель

• 

  Руслан Алиев

  Ведущий fullstack-разработчик

• 

  Иван Краснопольский

  DevOps-инженер

• 

  Константин Албатов

  Бэкенд-разработчик

• 

  Арам Ташчян

  Фронтенд-разработчик

И другие талантливые инженеры.