Розробка навчальної платформи для B2U

Аналіз технічного завдання і структура платформи

На старті ми отримали від клієнта велике технічне завдання. У ньому було багато ідей, модулів, ролей користувачів, майбутніх функцій і сценаріїв розвитку.

Тому першим етапом стала деталізація логіки. Ми проаналізували вимоги, розклали платформу на три основні частини та підготували структуру у форматі схеми:

• сайт
• особистий кабінет
• адмінпанель

Це допомогло не загубитися в масштабі проєкту та рухатися поетапно: від базової архітектури до складних модулів, інтеграцій і внутрішніх інструментів.

Вибір технологічного стеку

Після аналізу технічного завдання ми перейшли до вибору технологічного стеку. Для B2U було важливо створити не просто сайт, а масштабовану платформу з особистим кабінетом, адмінпанеллю, відеонавчанням, оплатами, підписками, аналітикою та SEO-структурою.

Тому ми обрали стек, який дозволяє поєднати швидкий інтерфейс, стабільну серверну логіку, зручну роботу з даними та можливість подальшого розвитку платформи.

• Nuxt — використали для розробки публічного сайту та інтерфейсів. Важлива перевага Nuxt — підтримка серверного рендерингу, що допомагає краще підготувати сторінки до індексації пошуковими системами.
• Vue — основа адмін-панелі, яка дозволяє створювати швидкі та інтерактивні інтерфейси.
• NestJS — серверна частина платформи: бізнес-логіка, ролі, курси, користувачі, підписки, платежі, аналітика та взаємодія між модулями.
• Prisma — робота з базою даних на рівні моделей, зв’язків і запитів. Це спростило розробку складної логіки навколо курсів, користувачів, оплат і підписок.
• PostgreSQL — основна база даних для зберігання користувачів, курсів, покупок, прогресу навчання, оголошень, аналітики та іншої важливої інформації.
• Redis — кешування даних для прискорення роботи платформи та зменшення навантаження на сервер.
• AWS — зберігання файлів і відео, конвертація та стрімінг навчального контенту.

Такий стек дав можливість побудувати платформу, яка швидко працює, витримує складну логіку, підтримує SEO та готова до масштабування.

Сайт платформи

Публічна частина сайту презентує B2U як навчальну платформу для beauty-спеціалістів. Тут користувач може ознайомитися з платформою, переглянути каталог курсів, додати курс у список бажань, зареєструватися, купити курс або підписку.

На сайті також реалізовані окремі напрямки:

• каталог навчання
• сторінки курсів
• B2U Expert для майбутніх експертів
• B2U Connect з оголошеннями
• блог
• сторінки підписок
• реєстрація та авторизація через пошту або Google

Сайт став не просто вітриною, а точкою входу в повноцінну екосистему B2U.

Особистий кабінет користувача

Особистий кабінет — це основний робочий простір користувача після реєстрації. Тут б’юті-спеціаліст може переглядати куплені курси, працювати з матеріалами, керувати профілем, підпискою, списком бажань і власними оголошеннями.

Ключові розділи кабінету:

• мої курси
• бібліотека файлів
• список бажань
• B2U Calc
• B2U Connect
• підписки
• профіль
• мультидоступ для колег

Відеонавчання і захист контенту

Окрему увагу приділили відеокурсам. Для платформи важливо було не просто завантажити відео, а зробити стабільний і захищений перегляд навчальних матеріалів.

Ми реалізували роботу з відео через AWS: зберігання, конвертацію та стрімінг. Такий підхід допомагає захистити контент і зменшити ризик несанкціонованого копіювання відеоуроків.

Також реалізували:

• збереження переглянутих уроків
• збереження моменту, на якому користувач зупинився
• продовження перегляду з потрібного місця
• відстеження прогресу проходження курсу
• генерацію сертифіката після завершення навчання

Інтеграція WayForPay

Для продажу курсів і підписок ми інтегрували платіжну систему WayForPay. Це дозволило користувачам оплачувати навчання безпосередньо на платформі, а команді B2U — автоматично отримувати інформацію про покупки.

Після оплати курс або підписка прив’язуються до акаунта користувача, а доступ до матеріалів відкривається згідно з придбаним продуктом або тарифом. Це важлива частина платформи, тому що вона пов’язує сайт, особистий кабінет, адмінпанель і бізнес-модель B2U в одну систему.

