1. Бросить курить
2. Похудеть
3. Иметь красивое рельефное тело
4. Чувствовать себя здоровым и сильным
5. Чувствовать себя хорошо, не тревожиться постоянно, быть спокойным и стрессоустойчивым
6. Заботиться о себе, каждый день просыпаться с приятным чувством, что все хорошо независимо от внешних факторов и радоваться жизни
7. Хорошо говорить по английский и перестать стесняться работы не на русском языке
8. Хочу открыто знакомиться с новыми людьми в новых местах без страха и стеснения
9. Мне очень страшно. Мне чего-то хочется, но я сам же пресекаю многие варианты постоянно: от заниматься новой сферой деятельности, которая не принесет доход первый год или более до пойти в клуб, где будут определенные люди и я там буду странный на фоне всех
10. Принять себя. Или не знаю, чтобы себя всегда хорошо чувствовать себя с собой. Мне не хватает уверенности в себе и часто завишу от внешнего. Какой-то внутренний стержень нужен и его нет.
11. Хочется славы, популярности и известности. Как? Есть мысли, но о прошлом. Что вот в прошлом надо было то самое делать (ютуб, блог, игры), но я тогда поленился, забил, а чувствовал, что это мое, но мне многие говорили, что это какая-то фигня, да и я сам пошел искать работу в другой сфере (программирование), которая изначально мне не нравилась особо, а теперь не знаю как дальше быть.
12. А сейчас я уже не получу известность и популярность, потому что таких "блогеров" очень много и сейчас каждый второй снимает какие-то видео. Что я могу сделать лучше для себя и как я могу позитивно выделиться? Не хочу заниматься какой-то дичью, как многие сейчас получают внимание.
13. Выйти в стабильный заработок денег при этом без выгорания, чтобы оставались силы на хобби и можно было в будущем перейти на заработок с него.
14. Найти работу
15. Понять чего хочу, потому что вроде бы есть какие-то желания, но все кажется мелочным, а хочется какой-то путь иметь на 1-3-5-10 лет вперед
16. С другой стороны я не хочу быть зависим от внимания. Я вообще не хочу гнаться за успешным успехом и быть в состоянии "гонки", но и не хочу просто висеть где-то в пространстве. По большей части я просто хочу перестать сожалеть о прошлом и при этом наслаждаться тем, что есть, без постоянного негатива в свою сторону от себя (обвинения, сожаления, угрызения)
17. Пожить в США
18. Пожить на Бали
19. Пожить во Вьетнаме
20. Найти девушку — интересного стабильного человека, с которым у меня совпадут ценности и интересы. Но я настолько уже устал искать, что все больше начинаю бояться отношений. Порой мне кажется, они мне не нужны, так как я все испорчу, так как не хочется что либо для них делать и мысли об обязательствах в отношениях как раньше меня съедают.
21. Не зависеть от внимания женского пола. Вести себя непринужденно в любой компании. Перестать бояться и ставиться под человека, который как-то негативно или холодно ко мне относится, а мне хочется ему понравится. Перестать хотеть всем нравиться
22. Вести свою компанию с разработкой чего-то, что мне нравится под моим началом и мы были успешны на весь мир))
23. Завести друзей, которые будут готовы со мной идти куда угодно. А я очень люблю, когда я с кем-то путешествую или мы вместе вдвоем что-то делаем, даже просто играем в игры. Но на постоянной основе хочется.
24. Хочу хотеть готовить и увлекаться здоровой пищей.
25. Снять квартиру, но это возможно, когда у меня уже будет доход.
26. Хочу супер мощный комп, чтобы играть в любые игры и не париться больше о ценах или качестве графики.
27. Хочу классный удобный игровой сетап для игр и видеозаписи.
28. Хочу рассказывать про игры и вести блог на тему философии игр вместе с психологией, но не знаю "как" и вообще кажется это неактуально. А еще лень делать много.
29. Хочу найти способы не лениться. Я постоянно ставлю себе какие-то объемные задачи и у меня просто нет сил их выполнить никогда. Насколько бы амбициозными и крутыми они не были.
30. Хочу здоровые зубы.
31. Хочу хорошее зрение.
32. Хочу секса. Так, кхм, это все хотят так или иначе, я просто выгораю от того, как "другие" намного легче находят себе партнера в принципе, мне тоже кажется, что я легко найду, я же высокий и классный, но 100500 людей проходит, а я так ничего и не нахожу.
33. Хочу не зависеть от секса и мыслей о других людях, которые меня отвлекают от того, что мне духовно было бы намного ближе.
34. Хочу, чтобы было комфортно, но при этом я куда-то шел. Я не знаю куда идти. Просто плутаю туда сюда или по кругу и вот мне уже 26, а я еще не...
35. Перестать зависеть от всяких "как надо" и вообще полагаться на себя, а не постоянно смотреть на окружающих и зависеть от их советов. Вообще научиться быть полностью самостоятельным.
36. Управлять своим внимание и сознание, при этом не испытывая груза потери большого количества сил и ответственности
37. Принимать окончательные решения без сожаления упущенных возможностей
38. Отпустить прошлые "неверные" решения
39. Купить расклад на будущую жизнь у предсказательницы Вовы
40. Вообще я просто устал от постоянных сожалений и требований от себя. Но при этом я ничего не делаю и ленюсь. И это замкнутый цикл.
41. А еще я просто хочу радоваться тому, на каком этапе сейчас нахожусь. Постоянно кажется, что лучше будет там впереди (или сзади), но я же знаю, что будучи там, я снова буду так думать. Вот я жил в Тбилиси в крутой квартире, у меня было многое, но я так страдал. А сейчас мне даже лучше по ощущениям (немного), а у меня ничего того, что было там, нет.

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

