От технофоба к отправке приложений: Стек, протестированный на 200+ инструментах

Почему этот стек работает

Убежище от инструмент-ада: Nathan тестировал 200+ инструментов. Его вывод: большинство из них мусор. Он выбрал минимальный стек, где каждый инструмент решает одну конкретную проблему и интегрируется с другими.

Две главные ошибки новичков:

1. Использовать визуальные конструкторы (Bubble, Lovable, Flutterflow)

   • Кажутся быстрыми, но они медленнее на практике
   • Вы заблокированы в платформе (не можете добавить пользовательские функции)
   • Хуже работают с AI помощниками (Cursor, Claude Code)

2. Разработка всего самостоятельно (auth, платежи, email)

   • Попытка самостоятельно создать аутентификацию = минимум неделя отладки
   • Платежи имеют законодательные риски
   • Эти проблемы уже решены (используйте Clerk, Superwall, Resend)

Критичный инсайт: Подход с кода в приоритете (Expo + Convex) быстрее, чем визуальные конструкторы, ЕСЛИ вы используете AI помощника вроде Cursor. Все три компонента вместе = чрезвычайно мощное сочетание.

Цена ошибки: Nathan потратил 1+ неделю на самостоятельное создание auth для Harmony. Это типичная ошибка. "Не разрабатывайте это сами — это уже решённая проблема."

Пошаговый план действий

Шаг 1: Выбор фронтенда — Expo вместо Swift

Это первое решение. Swift (для iOS) выглядит натуральным, но Expo (React Native) в 2-3 раза быстрее.

Почему Expo побеждает:

• Кроссплатформа из одного кодовой базы (iOS + Android одновременно)
• Работает с Cursor (AI помощник кодирования)
• Упрощает отправку в App Store (реально сложный процесс)
• Имеет встроенные пакеты (календарь, камера, уведомления)

Почему НЕ Swift:

• Требует Xcode (ужасный) и macOS
• Не работает с Cursor
• Только iOS (Android требует полной переработки)

Ваши действия:

• Создайте новый проект Expo: npx create-expo-app@latest MyApp
• Прочитайте Expo docs (особенно раздел про встроенные пакеты)
• Установите expo-cli: npm install -g expo-cli
• Запустите локально: npm start (даст вам QR для тестирования на телефоне)
• Не смотрите на Swift — серьёзно, это ловушка для соло-основателей

Пример: Harmony построена на Expo, скомпилирована на iOS + Android из одного репозитория. У Nathan есть одна бэкенд-папка (Convex) и одна фронтенд-папка (React Native), и Cursor может видеть всё целиком.

Шаг 2: Добавьте стилизацию (Native Wind)

Без стилизации приложение выглядит как макет. Native Wind это Tailwind для мобильных — один способ определить все цвета, интервалы, закругления, и они работают везде.

Почему это критично:

• Приложение выглядит профессионально
• Светлый и тёмный режимы работают автоматически
• Ускоряет разработку (не думайте о стилях, сосредоточьтесь на логике)

Ваши действия:

• Установите Native Wind: npm install nativewind в вашем Expo проекте
• Создайте tailwind.config.js (шаблон в Expo docs)
• Определите цветовую палитру один раз (например, 5-6 основных цветов)
• Используйте классы Tailwind во всех компонентах: className="bg-blue-500 rounded-lg px-4 py-2"
• Проверьте темный режим на телефоне (автоматический с Native Wind)

Пример из Harmony: Все кнопки, карточки, тексты используют Native Wind. Nathan определил цвета один раз, и они используются везде. Смена цвета во всём приложении = одна строка изменения в config.

Шаг 3: Добавьте анимации (React Native Reanimated)

Современные приложения ощущаются волшебными благодаря анимациям. Reanimated это производительная библиотека для анимаций (60 FPS, не блокирует UI).

Что это добавляет:

• Открытие/закрытие модальных окон плавно
• Свайпы регистрируются мгновенно
• Приложение чувствует себя "живым"

Ваши действия:

• Установите Reanimated: npm install react-native-reanimated
• Прочитайте примеры на их сайте (есть копируемые компоненты)
• Добавьте анимацию для основных переходов (модали, вкладки)
• Тестируйте на реальном телефоне (эмулятор врёт о производительности)
• Не переусложняйте — анимация это тонкий инструмент

Пример: В Harmony, когда пользователь свайпает карточку, она скользит с Reanimated-анимацией. Это безопасно используется во всём приложении и сохраняет 60 FPS.

Шаг 4: Микровзаимодействия (Lottie Files)

Lottie это библиотека готовых анимаций (конфетти, загрузчики, иконки). Вы ищете анимацию, вставляете, готово.

