Игровая платформа в стиле популярного шоу «Своя игра»

Соревнование за время и интерес пользователей в интернете становится настоящей гонкой. Короткие видео и изобилие контента породили новое явление в маркетинге — клиповое мышление. Это побуждает компании использовать нестандартные методы для привлечения внимания. Рекламные стратегии все чаще соединяются с веб-разработкой.

NooSoft принял участие в создании такого решения. Мы разработали платформу для конкурса, вдохновленного популярным шоу «Своя игра». Этот проект был направлен на привлечение аудитории и увеличение продаж через розыгрыш бонусов от известных розничных сетей техники.

Основные требования

Ресурс должен предусматривать удобную форму регистрации, чтобы пользователи могли легко и быстро присоединяться к конкурсу. Пользователь может принимать участие в игре столько раз, сколько хочет, накапливая баллы и видя свои результаты в турнирной таблице. Ранжирование игроков должно быть динамичным и регулярно обновляться, чтобы мотивировать участников проходить игру несколько раз.

Интеграция VK Видео

Ярким акцентом проекта была интеграция платформы с прямой трансляцией VK Видео. Пользователи могли в реальном времени следить за игрой популярных блогеров, представителей известных брендов и других экспертов индустрии. Это способствовало еще большему вовлечению аудитории и повышению интереса к участию в конкурсе.

Адаптация дизайна под бренды

Интересной задачей стала адаптация дизайна под различные бренды. Платформа автоматически меняет цветовую палитру и контент в зависимости от того, с какого бренда игроком был осуществлен переход.

Функционал игры

Процесс конкурса организован таким образом, чтобы каждый мог почувствовать себя участником «Своей игры». На платформе была разработана интерактивная панель с шестью категориями вопросов различной сложности, касающихся техники. Игроки могут выбрать любой уровень, и чем сложнее вопрос, тем больше баллов можно заработать.

Игровая платформа для конкурса. Детали и функции

Клиентом проекта стала крупная сеть магазинов техники. Она хотела быстро создать конкурсную площадку. Готовые дизайны нужно было срочно превратить в работающий сайт.

Команда получила четкие требования:

1. Нужно сверстать дизайн к определенной дате с точным соблюдением всех визуальных элементов и адаптацией под различные устройства.

2. Обеспечить изменение цветовой гаммы на ресурсе в зависимости от магазина, с которого совершен переход.

3. Сайт должен иметь простую форму регистрации, чтобы пользователи могли быстро присоединиться к конкурсу.

4. Реализовать функционал игры. Участники выбирают категорию вопросов про технику. Они различаются по степени сложности и приносят разное количество очков.

5. Пользователь может участвовать неограниченное количество раз, накапливая баллы с отображением в турнирной таблице.

6. Ранжирование игроков должно быть динамическим и обновляться постоянно, чтобы побудить участников проходить игру несколько раз.

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

Ярким элементом проекта стала интеграция на платформу прямой трансляции VK Видео. Люди сразу на сайте следили за игрой популярных блогеров, представителей известных брендов и других экспертов индустрии. Аудитория еще больше вовлекалась в процесс, повышая интерес к участию в конкурсе.

Программисты создали продуманный подход к разработке, чтобы обеспечить надёжную работу системы даже при высоких нагрузках.

Мы оптимизировали код, использовали эффективные алгоритмы распределения запросов. Разработчики масштабировали серверные мощности для поддержания быстрого отклика и бесперебойного функционирования ресурса, даже при одновременном доступе большого числа пользователей.

Веб-разработка и технологические решения для конкурсов

Процесс реализации платформы для конкурса состоял из создания серверной и клиентской частей. Они вдвоем отвечали за безупречную работу игрового процесса и интеграцию необходимых функций.

Backend-разработка

Для серверной части проекта был выбран стек технологий:

• Фреймворк: NestJS
  Идеально подошел для сложной архитектуры проекта и организации работы серверных процессов.