NFT аукцион

Торговля игроками казино. Кто холдит NFT, тот получает процент с выручки с этого игрока, к которому привязана NFT. Получается отдельно и играть и получать прибыль с других игроков.

Внутренний аукцион

Игрок выполняет какой-то пул задач, за это получает награду, которую может только продать на аукционе.

Ежедневные задачи

Да и в принципе какие-то задачи, которые ему надо выполнять регулярно, чтобы получить доп бонусы. Тут тоже непросто будет продумать выгодную для казино логику, так чтобы и пользователю было зачем стремиться, но чтобы мы не тратили много на бонусы. Бонусы могут быть не только деньгами, а задачи не только ставками. Например, поделиться казино и рассказать друзьям с пруфом.

Достижения

Все этим сказано в принципе. Есть какие-то глобальные достижения на весь проект, которые делаются длительное время. Если все собрать, можно получить какой-то приз. А вообще есть много людей, которые в принципе любят собирать достижения, чтобы их собрать. Можно по-разному их монетизировать. На основе их можно сделать какой-то внутренний прогресс с очками опыта (уже совсем в игровом стиле получается), который повышает игрока по уровню и тут мы переходим к

Уровни

Различные уровни "мастерства" с получением постоянных бонусов за их достижение: снижение вейджера бонусных денег, процент бонуса выигрыша, бонус депозита и тд.

Дизайн

Учитывая, что как много (99%) казино делают всратый старый дизайн, то новый красивый, читаемый можно считать полноценной фичей (я регулярно встречаю много отзывов людей, которые играют в жеттон только потому что мы сделали его реально приятным, потому что я пушил делать все качественно и в одном стиле).

Регистрация

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

Соревновательный момент

Игроки любят соревноваться. В принципе люди любят. Кто-то любит просто крутить и держаться на адреналине выигрыша в последний момент (мне такое вообще не заходит), а кто-то любит быть лучше других (мне такое заходит). Базовая вещь - турниры. Но там речь про кол-во ставок по сути. Идея в том, чтобы сделать какое-то соревнование на игровом уровне. Например, покер. Или дурак, или уно. То есть игровой мультиплеер. Можно вообще использовать не казиношные игры для того, чтобы люди делали ставки на свою или чужую победу.

Ставки на спорт, но не как обычно

Помним привычные ставки на забеги собак? А что если делать ставки на забеги игроков? Два игрока соревуются между собой в игре и это отдельно транслируется. Можно делать ставки с коэфициентом, кто победит. А что если сделать трансляцию по турниру? Люди играют в турнир как обычно, но еще есть "другие", кто голосует за того или иного на первых строчках турнира. Люди там часто меняются местами и не всегда угадаешь, кто заберет "айфон". Ну правда тут "киты" все могут сломать. Это целая система, которую нужно продумывать.

Live чат

Люди любят общаться, чат в любом случае нужен будет где-то однажды. Возможно просто через интеграцию с телегой. Интересно было бы сделать игру, где чат это наш чат, а не тот, что предоставляет игра.

