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.