• Язык программирования: TypeScript
  Добавил строгую типизацию и удобство в написании кода, снизил вероятность ошибок. Стал отличным помощником в завершении проекта в срок.

• База данных: PostgreSQL
  Реляционная БД предоставила устойчивое хранение и обработку больших объемов данных, включая пул вопросов и ответов, количество очков пользователей.

• ORM: Prisma
  Использовали для миграций запросов к базе. Упростила работу с данными и предложила эффективные инструменты.

• Документация: Swagger
  Генерация и поддержание актуальной документации по API позволили команде разработчиков и клиенту легко ориентироваться в функциональности и взаимодействии с сервером.

• DevOps: Docker + Nginx
  Для контейнеризации приложения и управления его развёртыванием применили Docker. В качестве веб-сервера был выбран Nginx, гарантирующий высокую производительность и безопасность.

Frontend-разработка

Клиентская часть разработана с акцентом на быструю загрузку и комфортное взаимодействие с интерфейсом.

• Язык программирования: TypeScript
  Был выбран и для фронтенд-разработки, что унифицировало подход к написанию кода на обеих частях проекта.

• Технологии для стилизации: CSS
  Основные стили были написаны на чистом CSS, это придало гибкости в настройке и адаптации под различные устройства.

• Фреймворк: React 18
  Современный фреймворк для разработки пользовательских интерфейсов с высокой степенью интерактивности.

• Библиотеки, используемые в связке с React:

  • Redux, Redux-Toolkit - управление состоянием и хранение данных о пользователях, баллах и рейтингах. Отвечали за стабильную и предсказуемую работу платформы.

  • Styled-components - написание стилей непосредственно в компонентах (метод CSS in JS) для модульных и легко поддерживаемых элементов.

  • Axios - выполнение HTTP-запросов к серверу, обработка данных и удобное взаимодействие с API.

  • Swiper - библиотека упрощения создания и кастомизации слайдеров.

На основе такого стека команда создала ресурс, который полностью соответствовал требованиям клиента и был максимально оптимизирован.

Особенности адаптации

Интересной задачей проекта стала автоматическая адаптация под различные бренды. Пользователи должны были сразу видеть цветовую гамму и информацию, связанную с компанией, от которой они пришли.

Чтобы платформа могла автоматически менять дизайн, был внедрен механизм, определяющий источник перехода. Он передает параметр mode в URL, расположенном на страницах акций крупных онлайн-магазинов техники. Например, ?mode=brand1 или ?mode=brand2.

В зависимости от полученного параметра на сервере происходила загрузка соответствующей схемы. Для этого использовались CSS-файлы, динамически применяемые к элементам страницы.

Помимо окраски, содержимое также адаптировалось под конкретный магазин.

Разработчики смогли добиться высокой скорости и плавности работы благодаря React и Redux. Они обеспечили мгновенный отклик интерфейса на действия пользователей. Поэтому игроки не могли оторваться от вопросов и набивали все больше и больше очков.

За правильные ответы участники накапливали очки, а результаты суммировались. Каждый игрок мог отслеживать своё положение в турнирной таблице и стремиться к вершине.

Разработчики смогли добиться высокой скорости и плавности работы благодаря React и Redux. Они обеспечили мгновенный отклик интерфейса на действия пользователей. Поэтому игроки не могли оторваться от вопросов и набивали все больше и больше очков.

Поскольку участники могли играть неограниченное количество раз, постоянно нагружая сервер, мы уделили особое внимание стабильности и производительности backend-части.

Команда использовала фреймворк Nest JS и базу данных Postgres, управляемую с помощью ORM Prisma. Инструменты обрабатывали множество запросов одновременно, не прерывая работу ресурса. Всё было интегрировано в контейнеры Docker и развёрнуто на серверах под управлением Nginx.

В результате мы создали надёжную и масштабируемую инфраструктуру, которая способна выдерживать пиковые нагрузки во время конкурса.