Play That Song! — мобільний помічник для музичної настільної гри

Salerow розробила мобільний застосунок Play That Song! — музичної вікторини за справжнім ігровим столом. Застосунок поєднує фізичні QR-картки з музикою та дає змогу швидко переглянути правила.

Мета проєкту

Допомогти ведучому перейти від ігрової картки до музики для наступного раунду завдяки простому головному екрану, скануванню QR-кодів і доступним правилам.

Мобільний застосунок

Спільна кодова база React Native та Expo призначена для Android та iOS. Гравці обирають країну й англійську або німецьку мову, читають правила, отримують випадковий номер картки та відкривають сканер. Код містить окремі музичні сценарії: посилання Spotify на Android і вбудований аудіоплеєр із даними SoundCloud на iOS. Наявний API надає відповідності карток і дані треків. Внесок Salerow у цьому кейсі — мобільний застосунок.

playthatsong.de

Екрани застосунку

Справжні екрани локального Android-демо: початок гри, правила, випадкова картка та налаштування.

Головний екран — початок гри, випадкова картка або правила

Правила — інструкції для ведучого й команд

Випадкова картка — номер із локального API

Налаштування — мова, країна та музичні параметри

Екрани показують ізольоване Android-демо з новою локальною базою та вигаданими відповідностями карток. Випадковий номер надходить із локального API. Аналітику й зовнішню музичну авторизацію вимкнено. Розпізнавання фізичних карток камерою, відтворення Spotify/SoundCloud і збірку iOS у цьому демо не перевірено.

Переваги

🎵 Підтримуйте темп гри — основні дії ведучого зібрані на головному екрані.
📷 Поєднуйте картки з музикою — сканування QR відкриває музичний сценарій картки.
🎲 Урізноманітнюйте раунд — отримуйте випадковий номер картки в застосунку.
📖 Перевіряйте правила за столом — інструкції доступні всередині застосунку.
🌍 Обирайте знайому мову — доступні англійська й німецька та вибір країни.

Технології

Мобільний код використовує React Native 0.73, React 18, Expo SDK 50, TypeScript та Expo Router. Expo Camera підтримує сканування QR, Expo AV — вбудований плеєр. i18next забезпечує англійську й німецьку локалізації, MMKV зберігає налаштування. Зв’язок з API працює через HTTP-запити. API та адмінка є допоміжними системами; кейс описує розробку мобільного застосунку.

Назад до портфоліо

Мобільна розробка для фізичної музичної гри

Play That Song! поєднує настільну музичну вікторину з мобільним помічником. Salerow працювала над застосунком, який допомагає ведучому використовувати картки під час спільного раунду.

Від ігрового столу до телефона

Головний екран об’єднує початок гри, вибір випадкової картки й правила. Сканування QR поєднує фізичну картку з цифровим музичним сценарієм, а інструкції можна переглянути під час гри.

Спільний код і музичні сценарії платформ

React Native та Expo забезпечують спільні екрани й навігацію. Код розділяє перехід за посиланнями Spotify на Android і вбудований аудіоплеєр iOS. HTTP-запити отримують дані карток і треків із наявного API.

Налаштування та перевірюване демо

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