Adapt an app example

These four examples offer useful layouts and interactions to adapt. Each owns local demonstration state. Start with the example closest to your workflow and connect only the services your product needs.

Projects: list, board, and details

Start in src/routes/apps/projects/. projects.data.ts defines records, members, statuses, and detail data. ProjectList.tsx, ProjectOverview.tsx, and ProjectFormPage.tsx provide the related page patterns.

The board uses the same initial project records, grouped by Planning, On track, At risk, and Completed. It is an alternate project view, not a separate task-management app. ProjectKanbanBoard.tsx uses the native @hello-pangea/dnd integration; preserve its keyboard behavior and the status-change alternative when adapting drag and drop.

Change names and descriptions first. Then adjust the data model and its derived details together. Create/edit feedback and board movement are local demonstrations; add persistence and cross-page synchronization before relying on them for real records.

File Manager: hierarchy and local files

Start with src/routes/apps/files/FileManager.tsx and files.data.ts. FileRecord distinguishes files from folders and uses parentId to describe their hierarchy. Keep parent IDs valid when replacing the initial records.

The example can add selected local files to the current page. It does not upload them. Image previews use browser object URLs and the page cleans those URLs up; preserve cleanup when changing preview behavior.

A displayed sharing list is demonstration data, not a storage permission system. For production, provide storage, upload progress and failure handling, download authorization, and real sharing enforcement. Do not persist a temporary browser object URL as a permanent file location.

Calendar: events and date conversion

Start with src/routes/apps/calendar/Calendar.tsx, calendar.data.ts, and calendar.utils.ts. The route uses native FullCalendar 7.1.0 Standard entry points and provides month, week, day, and agenda views. Narrow screens use the agenda view.

Fixtures are placed in the current month. Records use date and time fields, with an inclusive end date for all-day events. eventRecordToInput() converts that end to FullCalendar's exclusive end; applyCalendarMove() converts back. Preserve that conversion or multi-day events can shift by a day.

Keep form-based editing alongside direct movement. Before connecting a calendar service, define your timezone policy and map external dates explicitly. The demo does not supply calendar synchronization or recurring-event services.

Chat: conversations and composer

Start with src/routes/apps/chat/Chat.tsx and chat.data.ts. Participants, conversation membership, and message sender IDs are linked. Update these relationships together; do not leave a message pointing to a missing participant.

The page clones initial conversations into local state. Sending adds a message to that state, and opening a conversation updates its unread count locally. The current date/time formatters use UTC. Adapt formatting intentionally for your audience.

Preserve the narrow-screen list/thread navigation and focus return when extracting the layout. Real chat needs authenticated membership, durable messages, delivery and failure handling, and whatever real-time transport your application chooses. The demo has no messaging backend.

Keep the useful pattern small

Retain the layout, clear actions, validation, and feedback that help your product. Remove sample data and controls you do not intend to support. Check a full page journey after each adaptation rather than assuming that a working card or modal makes the whole workflow complete.