Score и соревнование среди друзей

Если говорить про чаты и телегу в частности, то интересно было бы сделать возможность делиться одной конкретной игрой в каком-то чате, где люди могут прямо там в нее поиграть конкретно в эту игру и в чате группы будет высвечиваться high score каждого игрока. Про это отдельно проще показать.

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

• Пользователь
• Модератор
• Админ

Пользователь

• Имеет кошелек
• Ввод/вывод кошелька
• Создание и ответ на сделки P2P
• Создание и ответ на сделки C2C
• Смотреть свою статистику (p2p, c2c, ввод/вывод)
• Смотреть статистику человека, который открыл P2P сделку
• Возможность отправить жалобу в P2P
• Возможность поставить лайк человеку после сделки

Модератор

• Не имеет кошелек
• Можем просматривать список всех текущих сделок
• Может редактировать сделки (блокировать крипту, видеть статус подтверждения с двух сторон, отправлять и редактировать жалобу на пользователя, менять статус сделки/закрывать сделку) + поиск, фильтры
• Просмотр жалоб на пользователя и сделок
• Статистика каждого человека + фильтры по дате
• Может блокировать пользователей
• Видит список всех пользователей + поиск
• Личная статистика завершенных сделок
• Чат с клиентом в ЛС от имени сообщества, который подал жалобу и на которого подали

Админ

• Возможности модератора, кроме личной статистики
• Глобальная статистика
• Видит список всех модераторов + поиск
• Может добавлять и удалять модераторов
• Видит список всех админов + поиск
• Может добавлять и удалять админов

Статистика

Локальная статистика пользователя

• Количество закрытых P2P сделок
• Рейтинг P2P %
• Количество закрытых C2C сделок
• История всех P2P и C2C сделок
• В истории сколько купил/продал какой валюты

Глобальная статистика приложения

• Биржевой кошелек и количество монет на нем
• Количество закрытых P2P сделок
• Рейтинг P2P %
• Количество закрытых C2C сделок
• История всех P2P и C2C сделок
• В истории какие именно сделки были закрыты, отклонены, кто в них участвовал
• Прибыль с комиссии за день, неделю, месяц
• Сколько крипты получено/выведено пользователями
• Статистика каждого пользователя
• Статистика модераторов по завершенным сделкам, кол-ву сделок всех

Интерфейс

Общее

• Две кнопки: Управление и Статистика для ролей (модератор/админ и амин)
• Кнопка Профиль/ЛК для юзера и модератора
• В профиле общий блок краткой личной статистики, ниже кнопки для p2p, c2c, вывода/ввода для просмотра всех сделок
• Кнопка чата (ссылка на чат с сообществом)

Управление

• В управлении табы навигации для P2P и C2C списков для Сделок
• Все, С жалобами, Заблокированные пользователи списком для Пользователи
• Список всех модераторов (добавление, удаление)
• Список всех админов (добавление, удаление)

Статистика

• В статистике как в ЛК, только больше схожих вариантов (в плане дизайна)

Уведомления (в приложении)

• Уведомление, когда низкий баланс на биржевом кошельке.

Реферальная программа

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

Реферальное вознаграждение 10% от комиссии лично приглашённых.

Сценарии

Возможности

• после отправления жалобы, вся сделка блокируется, пока решение не вынесет модератор
• заблокировать можно и вручную, либо автоматически, когда висит 10 жалоб

Совершение P2P сделки (не перевел на карту фиаты)

• что-то

Совершение P2P сделки (не выпустил крипту после перевода фиатов)

• что-то

Для общения с блокчейном предоставляется "ядро", которое имеет документацию и функционал:

1. Создание кошелька для пользователя (кастодиальный) - выдача номера кошелька (hash) пользователю (user_id)
2. Пополнение (прием валюты) - БД получает инфу от "ядра", кто (user_id) пополнил биржу какой валютой (currency)
3. Выпуск криптовалюты (вывод крипты из приложения на внешний некастодиальный кошелек)

Что нужно реализовать

• Биржа
• P2P сделки
• Кошелек пользователя
• Получение крипты
• Отправка крипты

Биржа

Типичная биржа, как везде, работающая по принципу peer-to-peer (p2p). Единственное отличие в том, что все сделки обрабатываются автоматически, без взаимодействия двух сторон в реальном времени.

Имеется общий список заявок от разных людей на покупку/продажу чего-то за сколько-то (один токен на другой токен).

