Спорт, рукопашний бій
Сайт і адмін-панель для спортивного клубу SC Titan
Сайт клубу з рукопашного бою на 7 сторінок і власна адмін-панель, у якій власник сам оновлює мерч, зали й команду без розробника.
- Для кого
- Спортивний клуб «Титан», Одеса
- Формат
- Комерційний кейс
- Технології
- HTML / CSS / JavaScript, Firebase Firestore, Firebase Storage
- 7сторінок публічного сайту
- 3розділи адмін-панелі: мерч, зали, команда
- 0звернень до розробника для оновлення контенту
Задача
Одеський клуб рукопашного бою «Титан»: 2 зали, тренерський склад, понад 100 вихованців. Інформація про клуб жила лише в соцмережах. Клубу був потрібен повноцінний сайт, і головне, щоб власник міг сам додати новий зал, тренера чи товар, не звертаючись щоразу до розробника.
Рішення
Сайт-візитка на 7 сторінок і власна адмін-панель SC Titan Admin на Firebase. Дані, фото й налаштування видимості зберігаються у Firestore і Storage та одразу з’являються на сайті, окремий бекенд не потрібен. Вхід в адмінку захищений через Firebase Authentication. Код написано з допомогою AI-асистованої розробки.
Адмін-панель має 3 розділи:
- Мерч. Категорія, назва, опис, до 4 фото. Фото стискаються автоматично перед завантаженням.
- Локації. Назва й позначка залу, адреса, вік спортсменів, посилання на карту, фото.
- Команда. Тренери, судді й спонсори в одній формі: роль, досвід, досягнення, контакти, фото.
У кожному розділі є поле порядку виводу та перемикач «Показувати на сайті». Так товар, що закінчився, можна сховати одним кліком без видалення.
Публічний сайт: Головна, Про клуб, Команда, Локації, Новини, Мерч, Контакти. Новини підтягуються зі сторінки клубу у Facebook, тож пости не треба дублювати вручну.
Результат
| До | Після | |
|---|---|---|
| Джерело інформації про клуб | лише соцмережі | сайт на 7 сторінок |
| Новий зал, тренер чи товар | через розробника | сам власник в адмінці |
| Сховати позицію без видалення | неможливо | один клік |
| Оптимізація фото | вручну | автоматично при завантаженні |
| Новини на сайті | дублювати вручну | стрічка Facebook |
Процес роботи
Як проходила робота над цим проєктом: від розбору задачі до запуску й доопрацювання.
- 01
Аналіз
З’ясував із власником, що має бути на сайті і що він хоче змінювати сам: зали, тренерів, мерч. До цього вся інформація про клуб була лише в соцмережах.
- 02
Проєктування рішення
Спланував структуру сайту на 7 сторінок і модель даних адмінки: 3 розділи, порядок виводу й перемикач видимості в кожному. Обрав Firebase, щоб не тримати окремий бекенд.
- 03
Реалізація
Зробив публічний сайт і адмін-панель SC Titan Admin: вхід через Firebase Authentication, автоматичне стиснення фото, стрічка новин із Facebook.
- 04
Тестування
Перевірив повний цикл в адмінці: додати, змінити, сховати й повернути позицію, і що зміни одразу з’являються на сайті. Перевірив сайт на телефоні й комп’ютері.
- 05
Запуск
Опублікував сайт на sc-titan.com.ua і передав власнику доступ до адмін-панелі.
- 06
Оптимізація
Фото стискаються ще до завантаження, щоб сайт швидко відкривався з телефону. Новий зал, тренера чи товар власник додає сам, без розробника.
Скриншоти
Про клуб
Локації: зали клубу з картою
Команда: тренери, судді, спонсори
Мерч з фільтром за категоріями
Новини зі стрічки Facebook
Адмін-панель: мерч
Адмін-панель: локації
Адмін-панель: команда