Time Burner на десктопе: слева цветное кольцо дня с текущим временем, в центре список Protocol с временными блоками и тегами, справа сводка дня

Трекер рутины. Фулл-стек web app

Time Burner

Проблема

Я не нашёл подходящих для себя инструментов, с помощью которых можно гибко управлять повторяющимися расписаниями на обеих платформах.

Попробовать вживую

Живое приложение подгружается с его сайта только по запросу.

Открыть в новой вкладке (откроется в новой вкладке)

Механика

Главная идея в повторяемых паттернах дня. Я не планирую каждый день с нуля. Один раз собираю паттерн, например день глубокой работы, день восстановления или день в дороге, и потом ставлю его на любую дату. Паттерн это целый день: блоки времени с типом (burn, fuel, rest, void) и цветными тегами.

Паттерны лежат в библиотеке, и у них есть отдельный визуальный редактор. День там таймлайн: блок двигаю перетаскиванием, длину меняю за край, всё прилипает к 15 минутам. Если поправить паттерн, поменяются все дни, где он стоит. Если одному дню нужно исключение, я отвязываю его и правлю только этот день.

Визуальный редактор: паттерн дня в виде таймлайна, блоки двигаются и растягиваются с шагом 15 минут
Визуальный редактор: паттерн дня в виде таймлайна, блоки двигаются и растягиваются с шагом 15 минут

В календарь паттерны попадают через массовое редактирование. В недельном и месячном видах включаю bulk assign, отмечаю нужные дни (или беру все) и один раз выбираю паттерн: неделя дней глубокой работы или месяц рутины это несколько нажатий вместо десятков.

Библиотека паттернов: каждый это целый день, с числом фаз и часов
Библиотека паттернов: каждый это целый день, с числом фаз и часов
Bulk assign в недельном виде: отмечаю дни и выбираю паттерн сразу для всех
Bulk assign в недельном виде: отмечаю дни и выбираю паттерн сразу для всех
То же в месячном виде: блок дней получает один паттерн за одно действие
То же в месячном виде: блок дней получает один паттерн за одно действие

Вторая идея проекта в том, что ничего не живёт на одном устройстве. Приложение отслеживает каждое изменение: какой паттерн стоит на каком дне, что выполнено, что поправлено. После входа через Google это состояние уходит в Firebase, поэтому правка на десктопе появляется на телефоне и наоборот. Интерфейс не сжимается, а перестраивается: тот же день на ноутбуке это рабочее место в три колонки, а на телефоне кольцо со списком.

Один день на десктопе и на телефоне: тот же паттерн, те же выполненные блоки
Один день на десктопе и на телефоне: тот же паттерн, те же выполненные блоки
Мобильная версия: день в виде кольца со списком Protocol, bulk assign в недельном виде, месячная сетка
Мобильная версия: день в виде кольца со списком Protocol, bulk assign в недельном виде, месячная сетка

Все данные на скриншотах и в видео выдуманные, для демонстрации.

Технический стек

Спроектировал фронтенд и написал логику приложения через промпт-инжиниринг в Google AI Studio. Интегрировал Firebase SDK для авторизации пользователей и синхронизации базы данных в реальном времени. Это обеспечило мгновенную репликацию данных между десктопной и мобильной версиями. Проект развернут на GitHub Pages.

Главное

  • Закрыл полный цикл от интерфейса до архитектуры базы данных и деплоя.
  • Настроил синхронизацию данных между платформами через Firebase Firestore.
  • Готовлю репозиторий со стабильной сборкой к публичному релизу.
  • Выстроил личный рабочий режим на базе тайм-блокинга.

Другие проекты

Все работы