Сертифікати після проходження курсів

Після завершення всіх уроків курсу користувач може отримати сертифікат. Ми реалізували автоматичну генерацію сертифіката в реальному часі.

Це важлива частина цінності платформи: користувач не просто дивиться відео, а проходить навчання, отримує підтвердження результату та може завантажити сертифікат на свій пристрій.

Бібліотека файлів

У платформі є бібліотека файлів. Через адмінпанель команда B2U може завантажувати PDF, інструкції, чеклисти, шаблони та інші навчальні матеріали.

Після цього файли автоматично доступні користувачам в особистому кабінеті. Це зручно для додаткових матеріалів до курсів, платних підписок і практичних документів для роботи beauty-спеціалістів.

Список бажань

На сайті користувач може додати курс або оголошення в список бажань. Після цього матеріал зберігається в особистому кабінеті.

Цей функціонал допомагає користувачам не втрачати цікаві курси або пропозиції, а платформі — краще працювати з майбутніми покупками та інтересами аудиторії.

B2U Calc (B2U калькулятор)

Один із найсильніших інструментів платформи — B2U Calc. Це калькулятор дохідності процедур, створений для beauty-спеціалістів.

Користувач може розрахувати собівартість процедури, оцінити прибутковість і краще зрозуміти, чи правильно сформована ціна послуги.

Такий інструмент робить платформу корисною не тільки для навчання, а й для щоденної роботи майстрів, салонів і спеціалістів, які хочуть краще керувати своїми доходами.

B2U Connect

B2U Connect — це дошка оголошень і можливостей для б’юті-спеціалістів. Користувачі можуть створювати запити або пропозиції, які потім відображаються на сайті.

Цей розділ допомагає знаходити колег, партнерів, асистентів, орендарів, можливості для співпраці або спільних проєктів.

В особистому кабінеті користувач може створити оголошення, а в адмінпанелі команда B2U може модерувати, редагувати та керувати публікаціями.

Підписки і мультидоступ

У платформі реалізовано розділ підписок, де користувач може керувати своїм тарифом. Для розширених тарифів передбачено доступ до додаткових інструментів і матеріалів.

Окремо реалізували мультидоступ. З топовою підпискою користувач може додавати колег і разом з ними переглядати курси. Це особливо важливо для салонів, команд і студій, де навчання проходять одразу кілька спеціалістів.

Профіль користувача

У профілі користувач може оновлювати персональні дані: ім’я, прізвище, телефон, фото та іншу базову інформацію.

Ми зробили цей розділ простим і зрозумілим, щоб користувач міг швидко керувати своїми даними без звернення до підтримки.

Адмінпанель

Адмінпанель — одна з найважливіших частин проєкту. Вона дозволяє команді B2U керувати платформою без постійного залучення розробників.

Через адмінку можна:

• керувати користувачами
• переглядати покупки
• бачити відгуки
• модерувати оголошення
• керувати курсами
• редагувати контент сторінок
• створювати статті в блог
• працювати з файлами
• переглядати аналітику
• керувати адміністраторами

Дизайн адмінпанелі ми розробляли самостійно, з акцентом на функціональність і зручність щоденного використання.

Керування курсами

У адмінпанелі можна повністю керувати курсами: створювати, редагувати, приховувати або видаляти навчальні продукти.

Команда B2U може змінювати:

• назву курсу
• опис
• тексти
• фото
• прев’ю
• відео
• матеріали
• ціну
• автора або команду курсу

Це дає платформі гнучкість: нові курси можна запускати без додаткової розробки.

Аналітика

Для команди B2U ми реалізували розділ аналітики. Він допомагає оцінювати активність користувачів і ефективність навчального контенту.

В адмінпанелі можна переглядати:

• скільки курсів купили
• скільки курсів почали дивитися
• скільки курсів завершили
• як часто користуються калькулятором
• які матеріали викликають найбільший інтерес

Це важливо для розвитку платформи: команда може бачити не тільки продажі, а й реальну взаємодію користувачів із продуктом.

Керування B2U Connect

Для B2U Connect в адмінпанелі реалізовано окремий розділ. Адміністратори можуть керувати “запитами” і “пропозиціями”, редагувати оголошення, модерувати контент і контролювати, що саме потрапляє на сайт.

