American Home Blueprint — платформа онлайн-курса с оплатой, кабинетом студента и админкой

Обзор проекта

American Home Blueprint with Alla — онлайн-школа Аллы Ризаевой, агента по недвижимости Keller Williams с лицензией в Северной и Южной Каролине и опытом более 14 лет. Её курс учит русскоязычных иммигрантов покупать первый дом в США — от кредитной истории и предварительного одобрения ипотеки до инспекции и closing — на понятном русском языке.

Задача была больше, чем продающая страница. Школе нужна была собственная платформа: лендинг, который продаёт курс, оплата, аккаунты студентов с доступом, открывающимся после покупки, плеер курса, который помнит прогресс, и админка, где владелица сама управляет курсами, студентами, заказами, промокодами и аналитикой без разработчика. Платформа с первого дня многокурсовая: лендинг показывает один главный курс, а база и админка готовы к следующим.

Моя роль в проекте

Я лично вёл проект от утверждённого дизайна до запуска. Направления, которые я вёл и выполнял непосредственно:

• Дизайн всех трёх зон — лендинга, кабинета студента и админки — на одном брендовом ядре (кремовый, зелёный и золотой; Playfair Display с Manrope и Inter), а затем сборка 1:1 на Next.js
• Модель данных в Supabase: 11 таблиц для курсов, разделов, записей на курс, заказов, прогресса, промокодов, событий аналитики, отзывов, FAQ и настроек сайта под защитой row-level security и триггеров
• Аккаунты: регистрация с подтверждением e-mail одноразовым кодом, вход, сброс пароля и маршрутизация администраторов по роли
• Оплата: Stripe Checkout с выдачей доступа ровно один раз — из вебхука или со страницы успеха, что придёт первым, — плюс возвраты, промокоды и синхронизация цен со Stripe
• Транзакционные письма через Resend: подтверждение покупки, уведомление владелицы о новой продаже и письма о ручной выдаче доступа
• Аналитика и правовое: GA4, Meta Pixel и собственный трекер событий за Consent Mode v2, баннер cookies и политики, которые редактируются в админке, и аудит аккаунтов, оплаты, согласия, SEO и безопасности перед запуском

Что я сделал: лендинг

• Продающая страница на русском из 14 секций: hero с регалиями Аллы, лента доверия, боли читателя, «от тревоги — к уверенности», программа курса, блок автора с цифрами опыта, отзывы, сравнение «курс или YouTube», живой ипотечный калькулятор, карточка предложения, FAQ и финальный призыв
• Липкая панель покупки, которая следует за посетителем по странице
• Структурированные данные для курса, предложения, автора, организации и FAQ
• Изображения сжаты и кешируются под PageSpeed

Что я сделал: кабинет студента

• Дашборд, который заодно работает как витрина: купленные курсы открываются, остальные можно купить с того же экрана
• Плеер курса с доступом, привязанным к записи на курс, и прогрессом, который сохраняется по мере прохождения
• Профиль и настройки аккаунта

Что я сделал: админка

• Дашборд со сравнением периодов, распределением выручки, воронкой продаж и списком того, что требует внимания
• Курсы: порядок перетаскиванием, страницы курсов с вкладками, настройки с синхронизацией со Stripe
• Редактор курса: разделы и блоки контента — заголовки, форматированный текст, выноски, видео, файлы и кнопки — расставляются перетаскиванием, с правкой названий на месте, статусами публикации и живым превью
• Студенты: фильтры, сортировка и массовые действия; профиль каждого студента, доступы, прогресс, заказы и история событий; ручная выдача доступа, сброс пароля и прогресса
• Заказы со статистикой, фильтрами, панелью деталей и возвратами
• Аналитика в пяти разделах — обзор, трафик, конверсия, контент и когорты — с многолинейным графиком, тепловой картой по часам и топом страниц по просмотрам и уникальным посетителям
• Промокоды, отзывы и FAQ (порядок перетаскиванием с живым превью) и настройки в девяти разделах, включая правовые документы в визуальном редакторе
• Командная палитра (Ctrl/Cmd+K), хлебные крошки и уведомления из базы данных; каждое изменение в админке сразу видно на сайте

Стек и SEO

Next.js 14 (App Router) с TypeScript и Tailwind на хостинге Vercel; Supabase для базы данных, аутентификации и хранилища файлов; Stripe для оплаты; Resend с React Email для писем; TipTap для форматированного текста, dnd-kit для перетаскивания и Recharts для графиков в админке. Лендинг несёт разметку Course, Offer, Person, Organization и FAQ, отслеживание ждёт согласия посетителя, а Lighthouse на десктопе даёт 97 по производительности и 100 по SEO и best practices.