{"id":51476047,"url":"https://github.com/dhtmlx/react-gantt-lovable-starter","last_synced_at":"2026-07-06T21:01:10.993Z","repository":{"id":354808794,"uuid":"1219998234","full_name":"DHTMLX/react-gantt-lovable-starter","owner":"DHTMLX","description":"Multi-project planner built with DHTMLX React Gantt, Supabase, and Lovable AI - includes a step-by-step Lovable build recipe.","archived":false,"fork":false,"pushed_at":"2026-04-30T06:52:57.000Z","size":397,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-30T08:21:12.507Z","etag":null,"topics":["dhtmlxgantt","gantt-chart","lovable","lovable-ai","lovable-dev","project-management","project-planner","react","react-gantt","starter-template"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DHTMLX.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-24T12:45:45.000Z","updated_at":"2026-04-30T06:53:01.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/DHTMLX/react-gantt-lovable-starter","commit_stats":null,"previous_names":["dhtmlx/react-gantt-lovable-starter"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/DHTMLX/react-gantt-lovable-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DHTMLX%2Freact-gantt-lovable-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DHTMLX%2Freact-gantt-lovable-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DHTMLX%2Freact-gantt-lovable-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DHTMLX%2Freact-gantt-lovable-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DHTMLX","download_url":"https://codeload.github.com/DHTMLX/react-gantt-lovable-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DHTMLX%2Freact-gantt-lovable-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35205739,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-06T02:00:07.184Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dhtmlxgantt","gantt-chart","lovable","lovable-ai","lovable-dev","project-management","project-planner","react","react-gantt","starter-template"],"created_at":"2026-07-06T21:01:10.060Z","updated_at":"2026-07-06T21:01:10.986Z","avatar_url":"https://github.com/DHTMLX.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Gantt Lovable Starter\n\n[](https://www.npmjs.com/package/@dhtmlx/trial-react-gantt)\n[](#license)\n[](https://lovable.dev)\n\nThis 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.\n\nThe app was assembled step by step from the prompts and architecture notes in [`docs/`](./docs), so that folder also serves as the project's build history and implementation guide.\n\n### **[✨ Try the Live Demo \u003e\u003e\u003e](https://react-gantt-lovable-starter.lovable.app)**\n\n## What's inside\n\nThis repo has three layers, each useful on its own:\n\n- **App code** under [`src/`](./src) - a working React + Supabase planner you can run, fork, or strip down for your own use.\n- **Supabase migrations** under [`supabase/migrations`](./supabase/migrations) - schema, demo policies, and seed data, applied in order.\n- **Lovable build recipe** under [`docs/`](./docs) - 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.\n\n## Features\n\n- **Multi-project planning** with dashboard, projects, reports, and workload pages\n- **Project-scoped Gantt data** loaded from Supabase for the selected project only\n- **Task and link CRUD** persisted through the DHTMLX `data.save` flow\n- **Persistent task ordering** via `sortorder`, including drag-and-drop row reorder\n- **Undo/redo and zoom controls** backed by Redux Toolkit history state\n- **Working calendar and weekend highlighting** with one shared calendar source of truth\n- **Resource panel and assignee support** with workload badges and hour totals\n- **Demo-only permissions** with project access resolved through `project_members`\n- **Viewer / editor / owner roles** driving read-only vs editable Gantt behavior\n- **Demo sign-in modal** based on seeded users, with the selected user stored in `localStorage`\n\n## Stack\n\n- React 18 + TypeScript\n- Vite\n- Tailwind CSS + shadcn/ui\n- React Router\n- TanStack Query\n- Redux Toolkit\n- Supabase\n- DHTMLX React Gantt\n\n## Quick Start\n\nInstall dependencies:\n\n```bash\nnpm install\n```\n\nStart the development server:\n\n```bash\nnpm run dev\n```\n\n## Supabase Setup\n\n1. Create a project at [https://supabase.com](https://supabase.com).\n2. Go to **Settings → API** and copy:\n - Project URL\n - anon public key\n3. Apply the SQL files from [`supabase/migrations`](./supabase/migrations) to your Supabase project in order. These migrations create the schema, demo policies, and seeded starter data.\n4. Copy [`.env.example`](./.env.example) to `.env`:\n\n```bash\ncp .env.example .env\n```\n\n5. Fill in your `.env` with:\n - `VITE_SUPABASE_URL`\n - `VITE_SUPABASE_PUBLISHABLE_KEY`\n - `VITE_SUPABASE_PROJECT_ID`\n\nThe client in [src/integrations/supabase/client.ts](./src/integrations/supabase/client.ts) reads these values from Vite env vars at runtime.\n\n## Auth Model\n\nAuthentication is intentionally lightweight:\n\n- users choose a demo identity from a modal on first load\n- no passwords or production auth flows are implemented\n- the selected demo user is restored from `localStorage`\n\nPermissions are also demo-only:\n\n- accessible projects are filtered through `project_members`\n- project roles resolve from `project_members.role`\n- viewers open the Gantt in read-only mode\n- editors and owners can modify project data\n\n## Application Routes\n\n| Path | Purpose |\n| --- | --- |\n| `/` | Dashboard |\n| `/projects` | Project portfolio list |\n| `/projects/:id` | Project detail page with the Gantt workspace |\n| `/reports` | Project and task counts for accessible projects |\n| `/workload` | Team member and assignment summary for accessible projects |\n| `*` | Not found page |\n\n## Repo Structure\n\n```text\nsrc/\n components/ shared shell and UI primitives\n features/\n auth/ demo sign-in and current-user context\n gantt/ Gantt data hooks, toolbar, store, and utilities\n projects/ project queries, roles, dialogs, and member management\n integrations/supabase/ generated Supabase client and DB types\n pages/ route-level screens\n hooks/ shared React hooks\n lib/ utilities\nsupabase/\n migrations/ schema, policy, and seed SQL\ndocs/ prompt sequence + build log\n```\n\nThe full ordered prompt list lives in [`docs/00-build-plan.md`](./docs/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.\n\n## Going to production\n\nThis starter installs the public trial package `@dhtmlx/trial-react-gantt`, which renders an evaluation watermark. Before shipping to real users:\n\n1. Obtain a commercial DHTMLX license, configure the [DHTMLX private npm registry](https://docs.dhtmlx.com/gantt/integrations/react/installation/), and swap `@dhtmlx/trial-react-gantt` for `@dhx/react-gantt`. The [installation guide](https://docs.dhtmlx.com/gantt/integrations/react/installation/#moving-from-the-trial-package-to-the-commercial-one) walks through the package swap and a short Lovable note.\n2. 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.\n\n## AI tooling\n\nIf you continue editing this project with an AI coding assistant, three companion tools sharpen the output:\n\n- [DHTMLX MCP Server](https://docs.dhtmlx.com/gantt/integrations/ai-tools/mcp-server/) - real-time DHTMLX API reference for any MCP-aware assistant (Claude Code, Cursor, ChatGPT, Gemini CLI, and others).\n- [DHTMLX Agent Skills](https://github.com/DHTMLX/skills) - opinionated patterns and known pitfalls for working with React Gantt; pair with MCP for best results.\n- [Lovable AI integration guide](https://docs.dhtmlx.com/gantt/integrations/ai-tools/lovable-ai/) - the published walkthrough of using DHTMLX inside Lovable, including the [reproduction guide](https://docs.dhtmlx.com/gantt/integrations/ai-tools/lovable-starter-walkthrough/) for this starter.\n\n## License\n\nSource code in this demo is released under the **MIT License**.\n**DHTMLX React Gantt** is a commercial library and should be used under a valid [DHTMLX license](https://dhtmlx.com/docs/products/licenses.shtml) or evaluation agreement.\n\nUsing **Supabase** is subject to their [terms of service](https://supabase.com/terms) and billing. Stay within the free tier or set quotas that fit your usage.\n\n## Useful Links\n\n- [DHTMLX Gantt Product Page](https://dhtmlx.com/docs/products/dhtmlxGantt/)\n- [DHTMLX Gantt Documentation](https://docs.dhtmlx.com/gantt/)\n- [DHTMLX AI Tools overview](https://docs.dhtmlx.com/gantt/integrations/ai-tools/) - MCP, agent skills, Lovable, and semantic search\n- [Supabase Documentation](https://supabase.com/docs)\n- [DHTMLX technical support forum](https://forum.dhtmlx.com/)\n- Other React starters: [react-gantt-quick-start](https://github.com/dhtmlx/react-gantt-quick-start), [react-gantt-jotai-starter](https://github.com/dhtmlx/react-gantt-jotai-starter), [react-gantt-redux-starter](https://github.com/dhtmlx/react-gantt-redux-starter), [react-gantt-tanstack-query-starter](https://github.com/dhtmlx/react-gantt-tanstack-query-starter), [react-gantt-zustand-starter](https://github.com/dhtmlx/react-gantt-zustand-starter)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhtmlx%2Freact-gantt-lovable-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdhtmlx%2Freact-gantt-lovable-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdhtmlx%2Freact-gantt-lovable-starter/lists"}