Веб-приложение с геймификацией для трекинга полезных привычек, поддерживающее PWA (Progressive Web Application). В разработке использован следующий стек технологий:
- React - библиотека для создания пользовательских интерфейсов
- TypeScript - расширение javascript, для типизации приложения
- Redux - стейт-менеджер для управления глобальным состоянием приложения
- LocalStorage - долговременное хранилище данных в браузере
- Scss - препроцессор для написания стилей
Cсылка на задеплоенную версию проекта: Habit tracker
- При первом посещении отображается форма, в которой необходимо заполнить поля "Имя" и "Рандомное число от 1 до 100". Рандомное число представляет собой стартовое количество ProdCoin (замена чокопай-коинам) у пользователя. На этой же странице запрашивается разрешение на отправку уведомлений, которые будут отправляться, если у пользователя "висит" вкладка с данным сайтом в оффлайне и он не открывал ее более чем 24 часа.
- Главная страница веб-приложения - страница со списком привычек, на которой можно как добавить привычку, так и посмотреть данные о любой привычке на текущий день. Также тут можно посмотреть часть своей статистики, изменить текущую дату в приложении и подгрузить данные о привычках из json-файла(dev).
- Пару слов о логике работы привычек, опыта и уровней:
- Если привычка с периодом 1 день добавлена 15 марта, то она не будет отображаться 14 марта и ранее, но будет отображаться в любой другой день после 15 марта, включая 15 марта.
- Привычку можно просто перестать трекать, а можно перестать трекать и удалить историю о ней. В первом случае привычка перестает появляться в будущем, то есть если привычка была добавлена 15 марта и перестала трекаться 20 марта, то с 21 марта этой привычки уже не будет в списке привычек, а в периоод с 15 до 20 марта привычка все еще будет отображаться. А во втором случае удаляется вся информация о привычке и она не будет отображаться вовсе.
- Привычки, у которых исчисляемая цель, работают следующим образом: привычка с периодом неделя и целевым значением 5 добавляется, к примеру, 15 марта, пользователь может либо за 1 день выполнить привычку и, к примеру, 16 марта поставить значение 7, либо выполнять привычку постепенно, то есть 16 марта поставить значение 1, затем 17 марта поставить значение 1, затем 18 марта поставить значение 3, и в сумме наберется как раз целевое значение 5, значит привычка выполнена
- За каждую выполненную привычку пользователю начисляется опыт, причем чем больше период привычки - тем больше опыта получает пользователь, но важно отметить, что опыт может уйти в минус, за невыполнение привычки предусмотрен штраф в размере
xp / 4 опыта, где xp - количество получаемого опыта за выполненную привычку с таким же периодом. Все данные об опыте за каждый период находятся в src/constants/constants.ts - Также у пользователя есть уровень, который вычисляется по формуле
floor(xp / 1500), где xp - количество опыта. При увеличении уровня можно открывать новые категории привычек (см. Экстрафичи -> Геймификация).
- Страница статистики отображает, во-первых, всю информацию о пользователе (его числовую статистику), а также пару графиков, один из которых отображает количество выполненных привычек в день, а другой - количество добавленных привычек в день.
- Последняя страница - Магазин, на которой можно совершать действия с ProdCoin'ами. Тут можно как заработать ProdCoin, выполняя задания или обменивая опыт на него, так и тратить ProdCoin на различные плюшки
- Копирование репозитория
git clone https://github.com/Central-University-IT-prod/frontend-FaxWeb7.git
- Установка NPM зависимостей
npm install
- Установка конфигурации. Измените конфигурацию в src/constants/constants.ts
// src/constants/constants.ts APP_URL='http://localhost:4173' ...
- Создание билда
npm run build
- Запуск проекта
npm run preview
- Перейти по адресу
http://localhost:4173в браузере
- Геймификация (может и не экстрафича, но в основных функциях это указано как необязательное)
- Система прокачки, открывающая новые категории привычек. С ростом уровня пользователя увеличивются и его возможности в добавлении все новых привычек
- Прогресс-бар наполнения уровня – система, при которой последовательное выполнение привычек без пропусков добавляет коэффициент получения нового опыта. Данная система реализована через "Рекорд", он увеличивается каждый раз, когда пользователь не пропускает ни одной привычки за день, и падает до нуля, если пользователь пропустил хотябв один день. Опыт с учетом текущего рекорда вычисляется по формуле
xp + (xp * (streak / 100)), где xp - заработанный опыт без учета рекорда, streak - текущий Рекорд - Уведомления, поздравляющие с выполнением привычек, достижением новых уровней, отображающие количество опыта, который осталось получить для того, чтобы перейти на следующий уровень.
- Календарь-слайдер на главном экране, с помощью которого можно легко переключать текущий день недели, нажав на нужную дату, либо переключить текущую неделю на предыдущую или следующую, нажав на соответствующие кнопки.
- Модальное окно для каждой привычки, в котором можно не только ставить значения выполнено/не выполнено и удалять привычку, но и получить всю информация о выбранной привычке
- В магазине есть как базовые возможности, по типу пропуска текущего дня и сохранения опыта и стрика, так и продвинутые, как покупка изменения аватарки или имени пользователя. Также есть дополнительные возможности получить ProdCoin'ы, выполняя задания или обменивая опыт на них
- Также я хотел бы выделить дизайн и проработку всех аспектов приложения как дополнительную особенность, поскольку, на мой взгляд, эти элементы играют огромную роль в промышленной фронтенд-разработке и заслуживают особого внимания.
Павловский Артём Александрович