Пример:

• Куплю 100А за 50Б (цена за единицу)
• Куплю 340С за 32А

Так условно выглядит текущий стакан и может "висеть" в таком состоянии долгое время, прежде, чем появятся пересечения, которые их закроют.

Появляется:

• Продам 250А за 50Б

По логике, первый и третий заявки закрываются автоматически друг другом. Тот и тот имеют одинаковую цену и типы токенов. В итоге первый автоматически покупает 100А у третьего за 50Б. При этом третий остается, но с 150А за 50Б, тк у него купили на все. Точно так же работает и когда покупают больше, чем продают.

Чтобы купить/продать на бирже, есть два способа:

• Лимитный ордер — указываешь, что продаешь/покупаешь и за какую цену (потом ждешь, когда совпадет)
• Рыночный ордере — указываешь, что продаешь/покупаешь без цены (для срочного, тк работает немного иначе, но сделка закрывается сразу: цена выставляется автоматически по минимальной на покупку/продажу в стакане)

Пример рыночного:

Надо купить 10А

• Есть 5А за 100Б
• 6А за 90Б
• 4 за 80
• 3 за 70

В итоге будут куплены 3*70 + 4*80 + 3*90
В стакане останутся 3А за 90 и 5А за 100.

С продажей работает точно так же.

P2P Сделки

Похожи на принцип биржи, но есть отличия:

• согласование двух сторон о сделке
• обмен крипты и реальных денег (в нашем случае)
• только лимитный ордер

Такой же список заявок (стакан), только теперь мы например продаем рубли и покупаем крипту. Мы выбираем заявку и тому человеку отправляется уведомление о сделке. Он ее принимает и его крипта замораживается беком. Нам приходят его реквизиты для отправки денег. Мы отправляем и жмем подтверждение. Тот человек получает и жмет выпуск валюты. Мы получаем крипту на свой кошелек (необязательно внутренний, то есть может быть некастодиальный).

Если где-то нарушен этап с подтверждением и одна из сторон хочет удержать деньги, обычно крипту, то тогда обращение в ТП. Замороженную крипту потом все равно вышлют тому, кто покупал.

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

Перевод / Получение

Перевод n токенов на указанный номер кошелька

либо

Видишь номер своего кошелька, чтобы поделиться им для перевода

Все?)

• Что я хотел сказать:

Input однако не лучшее место для полноценного рассуждения.

Имхо, многое зависит от существующих ролей на проекте и размера команды. Допустим, с PM и мб CTO уже все обсуждено, а размер команды маленький.

Я в основном был в роли "играющего тренера", когда контролировал, как саму команду, так и сам активно коммитил.

С точки зрения руководства, проводил такие процессы:
- ответственность за то, что происходит с командой
- проводил дейлики и иногда заменял ПМ
- делал ретроспективы в конце спринта, чтобы а) всей команде было понятно, что было сделано (особенно актуально, когда человек работал совсем в другом месте проекта и не знает какие фичи появились).
- писал суммари-логи с митов для понимания, где какой прогресс
- вводил, назовем их, "теги" и правила для составления и работы с задачами в жире
- решал конфликты между людьми, зачастую это было между фронтами и беками
- отдельно регулярно созванивался с членами команды либо в качестве помощи, либо в качестве поддержания рабочей дружественный атмосферы
- принимал активное участие вообще во всех созвонах, где речь была о проекте и команде
- собеседовал новых фронтов под нужды проекта
- проводил онбординг

С точки зрения кода:
- ответственность за то, что происходит с проектом
- писал статьи, описывающую архитектуру и дизайн систему проекта
- вел документацию важных функций и компонентов
- контроль комитов, веток, черри-пики, мержи, вот это все
- проверка всех пул-реквестов
- тестирование стабильности и скорости рендера

Что я ответил:

Input однако не лучшее место для полноценного рассуждения. Имхо, многое зависит от существующих ролей на проекте и размера команды. Допустим, с PM и мб CTO уже все обсуждено, а размер команды маленький. Я в основном был в роли "играющего тренера", поэтому: a) команда, б) проект. а) команда: ответственность за то, что происходит с командой; дейлики, ретроспективы, суммари-логи; созвоны отдельно с каждым коллегой; решение конфликтов, помощь. б) проект: ответственность за то, что происходит с код базой, стабильностью; описание архитектуры, readme/posts; проверка PR; правила проверки/пуши/ведения коммитов/веток;

