Тапа — трекер привычек с групповым соревнованием

О проекте

Тапа — мобильное приложение (iOS + Android) для отслеживания привычек: цель можно вести соло или создать групповую и соревноваться командой. Маскот Тапа реагирует на прогресс. Приложение опубликовано в RuStore (Google Play и App Store — в работе). Тапа — некоммерческое, полностью бесплатное приложение без подписок и рекламы.

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

продуктовая концепция и приоритизация;
UX/UI и дизайн-система TapaDS (Figma);
фронтенд: React Native / Expo, TypeScript, Expo Router;
бэкенд: Node.js / Express, PostgreSQL;
нативные модули (Expo Modules API, Kotlin) — авторизация, Health Connect;
сборка Android и подготовка к публикации.

Зачем взялись: попробовать себя в разработке (с вайб-кодингом это стало доступно дизайнеру) и проверить гипотезу — социальная функция, совместные и групповые активности, кажется конкурентным отличием, на рынке трекеров привычек такого мало.

Ограничение — два человека и свободное время, поэтому scope режется агрессивно, а дизайн-система и переиспользуемые компоненты экономят время на каждой новой фиче.

Зачем этот проект в портфолио дизайнера

Дизайн здесь не заканчивается макетом. Каждая фича проверяется в работающем приложении, а не только в Figma; ограничения платформы и стоимость решений видны заранее; идея доходит до продукта в руках пользователя без штатной разработки. Это кейс про то, как дизайнер отвечает за продукт целиком — от концепции до релиза в сторах.

Дизайн-система TapaDS

Figma → код

Что. Единый источник правды в Figma: токены (палитры, типографика Manrope), компоненты (кнопки, навбар, списки, карточки, bottom sheet, segmented control, toolbar, FAB, прогресс-бар, теги статуса), правила отступов и радиусов.

Семантические переменные заданы парами светлая / тёмная темы — интерфейс поддерживает обе с самого начала, а не докручивался потом.

Панель переменных TapaDS в Figma: семантические цвета surface для светлой и тёмной темы — Семантические токены цвета в Figma — по значению для светлой и тёмной темы

Библиотека компонентов. Каждый компонент — со всеми состояниями (default, pressed, disabled, error) и в обеих темах. Состояния не угадываются в коде — они уже описаны в макете.

Страница компонента Segmented Control в файле TapaDS — Компонент Segmented Control: варианты и состояния в светлой и тёмной теме

Маскот. Тапа — ленивец — реагирует на прогресс (доволен / грустит / злится). Иллюстрации собраны в отдельном разделе библиотеки, растровые версии экспортируются в приложение.

Раздел иллюстраций маскота Тапа в файле TapaDS — Иллюстрации маскота: исходники и состояния под разные экраны

Как связано с кодом. Цвета — через lib/colors.ts и хук useColors(), никакого хардкода hex; своя обёртка над Text; готовые компоненты вместо RN-примитивов. Правило: карточки и подложки плоские, тени — только у плавающих элементов. Дизайн-система задаёт рамки, в которых Claude генерирует код предсказуемо.

Онбординг и вход

Яндекс ID + VK ID

Контекст. Нужен быстрый вход без пароля и без сбора лишних данных.

Решение. Welcome-экран с маскотом; вход через Яндекс ID и VK ID — оба нативные (Expo Modules, официальные SDK). Имя, изменённое пользователем, не затирается при повторном логине; аватар подтягивается с любого привязанного провайдера.

Welcome-экран Тапы: маскот на ветке, кнопки входа через Яндекс и VK ID — Welcome-экран: один шаг до входа, два отечественных провайдера

Ограничение, повлиявшее на продукт. Вход через Telegram был реализован, но удалён — с июля 2026 авторизация россиян через иностранные сервисы под запретом (199-ФЗ). Пришлось перевести всех на отечественные провайдеры.

Главный экран

Прогресс и список целей

Главный экран отвечает на один вопрос: как у меня дела с целями сегодня. Поэтому всё подчинено прогрессу дня.

Шапка — состояние дня. Маскот реагирует на прогресс (доволен / грустит), рядом — прогресс-бар и счётчик «X / Y целей выполнено». При скролле шапка уходит параллаксом, освобождая экран под список.

Карточки целей — плоские и однотипные. У каждой: тег статуса (выполнено / провалено / пропуск), иконка соло / группа, метрика дня. Никаких карточек-иллюстраций — плотный список, который быстро просматривается.

Действия — снизу по центру. Toolbar с профилем и меню «Создать цель / Вступить в группу»; pull-to-refresh обновляет список. Для пустого состояния — отдельный экран с маскотом и тем же Toolbar.

Главный экран Тапы: маскот, прогресс-бар, список карточек целей с тегами статуса, Toolbar снизу — Главный экран: прогресс дня в шапке, плоские карточки целей с тегом статуса и метрикой

Система целей

Типы, периодичность, календари

Что. Гибкая система целей вместо одного жёсткого формата:

соло / групповая; с числовой целью / без цели (просто отметка);
периодичность: каждый день, по дням недели, N раз в неделю / месяц, произвольно;
спец-сценарий «Подтягивания» — план прогрессии, календарь Неделя / Месяц, тап по дате открывает план на день;
групповая count-цель — безлимитная, кнопка «+1», общая статистика команды, пуш на каждую запись;
кастомный мастер создания цели: тип чек-ина (да/нет, количество, прогрессия), напоминания, длительность (бессрочно / период / до достижения цели).

Мастер создания цели, шаг 3 из 3: периодичность и длительность — Мастер создания цели: последний шаг — периодичность, число отметок в день, срок

Весь флоу создания цели — соло и групповой — с ветвлением по типам чек-ина и периодичности:

Карта флоу создания цели в Figma: десятки экранов для соло и групповых целей — Карта флоу создания цели: соло-ветка и групповая, все комбинации типа чек-ина и периодичности

Пример детального экрана — цель «Подтягивания» с планом прогрессии: календарь Неделя / Месяц, план на день по тапу на дату.

Детальный экран цели «Подтягивания»: план прогрессии, календарь недели, цель на сегодня — «Подтягивания»: план прогрессии, недельный календарь, цель на день

Планы развития

Релиз и дальнейший функционал

Где сейчас. Приложение опубликовано в RuStore. В работе релизы в Google Play и App Store.

Что дальше:

контроль финансовых целей — накопления и бюджеты в том же формате, что и привычки;
аналитика и история целей — динамика прогресса, завершённые цели, статистика по периодам;
устранение критических недочётов по обратной связи от пользователей;
маркетинг и продвижение.