My Dashboard

комплексная система управления дашбордами с веб-приложением, мобильным приложением и API для отображения информации в реальном времени.

Идея и мотивация

  • Дома лежали несколько старых Android-устройств, которые давно не использовались.
  • Хотелось сделать что-то простое и полезное: показывать информацию и иногда вводить данные. Так появилась идея превратить старые устройства в интерактивные дашборды.
  • Изначально идея была давно, но мотивации не хватало. С помощью нейросетей проект превратился в игру: большая часть кода генерировалась AI, а я только исправлял ошибки.
  • Основная цель — типобезопасный fullstack, где фронт автоматически подтягивает типы с бэка через TypeScript без генерации SDK по Swagger или GraphQL.
  • Второстепенная цель — создать кроссплатформенное приложение, где часть кода и логики используется одновременно на вебе и мобильных устройствах.

Архитектура и технологии

Backend

  • tRPC (роуты) и Zod схемы.
  • Общие типы: контроллеры на сервере → автоматически подтягиваются на фронт.
  • Виджеты используют Zod схемы для генерации форм и валидации на фронте.
  • Формы на фронте работают через Formly, ошибки серверной валидации интегрируются прямо в поля формы.
  • Фокус на типобезопасность: фронт автоматически получает все актуальные типы без ручной генерации SDK.

Frontend Web

  • AnalogJS: Angular-style фреймворк с SSR из коробки.
  • Плюсы SSR: SEO, рендер страниц на сервере, быстрый первый отрисовок.
  • Сложности и нюансы:
    • Кэширование SSR ↔ фронт работало по правилам AnalogJS, которые не всегда подходили для авторизации.
    • Transfer cache отключен, чтобы избежать некорректного кэширования.
    • Добавлена возможность подмены fetch для передачи куки и токенов авторизации.
    • Проблема авторизованных и неавторизованных SSR-запросов частично решена: SSR фронт дергает бэк с куки, затем клиентский фронт повторно делает запрос с настоящего фронта.

Mobile App

  • Изначально хотел Flutter, но сборка через Docker и SDK старых Android оказалась слишком сложной.
  • В итоге выбран Capacitor + Ionic:
    • Настройка под старые Android потребовала времени и тестирования разных версий SDK.
    • QR-сканеры пришлось использовать JS-версии, так как встроенные старых Android не работали.
    • Шаринг тем и виджетов с вебом дался сложно: стили перекрывали друг друга, частично удалось исправить.
  • Цель мобильной части — использовать один и тот же код виджетов и бизнес-логику, что и на вебе.

Нейросети и генерация кода

  • 70% кода написано AI: виджеты, формы, части UI.
  • Я исправлял только ошибки и недостающие моменты.
  • Бизнес-логика была второстепенной на MVP этапе — основной фокус был на архитектуре и типобезопасности.
  • Генерация через AI позволила:
    • Быстро создать виджеты для разных сценариев.
    • Автоматически связать серверные схемы с фронтом через типы TypeScript.
    • Сэкономить время на написание boilerplate кода.

Основные эксперименты и цели

  1. Типобезопасный fullstack — фронт подтягивает типы с бэка автоматически.
  2. SSR + авторизация — эксперименты с куки и токенами, частично решены кейсы авторизованных страниц.
  3. Кроссплатформенность — единая логика и UI для веба и мобильного приложения.
  4. AI-генерация — ускорение разработки MVP и упор на архитектуру.
  5. Патчи библиотек — исправлены ограничения AnalogJS и tRPC для кастомизации fetch и отключения transfer cache.
  6. Шаринг тем и виджетов — эксперимент с общей визуальной и логической частью для веба и мобильного.

Достижения MVP

  • MVP с несколькими виджетами, генерируемыми AI.
  • Заглушки для будущего функционала.
  • Настройка CI/CD для веба и мобильных сборок.
  • Частичная поддержка SSR + авторизация.
  • Кроссплатформенная часть: единая логика для мобильного и веба.
  • Публикация поста о проекте и открытие исходников.

Роадмап проекта

Сделано

  • MVP с несколькими виджетами.
  • Заглушки для будущих функций в интерфейсе.
  • Документация багов и нюансов SSR.
  • Статьи о проекте:

В планах

  • Полный рефакторинг фронтенда и бэка.
  • Десктопная версия на Electron.
  • Поддержка офлайн-режима.
  • Реалтайм-обновления с сервером.
  • Подключение новых виджетов через YAML-файлы.
  • Поддержка виджетов Glance.
  • Docker-образ для self-host установки.
  • Динамическое добавление новых виджетов без пересборки мобильного приложения.
  • Публикация мобильного приложения в App Store и Google Play.
  • Поддержка Apple устройств.

Временные затраты

  • Весь проект реализован за 1,5 месяца.
  • Основные затраты времени:
    • Backend + tRPC + Zod
    • Frontend + AnalogJS + Formly
    • Mobile App + Capacitor/Ionic
    • Генерация виджетов через AI
    • CI/CD, тесты, деплой

Демонстрирует, как быстро можно прототипировать MVP с AI и типобезопасным fullstack подходом.