Платформа для мониторинга и рейтинга сигналов от криптотрейдеров

Платформа для мониторинга и рейтинга сигналов от криптотрейдеров

Задача: создать MVP платформы для отслеживания торговых крипто-сигналов трейдеров в реальном времени

LARAVEL
Использовался для реализации большей части бэкэнда
VUE
Использовался для интерактивных элементов (комментарии, работа с сигналами, чат, "метры")
MySQL
Стандартный вариант для "быстрого хранения" небольших объемов данных
REDIS
Использовался как прослойка для более быстрой работы в реалтайме с торговыми сигналами
API
Использовалось большое количество сервисов: TradingView, CryptoCompare и прочие
WebSockets
Сокеты использовались для реалтайм трансляции торговых сигналов пользователем и чата
NodeJS
Использовалось для реалтайм работы с сигналами и вэбсокетов в связке с redis
WebPack
Использовался в составе Laravel-mix для сборки
Linux
Все работало на связке nginx+php-fpm. Node работал через pm2
Git + BitBucket
Контроль версий
Ph + Illustrator
Использовались для прототипирования и работы с изображениями

Еще один хороший большой проект, в котором от меня требовалось создать полноценный MVP, который позволит потестировать работу и выдержит n-ое количество пользователей. Кроме MVP были еще дополнительные работы: админ-часть, блог, игра, квизы?

Основной процесс предполагал следующий поток:?

  1. Пользователи, имея баланс, создают торговые сигналы
  2. Торговые сигнали идентичны торговым ордерам на бирже и исполняются соответственно (изначально по котировкам криптовалютной биржи BitMEX)
  3. На основе баланса рассчитывается рейтинг
  4. ТОП-25 сигнальщиков получают выплаты
  5. Для доступа к сигналам лучших трейдеров необходимо приобрести платную подписку
  6. Сигналы обсуждаются, голосуются и отмечаются другими пользователями

Фронтэнд

Главная страница

Главная страница является одновременно и лэндингом. Поэтому все блоки сделаны анимированными и "объясняющими" суть работы сервиса. При первом заходе пользователю предлагается ознакомительное видео в левом верхнем углу. Выглядит страница так:

Главная страница сайта - первый экран

Анимированные блоки сделаны на VUE:

Анимация на главной странице

Тут же отмечу сразу чат, который доступен на всех страницах. Работает он в реалтайме с помощью socket.io и node- сервера?

Страница торговых сигналов?

По UX это то место, где пользователи проводят максимум времени. Соответственно необходимо было выполнить ее максимально собранно и лаконично.?

Цветовая схема выбиралась по опыту других подобных площадок и фокусировалось на возможности долго находиться на сайте без напряга для глаз.?

Страница сигналов поделена на 3 больших блока:?
1. Блок потока всех сигналов/блок отслеживаемых сигналов через таб?
2. Блок графика и информации по рынку?
3. Блок live-сигналов?

При этом в карточку сигнала требовалось уместить максимум информации с легким восприятием и градацией "LONG/SHORT". Центральный блок с информацией цепляет данные из TradingView и CryptoCompare через API. Центральная красно-зеленая полоска анимирована и меняется в реальном времени для отображения динамики рынка. При этом незарегистрированные посетители мотивируются на регистрацию:

Закрытые блоки для незарегистрированных посетителей

Страница рейтинга трейдеров?

Из интересных моментов: блок с трейдерами на странице может долго прогружаться и потому сделан в виде VUE-компонента с подгрузкой через axios с пагинацией:

Загрузка блоков через axios

Страница профиля трейдера?

Страница построена согласно приоритету для ЦА: сначала краткая информация для беглого взгляда, далее ачивки и потом полный стейтмент

Страница списка сигналов?

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

Страница отдельного сигнала?

Страница содержит полную информацию о сигнале: точки входа, цену, график рынка на момент входа и так далее. Для реализации построения графика пришлось делать CURL-запрос на сервере и отдавать массив во фронт. Сервис отказывался отдавать данные в браузер из-за строго CORS.?

Для каждого сигнала реализованы всевозможные голосовалки и в том числе древовидные комментарии, которые должны поддерживать быстрое и легкое добавление изображений (например, снимкой рынка). Все сделано на VUE и выглядит в процессе вот так:

Комментарии под сигналом

Личный кабинет пользователя и публикация сигнала?

Пользовательский опыт начинается для нового юзера с того, что ему предлагается оформить платную подписку в меню:

Личный кабинет "бесплатного" пользователя

В самом кабинете содержаться отдельные страницы с отслеживаемыми сигналами, подписками, подписчиками и прочим. Тут же происходит вывод средств.?

Вот так выглядит страница оформления подписки:

Страница оформления подписки

После оформления происходит переход на платежный сервис?

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

Журнал/Блог?

Пользователям доступен раздел с новостями и статьями. Много стандартной верстки и пара элементов, которые получают данные по API (CoinMarketCap)

Раздел блога

Админ-часть?

Административная часть выведена в отдельную логику. В целом, ничего интересного. Кнопки и интерактив выполнены на VUE

Фрагмент админ-части

Игра и квиз?

Дополнительно необходимо было реализовать промо-разделы: ознакомительную игру и опросник.

Начальный экран игры

Игра реализована как мини-SPA. Данные берутся через wss с BitMEX и обрабатываются через VUE. Пара вещей сохраняется в LocalStorage.

Ознакомительная игра
Мотивашка к расшариванию

Квиз реализован стандартно.

Фрагмент квиза

В админ-части можно создавать неограниченное количество квизов с разным текстом, вопросами, фоном и шаблоном-результатом. Это такое изображение, которое генерируется в результате опроса для расшаривание в соц.сети:

Картинка, которую пользователь может расшарить

Бэкэнд?

Параллельно Laravelевскому php серверу, который обслуживает стандартные потребности, работает node-сервер. Он служит для приема и трансляции сообщений чата и обработки торговых сигналов:?

  1. активные торговые сигналы загоняются в redis
  2. там они нодом обрабатываются при каждом изменении цены, которое приходит через вэбсокет с биржи (BitMEX)?
    live-сигналы транслируются через вэбсокет во фронт, часть выводится из редис и редактируется в MySQL. Для реальной биржи это не пойдет, но для MVP работает отлично

Помимо этого стандартный набор:?

  • авторизация, верификация и права пользователей
  • торговые сигналы, комментарии к ним, подписчики на них, голосование
  • контроль доступа к закрытому контенту
  • блог-система: статьи, категории
  • чат
  • админ-часть
  • мультиязычность
  • интеграция с Telegram (отправка сигналов и уведомлений)

Make an order
or Hire us