React Gantt Lovable Starter

This project is a multi-project planning demo built with DHTMLX React Gantt, React, TypeScript, Vite, and Supabase. It combines a routed app shell, project portfolio pages, a per-project Gantt workspace, demo-only role-based access, persistent CRUD, row reordering, working-time behavior, and resource workload views.

The app was assembled step by step from the prompts and architecture notes in lovable/, so that folder also serves as the project's build history and implementation guide.

✨ Try the Live Demo >>>

What's inside

This repo has three layers, each useful on its own:

• App code under src/ - a working React + Supabase planner you can run, fork, or strip down for your own use.
• Supabase migrations under supabase/migrations - schema, demo policies, and seed data, applied in order.
• Lovable build recipe under lovable/ - the exact prompt sequence used to generate the app, plus a log of every manual fix that was applied to the generated output. Reuse it to reproduce the build in your own Lovable workspace, or read it as a worked example of building a complex Gantt app with Lovable.

Features

• Multi-project planning with dashboard, projects, reports, and workload pages
• Project-scoped Gantt data loaded from Supabase for the selected project only
• Task and link CRUD persisted through the DHTMLX data.save flow
• Persistent task ordering via sortorder, including drag-and-drop row reorder
• Undo/redo and zoom controls backed by Redux Toolkit history state
• Working calendar and weekend highlighting with one shared calendar source of truth
• Resource panel and assignee support with workload badges and hour totals
• Demo-only permissions with project access resolved through project_members
• Viewer / editor / owner roles driving read-only vs editable Gantt behavior
• Demo sign-in modal based on seeded users, with the selected user stored in localStorage

Stack

• React 18 + TypeScript
• Vite
• Tailwind CSS + shadcn/ui
• React Router
• TanStack Query
• Redux Toolkit
• Supabase
• DHTMLX React Gantt

Quick Start

Install dependencies:

npm install

Start the development server:

npm run dev

Supabase Setup

1. Create a project at https://supabase.com.
2. Go to Settings → API and copy:
   • Project URL
   • anon public key
3. Apply the SQL files from supabase/migrations to your Supabase project in order. These migrations create the schema, demo policies, and seeded starter data.
4. Copy .env.example to .env:

cp .env.example .env

5. Fill in your .env with:
   • VITE_SUPABASE_URL
   • VITE_SUPABASE_PUBLISHABLE_KEY
   • VITE_SUPABASE_PROJECT_ID

The client in src/integrations/supabase/client.ts reads these values from Vite env vars at runtime.

Auth Model

Authentication is intentionally lightweight:

• users choose a demo identity from a modal on first load
• no passwords or production auth flows are implemented
• the selected demo user is restored from localStorage

Permissions are also demo-only:

• accessible projects are filtered through project_members
• project roles resolve from project_members.role
• viewers open the Gantt in read-only mode
• editors and owners can modify project data

Application Routes

Path	Purpose
/	Dashboard
/projects	Project portfolio list
/projects/:id	Project detail page with the Gantt workspace
/reports	Project and task counts for accessible projects
/workload	Team member and assignment summary for accessible projects
*	Not found page

Repo Structure

src/
  components/                shared shell and UI primitives
  features/
    auth/                    demo sign-in and current-user context
    gantt/                   Gantt data hooks, toolbar, store, and utilities
    projects/                project queries, roles, dialogs, and member management
  integrations/supabase/     generated Supabase client and DB types
  pages/                     route-level screens
  hooks/                     shared React hooks
  lib/                       utilities
supabase/
  migrations/                schema, policy, and seed SQL
lovable/                     prompt sequence + build log

The full ordered prompt list lives in lovable/00-build-plan.md, with companion files for the architecture baseline, the Knowledge Base content, the implementation prompts for each stage, and a record of every manual fix.

Going to production

This starter installs the public trial package @dhtmlx/trial-react-gantt, which renders an evaluation watermark. Before shipping to real users:

1. Obtain a commercial DHTMLX license, configure the DHTMLX private npm registry, and swap @dhtmlx/trial-react-gantt for @dhx/react-gantt. The installation guide walks through the package swap and a short Lovable note.
2. Replace the demo identity flow with real authentication. Permissions in this starter are demo-only; the project membership rows and role checks are intentionally lightweight.

AI tooling

If you continue editing this project with an AI coding assistant, three companion tools sharpen the output:

• DHTMLX MCP Server - real-time DHTMLX API reference for any MCP-aware assistant (Claude Code, Cursor, ChatGPT, Gemini CLI, and others).
• DHTMLX Agent Skills - opinionated patterns and known pitfalls for working with React Gantt; pair with MCP for best results.
• Lovable AI integration guide - the published walkthrough of using DHTMLX inside Lovable, including the reproduction guide for this starter.

License

Source code in this demo is released under the MIT License. DHTMLX React Gantt is a commercial library and should be used under a valid DHTMLX license or evaluation agreement.

Using Supabase is subject to their terms of service and billing. Stay within the free tier or set quotas that fit your usage.

Useful Links

• DHTMLX Gantt Product Page
• DHTMLX Gantt Documentation
• DHTMLX AI Tools overview - MCP, agent skills, Lovable, and semantic search
• Supabase Documentation
• DHTMLX technical support forum
• Other React starters: react-gantt-quick-start, react-gantt-jotai-starter, react-gantt-redux-starter, react-gantt-tanstack-query-starter, react-gantt-zustand-starter