# Hello World App

## Overview

**What we're building**: A simple but complete task list application where users can add, view, mark complete, and delete their personal tasks.

**Non-technical explanation**: Think of this as your "Hello World" for Buzzy—just like programmers start with printing "Hello World," you'll start by building a simple task app to learn the fundamentals of Buzzy AI v3 development.

**Time commitment**: 1-2 hours total

* Planning: 10 minutes
* Initial build with Buzzy AI: 15 minutes
* Review and refinement: 30 minutes
* Testing: 20 minutes
* Publishing: 10 minutes

**Difficulty**: 🟢 Beginner - Perfect for your first Buzzy app

**Prerequisites**:

* ✅ Buzzy account (sign up free at [buzzy.buzz](https://buzzy.buzz))
* ✅ Read [System Thinking](https://docs.buzzy.buzz/the-ultimate-guide-for-vibe-coding-an-application-with-ai/system-thinking) basics
* ✅ Reviewed [Buzzy AI v3 Guide](https://docs.buzzy.buzz/getting-started-with-buzzy/new-buzzy-ai-v3)
* ✅ 1-2 hours of focused time

**What you'll learn**:

* ✍️ Writing effective Buzzy AI v3 prompts with clear specifications
* 🔍 Reviewing Buzzy-generated Brief, Blueprint, Data, and Design tabs
* 🎨 Using Buzzy's visual editor in the Design tab
* 🧪 Testing your app in Buzzy's preview mode
* 🚀 Publishing your first Buzzy app to production
* 🔒 Implementing basic security with Viewers fields
* 🔄 Using Buzzy's Versions tab for rollback safety

**End result**: A working, published task management app you can share with others and use as a foundation for more complex projects.

## The Application We're Building

**Core features** (keep it simple for first app):

* 📋 View list of all your tasks
* ➕ Add new tasks with title and description
* ✅ Mark tasks as complete/incomplete
* 🗑️ Delete tasks you no longer need
* 🔒 Personal task list (each user sees only their own tasks)

**Visual preview** of what we're building:

```
┌─────────────────────────────────────┐
│  My Tasks                    [+ Add]│
├─────────────────────────────────────┤
│                                     │
│ ☐ Buy groceries                    │
│   Get milk, bread, eggs             │
│   Created: Oct 7, 2025              │
│                                     │
│ ☑ Call dentist                     │
│   Schedule teeth cleaning           │
│   Created: Oct 6, 2025              │
│                                     │
│ ☐ Finish project report            │
│   Due by end of week                │
│   Created: Oct 5, 2025              │
│                                     │
└─────────────────────────────────────┘

Click any task → See details → Mark complete or delete
```

**Data structure**:

{% @mermaid/diagram content="erDiagram
TASKS {
string title
string description
boolean completed
date created\_at
string viewers\_field
}" %}

**One Datatable**: Tasks

* title (text, required)
* description (long text, optional)
* completed (yes/no, defaults to no)
* created\_at (date, automatic)
* Viewers field (security - users see only their tasks)

**Three screens**:

1. **Task List** (main screen): Shows all your tasks in a list
2. **Add Task Form**: Enter title and description to create new task
3. **Task Detail**: View full task, mark complete, or delete

**User flow**:

{% @mermaid/diagram content="%%{init: {'theme':'default', 'themeVariables': {'fontSize':'16px'}}}%%
graph TD
A\[Open App] --> B\[Task List]
B --> C\[Click '+ Add']
C --> D\[Fill Form]
D --> E\[Save]
E --> B
B --> F\[Click Task]
F --> G\[Task Detail]
G --> H\[Mark Complete]
H --> B
G --> I\[Delete]
I --> B" %}

## Step 1: Planning (10 minutes)

Before prompting AI, think through what you need.

### Data Design

**Entity**: Tasks

**Fields**:

* title (text, required)
* description (text, optional)
* completed (boolean, defaults to false)
* created\_at (date, automatic)

**Relationships**: None (simple single table)

### User Flow

```
User opens app
  ↓
Sees list of tasks
  ↓
Can click "Add Task" → Form → Save → Back to list
  ↓
Can click on task → See details → Mark complete or Delete
  ↓
Completed tasks show differently (crossed out or grayed)
```

### Success Criteria

**The app works if**:

* I can add a new task
* I can see all my tasks
* I can mark tasks as complete
* I can delete tasks I don't need
* The UI is usable on mobile and desktop

## Step 2: Initial Build with Buzzy AI v3 (15 minutes)

### The Prompt

**In Buzzy Workspace, click "Create New App" and enter this prompt**:

```
Create a task list application with the following:

Data Model:
- Tasks Datatable with fields:
  - title (text field, required, max 100 characters)
  - description (long text field, optional)
  - completed (yes/no field, defaults to no)
  - created_at (date field, automatic)
  - Viewers field set to current user (so users only see their own tasks)

Screens:
1. Task List screen showing all tasks:
   - Display title and creation date for each task
   - Use display rules to show completed tasks with strikethrough
   - "Add New Task" button at top
   - Empty state message: "No tasks yet. Click 'Add New Task' to get started"

2. Add Task screen with form:
   - Title field (required)
   - Description field (optional)
   - Submit action to save the task
   - Cancel button to navigate back to list

3. Task Detail screen showing:
   - Task title (large heading)
   - Description text
   - Created date
   - "Mark Complete" button with action to update completed field (if not complete)
   - "Mark Incomplete" button with action to update completed field (if complete)
   - "Delete" button with confirmation popup
   - Back navigation to list

Design:
- Mobile-responsive layout
- Clean, simple interface
- Use card layout for task list items
- Primary color for action buttons

Security:
- Use Viewers field on Tasks to ensure users only see their own tasks

Make it simple and intuitive for a beginner.
```

{% hint style="info" %}
**Tip**: Notice how the prompt uses Buzzy-specific terms like "Datatable", "display rules", "Submit action", and "Viewers field". These help Buzzy AI understand exactly what you want.
{% endhint %}

### What Buzzy AI v3 Will Generate

**Buzzy will create**:

1. **Brief**: Summary of your app concept
2. **Blueprint**: List of screens and navigation flow
3. **Data Model**: Tasks Datatable with specified fields
4. **Design**: Initial screens with components and actions

**Processing time**:

* Buzzy AI typically takes 1-2 minutes to generate the full app structure
* You'll see progress as each section is completed
* Brief appears first, then Blueprint, then Data, then Design

**What you'll see in the Workspace**:

* **Brief tab**: Your app description
* **Blueprint tab**: Screen list and navigation
* **Data tab**: Tasks Datatable with fields
* **Design tab**: Visual screens you can edit

## Step 3: Review the Generated Structure (10 minutes)

### Check the Data Model

**Go to**: Data tab in Buzzy Workspace

**Verify the Tasks Datatable**:

* [ ] Tasks Datatable exists
* [ ] Title field is "text" type
* [ ] Description field is "long text" type
* [ ] Completed field is "yes/no" type
* [ ] created\_at field is "date" type
* [ ] Viewers field exists and is set to current user

{% hint style="info" %}
**Understanding Datatables**: In Buzzy, your data is stored in Datatables (formerly called Microapps). Each Datatable has fields, and the Viewers field controls who can see each record. [Learn more about Buzzy data model](https://docs.buzzy.buzz/the-building-blocks/datatables-fields-and-data/buzzy-datamodel-overview).
{% endhint %}

**If something's wrong**:

* **Option 1 - Use Buzzy AI chat**: "Update the Tasks Datatable to include a priority field"
* **Option 2 - Manual edit**: Click "Edit" in Data tab, add/modify fields directly
* **Recommended**: Use manual editing for small tweaks, it's faster than AI prompts

### Check the Blueprint

**Go to**: Blueprint tab in Buzzy Workspace

**Verify screens are listed**:

* [ ] Task list screen
* [ ] Add task screen
* [ ] Task detail screen
* [ ] Navigation flow makes sense

**If screens are missing**:

* **Use Buzzy AI chat**: "Create the missing task detail screen that shows full task information with title, description, created date, and buttons to mark complete or delete"

### Review Initial Screens in Design Tab

**Go to**: Design tab in Buzzy Workspace

**Check each screen**:

* [ ] Task list screen exists with Tasks Datatable component
* [ ] Add task screen has form with title and description fields
* [ ] Forms have Submit actions configured
* [ ] Navigation buttons exist

**Don't worry yet about**:

* Perfect styling (you'll polish this later)
* Every feature working exactly right
* Complete functionality (test in next step)

{% hint style="success" %}
**Buzzy's Visual Editor**: The Design tab is where you can see and edit your screens visually. You can drag components, adjust styling, configure actions, and set display rules—all without writing code.
{% endhint %}

## Step 4: Test the App in Preview Mode (15 minutes)

### Open Preview Mode

**In Buzzy Workspace**:

1. Look for the "Preview" or eye icon in the top toolbar
2. Click it to open your app in preview mode
3. The app opens in a new browser tab

{% hint style="info" %}
**Preview vs Live**: Preview mode lets you test your app before publishing. Changes you make in the Design tab appear immediately in preview mode after refreshing.
{% endhint %}

### Test Core Functionality

**Test 1: Add a Task**:

1. Click "Add New Task" button
2. Fill in: Title = "Test Task", Description = "This is a test"
3. Click the Submit button
4. **Expected**: Return to task list, see new task in the list
5. **If it doesn't work**: Check the Submit action in Design tab

**Test 2: View Task Details**:

1. Click on the task you just created
2. **Expected**: Navigate to task detail screen showing title, description, and buttons
3. **If it doesn't work**: Check navigation actions in Design tab

**Test 3: Mark Complete**:

1. From task detail, click "Mark Complete" button
2. Return to task list
3. **Expected**: Task appears with strikethrough (if display rule is set)
4. **If it doesn't work**: Check the action updates the completed field, and display rules show strikethrough

**Test 4: Delete Task**:

1. Open a task
2. Click "Delete" button
3. **Expected**: Confirmation popup, then task removed after confirming
4. **If it doesn't work**: Check the Delete action has a confirmation popup configured

**Test 5: Empty State**:

1. Delete all tasks
2. **Expected**: Message like "No tasks yet"
3. **If it doesn't work**: Add empty state message in Design tab

### Document Issues

**Keep a list of what needs fixing**:

```
Issues Found:
- [ ] Delete button doesn't show confirmation popup
- [ ] Completed tasks don't show strikethrough (display rule missing)
- [ ] Add button not prominent enough
- [ ] Mobile: form fields too small (check responsive settings)
- [ ] Task list doesn't refresh after adding task
```

{% hint style="warning" %}
**Common Issue**: If data doesn't appear in preview mode, make sure your Viewers field is set correctly in the Data tab. Records should be visible to the current user.
{% endhint %}

## Step 5: Iterate and Fix (30 minutes)

### Choose Your Fix Method

**Option 1 - Visual Editor (Faster for small fixes)**:

* Go to Design tab
* Click on the screen/component to edit
* Adjust settings, styling, actions directly
* Refresh preview to see changes

**Option 2 - Buzzy AI Chat (Better for multiple changes)**:

* Write specific prompts describing what to fix
* Buzzy AI updates the app structure
* Review changes in Design tab

{% hint style="success" %}
**When to use each method**:

* **Visual Editor**: Styling tweaks, adjusting single component, adding simple actions
* **Buzzy AI**: Adding new features, changing multiple screens, complex logic
  {% endhint %}

### Fix Critical Issues

**Example: Delete Confirmation (Use Visual Editor)**:

**Manual fix in Design tab**:

1. Go to Design tab → Task detail screen
2. Click on the Delete button
3. In button properties, find "Action" settings
4. Enable "Confirmation Popup"
5. Set popup text: "Are you sure you want to delete this task? This cannot be undone."
6. Save changes
7. Refresh preview and test

**Or use Buzzy AI prompt**:

```
On the task detail screen, update the Delete button to:
1. Show a confirmation popup when clicked
2. Popup text: "Are you sure you want to delete this task? This cannot be undone."
3. Popup should have "Cancel" and "Delete" buttons
4. Only delete the task if user confirms
```

**Example: Completed Task Display Rules (Use Visual Editor)**:

**Manual fix in Design tab**:

1. Go to Design tab → Task list screen
2. Click on the task title text component
3. Add a Display Rule: "When completed field = yes"
4. In this rule, set text style to strikethrough
5. Optionally add gray background to card when completed
6. Save and refresh preview

**Or use Buzzy AI prompt**:

```
On the task list screen, add display rules for completed tasks:
- When completed field is yes, show title with strikethrough
- Add gray background to completed task cards
- Add a green checkmark icon next to completed tasks
```

**Example: Mobile Responsive Improvements (Use Visual Editor)**:

**Manual fix in Design tab**:

1. Go to Design tab → Add task screen
2. Click on form fields
3. Adjust responsive settings for mobile:
   * Minimum touch target: 44px height
   * Font size: 16px (prevents zoom on iOS)
   * Padding: 12px
4. Make Submit button full width on mobile
5. Test in preview mode using browser mobile view

### Test After Each Fix

**Testing workflow**:

1. Make ONE change (visual editor or AI prompt)
2. Refresh preview mode
3. Test the specific thing you changed
4. Quick check that nothing else broke
5. Move to next fix

**Don't**:

* Make 5 changes and then test everything
* Assume AI prompts worked perfectly
* Skip testing in preview mode

**Do**:

* Test immediately after each change
* Use browser dev tools for mobile testing
* Verify fix addresses the issue
* Check related functionality still works

## Step 6: Polish with Visual Editor (20 minutes)

### Add Nice-to-Have Features

**Sort Options (Use Buzzy AI prompt)**:

```
Add sorting to the task list screen:
- Add a dropdown at top to sort by: Created date (newest first), Title (A-Z), Completed status
- Use Buzzy's sort functionality on the Datatable component
- Default sort: Created date, newest first
```

**Then in Design tab**:

* Find the Tasks Datatable component on list screen
* Configure "Sort" settings in component properties
* Add available sort fields

**Search (Use Visual Editor)**:

1. Go to Design tab → Task list screen
2. Add a "Search" component above the task list
3. Configure search to filter Tasks Datatable by title and description fields
4. Test in preview mode

**Task Count (Use Formula Fields)**:

1. Go to Data tab → Tasks Datatable
2. You can create calculated fields or use Buzzy's count features
3. Or add text components in Design tab showing count of records

{% hint style="info" %}
**Buzzy's Built-in Features**: Buzzy provides sort, search, and filter capabilities on Datatable components. Check the component properties in Design tab to enable these features without custom code.
{% endhint %}

### Visual Polish Using Theme and Design Tab

**Improve styling in Design tab**:

1. **Task cards**:
   * Click on task card component
   * Adjust border radius for rounded corners
   * Add box shadow for depth
   * Increase margin between cards
2. **Consistent spacing**:
   * Select components and adjust padding settings
   * Use Theme tab for app-wide spacing standards
3. **Color scheme**:
   * Go to Theme tab
   * Set primary color for buttons and highlights
   * Ensure text colors have good contrast
4. **Hover effects** (for web):
   * In component properties, add hover state styling
   * Slight elevation on hover for cards

**Or use Buzzy AI for multiple styling changes**:

```
Update task list styling:
- Add 8px border radius to task cards
- Add subtle shadow: 0 2px 4px rgba(0,0,0,0.1)
- Increase spacing between cards to 16px
- Use consistent 16px padding throughout
- Primary color for action buttons should be from theme
```

## Step 7: Final Testing (20 minutes)

### Complete Test Suite

**Test all features**:

* [ ] Add task
* [ ] View task
* [ ] Edit task (if you added this)
* [ ] Mark complete
* [ ] Mark incomplete
* [ ] Delete task
* [ ] Search (if added)
* [ ] Sort (if added)

**Test edge cases**:

* [ ] Add task with very long title (test max length)
* [ ] Add task with empty description
* [ ] Try to save task with no title (should prevent)
* [ ] Delete last task (see empty state)
* [ ] Add task with special characters: `&, <, >, ", '`

**Test on different devices**:

* [ ] Desktop browser
* [ ] Mobile browser (or use browser dev tools mobile view)
* [ ] Different screen sizes

**Test different scenarios**:

* [ ] Start with no tasks (empty state)
* [ ] Have many tasks (10+)
* [ ] Mix of completed and incomplete
* [ ] Very long task titles/descriptions

### Performance Check

**Verify**:

* [ ] App loads quickly
* [ ] No lag when adding tasks
* [ ] Smooth navigation between screens
* [ ] No errors in browser console

## Step 8: Publish Your Buzzy App (15 minutes)

### Pre-Publication Checklist

* [ ] All features work in preview mode
* [ ] No obvious bugs
* [ ] Looks good on mobile and desktop (test browser responsive mode)
* [ ] Tested with multiple tasks and edge cases
* [ ] Security: Viewers field set correctly on Tasks Datatable
* [ ] Happy with the design

### Publish Your App on Buzzy

**In Buzzy Workspace**:

1. Go to **Publish tab**
2. Choose deployment option:
   * **Buzzy Hosted** (recommended for first app): Free hosting on Buzzy's infrastructure
   * **Custom Domain**: If you have your own domain configured
3. Review app settings (name, icon, etc.)
4. Click "Publish" button
5. Wait for deployment (typically 1-2 minutes)
6. Copy your live app URL

{% hint style="success" %}
**Buzzy Hosting**: Your app runs on Buzzy's managed Kubernetes infrastructure with automatic scaling. No server maintenance required! [Learn more about deployment](https://docs.buzzy.buzz/working-with-buzzy/buzzy-deployment-and-app-stores).
{% endhint %}

### Test Published Version

**Important**: Always test the live published version

* [ ] Open the published URL in a new browser window
* [ ] Create a new account or log in
* [ ] Test all features again (add, view, complete, delete tasks)
* [ ] Verify data saves correctly
* [ ] Test on actual mobile device if possible
* [ ] Share with a friend to test multi-user functionality

**Differences from Preview**:

* Published version uses live database
* Multiple users can access simultaneously
* Performance may differ slightly from preview

## What You've Learned

**Core Buzzy skills**:

* ✅ Writing effective Buzzy AI v3 prompts
* ✅ Reviewing generated Brief, Blueprint, Data, and Design
* ✅ Using Buzzy's visual Design editor for refinements
* ✅ Testing in preview mode
* ✅ Publishing a Buzzy app

**Buzzy development patterns**:

* ✅ Start with clear Datatable design
* ✅ Use Buzzy-specific terms in prompts (Datatable, display rules, actions)
* ✅ Test immediately in preview after changes
* ✅ Fix issues using visual editor or AI prompts
* ✅ Understand when to use visual editor vs AI
* ✅ Polish after core features work

**Key Buzzy concepts used**:

* ✅ Datatables and fields
* ✅ Viewers field for security
* ✅ Display rules for conditional styling
* ✅ Submit actions for forms
* ✅ Navigation actions between screens
* ✅ Confirmation popups for destructive actions

## Common Issues and Solutions

### Issue: Buzzy AI Didn't Create All Screens

**Solution 1 - Prompt Buzzy AI**:

```
Create the task detail screen with:
- Large task title heading
- Description text
- Created date display
- "Mark Complete" button that updates the completed field
- "Delete" button with confirmation popup
- Back button to navigate to task list
```

**Solution 2 - Create manually in Design tab**:

* Click "Add Screen" in Design tab
* Build the screen using components
* Configure actions and navigation

### Issue: Styling Not What You Want

**Solution 1 - Use visual editor** (recommended for styling):

1. Go to Design tab
2. Click the component you want to style
3. Adjust properties: colors, sizes, spacing, borders
4. Use Theme tab for app-wide colors and fonts

**Solution 2 - Prompt Buzzy AI**:

```
Update the task card component styling:
- Background color: white
- Border: 1px solid #e0e0e0
- Border radius: 8px
- Padding: 16px
- Box shadow: 0 2px 4px rgba(0,0,0,0.1)
```

### Issue: Actions Don't Work (Button Does Nothing)

**Solution - Check action configuration**:

1. Go to Design tab
2. Click the button/component
3. Check "Actions" section in properties
4. Verify action is configured (e.g., Submit, Navigate, Update)
5. Check action parameters (which field to update, where to navigate)

**Common action fixes**:

* **Submit not working**: Check form has field mappings to Datatable
* **Delete not working**: Check action targets correct record
* **Navigation not working**: Verify screen name is correct

### Issue: Data Not Showing in Preview

**Solution - Check Viewers field**:

1. Go to Data tab
2. Click on Tasks Datatable
3. Find "Viewers" field
4. Set to "Current User" or appropriate viewer setting
5. This ensures users can see their own records

[Learn more about security](https://docs.buzzy.buzz/the-building-blocks/datatables-fields-and-data/security-and-access-control)

### Issue: Too Complex for First Try

**Solution**: Simplify scope

* Remove optional features (search, sort, categories)
* Focus on core CRUD: Create, Read, Update (mark complete), Delete
* Skip advanced styling initially
* Get basic functionality working first
* Add features one at a time later

{% hint style="warning" %}
**Remember**: You can always use Buzzy's Versions tab to save your current state, experiment, and rollback if needed. Don't be afraid to try things!
{% endhint %}

## Next Steps

**Now that you've built your first Buzzy app**:

### Extend This App

Add more features to your task list (good practice):

* **Due dates**: Add date field, display rules for overdue tasks
* **Priority levels**: Add dropdown field (High/Medium/Low), sort by priority
* **Categories**: Add text field or create Categories Datatable with Linked Table Field
* **Task lists**: Create Lists Datatable, use Subtable for tasks within lists
* **Recurring tasks**: Add yes/no field and date logic

**Practice using both**:

* Buzzy AI prompts for new features
* Visual editor for refinements

### Try a New Project

Build something different to practice Buzzy concepts:

* **Recipe collection**: Images, ingredients (Subtable), categories (Linked Table Field)
* **Book tracking**: Rating fields, reading status, notes
* **Expense tracker**: Amount fields, categories, date ranges, calculations
* **Contact list**: Multiple phone numbers (Subtable), tags (Linked Table Field)

### Learn More Advanced Topics

**Ready for more complex apps?**

* [External API Integration](https://docs.buzzy.buzz/the-ultimate-guide-for-vibe-coding-an-application-with-ai/building-examples/external-api-integration) - Connect to external services using Buzzy Functions
* [AI-Powered Features](https://docs.buzzy.buzz/the-ultimate-guide-for-vibe-coding-an-application-with-ai/building-examples/ai-powered-app) - Add AI capabilities via Buzzy Functions
* [Data Design](https://docs.buzzy.buzz/the-ultimate-guide-for-vibe-coding-an-application-with-ai/design-fundamentals/data-design) - Master Subtables and Linked Table Fields

**Want to understand Buzzy better?**

* [Buzzy Data Model Overview](https://docs.buzzy.buzz/the-building-blocks/datatables-fields-and-data/buzzy-datamodel-overview)
* [Buzzy AI v3 Tips](https://docs.buzzy.buzz/working-with-buzzy/buzzy-ai/tips)
* [Buzzy Project Guide](https://docs.buzzy.buzz/working-with-buzzy/buzzy-project-guide)

{% hint style="success" %}
**Congratulations!** You've built and published your first Buzzy app. You now understand the core Buzzy AI v3 workflow: prompting, reviewing generated structure, using the visual editor, and testing. Every future Buzzy project will use these same patterns—you'll just apply them to more complex problems.
{% endhint %}