Mriya Playground

Живі демо · реальний бекенд

Не скріншоти, а робочі системи

Кожне демо — це справжній фронтенд, API та база даних, які працюють просто зараз. Фільтруйте дані, вмикайте потоки подій, запускайте процеси й дивіться, як ми будуємо продукти.

Переглянути демоОбговорити проєкт
демо вже працюють
4/4
подій за секунду — максимум WebSocket-потоку
1 500
біржі з живими цінами BTC/USDT
2
вузлів у графі workflow
17

Чотири демо — чотири інженерні задачі

Дані синтетичні й завжди позначені. Код, API та інфраструктура — справжні.

01Працює

Аналітичний дашборд

KPI-картки, графіки й обмежена таблиця даних на синтетичному e-commerce датасеті, який віддає та фільтрує бекенд.

Що це доводить

  • Фільтрація й агрегація на сервері, а не в браузері
  • Швидкі canvas-графіки, що не гальмують на великих даних
  • Дашборд, який можна перекомпонувати перетягуванням
  • uPlot
  • @hello-pangea/dnd
  • TanStack Query
  • NestJS
  • Zod
Відкрити демо
02Працює

Монітор реального часу

Справжній WebSocket-потік згенерованих подій магазину та живих цін BTC/USDT з Binance і Bybit: стан зʼєднання, обмежена історія та перепідключення.

Що це доводить

  • Потік до 1 500 подій за секунду з обмеженою історією
  • Живі ціни Binance і Bybit на одному графіку
  • Стан зʼєднання та автоматичне перепідключення
  • ws (WebSocket)
  • uPlot
  • NestJS
  • Zod
Відкрити демо
03Працює

Дослідник процесів

Граф workflow, який виконує сервер: паралельні гілки, умовна маршрутизація, злиття, автоматичні повтори й захищений ручний повтор — у живій схемі.

Що це доводить

  • Паралельні гілки, умови та злиття виконує сервер
  • Автоматичні повтори й захищений ручний повтор
  • Жива схема, що показує кожен крок прогону
  • React Flow
  • TanStack Query
  • NestJS
  • node-postgres (pg)
  • Zod
Відкрити демо
04Працює

Лабораторія AI-пошуку

Сім запитів сімома мовами крок за кроком проходять конвеєр пошуку з AI-моделлю — від перевірки вводу до SQL. Це симуляція: модель не викликається, а валідація, guardrails і запит до даних працюють наживо.

Що це доводить

  • Конвеєр, як у продакшені: від захисту вводу до SQL
  • Сім мов, неоднозначні й непідтримувані запити
  • Змодельовані кроки чесно відділені від живих
  • NestJS
  • Zod
  • TanStack Query
Відкрити демо

Як перевірити нашу роботу

  1. 01

    Відкрийте демо

    Змінюйте фільтри, запускайте потоки й процеси — усе працює з реальним API, а не з макетом.

  2. 02

    Зазирніть у консоль розробника

    Внизу кожної сторінки видно справжні запити й події, які створює демо. Облікові та персональні дані приховано.

  3. 03

    Прочитайте про архітектуру

    Рішення, компроміси та структура монорепозиторію — так, як ми пояснили б їх вашій команді.

Потрібне щось подібне для вашого продукту?

Розкажіть про задачу: дашборд, дані в реальному часі, складні процеси чи пошук. Покажемо, як підійдемо до неї, на прикладі цих демо.

Обговорити проєктЯк це влаштовано

Усі дані в демо синтетичні та позначені як такі. Реальних клієнтів чи замовлень тут немає.