Frontend и веб-приложения · React / Next.js / Payload CMS
- Город
- Москва
- Опыт работы
- 16 лет
- На сайте с
- 2016 года
- Юридический статус
- Самозанятый
«Ассистент преподавателя» — веб-приложение для подготовки учебных материалов и анализа занятий. В составе команды продукта я разрабатывал frontend: интерфейсы презентаций, отчёта по записи занятия, статистики и экспорта в PDF.
Мои задачи — встроить новые функции в существующее приложение, подключить данные API и проработать пользовательские сценарии: от редактирования слайдов до просмотра аналитики и сохранения отчёта. Важная часть работы — состояния загрузки и ошибок, адаптивность и согласованное поведение связанных экранов.
Стек моей работы: React, Next.js, TanStack Query, jsPDF, html2canvas.
1. Презентации: редактор и библиотека
Создал интерфейс страницы презентации: ленту слайдов, навигатор с миниатюрами, переходы и отслеживание активного слайда. Развивал полноэкранный показ и управление состоянием редактора.
Добавил создание и редактирование слайда: поля Markdown с предварительным просмотром, загрузку иллюстраций перетаскиванием, подтверждения удаления и дублирования. Проработал отображение статусов генерации, ошибки, повторный запуск и откат слайда.
В существующей библиотеке материалов реализовал раздел презентаций с карточками, пагинацией, обновлением состояния при поиске и опросом статуса генерации.
2. Аналитика занятий: отчёт и статистика
На основе существовавшей заготовки реализовал основную страницу отчёта по записи занятия: конспект, популярные слова, распределение разговора, скорость речи, эмоциональную модальность и другие метрики. Добавил навигацию по разделам, интерактивные графики, таймлайны, стенограмму и мобильную компоновку. Подключил реальные данные API, сохранение предмета и параллели, рекомендации.
Разработал ряд графиков и виджетов статистики, детализацию показателей, легенды и подсказки. Объединил общую логику личной и групповой статистики, подключил уровни данных пользователя, группы и региона, фильтры и состояния отсутствующих данных.
3. PDF-отчёт и единые настройки метрик
Реализовал генератор PDF на jsPDF и html2canvas: конспект, метрики, популярные слова, стенограмма и графики. Разделил сборку документа на отдельные секции, дорабатывал оформление и отображение графиков.
Добавил настройки видимости метрик и применил их к статистике, отчёту и PDF. Выбор пользователя учитывается и на экране, и в экспортируемом документе.
Дополнительно развивал выдачу заданий: статусы, сроки, попытки, валидацию и обработку ошибок; добавлял тесты этих сценариев. Дорабатывал подписки и ИИ-лимиты, переводил тяжёлые компоненты и зависимости на динамическую загрузку.
В рамках моей работы появились и были развиты функции для трёх связанных сценариев преподавателя:
• Подготовка презентации: работа со слайдами, Markdown и иллюстрациями, управление генерацией и полноэкранный показ.
• Разбор занятия: конспект, стенограмма, интерактивные графики и детализация показателей.
• Сохранение анализа: PDF-документ с графиками и выбранными пользователем метриками.
Кейс показывает мой опыт развития существующего веб-приложения: сложные интерфейсы, интеграция с API, обработка асинхронных состояний, визуализация данных и генерация документов.
Приложение: https://app.edu-assist.ru/
На скриншотах показаны презентация и анализ демонстрационного занятия. PDF выгружен из приложения; запись урока создана специально для демонстрации интерфейса.
Командный проект. Моя роль — frontend-разработчик. В разделе «Решение» описан мой личный вклад. Отчёт и статистику развивал на базе существовавших компонентов совместно с коллегами. Общая система презентаций, шаблоны и backend — работа команды.