Ваши действия:

• Перейдите на lottiefiles.com и найдите анимации для вашего приложения
• Скачайте JSON файл
• Установите Lottie для React Native: npm install lottie-react-native
• Встройте в приложение (3 строки кода)
• Используйте для: конфетти при победе, загрузчики, эмоции

Пример: Harmony показывает конфетти Lottie при завершении еженедельной цели. Занимает 1 день разработки, резко усиливает эмоциональный отклик.

Шаг 5: Бэкенд — Convex (главное решение)

Это самое важное. Convex это ваша база данных + серверная логика в одном месте. Все альтернативы (Supabase, Firebase) фрагментированы.

Почему Convex:

• Вся логика в коде (не в панели управления)
• AI (Cursor, Claude) может видеть весь бэкенд целиком
• Интеграции готовы (Resend, Clerk, OpenAI)
• Быстрая итерация (измените код → автодеплой)

Почему НЕ Supabase:

• SQL код в одном месте, логика в коде в другом → запутанность
• AI не может видеть весь контекст
• Медленнее разработка

Ваши действия:

• Создайте аккаунт на convex.dev
• Установите Convex в проект: npm install convex
• Создайте convex/ папку (это ваш весь бэкенд)
• Определите функции (queries для чтения, mutations для записи)
• Подключите фронтенд через ConvexClient
• Изучите их интеграции (есть готовые компоненты для Resend, Clerk, OpenAI)

Пример архитектуры Harmony:

MyApp/
├── apps/
│   ├── web/        (Next.js, лендинг + форма)
│   └── native/     (Expo, мобильное приложение)
└── convex/         (ВСЯ логика бэкенда в коде)

Когда Nathan открывает Cursor, он может спросить: "Покажи мне функцию, которая создаёт недельную цель" — и Cursor видит код везде.

Шаг 6: Аутентификация (Clerk)

Критичная ошибка: попытаться создать собственную auth. Nathan потратил неделю на это.

Что такое Clerk:

• Google/Apple Sign In
• Пароль с безопасностью
• Многофакторная аутентификация
• Идеально интегрируется с Convex

Ваши действия:

• Зарегистрируйтесь на clerk.com
• Установите: npm install @clerk/react-native
• Создайте приложение в Clerk dashboard
• Добавьте Google OAuth (3 клика)
• Обёрните приложение в ClerkProvider
• Тестируйте вход через Google
• НЕ пишите собственный код auth — серьёзно

Ошибка Nathan: Первый раз он пытался создать auth самостоятельно. "Я потратил целую неделю, столкнулся со всеми этими проблемами." С Clerk это было бы 30 минут.

Шаг 7: Email (Resend)

Уведомления по email = лучший способ вернуть пользователя в приложение.

Случаи использования:

• Приветственный email после регистрации
• Email подтверждения
• Напоминания о целях
• Feedback запрос при отмене подписки

Ваши действия:

• Зарегистрируйтесь на resend.com
• Создайте API ключ
• Convex имеет готовый компонент для Resend (скопируй-вставь)
• Создайте email шаблоны (HTML или Markdown)
• Отправьте тестовый email самому себе
• Настройте автоматические email (при регистрации, отмене, и т.д.)

Пример: Harmony отправляет email "Неделя завершена" когда пользователь выполняет все цели. Это поддерживает engagement.

Шаг 8: AI функции (OpenAI API)

Если ваше приложение использует AI (генерация текста, анализ, рекомендации).

Почему OpenAI (вместо Claude, Grok):

• Полный набор моделей (text, image, audio, vision)
• Надёжное API, быстрое
• Хорошая цена
• Легко интегрируется

Ваши действия:

• Создайте аккаунт на openai.com
• Получите API ключ
• Добавьте в Convex функцию, которая вызывает OpenAI
• Используйте text-davinci-003 или gpt-4 в зависимости от нужности
• Обработайте streaming (пользователь видит текст по буквам)
• Добавьте rate limiting (не пустить spam)

Пример из Harmony: Когда пользователь пишет миссию ("Стать здоровее"), OpenAI генерирует долгосрочные цели, недельные цели и задачи. Это AI core функционала.

Шаг 9: Лендинг страница (Vercel + Next.js)

Люди попадают на веб сначала. Лендинг = куда перенаправить их в App Store.

Ваши действия:

• Создайте Next.js проект в той же монорепо (или отдельно)
• Напишите лендинг (можно с Claude помочь)
• Добавьте кнопку "Download on App Store" и "Get on Google Play"
• Оптимизируйте для SEO (описание, keywords)
• Разверните на Vercel (одна команда)
• Время разработки: 30 минут с AI

