FitTrack (Ссылка на сайт)

FitTrack - современное веб-приложение для отслеживания фитнес-прогресса, построенное с использованием передовых технологий веб-разработки.

Технологии

• Фротенд Библиотека: React 19
• Типизация: TypeScript
• Маршрутизация: TanStack Router
• Состояние: Zustand
• Формы: React Hook Form с Zod валидацией
• Стилизация: Tailwind CSS
• UI Компоненты: ShadcnUI
• 3D Визуализация: Three.js с React Three Fiber
• Сборка: Vite

Установка и Запуск

1. Клонируйте репозиторий:

git clone https://github.com/FaxWeb7/PROD-FitTrack

2. Установите зависимости:

npm install

3. Создайте файл .env.local и добавьте необходимые переменные окружения:

VITE_IMGBB_API_KEY=ваш_ключ_api    # API ключ для сервиса загрузки изображений ImgBB

Получить API ключ можно зарегистрировавшись на ImgBB.

4. Запустите проект в режиме разработки:

npm run dev

Приложение будет доступно по адресу: http://localhost:3001

Система мотивации пользователя

В моей системе у пользователя есть уровень, опыт и поинты кастомизации персонажа. При выполнении тренировок пользователь получает опыт и поинты, опыт нужен просто для повышения уровня. Уровень контролируется следющим образом: когда опыт переваливает за 100, у пользователя повышается уровень на 1, а опыт берется по модулю 100. За поинты можно купить кастомизацию персонажа.

Блок с персонажем

В моем проекте всего 4 вида персонажа по "толщине": худой, атлетичный, немного полный и полный. Начальная "толщина" персонажа зависит от того, какой тип телосложения выбрал пользователь при регистрации. На 5, 10, и 15 уровне персонаж автоматически улучшается (стремится к эталону. Если цель набор массы, эталон - атлетичный, если похудение - худое, иначе то же, что и сейчас). Важно заметить, что "путь толщины" от худого к атлетичному телу(набор массы) короче, чем от полного к худому (похудение), так как моделек маловато из-за того, что я пишу трек фронтенд. Поэтому для наглядности лучше ставить тип телосложения "полный", и цель "похудение".

Экстафичи

Общие плюсы:
    - Крутой дизайн, стили и анимации
    - Удобство использования, различные toast'ы, модалки подтверждения, спиннеры пока не загружены картинки и тд.

Настройки:
    - Возможность менять тему
    - Возможность выйти из аккаунта и удалить все данные

Упражнения:
    - Поиск по упражнениям
    - Карусель с похожими упражнениями для текущего упражнения

Тренировки:
    - Возможность выставления сложности для тренировки
    - Возможность выставления целевых частей тела для тренировки
    - drag & drop reorder для списка упражнений в тренировке
    - Модалка с описанием тренировки, со списком упражнений
    - Возможность редактирования тренировки
    - Возможность удаления тренировки

Режим тренировки:
    - Возможность поставить таймер на паузу
    - Возможность завершения таймера досрочно

Страница со статистикой по всем тренировкам:
    - Всевозможная статистика по тренировкам, группам мышц и тд.
    - Графики самые разнообразные
    - История тренировок