Пошаговое руководство Lovable Starter для React Gantt

Это руководство объясняет, как воспроизвести React Gantt Lovable Starter — планировщик с несколькими проектами и backend на Supabase — в вашем рабочем пространстве Lovable. Опубликованный репозиторий и его папка docs/ являются источником правды; эта страница — входная точка, которая объясняет, как части работают вместе.

Для общего обходного маршрута Lovable + Gantt, который не включает Supabase, смотрите сопутствующее руководство: Lovable AI.

Что получится в итоге

Рабочее приложение с:

• настроенной оболочкой с маршрутизацией (Панель управления, Проекты, Отчёты, Нагрузка)
• per-project Gantt рабочие пространства с CRUD для задач и связей
• сохранение порядка задач с перетаскиванием
• отмена/повтор и элементы управления масштабированием
• рабочий календарь с выделением выходных
• панель ресурсов с бейджами рабочей нагрузки
• демонстрационная модель ролей (viewer / editor / owner)
• схема Supabase, демо-политики и начальные данные

Стартовый набор ориентирован на стандартный стек Lovable: React 18 + TypeScript + Vite + Tailwind + shadcn/ui, с дополнением React Query, Redux Toolkit и Supabase поверх.

Требования

• Аккаунт Lovable
• Проект Supabase (подойдет бесплатный тариф)
• Опционально: Node.js 18+ и npm, если планируете запустить результат локально

Два способа использования рецепта

Папка docs/ обслуживает две аудитории:

1. Воспроизвести сборку с нуля. Отправляйте подсказки Lovable в заданном порядке. В итоге вы получите ту же структуру приложения, ту же конфигурацию Gantt и ту же схему Supabase. Это рекомендуемый путь, если вы хотите изучить этот шаблон.
2. Использовать опубликованный репозиторий как стартовый шаблон. Клонируйте репозиторий на GitHub, укажите его на ваш собственный проект Supabase и полностью пропустите подсказки Lovable. Это быстрее, если вам просто нужен рабочий стартовый проект.

Воспроизведение сборки в Lovable

Полная последовательность подсказок находится в docs/00-build-plan.md. Общий ход:

1. Вставьте содержимое 00-knowledge.md в Базу знаний вашего проекта Lovable до отправки первой подсказки. Это зафиксирует имя пакета, импорт CSS, высоту контейнера и правила обработки дат.
2. Запустите подсказку 01-create-app-shell.md для создания каркаса маршрутов, навигации и страниц-заглушек.
3. Определите ваш backend до шага 03. Стартовый набор использует Supabase. Если нужен вариант без backend, можно пропустить шаги со Supabase и оставить только mock-данные.
4. Запустите оставшиеся подсказки по порядку от 02 до 11. Каждая подсказка охватывает одну область функций (ядро Gantt, Supabase, CRUD, разрешения, проверка браузера, UX Gantt, рабочий календарь, ресурсы, финальная проверка, страницы панели управления/отчёты/нагрузка).

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

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

Сгенерированный код редко идеален с первого раза, особенно в отношении паттернов, специфичных для React. В репозитории зафиксированы все ручные правки, применённые во время исходной сборки в docs/00-manual-edits.md. Рассматривайте этот файл как список известных проблем и как пример того, как вести собственный журнал сборки Lovable, когда сгенерированный вывод отклоняется от желаемого паттерна.

Текущий набор зафиксированных исправлений охватывает подключение контекста темы, нормализацию дат Gantt на границе CRUD, актуальность Redux-снимков, сохранение undo/redo и несоответствие сигнатуры шаблона выходных.

Настройка Supabase

Папка supabase/migrations в репозитории содержит схему, демо-политики и seed-данные в виде упорядоченных SQL-файлов. Применяйте их по порядку в редакторе SQL Supabase, затем заполните три переменные окружения Vite (VITE_SUPABASE_URL, VITE_SUPABASE_PUBLISHABLE_KEY, VITE_SUPABASE_PROJECT_ID) в настройках вашего проекта.

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

Выход на продакшн

Стартовый пакет использует публичный пробный пакет @dhtmlx/trial-react-gantt. Когда прототип будет одобрен для продакшна, переключитесь на коммерческий пакет @dhx/react-gantt — процедура смены пакета описана в Installing React Gantt.

Разрешения в стартере — только для демо. Замените демо-поток идентификации на реальную аутентификацию перед тем, как предоставлять доступ конечным пользователям.

Что читать далее

• Lovable AI — общий рабочий процесс Lovable + Gantt без backend
• DHTMLX MCP Server — подключение MCP к Lovable для точных ссылок API
• Agent Skills — применяйте те же паттерны DHTMLX, когда продолжаете редактирование клонированного репозитория в Cursor или Claude Code
• Installing React Gantt — настройка приватного реестра и переход от пробного пакета к коммерческому
• React Gantt Overview — базовый справочник по компоненту