Hello World App
Build your first complete Buzzy application from scratch. Follow this step-by-step tutorial to create a functional task list app and learn Buzzy AI v3 fundamentals.
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)
✅ Read System Thinking basics
✅ Reviewed Buzzy AI v3 Guide
✅ 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 deleteData structure:
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:
Task List (main screen): Shows all your tasks in a list
Add Task Form: Enter title and description to create new task
Task Detail: View full task, mark complete, or delete
User flow:
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.What Buzzy AI v3 Will Generate
Buzzy will create:
Brief: Summary of your app concept
Blueprint: List of screens and navigation flow
Data Model: Tasks Datatable with specified fields
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:
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:
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:
Don't worry yet about:
Perfect styling (you'll polish this later)
Every feature working exactly right
Complete functionality (test in next step)
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.
Step 4: Test the App in Preview Mode (15 minutes)
Open Preview Mode
In Buzzy Workspace:
Look for the "Preview" or eye icon in the top toolbar
Click it to open your app in preview mode
The app opens in a new browser tab
Test Core Functionality
Test 1: Add a Task:
Click "Add New Task" button
Fill in: Title = "Test Task", Description = "This is a test"
Click the Submit button
Expected: Return to task list, see new task in the list
If it doesn't work: Check the Submit action in Design tab
Test 2: View Task Details:
Click on the task you just created
Expected: Navigate to task detail screen showing title, description, and buttons
If it doesn't work: Check navigation actions in Design tab
Test 3: Mark Complete:
From task detail, click "Mark Complete" button
Return to task list
Expected: Task appears with strikethrough (if display rule is set)
If it doesn't work: Check the action updates the completed field, and display rules show strikethrough
Test 4: Delete Task:
Open a task
Click "Delete" button
Expected: Confirmation popup, then task removed after confirming
If it doesn't work: Check the Delete action has a confirmation popup configured
Test 5: Empty State:
Delete all tasks
Expected: Message like "No tasks yet"
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 taskCommon 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.
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
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
Fix Critical Issues
Example: Delete Confirmation (Use Visual Editor):
Manual fix in Design tab:
Go to Design tab → Task detail screen
Click on the Delete button
In button properties, find "Action" settings
Enable "Confirmation Popup"
Set popup text: "Are you sure you want to delete this task? This cannot be undone."
Save changes
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 confirmsExample: Completed Task Display Rules (Use Visual Editor):
Manual fix in Design tab:
Go to Design tab → Task list screen
Click on the task title text component
Add a Display Rule: "When completed field = yes"
In this rule, set text style to strikethrough
Optionally add gray background to card when completed
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 tasksExample: Mobile Responsive Improvements (Use Visual Editor):
Manual fix in Design tab:
Go to Design tab → Add task screen
Click on form fields
Adjust responsive settings for mobile:
Minimum touch target: 44px height
Font size: 16px (prevents zoom on iOS)
Padding: 12px
Make Submit button full width on mobile
Test in preview mode using browser mobile view
Test After Each Fix
Testing workflow:
Make ONE change (visual editor or AI prompt)
Refresh preview mode
Test the specific thing you changed
Quick check that nothing else broke
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 firstThen 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):
Go to Design tab → Task list screen
Add a "Search" component above the task list
Configure search to filter Tasks Datatable by title and description fields
Test in preview mode
Task Count (Use Formula Fields):
Go to Data tab → Tasks Datatable
You can create calculated fields or use Buzzy's count features
Or add text components in Design tab showing count of records
Visual Polish Using Theme and Design Tab
Improve styling in Design tab:
Task cards:
Click on task card component
Adjust border radius for rounded corners
Add box shadow for depth
Increase margin between cards
Consistent spacing:
Select components and adjust padding settings
Use Theme tab for app-wide spacing standards
Color scheme:
Go to Theme tab
Set primary color for buttons and highlights
Ensure text colors have good contrast
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 themeStep 7: Final Testing (20 minutes)
Complete Test Suite
Test all features:
Test edge cases:
Test on different devices:
Test different scenarios:
Performance Check
Verify:
Step 8: Publish Your Buzzy App (15 minutes)
Pre-Publication Checklist
Publish Your App on Buzzy
In Buzzy Workspace:
Go to Publish tab
Choose deployment option:
Buzzy Hosted (recommended for first app): Free hosting on Buzzy's infrastructure
Custom Domain: If you have your own domain configured
Review app settings (name, icon, etc.)
Click "Publish" button
Wait for deployment (typically 1-2 minutes)
Copy your live app URL
Buzzy Hosting: Your app runs on Buzzy's managed Kubernetes infrastructure with automatic scaling. No server maintenance required! Learn more about deployment.
Test Published Version
Important: Always test the live published version
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 listSolution 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):
Go to Design tab
Click the component you want to style
Adjust properties: colors, sizes, spacing, borders
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:
Go to Design tab
Click the button/component
Check "Actions" section in properties
Verify action is configured (e.g., Submit, Navigate, Update)
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:
Go to Data tab
Click on Tasks Datatable
Find "Viewers" field
Set to "Current User" or appropriate viewer setting
This ensures users can see their own records
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
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!
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 - Connect to external services using Buzzy Functions
AI-Powered Features - Add AI capabilities via Buzzy Functions
Data Design - Master Subtables and Linked Table Fields
Want to understand Buzzy better?
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.
Last updated