Все кейсы

Frontend-разработчик

SuperPower (ex. WorkoutMe)

Фитнес-приложение с тренировками на 1–5 минут дома и без инвентаря.

Открыть продукт
Экран прогресса — моя часть работы: календарь месяца, график серии и счётчики «дней подряд» и «всего тренировок». Три отчёта Firestore на одном экране.
Экран прогресса — моя часть работы: календарь месяца, график серии и счётчики «дней подряд» и «всего тренировок». Три отчёта Firestore на одном экране.

Экраны SuperPower из App Store: тренировки, профиль и отчёты о прогрессе.

Январь — февраль 2022 · React Native frontend

Моя роль

С нуля собрал экран прогресса: профиль, карусель отчётов, календарь, график недели, серию тренировок, активность друзей и галерею дудлов. Для нового экрана добавил TypeScript, алиасы путей, типографику и общие миксины в существующую JavaScript-кодовую базу.

Экран прогресса
Календарь занятий, серия тренировок и график активности
Данные и состояние
Загрузка отчётов из Firestore
Тренировки и видео
Короткие тренировки и видео на устройстве

Задача бизнеса

Аватар и несколько счётчиков не показывали динамику тренировок. Итоги пользователя, данные месяца и срез недели хранились в разных документах Firestore — их требовалось собрать в понятный экран, учитывая слабые Android-устройства.

Экран прогресса

Календарь и статистика тренировок

В шапке профиля — аватар и город. Календарь показывает дни занятий, график — активность за неделю, счётчики — число дней подряд и общее количество тренировок.

Лента активности: чужие тренировки, воркаут-дудлы и кудосы. Дудлы автора отдельным запросом собираются в галерею на его профиле.
Лента активности: чужие тренировки, воркаут-дудлы и кудосы. Дудлы автора отдельным запросом собираются в галерею на его профиле.
Лидерборд: топ-3 и строка пользователя с изменением места. Ранг считается по количеству тренировок за период.
Лидерборд: топ-3 и строка пользователя с изменением места. Ранг считается по количеству тренировок за период.

Отчёты в карусели

Месячные отчёты перелистываются карточками. Они рендерятся по мере просмотра, а не всей историей сразу.

Активность друзей и галерея дудлов

Экран дополняют активность друзей и галерея воркаут-дудлов автора. Платные отчёты имеют отдельные заглушки SuperPower.

Данные и состояние

Независимая загрузка блоков экрана

Итоги пользователя, документ месяца и последние семь дней читаются независимо из Cloud Firestore. Экран может показывать готовые блоки, не дожидаясь всех отчётов.

  1. Профиль

    Аватар и город пользователя.

  2. Итоги

    Серия и общее число тренировок.

  3. Месяц

    Документ для календаря и отчёта.

  4. Неделя

    Отдельный срез для графика последних дней.

Инженерные детали

  • Типизация нового экрана

    Экран написан на TypeScript в проекте на JavaScript. Для него добавил алиасы путей, типографику и общие миксины стилей, которые затем использовала команда.

  • Состояние и доступ

    Приложение использует Redux и React Navigation. Доступ к платным отчётам связан с подпиской SuperPower через RevenueCat.

Тренировки и видео

Тренировки на 1–5 минут

В SuperPower можно тренироваться без инвентаря по 1–5 минут. После занятия результат попадает в отчёты на экране прогресса.

Онбординг: цель определяет план и уровень нагрузки. Шаги вынесены в отдельный навигатор, ответы сохраняются до регистрации.
Онбординг: цель определяет план и уровень нагрузки. Шаги вынесены в отдельный навигатор, ответы сохраняются до регистрации.
Главный экран: персональный план на день, полоса серии с отмеченными днями и подборка мгновенных тренировок на 1–5 минут.
Главный экран: персональный план на день, полоса серии с отмеченными днями и подборка мгновенных тренировок на 1–5 минут.
Подбор тренировки: фильтр по длительности 1/3/5 минут, у каждого упражнения своё видео и таймер. Инвентарь не нужен.
Подбор тренировки: фильтр по длительности 1/3/5 минут, у каждого упражнения своё видео и таймер. Инвентарь не нужен.
Финал тренировки: серия, мем-награда и вопрос о самочувствии. Отсюда результат уходит в отчёты и в Apple Health.
Финал тренировки: серия, мем-награда и вопрос о самочувствии. Отсюда результат уходит в отчёты и в Apple Health.
Инженерные детали

  • Видео на устройстве

    Приложение загружает архив видео с CDN и распаковывает его на устройстве. Во время тренировки видео воспроизводится локально. Загрузка отслеживается через Firebase Performance.

  • Сборки и обновления приложения

    В существующем проекте сборки настроены через Fastlane и GitHub Actions, небольшие обновления — через CodePush.

Результат

Профиль и отчёты о тренировках

Разработал экран прогресса: профиль, календарь, график активности за неделю, серию тренировок и активность друзей. Добавил TypeScript и общие стили для нового экрана в существующее приложение.

4,6
средняя оценка в App Store при 559 отзывах
350+
упражнений с видео в каталоге приложения

Стек

  • React Native
  • TypeScript
  • Redux
  • React Navigation
  • Firebase
  • Cloud Firestore
  • RevenueCat
  • CodePush
  • HealthKit
  • Fastlane