Habit Quest

SPA-приложение для трекинга привычек, целей и челленджей. Помогает пользователям формировать полезные привычки, ставить цели и отслеживать прогресс в игровой форме.

Посмотреть демо

Как получить исходники

git clone https://github.com/Leg15Coder/frontend_second_term.git
cd frontend_second_term

Требования

• Node.js: версия 24.x (LTS)
• Пакетный менеджер: npm
• База данных: Firebase (Firestore, Authentication)
• Опционально: Firebase Emulators для локальной разработки (требуется Java)

Запуск проекта

1. Установка зависимостей

npm install

2. Настройка окружения

Создайте файл .env в корне проекта, скопировав пример:

cp .env.example .env

Заполните переменные окружения в файле .env вашими данными от Firebase проекта:

VITE_FIREBASE_API_KEY=...
VITE_FIREBASE_AUTH_DOMAIN=...
VITE_FIREBASE_PROJECT_ID=...
VITE_FIREBASE_STORAGE_BUCKET=...
VITE_FIREBASE_MESSAGING_SENDER_ID=...
VITE_FIREBASE_APP_ID=...

Значения можно получить в консоли Firebase: Project Settings -> General -> Your apps.

3. Запуск приложения

npm run dev

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

Основной сценарий использования

Чтобы проверить работу основного функционала приложения:

1. Регистрация/Вход:

   • Откройте приложение.
   • Нажмите "Зарегистрироваться" или войдите через Google (если настроено).
   • После входа вы попадете на Дашборд.

2. Создание привычки:

   • На Дашборде нажмите кнопку "Добавить привычку" (или "+" в секции привычек).
   • Заполните название (например, "Пить воду"), выберите частоту и сложность.
   • Нажмите "Сохранить".

3. Отметка выполнения:

   • Найдите созданную привычку на Дашборде или в разделе "Привычки".
   • Нажмите на чекбокс/кнопку выполнения, чтобы отметить прогресс за сегодня.
   • Убедитесь, что прогресс обновился.

4. Создание цели:

   • Перейдите в раздел "Цели".
   • Нажмите "Добавить цель".
   • Введите название и дедлайн.
   • Цель появится в списке активных целей.

Структура приложения

Проект организован в соответствии с Feature-Sliced Design (упрощенная версия):

• src/app/ — Инициализация приложения (стор Redux, настройки провайдеров).
• src/pages/ — Компоненты страниц (Dashboard, Habits, Goals, Auth и др.) и их маршрутизация.
• src/features/ — Реализация бизнес-фич (слайсы Redux, асинхронные экшены, специфичные компоненты), например auth, habits, goals.
• src/entities/ — Бизнес-сущности (типы, модели данных).
• src/shared/ — Переиспользуемый код, не привязанный к конкретной бизнес-логике:
  • ui/ — Библиотека UI-компонентов (кнопки, инпуты, модалки).
  • api/ — Настройки Axios и API клиентов.
  • hooks/ — Общие хуки.
• src/routes/ — Конфигурация роутинга приложения.
• public/ — Статические файлы и HTML шаблоны.