Aura Breath — Telegram WebApp
Здоровье / Telegram WebApp

Aura Breath — Telegram WebApp

Приложение для дыхательных практик на базе Telegram WebApp с 4-этапной воронкой онбординга, анимированными дыхательными кругами и персональным расписанием ежедневных сессий.

Клиент

Aura Breath

Длительность

5 weeks

Год

2025

Результаты

68%

Funnel complete

Users finish all 4 stages

41%

D7 retention

Return after 7 days

8 min

Avg session

Time per breathing session

4.8★

Rating

User satisfaction

Задача

Клиенту нужно было мобильное приложение для дыхания внутри Telegram — без трений App Store, с мгновенным доступом и высоким удержанием через ежедневные напоминания. Нативное приложение было слишком долго и дорого для запуска.

Наше решение

Создали Next.js 16 приложение как Telegram WebApp с компонентами Radix UI и дыхательными анимациями на Framer Motion. Бот GrammY ведёт 4-этапный онбординг: профиль стресса → живое дыхательное упражнение → научный контекст → CTA с выбором времени уведомлений. PostgreSQL хранит состояние пользователя, стрики и историю сессий.

Системная архитектура

WebApp Layer

Next.js 16 served as Telegram WebApp. Telegram.WebApp SDK for theme, haptics, BiometricManager. Framer Motion breathing circle with 4-7-8 and box breathing patterns.

Bot Engine

GrammY with conversation middleware. 4-stage onboarding flow: Stage1(years) → Stage2(breath) → Stage3(science) → Stage4(CTA). Long polling on VPS.

Scheduler

Node.js cron-based daily reminder system. Starts before bot.start(). Fires personalized messages at user-selected notification times.

Database

PostgreSQL in Docker. Prisma ORM for user profiles, session history, and streak tracking. Migrations via prisma migrate deploy on startup.

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

Next.js 16GrammYFramer MotionRadix UIPostgreSQLPrismaDockerTypeScript
The breathing app inside Telegram was a game-changer. No app install, no friction — people just open it and breathe. Retention numbers we never expected.

Product Lead

Aura Breath

Готовы создать что-то выдающееся?

Обсудим, как применить схожий архитектурный подход к вашим задачам.

Смотреть другие работы