Пример: Harmony лендинг это одна страница с видео демо, фичами и кнопками. Готово за 30 минут.

Шаг 10: Платежи (Superwall)

Superwall это 2-в-1: обработка платежей (Apple Pay) + дизайн paywall.

Что это делает:

1. Обрабатывает in-app покупки и подписки
2. Предоставляет готовые шаблоны paywall (с доказанной конверсией)
3. A/B тестирует разные paywall дизайны
4. Отслеживает метрики

Критичная ошибка: Пытаться создать свою систему платежей. Superwall — это уже решённая проблема.

Ваши действия:

• Зарегистрируйтесь на superwall.com
• Интегрируйте в Expo приложение (документация простая)
• Выберите готовый paywall шаблон
• Настройте цены для вашего региона
• Тестируйте на sandbox (Apple Test Flight)
• Запустите на реальные деньги в App Store
• Мониторьте conversion rate (сколько % видят paywall и платят)

Пример: Harmony имеет простой paywall: "Разблокируйте AI планирование". Superwall обрабатывает $3K ARR автоматически.

Шаг 11: Аналитика (не переусложняйте рано)

Горячий совет: не зацикливайтесь на аналитике пока нет трафика.

Ранняя стадия (недели 1-4):

• Смотрите только 2 метрики в Superwall: Paywall Rate и Conversion Rate
• Paywall Rate = % пользователей, которые видят paywall (если низко, онбординг слишком долгий)
• Conversion Rate = % которые платят (если низко, ценностное предложение слабо)

Средняя стадия (месяц 2+, когда есть трафик):

• Используйте PostHog для детальной аналитики
• Видите где люди отваливаются (PostHog создаёт воронку онбординга)
• A/B тестируйте разные paywall

Ваши действия:

• Месяц 1-2: смотрите Superwall только
• Месяц 2+: установите PostHog (бесплатный tier щедрый)
• Создайте воронку в PostHog (регистрация → paywall → платёж)
• Ищите drop-off (где большинство отваливается?)
• Исправляйте: упростите онбординг ИЛИ улучшите ценностное предложение

Ошибка новичков: A/B тестирование paywall когда у вас 10 пользователей в день. Нет статистики. Сосредоточьтесь на продукте сначала.

Шаг 11.5: Attribution и ASO (при платной рекламе)

• Appsflyer (MMP) — подключите перед запуском рекламы. Отправляет данные конверсий обратно в рекламную платформу. Щедрый бесплатный план
• App Tweak (ASO) — оптимизация заголовка/описания/ключевых слов для App Store. Используйте когда приложение наберёт трафик

Шаг 12: Маркетинг (социальные + объявления)

Что работает лучше всего: органические посты

X (Twitter):

• Самые высокие impressions
• Аудитория = основатели, разработчики
• Постите регулярно о progress

LinkedIn:

• Лучше конверсия (платящие пользователи)
• Аудитория = профессионалы, бизнес
• Контент = productivity, goal-setting, personal growth

Ваши действия:

• Создайте аккаунты на X и LinkedIn
• Постите 2-3 раза в неделю про прогресс (build in public)
• Делитесь метриками, ошибками, выводами
• Отвечайте на комментарии (сообщество это главное)
• Не продавайте напрямую — делитесь знанием
• Ссылайтесь на лендинг в bio

Пример: Nathan регулярно постит о Harmony. Пример поста: "Harmony достигла 500 пользователей. Вот что работает: Apple Search Ads на ключевом слове 'weekly planner', LinkedIn, и сарафанное радио."

Шаг 13: Apple Search Ads (легкодоступная возможность)

Это реклама прямо в App Store. Когда пользователь ищет "weekly planner", вы появляетесь сверху.

Почему это выигрышный канал:

• Пользователи уже в App Store (в режиме покупки)
• Они уже ищут что-то похожее
• Низкое трение (клик → установка)

Ваши действия:

• Зарегистрируйтесь в Apple Search Ads (в App Store Connect)
• Создайте кампанию для узкого ключевого слова вашей ниши
• Не используйте широкие ключевые слова ("приложение", "планирование")
• Примеры узких ключевых слов:
  • "weekly planner" (для Harmony)
  • "AI goal tracker"
  • "productivity app"
• Бюджет $5-10 в день для старта
• Мониторьте ROAS (сколько вы потратили на 1 установку vs. LTV)

Пример Nathan: Кампания "weekly planner" в Apple Search Ads приносит 10-20 установок в день при 3:1 ROI. Это больше половины трафика Harmony.

Шаг 14: Кодирование (Cursor — ваше супер-оружие)

