Cryptotrading Platform for Signals Tracking and Monitoring Cryptogava.com

Еще один хороший большой проект, в котором от меня требовалось создать полноценный MVP, который позволит потестировать работу и выдержит n-ое количество пользователей. Кроме MVP были еще дополнительные работы: админ-часть, блог, игра, квизы?
Основной процесс предполагал следующий поток:?
Главная страница
Главная страница является одновременно и лэндингом. Поэтому все блоки сделаны анимированными и "объясняющими" суть работы сервиса. При первом заходе пользователю предлагается ознакомительное видео в левом верхнем углу. Выглядит страница так:
Анимированные блоки сделаны на VUE:
Тут же отмечу сразу чат, который доступен на всех страницах. Работает он в реалтайме с помощью socket.io и node- сервера?
Страница торговых сигналов?
По UX это то место, где пользователи проводят максимум времени. Соответственно необходимо было выполнить ее максимально собранно и лаконично.?
Цветовая схема выбиралась по опыту других подобных площадок и фокусировалось на возможности долго находиться на сайте без напряга для глаз.?
Страница сигналов поделена на 3 больших блока:?
1. Блок потока всех сигналов/блок отслеживаемых сигналов через таб?
2. Блок графика и информации по рынку?
3. Блок live-сигналов?
При этом в карточку сигнала требовалось уместить максимум информации с легким восприятием и градацией "LONG/SHORT". Центральный блок с информацией цепляет данные из TradingView и CryptoCompare через API. Центральная красно-зеленая полоска анимирована и меняется в реальном времени для отображения динамики рынка. При этом незарегистрированные посетители мотивируются на регистрацию:
Страница рейтинга трейдеров?
Из интересных моментов: блок с трейдерами на странице может долго прогружаться и потому сделан в виде VUE-компонента с подгрузкой через axios с пагинацией:
Страница профиля трейдера?
Страница построена согласно приоритету для ЦА: сначала краткая информация для беглого взгляда, далее ачивки и потом полный стейтмент
Страница списка сигналов?
На странице отображаются все сигналы и подкатегория крипто-пары. Если сигнал платный, а пользователь не имеет платной подписки, то сигнал недоступен?
Страница отдельного сигнала?
Страница содержит полную информацию о сигнале: точки входа, цену, график рынка на момент входа и так далее. Для реализации построения графика пришлось делать CURL-запрос на сервере и отдавать массив во фронт. Сервис отказывался отдавать данные в браузер из-за строго CORS.?
Для каждого сигнала реализованы всевозможные голосовалки и в том числе древовидные комментарии, которые должны поддерживать быстрое и легкое добавление изображений (например, снимкой рынка). Все сделано на VUE и выглядит в процессе вот так:
Личный кабинет пользователя и публикация сигнала?
Пользовательский опыт начинается для нового юзера с того, что ему предлагается оформить платную подписку в меню:
В самом кабинете содержаться отдельные страницы с отслеживаемыми сигналами, подписками, подписчиками и прочим. Тут же происходит вывод средств.?
Вот так выглядит страница оформления подписки:
После оформления происходит переход на платежный сервис?
Процесс публикации сигнала максимально прост и завалидирован. Пользователю практически невомозжно ошибиться. Все действия сопровождаются уведомлениями.?
Журнал/Блог?
Пользователям доступен раздел с новостями и статьями. Много стандартной верстки и пара элементов, которые получают данные по API (CoinMarketCap)
Админ-часть?
Административная часть выведена в отдельную логику. В целом, ничего интересного. Кнопки и интерактив выполнены на VUE
Игра и квиз?
Дополнительно необходимо было реализовать промо-разделы: ознакомительную игру и опросник.
Игра реализована как мини-SPA. Данные берутся через wss с BitMEX и обрабатываются через VUE. Пара вещей сохраняется в LocalStorage.
Квиз реализован стандартно.
В админ-части можно создавать неограниченное количество квизов с разным текстом, вопросами, фоном и шаблоном-результатом. Это такое изображение, которое генерируется в результате опроса для расшаривание в соц.сети:
Бэкэнд?
Параллельно Laravelевскому php серверу, который обслуживает стандартные потребности, работает node-сервер. Он служит для приема и трансляции сообщений чата и обработки торговых сигналов:?
Помимо этого стандартный набор:?