Wellcam.fit
| Галузь: | FitTech / Wellness |
|---|---|
| Локація: | Італія |
Використані послуги
Про клієнта
Платформа Wellcam.fit мала забезпечити все необхідне для повноцінної взаємодії між тренером та клієнтом: пошук профілів, каталог занять, бронювання через календар, планування регулярних тренувань, управління цифровим гаманцем та доступ до онлайн-сесій — і все це в межах єдиного адаптивного додатка, який однаково якісно працює на ПК, мобільних пристроях та планшетах.
Виклики проєкту
- Два паралельні користувацькі досвіди. Клієнти та тренери взаємодіють з однією платформою принципово по-різному. Тренеру потрібні інструменти для складання розкладу, управління заняттями та відстеження доходів. Клієнту — пошук, бронювання, цифровий гаманець та список обраного (wishlist). Обидва інтерфейси потрібно було спроєктувати, розробити та протестувати одночасно, не затримуючи процеси один одного.
- Складна логіка бронювання. Окрім простого запису на прийом, платформа мала підтримувати: групові заняття з різною періодичністю, автогенерацію регулярних сесій на 12 місяців наперед з урахуванням графіку тренера, пакетні пропозиції зі знижками, а також оплату через цифровий гаманець із заморожуванням та розморожуванням коштів після завершення тренування.
- Інтеграція через API з наявним бекендом. Бекенд був побудований на e-commerce фреймворку Bagisto (на базі Laravel), який початково не призначений для розкладу тренувань. Накладання специфічних фітнес-концепцій (слоти занять, доступність тренерів, регулярні бронювання) на e-commerce API вимагало правильної інтерпретації, створення кастомної логіки та тісної співпраці між командами фронтенду й бекенду протягом усього проєкту.
- Адаптивний дизайн для трьох типів екранів. Кожна сторінка — від панелі тренера до форми бронювання та каталогу занять — мала бездоганно функціонувати на десктопі, планшеті та смартфоні, хоча на момент старту розробки дизайн був деталізований не для всіх розділів.
Давайте зустрінемося та обговоримо ваш проєкт.
Наші рішення
WWG розділила проєкт на чотири етапи: налаштування середовища та аудит API, розробка основних модулів, тестування (QA) та реліз. Робота проходила за методологією Scrum двотижневими спринтами, що забезпечило передбачуваність розробки та повну прозорість для клієнта.
1. Архітектура платформи з двома ролямиДодаток побудовано навколо двох окремих авторизованих зон на спільній базі коду:
Акаунт тренера: створення та управління заняттями, тижневий календар занять, обробка запитів від клієнтів та відстеження доходів через інтерфейс гаманця.
Акаунт клієнта: пошук тренерів, каталог курсів із фільтрацією та списком бажань, процес бронювання та особиста історія тренувань.
Рольова маршрутизація та розмежування прав доступу суворо контролюються як на рівні інтерфейсу, так і на рівні API.
Система бронювання стала одним із найскладніших модулів проєкту. Клієнти можуть бронювати разові або регулярні групові заняття, обираючи їхню частоту та тривалість. Бекенд автоматично генерує графік тренувань на термін до 12 місяців наперед, перевіряючи вільні слоти тренера перед створенням кожного запису. Оплата реалізована за принципом заморожування коштів: гроші резервуються на гаманці під час бронювання та зараховуються тренеру тільки після фактичного проведення заняття. Поповнення балансу відбувається через Stripe, а Zustand управляє станом кошика та гаманця на фронтенді.
3. Покращення UX після внутрішнього демоПісля внутрішньої демонстрації продукту команда WWG запропонувала низку UX-покращень, які були реалізовані до фінального релізу. Серед них: відображення точних дат бронювання в календарі замість абстрактних днів тижня, виведення доступних часових слотів безпосередньо в інтерфейсі бронювання, показування балансу гаманця в кошику, додавання історії занять у розділ гаманця та розширення календаря зручною навігацією за тижнями.
Підтвердження бронювань та нагадування про заняття надсилаються через AWS Pinpoint (SMS) та електронну пошту із використанням шаблонів з бекенду. Логіка сповіщень враховує обмеження тестового середовища (sandbox) та ліміти використання, а система логування помилок дозволяє фіксувати затримки або збої доставки під час тестування.
Технологічний стек
Фронтенд-фреймворк із серверним рендерингом (SSR) для забезпечення високої швидкості роботи та SEO-оптимізації сторінок каталогу й профілів тренерів.
TypeScript
Наскрізна типізація компонентів, API-запитів та стану додатка, що суттєво знизило кількість помилок інтеграції у системі з двома ролями.
Tailwind CSS
Атомарний CSS-фреймворк для швидкої та уніфікованої розробки інтерфейсу для всіх трьох версій — десктопної, планшетної та мобільної.
Zustand
Легковажний менеджер стану із збереженням даних (persistence) для кошика, гаманця та сесій, що запобігає втраті даних під час перезавантаження сторінки.
Bagisto API
E-commerce бекенд на Laravel, адаптований під фітнес-завдання: слоти занять, розклади тренерів, регулярні бронювання та пакети послуг.
Система управління контентом для опису курсів, категорій та текстових блоків платформи, відокремлена від основної логіки бронювання.
Stripe
Платіжна система для поповнення гаманця та купівлі підписок із розмежованим циклом заморожування та списання коштів.
AWS S3 + Pinpoint
S3 — для збереження медіафайлів (фото тренерів, матеріали курсів); Pinpoint — для надсилання SMS-підтверджень та нагадувань.
Vercel
Платформа для розгортання фронтенду, що забезпечує CI/CD, крайове кешування (edge caching) та управління середовищами розробки й продакшну.
Ключові технічні виклики
Бекенд Bagisto створювався як універсальна платформа для інтернет-магазинів. Такі поняття, як вікна доступності тренера, генерація регулярних занять, перевірка перетину слотів та цикл заморожування/розморожування коштів, відсутні в стандартній кошиковій моделі. Для вирішення цього завдання знадобилася тісна співпраця між фронтенд- і бекенд-розробниками, масштабне мапування API та створення кастомної логіки з обох боків — включаючи генератор регулярних занять до 12 місяців наперед з урахуванням уже існуючих бронювань.
Замість миттєвої оплати під час бронювання Wellcam.fit використовує модель заморожування коштів: коли клієнт записується на сесію, необхідна сума резервується на його балансі і утримується до проведення заняття. Лише після цього гроші перераховуються тренеру. Це вимагало реалізації багатоетапного життєвого циклу транзакції (заморожування, утримання, розморожування, переказ), де Stripe відповідає за поповнення рахунку, а бекенд перевіряє достатність балансу перед підтвердженням будь-якого бронювання.
На момент старту розробки дизайн-макети були готові не для всіх трьох типів пристроїв. Команда працювала з наявними матеріалами, систематично фіксувала білі плями через структурований Q&A-процес із клієнтом та приймала прагматичні рішення (обираючи простіші варіанти з подальшим затвердженням замовником), щоб не відхилятися від графіка розробки та не накопичувати переробки.
Результати
- Повноцінний маркетплейс запущено за 10 тижнів Від налаштування середовища до розгортання на Vercel — створено повністю функціональну фітнес-платформу з двома типами кабінетів, управлінням тренерами, бронюванням, розрахунками через гаманець та тестуванням на всіх пристроях.
- Наскрізна логіка складних бронювань Індивідуальні сесії, групові заняття та регулярні тренування з автогенерацією на 12 місяців об'єднані в єдиний процес із прозорою оплатою через гаманець та гнучкою системою знижок на пакети послуг.
- UX-покращення впроваджено до запуску На основі внутрішніх тестів та відгуків за результатами демо було розроблено та реалізовано 9 UX-удосконалень — включаючи точні дати в календарі, виведення вільних слотів та зручну навігацію розкладом тренера.
- Повна адаптивність на всіх пристроях Завдяки комплексному тестуванню гарантовано стабільну роботу та правильне відображення платформи на десктопах, планшетах та смартфонах в усіх популярних браузерах.