Календарь тренировок — когда пет-проект чуть больше to-do листа

в 11:16, , рубрики: frontend-разработка, javascript, TypeScript, vue, vue.js, исходный код, открытый код, фронтенд

В декабре 2023 я впервые задумался о похудении. Тогда при росте 194 см я весил 116 кг. Раньше я только играл в мини-футбол, вообще не следил за едой и даже не заглядывал в спортзал.

Начал нормально питаться, поменял привычки, добавил силовые тренировки, к сентябрю 2024 скинул около 30 кг. Это был рекорд по минимальному весу.

Сейчас, через полгода, вешу 89 кг. Оказалось, что нарастить мышцы намного труднее, чем избавиться от жира. Надеюсь, что эти +3 кг в основном мышцы. Почему так: теперь могу подтянуться 11 раз вместо 9, и на фото видны изменения — делаю такие сравнения каждые пару месяцев.

Полгода назад - сверху, сейчас +1кг - снизу

Полгода назад - сверху, сейчас +1кг - снизу

Я фронтенд-разработчик. До этого уже делал пет-проекты: например, интернет-магазин и библиотеку компонентов. Чтобы не заскучать во время разработки, параллельно снимал об этом видео на YouTube и иногда вёл прямые эфиры.

5 месяцев назад начал делать приложение календаря тренировок. Особенность в том, что я занимаюсь дома: у меня мало спортивного оборудования и мне жалко тратить много времени на силовые тренировки. Судя по данным из приложения, в месяц у меня уходит примерно 6 часов на тренировки, а одно занятие длится в среднем 40–45 минут.

https://github.com/dergunovs/fit - исходный код.

https://vkvideo.ru/playlist/15313879_11 - видео про разработку приложения.

Фронтенд: Typescript, Vite, Vue, Tanstack Query, Vitest.

Бэкенд: Typescript, Fastify, Mongoose, MongoDB, Swagger.

Главная страница сайта

Главная страница сайта

Цель приложения — сделать тренировки более осознанными, добавить ценности и мотивации, помочь с планированием.

В приложении можно регистрироваться, выбирать оборудование и веса для каждого упражнения по умолчанию.

Выбор оборудования и веса

Выбор оборудования и веса

Планирование тренировки:

  1. Собираете занятие из упражнений, которые доступы вам, исходя из вашего оборудования.

  2. Выбираете для каждого вес и количество повторов.

  3. Можно смешивать упражнения в одном сете (например, приседания + отжимания в одном блоке) или добавить несколько подходов одного упражнения подряд (например, 3 подхода жима лёжа).

  4. Выбираете начать тренировку сразу или сохранить в календарь на нужную дату.

Как формируется занятие

Как формируется занятие

Во время тренировки вы включаете/выключаете таймер для каждого упражнения. Приложение автоматически запоминает, сколько времени вы тратите на разные упражнения. Позже это помогает предсказать длительность новых тренировок ещё на этапе планирования. Это удобно, когда времени мало.

Экран прохождения занятия

Экран прохождения занятия

На основе ваших пройденных тренировок формулируется статистика.

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

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

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

В таблице статистика за месяц с динамикой по каждому из выполненных упражнений.

Особенности календаря:

  • При клике на тренировку в календаре открывается таймлайн — визуальное отображение тренировки: сразу видно, как проходила тренировка, где и сколько было отдыха.

  • Можно копировать прошлые занятия, чтобы не настраивать их с нуля.

  • Всю информацию о тренировке (упражнения, веса, время) можно скопировать текстом в буфер обмена, чтобы, например, отправить тренеру в Telegram.

Информация о тренировке в календаре

Информация о тренировке в календаре

Технически приложение храню в форме монорепозитория на Turborepo. 2 приложения: фронт и бэк. Так как они оба используют Typescript, то можно легко вынести общие переиспользуемые вещи, такие, как DTO, пути API в отдельный пакет с контрактами. Общие интерфейсы используются при валидации моделей в Mongoose и схемы на бэкенде для генерации сваггера и валидации в Fastify.

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

Для управления сущностями написал простейшую админку.

Редактирование упражнения в админке

Редактирование упражнения в админке

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

Так как это пет-проект, времени на него не очень много, приходиться где-то упрощать, что-то откладывать на потом. Тем не менее, стараюсь сохранять более-менее расширяемую архитектуру, пишу юнит-тесты (уже 370). Очевидно, что дизайн максимально простой. Нужно много времени уделить обработке ошибок и каких-нибудь крайних ситуаций.

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

https://github.com/dergunovs/fit - буду рад конструктивной обратной связи по коду или функциональности приложения.

Автор: dergunovs

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js