Скачать или смотреть Я построил операционную систему с Convex

В видео демонстрируется «Convex OS» — рабочий стол в стиле Windows XP, встроенный в браузер с React и Vite, стилизованный с помощью xp.css и поддерживаемый Convex для синхронизации нескольких вкладок в режиме реального времени. В нём рассматриваются загрузка файлов методом перетаскивания, управление окнами (сворачивание/разворачивание, панель задач), меню «Пуск» и облегчённый iframe в стиле Internet Explorer с отмеченными ограничениями CSP.

С точки зрения разработчика, в нём объясняется проектирование схемы (файлы, процессы, окна, метаданные сообщений), состояния загрузки с разграниченным объединением, смоделированные как конечный автомат, и экспериментальный слой «модели», который оборачивает запросы/мутации Convex для повторного использования без перекрёстных вызовов серверных функций. Также представлен «Sheffy» — небольшой пользовательский интерфейс ИИ-агента (потоки, вложения), сохраняемый в Convex. Идеально подходит для разработчиков React/Convex, исследующих пользовательский интерфейс в режиме реального времени, метафоры рабочего стола и организацию поддерживаемого серверного кода.

Временные метки

[00:00] Обзор Convex OS и источники вдохновения
[00:00:13] Выбор эстетики Windows XP
[00:00:22] Основные функции ОС: файлы, окна, меню «Пуск»
[00:00:41] Синхронизация нескольких вкладок в реальном времени через бэкенд Convex
[00:01:15] Вход/выход из системы и системные звуки
[00:01:28] Аутентификация с помощью Convex Auth (имя пользователя/пароль)
[00:02:06] Оформление пользовательского интерфейса с помощью xp.css и заимствованных значков
[00:02:44] Общие компоненты пользовательского интерфейса и примитивы макета
[00:03:24] Стек приложений: React + Vite; Состояние в Convex
[00:03:46] Почему некоторые ссылки пользовательского интерфейса остаются на стороне клиента (ссылки кнопок панели задач)
[00:04:21] Обзор схемы базы данных
[00:04:39] Таблица файлов и различимые состояния загрузки (конечный автомат)
[00:05:34] Загрузка методом перетаскивания; Синхронизация окон в реальном времени
[00:06:11] Таблица процессов: состояние для каждого приложения
[00:07:01] Таблица окон: положение, размер, состояние представления
[00:07:37] Встречайте «Sheffy» (дань уважения Clippy) как простого ИИ-агента
[00:08:11] Потоки, вложения и предварительный просмотр в пользовательском интерфейсе агента
[00:09:23] Таблица метаданных сообщений для чипов вложений
[00:09:32] Приложения меню «Пуск» и открытие представлений без состояния
[00:09:50] Встроенный браузер Internet Explorer и ограничения iframe
[00:10:24] Ошибки CSP при встраивании внешних сайтов
[00:10:54] Экспериментальная организация выпуклого кода (слой «модели»)
[00:12:21] Иерархические вспомогательные функции для процессов/окон/файлов
[00:14:33] Заключение и идеи на будущее (часы, «Сапер», «Блокнот»)
[00:14:49] Упомянут исходный код и демонстрацию
[00:15:13] Заключение и ссылка на видео Agent Inbox

Ресурсы

Демо ConvexOS: https://convex-os.previews.convex.dev/
Исходный код ConvexOS: https://github.com/mikecann/convex-os

Convex auth: https://docs.convex.dev/auth/convex-auth
XP.css: https://botoxparty.github.io/XP.css/
Иконки XP: https://github.com/ShizukuIchi/winXP
Общая система макета: https://basarat.com/gls/

Хештеги

#react #vite #convex #realtime #xpcss #webdesktop #draganddrop #statemachine #frontend #webdev #aiengineering #typescript #ux #iframerestrictions #database