Что вы будете делать, когда наступит крайний срок (работа не сделана, а сроки сжаты)

Что я хотел сказать:

Снова все зависит от разных условий xD. Допустим, что мы четко понимаем все задачи, которые блокируют релиз, их приоритеты и ресурсы команды.

Есть такие варианты:

• Веду переговоры с PM/CTO, в худшем случае с заказчиком, на тему того, чтобы сдвинуть несколько задач на следующий спринт или даже распределить на несколько
• Сбор ответственных разработчиков за конкретные задачи (либо вся команда) для точного распределения обязанностей ежечасно.
• Зачем? Если времени ну совсем мало, а это все должно было быть сделано вчера, то у нас есть выход либо сделать максимум, либо договориться. Вот когда договориться не вышло, или вышло "наполовину", нужно собрать все силы и грамотно направить их на доработку самых ключевых моментов
• Могут быть "костыльные" решения по типу заглушек и не самой лучшей реализации в плане архитектуры, зато выигрыш по времени в данный момент, но это как говорится unsafe operation.
• Переработка с договорной оплатой в эти часы для членов команды. Обсуждается все с CTO, когда времени совсем мало.

Что я ответил:

Переговоры с PM/CTO для переноса задач на следующие спринты; точечное планирование для каждого для делегирования, чтобы выжать максимум производительности; возможно переработка; не самые качественные решения в пользу времени — в общем это такой "военный" час для всей команды, самая боевая готовность. Если все устали и нет сил, то говорит о том, что кранч уже был ранее и нужно либо искать еще людей, либо планировать меньше задач спринт.

Заняв руководящую должность, запишите свой план действий

Что я хотел сказать и ответил:

В первую очередь, конечно знакомство с командой и презентация себя. На данном этапе предполагается, что условия работы уже обсуждены с вышестоящим лицом и есть права на действия. Ознакомление с текущими процессами и изучение документацией. Изучение ТЗ, апи проекта, текущие/будущие задачи. В общем надо сначала освоиться, посмотреть как идут процессы и потом начинать принимать ответственность и решения.

Мне нужно разработать сайт типа aviasales.ru, чтобы на сайте можно было покупать билеты на транспорт по всему миру. Ссылка на дизайн - Blablacar. Мне нужна только главная страница с покупкой билетов. Оплата билетов криптовалютой. Пропишите техническое задание для разработчика.

Что я хотел сказать:

Это в принципе уже можно назвать тех заданием) Более развернуто я это вижу тех документом, подробно описывающим все механики приложение, либо задачами в жире, где я уже проанализировал систему, спроектировал примерную архитектуру и дроблю их на атомарные кусочки, описывая принцип действия и соблюдаемые условия.

Поэтому я просто тут пройдусь поверхностно по общей структуре и технологиям (за базу берем React), опуская "лишний" дизайн с фокусом только на функционал.

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

• Landing, верстка, респонсив

2) Форма: селекторы, выбор даты, тип транспорта, число пассажиров, кнопка поиска

• При надобности точечного контроля за формой и валидации, которая тут не очень нужна, но можно использовать react-hook-form и yup
• Можно использовать Antd / MaterialUI для уменьшения времени разработки
• Иначе делать свои селекты с drop-menu результатами поиска по городам
• Делать запрос на бек в момент окончания ввода поиска (debounce), сохранять в глобальный стор не нужно
• Либо antd, либо input type="date" для даты
• input type="number", целочисленный, min={1}
• Submit button, которая делает POST запрос данных формы
• Получаемый токен запроса можно положить либо в стор, либо в sessionStorage
• Так же, если есть потребность шарить ссылки результатов поиска, можно на "новой" странице прокидывать токен в uri options

3) Результаты

• Берем токен из стора и делаем GET запрос для получения списка билетов
• Есть два главных компонента: список, фильтры
• Фильтры отдельно получаем тоже GET запросом один раз и тоже нет смысла использовать лишний раз стор. Фильтры могут быть общим объектом стейта, могут быть сделана через react-hook-form, особо разницы нет. При изменении, новый GET запрос на получение списка билетов с новыми фильтрами — либо снова отправить токен, либо данные предыдущей страницы, если сохранили их в стор
• Список подписывается либо на стор, либо на sessionStorage, куда мы можем сложить json всех билетов (если их мало, мало занимают места). При большем количестве либо пагинация, либо виртуализация (тогда тут session может не подойти), в зависимости от требования заказчика.

