Як pet-проєкт для спортклубу став робочим продуктом

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Усе починалося як класична історія з реального життя. У спортклубі, де я роблю розробку, облік клієнтів вівся в CRM, а ось тренувальний процес відбувався хто ліс, хто по дрова. Щоденники харчування, прогрес, підходи — усе це жило в нотатках смартфона, Excel-таблицях або взагалі в голові. А тренер роздруковував програми на звичайних аркушах паперу.

Мене попросили це цифровізувати. Але було важливе обмеження: без бюджету на VPS чи складну DevOps-інфраструктуру. Застосунок мав «літати» на найпростішому shared-хостингу.

Так з’явився DRIVE SPORT HUB (ds-hub.pp.ua) — PWA-кабінет, який сьогодні щодня допомагає тренуватися реальним людям.

Чому саме такий стек?

  • PHP 8.0+ / PDO / MySQL на звичайному хостингу.
  • Vanilla JS — жодного React, Vue чи будь-яких інших фреймворків.
  • Дві окремі бази даних: одна під застосунок, інша — під CRM клубу, бо вони фізично розташовані на різних серверах.

Відмова від JS-фреймворків була свідомим кроком. Головна аудиторія заходить у кабінет безпосередньо в залі — з мобільних телефонів та не завжди ідеального інтернету. Чистий JS разом із PWA дав змогу витиснути максимум із продуктивності: ми контролюємо кожен кілобайт і кешуємо все через Service Worker.

Архітектурний трюк: CRM без прямих JOIN-ів

Оскільки CRM та застосунок живуть на різних серверах, зробити звичайний SQL JOIN просто неможливо.

Щоб вирішити це, я створив проміжний шар — crm_bridge.php. Він зіставляє дані за номером телефону та на льоту вираховує статус користувача (Premium чи Free). Система послідовно перевіряє заборгованість, онлайн-оплати, наявність активного абонемента та відвідування за останні два тижні. Усе це загорнуто в єдину функцію-джерело правди, яку викликають усі API-ендпоінти, що виключає дублювання логіки.

Що всередині?

  • Тренування: щоденник підходів, база з 300+ вправ та генератор програм під будь-які цілі (від схуднення до гіпертрофії).
  • Харчування: розрахунок КБЖУ за формулами Katch-McArdle та Mifflin-St Jeor.
  • Прогрес: наочні графіки, система рангів і бейджі для мотивації.
  • Добавки: трекер прийому спортивного харчування з нагадуваннями.
  • Telegram-бот (@DriveSportHub_bot): дозволяє голосом або текстом закинути прийом їжі чи заміри тіла без відкриття додатку.
  • Приємні бонуси: YouTube-відео вправ без реклами через власний проксі-шар (Piped API), Push-сповіщення та повноцінна PWA-встановлюваність.

Як це розповсюджується?

Я підготував дві версії без реклами:

  1. Офіційна безкоштовна: Premium-функції вирізаються на рівні сервера.
  2. Повнофункціональна: поставляється окремим пакетом для клієнтів з інтегрованою оплатою через WayForPay.

Заходьте протестувати!

Щоб подивитися на систему в дії, не обов’язково реєструватися — я зробив гостьовий режим, де відкрита база вправ, продуктів та генератор програм.

Цікаво почути вашу думку: як вам такий підхід до розробки на shared-хостингу і чи варто вже масштабуватися до VPS?

👍ПодобаєтьсяСподобалось2
До обраногоВ обраному1
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Картинка (анімація) «як робити вправу» справа вгорі дуже схожа на анімацію з відомого застосунку Muscule&Motion.
Як створювали ці анімації?

Всі анімації — це gif або webp взяті з вільного доступу, в більшості випадків на pinterest

Підписатись на коментарі