Cursor это Visual Studio Code + AI встроена. Вы можете спросить на английском, и она сгенерирует код с контекстом вашего проекта.

Как это работает:

1. Откройте Cursor
2. Слева код, справа AI чат
3. Спросите: "Создай функцию которая загружает user goals из Convex"
4. Cursor ищет в вашем коде, понимает контекст, генерирует код
5. Вы ревьюите и коммитите

Критичная деталь: Cursor может видеть весь Convex бэкенд (благодаря монорепо). Это даёт ей полный контекст.

Ваши действия:

• Скачайте Cursor с cursor.sh
• Откройте ваш проект
• Начните спрашивать на английском (просто как в ChatGPT)
• Учитесь у AI (она объясняет код)
• Используйте Cursor для 80% кодирования
• Подпишитесь на $20/месяц план (стартовый) или $200 (pro)

Claude Code vs Cursor: Claude Code лучше для старта с нуля (генерирует целиком). Cursor лучше для зрелого кодбейса (визуальный редактор, git). Лучшая модель: Opus 4.5. Nathan использует оба параллельно.

Для речевого ввода: Willow (speech-to-text) — говорите вместо печатания.

5. 5 минут работы вместо 30

Шаг 15: Социальные видео и планирование (Screen Studio + Pally)

Screen Studio — запись экрана + лицо. 15-секундное демо одной фичи в неделю > текстовые посты.

Pally (pally.co) — планирование постов на X, LinkedIn, TikTok. 5-7 постов/неделю. Правило: одна фича = одно видео = один пост везде.

Экономика и инструменты

Инструмент	Категория	Стоимость	Назначение
Expo	Frontend	Бесплатно	Кроссплатформенный мобильный фреймворк
Native Wind	Styling	Бесплатно	Tailwind для мобильных
React Native Reanimated	Анимации	Бесплатно	Производительные анимации (60 FPS)
Lottie Files	Микровзаимодействия	Бесплатно	Готовые анимации
Convex	Backend	$0-50/месяц	База данных + серверная логика
Clerk	Аутентификация	$0-25/месяц	OAuth, пароли, MFA
Resend	Email	$0-20/месяц	Транзакционные письма
OpenAI API	AI	Платно (pay-as-you-go)	Text, vision, audio генерация
Superwall	Платежи	По тарифу	In-app покупки + paywall дизайн
PostHog	Аналитика	$0-45/месяц	Детальная аналитика (месяц 2+)
Cursor	Кодирование	$20-200/месяц	AI редактор кода
Vercel + Next.js	Лендинг	$0-50/месяц	Веб-сайт + SEO
Apple Search Ads	Реклама	Бюджет объявлений	App Store реклама
Screen Studio	Видео	$20/месяц	Screen recording + редактирование
Pally	Социальные	$20/месяц	Планирование постов

Итого: $0-100/мес для старта, ~$100-200 при $3K ARR

Частые ошибки и подводные камни

1. Писать свою auth. Nathan потратил неделю на отладку. Clerk — 30 минут. «Просто используйте инструмент.»
2. Использовать Swift вместо Expo. Swift медленнее, не работает с Cursor, только iOS. Expo — кроссплатформа. Исключение: игры.
3. Переоптимизировать метрики рано. A/B тест paywall при 10 пользователях/день — нет статистики. Фокус на продукте первые месяц-два.

Быстрый чеклист: Первые 30 дней

Неделя 1-2: Разработка

• Создать Expo проект
• Установить Native Wind и Reanimated
• Создать первый экран (с AI помощью Cursor)
• Зарегистрировать аккаунты: Convex, Clerk, Resend, Superwall
• Подключить Convex бэкенд
• Добавить Google Sign In (Clerk)

Неделя 3: Интеграции

• Добавить email уведомления (Resend)
• Добавить AI функции (OpenAI API)
• Настроить Superwall (тестовый paywall)
• Создать лендинг страница (Next.js)

Неделя 4: Тестирование + запуск

• Полный тест на iOS и Android, TestFlight
• Подготовить скриншоты для App Store
• Отправить в App Store + Google Play
• Создать X/LinkedIn, запостить первые 3 build-in-public поста
• Запустить Apple Search Ads ($5-10/день)

Месяц 2+: Оптимизация

• Мониторить Paywall Rate и Conversion Rate (PostHog)
• A/B тестировать paywall при достаточном трафике
• Масштабировать Apple Search Ads если ROI > 2:1

Ключевые метрики Nathan (Harmony)

Метрика	Значение
ARR	$3,000
Paywall Rate	60%+
Инструменты протестировано	200+
Время разработки	20 часов/неделю (part-time)
Время от идеи до запуска	<1 года