Це важливо для безпеки, якості контенту та довіри всередині професійної спільноти.

Керування контентом сторінок

Окремий розділ “контент” дозволяє змінювати наповнення сторінок без розробників. Команда B2U може редагувати тексти, фото, відео та інші матеріали на сайті.

Для великої платформи це критично: контент буде постійно оновлюватися, а команда повинна мати можливість швидко змінювати інформацію без технічної залежності.

Телеграм-бот для підтримки і маркетингу

Один із найцікавіших модулів — телеграм-бот. Ми реалізували його як інструмент підтримки, комунікації та маркетингу.

У боті є FAQ, а всі повідомлення, фото і відео від користувачів потрапляють в адмінпанель. Команда B2U може відповідати користувачам прямо з адмінки.

Також реалізували функцію розсилок. Можна створювати сегменти користувачів і надсилати повідомлення не всім одразу, а тільки потрібній аудиторії. Це робить бот не просто каналом підтримки, а маркетинговим інструментом для повторних комунікацій.

Провідник файлів і AWS

Ми реалізували провідник файлів, підключений до AWS. Через адмінпанель можна керувати файлами, які зберігаються в хмарному сховищі.

Це спрощує роботу з відео, PDF, зображеннями та іншими матеріалами платформи. Команда може працювати з файлами напряму з адмінки, без окремих технічних дій.

Блог і SEO-архітектура

На платформі реалізований блог, де команда B2U може створювати статті для сайту. Для кожної статті можна налаштовувати контент і використовувати її як частину SEO-стратегії.

Ми також реалізували кастомну карту сайту, продумали SEO-структуру та технічно підготували платформу до просування.

Для навчальної платформи для beauty важливо не просто мати сторінки курсів, а будувати повноцінну систему органічного росту: курси, статті, експертний контент, сторінки напрямків і мультимовність.

Мультимовність

Платформа підтримує можливість додавання другої мовної версії. Це важливо для майбутнього масштабування, розвитку проєкту та виходу на нові аудиторії.

Мультимовність закладена не як разова правка, а як частина архітектури, щоб платформу можна було розвивати далі.

Команда проєкту

Над проєктом працювала велика команда:

• 2 фронтенд-розробники
• бекенд-розробник
• тестувальник
• проєктний менеджер
• продуктовий менеджер
• дизайнер

Дизайн сайту та особистого кабінету створювали наші партнери з Vluchno.io. Дизайн адмінпанелі ми розробляли самостійно.

Тестування і запуск

Через масштаб платформи тестування було окремим важливим етапом. Ми перевіряли сайт, особистий кабінет, адмінпанель, відео, підписки, курси, сертифікати, оголошення, бота, файли, оплату і логіку ролей.

Основна складність була в тому, що всі частини платформи пов’язані між собою. Курс створюється в адмінці, купується на сайті, оплачується через WayForPay, проходиться в кабінеті, а прогрес і дані мають коректно відображатися в аналітиці.

Ми поетапно перевіряли ці сценарії, виправляли помилки і доводили систему до стабільної роботи.

Результат для бізнесу

У результаті B2U отримали сильну, масштабовану і функціональну платформу для навчання б’юті-спеціалістів.

Це не просто сайт і не просто кабінет з курсами. Це повноцінна цифрова екосистема, яка об’єднує навчання, контент, підписки, професійну спільноту, інструменти для спеціалістів, підтримку, маркетинг, оплату курсів і внутрішнє керування платформою.

Для нас це один із найсильніших кейсів у розробці складних вебплатформ.

Висновок

Цей проєкт показує, що платформа для навчання б’юті-спеціалістів має бути не просто каталогом курсів. Щоб продукт був сильним, потрібна продумана архітектура, зручний особистий кабінет, потужна адмінпанель, якісна робота з відео, аналітика, підтримка, SEO, оплати та можливість масштабування.

У випадку B2U ми створили саме таку систему: від структури і технічної логіки до розробки, тестування, наповнення та запуску. Це навчальна платформа для beauty, яка має фундамент для розвитку, нових курсів, нових мовних версій і майбутнього масштабування.

Переглянути B2U – https://b2u.com.ua/