Cadence — a project tracker, and its first chart

Follow these steps in the Beetler builder to reproduce this exact app. Button and chip names are written the way they appear on screen.

1. Pick the build type.
   On the home screen, under “What are you building?”, click the Web app chip.
   
2. Describe the app and its fields.
   Name the fields on a record — a title, a short description, a status, a priority, an assignee, a project name and a due date. status and priority are the load-bearing words: Beetler turns them into enums, and an enum is what the dashboard counts and the list filters by. Drop them and you get a flat list with nothing to group.
3. Choose a tone.
   Under “App personality”, click Business. It resolves to a compact, cool-neutral spec: slate header, restrained accent, Inter throughout, tighter spacing than the other recipes. A tracker is read at a glance, so density is the design.
   
4. Click Build It — then take the AI path.
   Beetler may match one of its stock templates and build it instantly for free. That template is not your app: click Use AI instead and the six-stage pipeline reads your actual paragraph. That is what produces a Task entity with your fields rather than a shop's Product.
   
5. Watch it lay out the tracker.
   Four pages — Dashboard, Tasks, Task Detail and New Task — with the dashboard already showing a count per status and an overdue tally it derived from the due date.
6. Fill it with work.
   Click Data then Generate Data. Set Task to 18, Project to 4, and add two assertions:

   Eighteen tasks spread across four projects, with a realistic mix of statuses so no status is empty, and due dates through 2026
   Tasks are real product design studio work in English (research, wireframes, design system, handoff), assignees have Portuguese names

   The second assertion is what stops the generator writing “Task 1, Task 2”. Click Generate, then Accept & Save.
7. Build the chart widget.
   Open Widgets in the header and describe the graph you want: a horizontal bar chart showing how many tasks each project has, one row per project, the count at the end of the bar, using CSS variables for every colour. Beetler asks four design questions — bar scaling, sort order, empty state, animation — then writes the component in inline SVG. No chart library is involved, so it inherits your app's theme automatically.
8. Point the chart at your real tasks.
   Iterate in the same chat: compute the chart from the data prop instead of fixed numbers — group the rows by projectName and count them. Widgets receive the app's own records in a data prop, so the chart stays true as tasks change. Click Publish when the preview looks right.
9. Place it on the dashboard.
   Back in the app, type place the WorkloadChartWidget on the Dashboard page. Then My Apps → Rebuild → Just Rebuild so the page picks the widget up.
10. Publish or export.
    Open My Apps and click Publish for a shareable link with a QR code, or Source to take the standalone React project away as a zip.