This project is a resource scheduling demo built with DHTMLX React Scheduler, React, TypeScript, Vite, and Supabase. It demonstrates how a timeline-based booking and resource management app can be created in Lovable using a routed app shell, location-scoped resources, persistent booking CRUD, recurring events, business-hours highlighting, undo/redo, and demo-only role-based access.
The app was assembled step by step from the prompts and architecture notes in docs/, so that folder also serves as the project’s build history and implementation guide.
This repo has three layers, each useful on its own:
- App code under
src/- a working React + Supabase resource scheduler you can run, fork, or adapt for your own booking workflows. - Supabase SQL under
db/- schema and deterministic seed data, applied in order. - Lovable build recipe under
docs/- the exact prompt sequence used to generate the app, plus the architecture baseline and build log. Reuse it to reproduce the build in your own Lovable workspace, or read it as a worked example of building a DHTMLX Scheduler app with Lovable.
- Timeline resource scheduling with Day, 3 Days, and Week timeline views
- Location-scoped bookings and resources loaded from Supabase for the selected location
- Booking CRUD persisted through the DHTMLX Scheduler
data.saveflow - Recurring booking support with series rows, exception rows, and deleted-occurrence tombstones
- Status, resource, and type filters for the Scheduler workspace
- Undo/redo for create, update, and delete backed by serializable Zustand history metadata
- Resource-specific business-hour behavior with non-working Timeline cell highlighting
- Conflict blocking for overlapping bookings on the same resource
- Outside-working-hours warnings without blocking plain bookings
- Dashboard, Resources, Reports, and Settings pages for a complete starter workspace
- Demo-only permissions with viewer, scheduler, and admin roles
- Demo sign-in modal based on seeded users, with the selected user stored in
localStorage
- React 19 + TypeScript
- Vite
- TanStack Start + TanStack Router
- TanStack Query
- Zustand
- Tailwind CSS + shadcn/ui
- Supabase
- DHTMLX React Scheduler
Install dependencies:
npm installStart the development server:
npm run dev- Create a project at https://supabase.com.
- Go to Settings -> API and copy:
- Project URL
- publishable / anon public key
- service role key for server-side mutations
- Apply the SQL files from
db/to your Supabase project in order. These scripts create the schema and seeded starter data. - Copy
.env.exampleto.env:
cp .env.example .env- Fill in your
.envwith:
VITE_APP_SUPABASE_URL=https://your-project-ref.supabase.co
VITE_APP_SUPABASE_PUBLISHABLE_KEY=your-supabase-publishable-or-anon-key
APP_SUPABASE_URL=https://your-project-ref.supabase.co
APP_SUPABASE_SERVICE_ROLE_KEY=your-supabase-service-role-keyThe browser client in src/integrations/supabase/client.ts reads the VITE_APP_* values. The server client in src/integrations/supabase/client.server.ts uses the service role key for server-side CRUD.
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:
- viewer users open the Scheduler in read-only mode
- scheduler users can create and update bookings
- admin users can manage bookings and resources
| Path | Purpose |
|---|---|
/ |
Dashboard |
/calendar |
DHTMLX Scheduler Timeline workspace |
/resources |
Resource overview and utilization |
/reports |
Booking breakdowns by status, type, and resource |
/settings |
Demo user, location, theme, and business-hours reference |
* |
Not found page |
src/
components/ shared shell and UI primitives
features/
locations/ location queries, selector, and active-location state
permissions/ demo user selector, role helpers, and permission state
resources/ resource queries and resource data helpers
scheduler/ Scheduler workspace, event APIs, adapters, history, and utilities
integrations/supabase/ browser and server Supabase clients
routes/ TanStack file routes
hooks/ shared React hooks
lib/ utilities and error helpers
router.tsx router creation
start.ts TanStack Start entry
server.ts server entry
routeTree.gen.ts generated route tree
styles.css design tokens and global styles
db/
001_init.sql schema for locations, users, resources, and events
002_seed.sql deterministic starter data
docs/ prompt sequence + build log
The full ordered prompt list lives in 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 manual follow-up fixes.
This starter installs the public trial package @dhtmlx/trial-react-scheduler, which is intended for evaluation. Before shipping to real users:
- Obtain a commercial DHTMLX license, configure the DHTMLX private npm registry, and swap
@dhtmlx/trial-react-schedulerfor the commercial Scheduler package according to the official DHTMLX installation guidance. - Replace the demo identity flow with real authentication. Permissions in this starter are demo-only and intentionally lightweight.
- Review Supabase access controls, service-role usage, and database policies for your production deployment model.
If you continue editing this project with an AI coding assistant, these companion resources help keep DHTMLX-specific changes accurate:
- DHTMLX MCP Server - real-time DHTMLX API reference for MCP-aware assistants.
- DHTMLX Agent Skills - opinionated patterns and known pitfalls for working with DHTMLX components.
- DHTMLX Scheduler React integration docs - the primary reference for React Scheduler usage.
Source code in this demo is released under the MIT License. DHTMLX React Scheduler 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.