Rimo

Rimo (React Miro) — современное веб-приложение для визуального совместного редактирования, вдохновленное Miro. Позволяет командам работать над досками в реальном времени: рисовать, размещать фигуры, перемещать объекты и взаимодействовать друг с другом онлайн.

---

🔍 Обзор

• Мультипользовательская коллаборация: одновременное редактирование несколькими участниками.
• Реальное время: мгновенная синхронизация состояния доски благодаря Convex и Liveblocks.
• Интуитивный интерфейс: простая навигация, масштабирование, перетаскивание и набор инструментов для рисования.
• Масштабируемая архитектура: поддержка множества досок и организаций.

---

⚙️ Технологический стек

• Frontend: React, TypeScript, Next.js, Tailwind CSS, shadcn/ui
• Backend / Real-time DB: Convex (серверные функции и хранилище данных)
• Collaboration Layer: Liveblocks для присутствия, курсоров, передачи событий
• Code Quality & Tooling: ESLint, Prettier, VSCode, GitHub Actions

---

📐 Архитектура и структура проекта

├── app/                     # Основные страницы (Next.js App Router)
│   ├── (dashboard)/         # Дашборд с перечнем досок и орг-меню
│   └── board/[boardId]/     # Страница конкретной доски и её компоненты
├── components/              # Переиспользуемые UI-компоненты и модалки
├── convex/                  # Convex схемы и серверные функции
├── hooks/                   # Кастомные React-хуки
├── lib/                     # Утилитарные функции
├── providers/               # Провайдеры контекста (Convex, модалки)
├── public/                  # Статические ресурсы: иконки, SVG
├── scripts/                 # Вспомогательные утилиты (генерация аватарок)
└── types/                   # Общие TypeScript типы

• App Router: маршрутизация и лэйауты в app/layout.tsx, страницы в app/(dashboard) и app/board/[boardId].
• Convex: все операции с базой данных в convex/schema.ts, convex/boards.ts, convex/board.ts.
• Liveblocks: конфигурация в liveblocks.config.ts, авторизация через API-роут app/api/liveblocks-auth/route.ts.

---

📊 Codebase Stats

Language	Files	Lines of Code
TypeScript JSX	73	5,132
TypeScript	28	1,303
Python	2	140
JavaScript	4	35
PostCSS (CSS)	1	122
Shell Script	1	5

Всего кода: 6 737 строк

---

🚀 Быстрый старт

1. Клонировать репозиторий

   git clone https://github.com/dedbin/rimo.git
   cd rimo

2. Выбрать способ запуска — вручную или через Docker:

---

🔧 Вариант 1: Ручной запуск

3. Установить зависимости

   npm install

4. Создать файл окружения

   CONVEX_DEPLOYMENT=<your_convex_deployment>
   NEXT_PUBLIC_CONVEX_URL=<your_convex_url>
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<your_clerk_publishable_key>
   CLERK_SECRET_KEY=<your_clerk_secret_key>
   CLERK_FRONTEND_API_URL=<your_clerk_frontend_api_url>
   NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=<your_liveblocks_public_key>
   NEXT_PUBLIC_LIVEBLOCKS_SECRET_KEY=<your_liveblocks_secret_key>
   NEXT_PUBLIC_SITE_URL=<your_site_url>
   

5. Запустить локально

   npm run dev

6. Открыть в браузере: http://localhost:3000

---

🐳 Вариант 2: Запуск через Docker

3. Создать .env файл (как описано выше)

4. Запустить с Docker

   ./run.sh

   Или вручную:

   docker-compose up --build -d

5. Открыть в браузере: http://localhost:3000

---

📦 Обновление проекта

Если у вас уже склонирован репозиторий и установлены зависимости, вы можете обновить проект до последней версии без переустановки:

🔄 Через Git

git pull

Эта команда подтянет последние изменения из удалённого репозитория.

🔁 Если используете Docker

После git pull можно перезапустить приложение с учётом изменений:

./run.sh

или вручную:

docker compose up --build -d

🎨 Основные возможности

• Создание и удаление досок
• Генерация уникальных аватарок досок
• Добавление, выбор и перемещение прямоугольников и других фигур
• Выделение объектов рамкой, смена цвета
• Панорамирование и масштабирование холста
• Просмотр курсоров участников и их аватарок в реальном времени
• Приглашение участников по ссылке
• Вставка изображений с автоматической подгонкой размеров и отслеживанием загрузки
• Предпросмотр ссылок с заголовком, описанием и изображением
• Выбор шрифта, размера и цвета текста
• Локализация интерфейса на русском и английском языках

---

🤝 Вклад и TODO

Если вы хотите помочь развитию Rimo, создавайте issue или PR.

TODO (отмечены в коде как TODO:):

• Мобильная адаптация: доработать отзывчивость интерфейса для смартфонов и планшетов.
• Тестирование: больше тестов!!!!!
• Оптимизация производительности: улучшить рендеринг большого числа объектов и lazy-load компонентов.
• Импорт досок из Miro: дать пользователям возможность импорта досок из miro (например используя api miro)
• Экспорт досок: Добавить экспорт доски в PDF с настройками масштаба и формата страниц. Рендерить холст offscreen, разбивать при необходимости на страницы и сохранять через jsPDF или pdf-lib.

---

📖 Лицензия

MIT © 2025 dedbin