Home
Projects
Cryptotrading Platform for Signals Tracking and Monitoring Cryptogava.com

Платформа

Cryptotrading Platform for Signals Tracking and Monitoring Cryptogava.com

I designed and developed a huge MVP and a cryptostock simulator for cryptotraders and trading signals tracking

Cryptotrading Platform for Signals Tracking and Monitoring Cryptogava.com

Tools are being used in this project

Использовался для реализации большей части бэкэнда

Использовался для интерактивных элементов (комментарии, работа с сигналами, чат, "метры")

Стандартный вариант для "быстрого хранения" небольших объемов данных

Использовался как прослойка для более быстрой работы в реалтайме с торговыми сигналами

Использовалось большое количество сервисов: TradingView, CryptoCompare и прочие

Сокеты использовались для реалтайм трансляции торговых сигналов пользователем и чата

Использовалось для реалтайм работы с сигналами и вэбсокетов в связке с redis

Использовался в составе Laravel-mix для сборки

Все работало на связке nginx+php-fpm. Node работал через pm2

Контроль версий

Использовались для прототипирования и работы с изображениями

Gallery

Few words about the project

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

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

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

Фронтэнд

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

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

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

Анимированные блоки сделаны на 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-сервер. Он служит для приема и трансляции сообщений чата и обработки торговых сигналов:?

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

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

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