Фитнес-приложение

SPA разработано по макету

Разработка проекта велась на Kaiten

Команда разработчиков:

• ax1lebafer
• Aleks3y1
• OlegGorin
• ReginaWe

В стеке используются такие технологии как:

• React.js
• TypeScript
• Tailwind CSS
• Context API
• React Router
• Google Firebase
• ESLint, Prettier

Для запуска проекта:

• Установить зависимости npm i
• Запустить проект npm run dev
• Открыть проект в браузере`

Функционал

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

• React.js с использованием TypeScript для строгой типизации и минимизации ошибок на этапе разработки.
• Tailwind CSS для стилизации компонентов приложения.
• Google Firebase в качестве базы данных для хранения информации о курсах, данных авторизации пользователей и результатов выполнения упражнений.
• ESLint и Prettier для обеспечения единого стиля кода и соблюдения стандартов написания.

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

• Отображение курсов: При открытии приложения на главной странице отображаются карточки доступных курсов фитнес-тренировок. Пользователь может кликнуть на изображение курса или его название, чтобы ознакомиться с подробной информацией.
• Авторизация: В верхнем правом углу страницы находится кнопка «Войти». При нажатии на нее открывается модальное окно авторизации, если пользователь не авторизован.
  • Авторизация осуществляется по электронной почте и паролю.
  • В целях безопасности на страницах приложения отображается только имя пользователя, указанное при регистрации.
• Профиль пользователя: Если пользователь авторизован, вместо кнопки «Войти» отображается аватар и логин пользователя. При нажатии на него открывается меню с переходом в профиль и возможностью выхода из приложения.
• Навигация: В нижней части страницы расположена кнопка «Наверх» для быстрого перемещения в начало страницы.
• Добавление курсов:
  • Если неавторизованный пользователь пытается добавить курс (кнопка «+» на карточке курса), открывается модальное окно авторизации.
  • Если пользователь авторизован и курс уже добавлен, вместо кнопки «+» отображается галочка «✓», указывающая на то, что курс уже в профиле.
• Детали курса: Клик по изображению или названию выбранного курса открывает страницу с подробным описанием курса.

Страница курса

• Добавление курса: На странице курса есть кнопка для добавления курса в профиль, доступная авторизованным пользователям. Если пользователь не авторизован, ему будет предложено пройти авторизацию.

Авторизация и регистрация

• Страница входа (модальное окно):
  • Если пользователь не ввел email или пароль, отображается соответствующая ошибка: «Не введена почта» или «Не введен пароль».
  • При вводе неверных данных выводится сообщение «Неверный email или пароль».
• Страница регистрации (модальное окно):
  • Пользователь вводит почту, логин и пароль.
  • Если пользователь уже зарегистрирован, нажатие на кнопку «Войти» перенаправляет его на страницу входа.
  • При попытке регистрации с уже используемым email отображается ошибка «Данный email уже занят».
  • Если не заполнено одно из полей, выводится соответствующее сообщение об ошибке.
  • После успешной регистрации пользователь перенаправляется на страницу входа для авторизации.

Профиль пользователя

• Информация о пользователе: В профиле отображаются данные пользователя и кнопка «Изменить пароль». При нажатии открывается модальное окно для смены пароля, где необходимо ввести и подтвердить новый пароль.
• Управление курсами:
  • На карточке курса в профиле пользователь может начать или продолжить тренировку, а также отслеживать свой прогресс.
  • Для удаления курса из профиля предусмотрена кнопка «–» в правом верхнем углу карточки курса.

Выбор тренировки

• Модальное окно выбора тренировки: При нажатии на карточку курса открывается окно с выбором тренировок внутри курса. Выполненные тренировки отмечены галочкой.
• Начало тренировки: Для перехода к тренировке необходимо выбрать ее и нажать кнопку «Начать» внизу окна.

Страница тренировки

• Материалы тренировки: Пользователь переходит на страницу с видеоматериалами выбранной тренировки.
• Прогресс упражнений:
  • В таблице прогресса отображаются упражнения и процент их выполнения.
  • При нажатии на кнопку «Заполнить свой прогресс» открывается модальное окно, где пользователь вводит данные о выполненных упражнениях и сохраняет их.
  • После сохранения появляется уведомление «Ваш прогресс засчитан», которое отображается в течение 2 секунд.
• Обновление прогресса: Если пользователь выполнил упражнения в количестве, не ниже рекомендованного, заголовок кнопки меняется на «Обновите свой прогресс».