4) Покупка

• Если есть какое-то подтверждение данных пользователя, то дополнительно с покупкой нужен токен авторизации, его почта/телефон
• Далее выполняем транзакцию с помощью Ethers / web3 (rpc / metamask)

API

Что ответил:

this

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

Я долго делал обертку через
Ticker.shared.tick(() => {})
и придумывал как сделать это с
function useState<T>(value: T): [T, (value: T) => void]
потому что нет реактивного обновление стейта у детей

А потом случайно наткнулся на React Pixi.
https://pixijs.io/pixi-react/stage/

Ох, сколько идей, это можно теперь делать типа игру на привычном компонентном подходе реактивном, но рисовать графику с пикси.

OLD

Есть вот такой пример (1), где мы создаем типа хук, но не хук, функцию, которая возвращает игрока и мы можем у его instance менять скорость, например каждую секунду увеличивать.

// My old variant with vanilla Pixi. js
export function PlayerShort0) {
  const sprite = Sprite.from("player.png");
  
  // init speed
  const [speed, setSpeed] = useState(0);
  
  const newProps = { setSpeed, speed };
  return Object. assign (sprite, newProps);
}

export function SceneShort() {
  const container = new Container();
  
  const player = PlayerShort();
  
  // update speed
  Ticker. shared. tick( (dt) = {
    player.setSpeed (Math. floor(dt));
  };
  
  // result speed
  console.log(player.speed);
  
  container. addChild (player);
}

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

Так же както придумать, как обновлять стейт

NEW

(2)-ой вариант с ReactPixi, где мы контролируем скорость игрока верхнеуровнего, скорее всего делать надо както подругому, чтобы методы были более приватные и логическо относились друг к другу, но

// New variant with ReactPixi, React, Pixi. js
export function ReactScene() {
  // init speed
  const [playerSpeed, setPlayerSpeed] = React.useState(0)
  
  const i = ReactPixi.useIteration(1)
  // update speed
  setPlayerSpeed(i)  

  return (
    ‹Container>
      ‹Player speed={speed}>
    </Container>
  )
}

export function ReactPLayer({ speed }) {
  // result sped
  console.log(speed);
  return ‹Sprite image="player.png" />;
}

Зато теперь мы просто в дереве как в React используем Player и все, само снова нормально обновляется

Introduction

Here, I put more emphasis on the design of the client (frontend).

Content

• Component
• Structure
• Details
• Data flow
• API
• Code

Component

I skip the rest of app to talk only about the "stream" part. At a glance, I can split the application into several subsystems when we are already at someone's stream. Of course the entire app is more complex with more details, but I will speak further about only one component, so I think I can not mention them.

The root has 5 systems:

• Video stream — obviously, it is about all video and sound streams that user watches
• Social actions — any user action with streamer for expression his emotions
• Account interactions — it can be subscribe or report or some other account/personal stuff
• Stream information — literally the data of amount of subscribers or viewers, or how much time passed from start, or anything else
• Widgets — it can be some unusual stuff supporting by app natively, for example streamer's advertising or special donates alerts, or links, etc.

I personally was interested how to realize comments section in "social actions". So I choose to explain how we can make the component/system of Chat/Comments/Toasts.

Structure

Lets imagine that we haven't realized comments section yet and we have some freedom to think how it can be looks.

I love to make minimalistic things, build something from scratch with minimum details to create simple easy understandable mechanic/concept/design which we can scale and develop further.

Also, the user needs the greatest immersion in what he is watching without losing interactivity. I mean we need to figure out how to show actual live comments, while taking care of the free space on the screen.

We have there some options:

1. Show the comment button at the corner somewhere. When the user clicks on this button he sees the last comments and can chats too. But he doesn't see any people opinions when chat is closed.
2. Show all messages over the video at some side. But its not comfortable to see this video because of mess on screen.
3. And the last point is creating separate subsystems where we show some slice of limited comments by length or by time over the video at the corner somewhere and also when user clicks or scrolls on it he sees the fullscreen chat with all messages.

I pick the last one, because it more flexible to setting up and it improves user's experience.

How it works:

• Comments - system that manage the messages/comments by users at stream. Exists separately from view (data flow will be further).
• Chat - sidebar or fullscreen view with all messages and also provides interface to type new own message. It can also have flexible settings for different roles at stream (such as moderators, admins, viewers, etc.)
• Toasts - simple short list of few the last comments that disappear after some time

Details

Okay, we made a choice. So, the task sounds simple — just draw the list of comments and provide interactivity to create new messages. But there are some pitfalls.

For all developers are obviously that RAM is not endlessly. Furthermore, often user has low-end smartphone with small ram. Then we need to figure out how to store not so many comments at a time.

We use socket connection with comments room, where we are getting new comments and storing somewhere at project outside the view. By long time, this list will be large and app will crash. Also, we need to toggle view of full list and short toasts list, so what we have there and what we can do:

• get 10 comments (for example) in stream
• post to server the oldest comment's id to get further new comments slice
• show every new comment as a toast with expiring time
• when user wants to open chat, he will see the last 10 comments quickly right now and app starts loading new older comments
• when he scrolls the chat, we load new and new, but it can be also large by time, so we can make this list virtualized.

With this conditions we don't loose the RAM and can make efficient interface.

Also we have some options how to realize presentation layer:

№1 - Toasts and Chat

Separate subsystems, where we use common comments list from store, but they are works independent of each other.

I render it here side by side, but in real app clicking/scrolling the left list should toggle visibility of right list.

So, left list is the toasts, simple "stupid" presenter that renders the newest comment and hide it when its time expires.

Right list is the "chat" without the input in my example.

The main idea here is to separate comments by 2 independent subsystems, where we use any toast service to show shortly the last messages and high-load chat view.

But it has some issues with it, because we working with the same data but in different ways. So we need to keep different information in one domain for different views. For example, we need "expireAt" for toast and it is useless for chat. Also count of comment's likes is useless for toast. It can be ok if we use additional tools to map/decrease comments sizes, or we have complex functionality for chat.

№2 - Only Chat

For shorty list set small height of chat list without input and for chat just increase the height, add background color and show text input.

It is really simpler realization and if we no need complex chat functionality, just get and send messages so it would be the greatest choice to develop.

It will be looks almost the same if make blur transparent borders on shorty list.

Data flow

Legend:

• blue arrow - http/socket messages
• black arrow - local messages

At the first view looks like we no need a store and work only with service (local state). But it can be helpful in further development while working with chat different view and actions.

API

Here we are have 4 requests:

1. Connect to socket room
   request { roomId }
2. Get older messages by the oldest store comment's id
   request: { amount, lastId, roomId }

Messages from backend to client via socket

1. Get new message from room
   response { id, author, timestamp, message }

Messages from client to backend via socket

1. Send new message to room
   request { message }

Code

I introduce the first variant (toast and chat) in code to have better explanation what I talked above.

https://codesandbox.io/s/toast-chat-implmentaion-drxwz0?file=/src/toaster.jsx

There are Toaster class that provides interface to working with disappearing toasts, CommentsConnection to mock asynchronously getting comments data, Chat for taking last 10 comments and main wrapper for Comments, ToasterView, Toast which are just view presenters.

Summary of comments

Here I described some variants and opportunities how we can make a task with this entire section. It was superficial enough to highlight key points in the design process. Of course at real task needs more conversations with team (back-end at least) to configure more flexible and detailed interface with project components structure, bottleneck moments and other.

Из разряда: было собеседование, записал сюда все вопросы, что спрашивали у меня, после расписал ответы на них, заучил.

Так же изучая какую-то тему, например TypeScript, я тут буду писать/редактировать один пост, но он должен полностью покрывать эту тему. То есть, чтобы я мог быстренько перед собеседованием (или прямо на нем) открыть этот пост и найти то, что у меня спрашивают.

Так же изучая какую-то тему, например TypeScript, я пишу/редактирую только этот один пост. То есть по одной и той же не теме не может быть несколько постов. Только редактирование и дополнение уже существующей. Потому что это конспект, а не новость. Даже этот пост переписан уже 3-ий раз.

Целевая аудитория блога такая же, что и у предыдущего — я. Иногда приятно, когда кто-то делится мыслью по твоим мыслям, но в целом все тут исключительно из-за меня для меня. Поэтому каждый пост не имеет цели объяснить другим, что это такое. Он исключительно, чтобы мне служить справочником и напоминать то, что можно забыть (обычно это большое кол-во деталей). Если я что-то сам знаю на подкорке, то смысл мне самому себе снова это говорить. Исключение: объявление сабжа на 1-2 абзаца.