Version: 2.0
Last Updated: December 2025
Workshop Duration: 3.5 Hours
Target Audience: Non-technical educators and
trainers
Welcome to the future of software creation! This workshop teaches you how to build real, working mobile apps without writing a single line of code.
You Will Learn To: - ✅ Build functional mobile applications - ✅ Store and manage data - ✅ Integrate with cloud databases - ✅ Create professional user interfaces - ✅ Troubleshoot and iterate on your apps - ✅ Teach these skills to others
You Will NOT Learn: - ❌ Programming languages - ❌ Complex syntax and rules - ❌ Traditional software development - ❌ Advanced technical jargon
Traditional Development: “I need to learn programming languages, frameworks, debugging tools, version control, testing methodologies…”
Vibe Coding with eMOBIQ AI: “I need to explain clearly what I want the app to do.”
That’s it. That’s the whole paradigm shift.
Technical Requirements: - Computer or tablet with internet - Modern web browser - eMOBIQ AI account - Supabase account (free)
Personal Requirements: - Ability to explain ideas clearly - Willingness to iterate and refine - Patience with the learning process - Curiosity and experimentation mindset
What You DON’T Need: - Programming background - Technical degree - Math skills - Previous app development experience
Phase 1: Foundation (40 minutes) - Understanding the concepts - First simple app - Local data storage
Phase 2: Cloud Integration (80 minutes) - Setting up Supabase - Moving data to cloud - Understanding shared databases
Phase 3: Hands-On Building (50 minutes) - Team app development challenge - Real-world use cases - Problem-solving and iteration
Phase 4: Polish & Present (40 minutes) - Refining your apps - Team presentations - Next steps discussion
By the end of this workshop, you will have: - ✅ Built 3+ working mobile apps - ✅ Successfully saved data to cloud database - ✅ Searched and filtered data - ✅ Created forms with validation - ✅ Demonstrated your app to others - ✅ Confidence to teach these skills
Vibe Coding is the practice of building software by expressing your intent in natural language and letting AI handle the technical implementation.
The Three Core Principles:
Traditional Programming:
def calculate_total(items):
total = 0
for item in items:
total += item['price'] * item['quantity']
return totalVibe Coding:
Calculate the total cost by multiplying price and quantity for each item, then sum all results.Both achieve the same result, but vibe coding lets you focus on what you want, not how to code it.
Your first attempt won’t be perfect—and that’s okay!
The Improvement Cycle:
1. Describe what you want → AI builds it
2. Test it → Find what needs improvement
3. Describe the improvement → AI updates it
4. Repeat until satisfiedExample Journey: - First: “Create a registration form” - Then: “Add email validation” - Then: “Make submit button disabled until form is valid” - Then: “Add success message after submission” - Finally: “Clear form after successful submission”
Each step makes it better. You don’t need to specify everything upfront.
Think of AI as your technical partner: - You: Provide the vision and direction - AI: Handle the technical details - Together: Build something neither could do alone
Traditional: Developer controls every detail Vibe Coding: Human guides, AI executes
Recent Breakthroughs: - Large Language Models (LLMs) can understand human intent - AI can generate working code from descriptions - Platforms like eMOBIQ translate prompts to apps - Natural language processing reached critical capability
What Changed: - 2010s: “Teach computer to understand humans” → Failed - 2020s: “Train AI on millions of code examples” → Breakthrough
Now AI has seen enough code to understand what you mean when you say “create a form with validation.”
Step 1: Envision What do you want the app to do? Who will use it? What problem does it solve?
Step 2: Describe Write clear instructions in plain language about what you want.
Step 3: Test Run the app. Does it work as expected?
Step 4: Refine What needs improvement? Describe the changes clearly.
Step 5: Repeat Continue until satisfied.
Misconception 1: “AI will make mistakes, so I need to know coding to fix them.” Reality: You fix mistakes by clarifying your instructions, not by editing code.
Misconception 2: “Vibe coding is just for simple toys.” Reality: You can build production-ready apps with complex features.
Misconception 3: “I need to use special prompt formats or keywords.” Reality: Normal, clear language works best.
Misconception 4: “The AI knows what I want without me saying it.” Reality: You must be explicit. AI isn’t psychic.
Misconception 5: “Once built, I can’t change it.” Reality: Apps are infinitely modifiable through new prompts.
Every app, no matter how complex, is built on three foundations: 1. Screens (what users see) 2. Data (information stored and displayed) 3. Actions (what happens when users interact)
Screens are like pages in a book. Each screen serves a purpose.
Common Screen Types:
| Screen Type | Purpose | Real Example |
|---|---|---|
| Form Screen | Collect information | Registration form, survey |
| List Screen | Show multiple items | Contact list, product catalog |
| Detail Screen | Show one item in depth | Student profile, product details |
| Dashboard | Overview/statistics | Homepage with stats |
| Settings | Configure preferences | App settings |
Navigation Between Screens: - Tapping buttons - Swiping gestures - Tab bars at bottom - Menu drawers from side
Example App Structure:
Mobile App
├── Home Screen (dashboard)
├── Students Screen (list)
│ └── Student Detail Screen (detail)
│ └── Edit Student Screen (form)
└── Add Student Screen (form)Data is any information your app stores or displays.
The Three Places Data Lives:
1. Local Storage (Device) - Like a notebook in your pocket - Only accessible on this device - Works offline - Fast access - Lost if app deleted
Use For: - Settings and preferences - Draft content - Temporary data - Learning and practice
Examples: - Notes app - Calculator history - Game progress (offline games)
2. Cloud Database (Supabase) - Like a shared filing cabinet online - Accessible from any device - Requires internet - Shared among users - Backed up automatically
Use For: - Multi-user apps - Data that needs to sync - Important information - Collaborative tools
Examples: - Student management system - Inventory tracker - Team task manager
3. External System (API) - Like connecting to another company’s system - Data you don’t control - Requires authentication - Integration with existing software
Use For: - Connecting to ERP systems - Getting data from CRM - Third-party services - Enterprise integration
Examples: - Weather data from API - Customer data from Salesforce - Inventory from SAP - Orders from Shopify
Comparison Table:
| Feature | Local Storage | Cloud Database | External API |
|---|---|---|---|
| Speed | ⚡⚡⚡ Instant | ⚡⚡ Fast | ⚡ Varies |
| Offline | ✅ Yes | ❌ No | ❌ No |
| Sharing | ❌ No | ✅ Yes | ✅ Yes |
| Backup | ❌ No | ✅ Yes | ✅ Yes |
| Setup | ⭐ Easy | ⭐⭐ Medium | ⭐⭐⭐ Complex |
| Control | 🎯 Full | 🎯 Full | 🔒 Limited |
| Best For | Learning | New apps | Integration |
Actions are things that happen in response to user behavior.
Common Actions:
| Action | What It Does | Example |
|---|---|---|
| Submit | Save data | Submit form |
| Navigate | Go to different screen | Open details |
| Update | Change existing data | Edit profile |
| Delete | Remove data | Delete student |
| Search | Find specific data | Search students |
| Filter | Show subset of data | Show active only |
| Sort | Reorder data | Sort by name |
| Validate | Check if data correct | Email format |
| Calculate | Perform computation | Sum totals |
| Refresh | Reload latest data | Pull to refresh |
Action Flow Example:
USER ACTION → APP PROCESSES → UPDATE DATA → DISPLAY RESULT
(Tap) (Validate) (Save DB) (Show success)Understanding how data moves through your app:
Simple Flow (Local):
1. User enters data in form
2. User clicks submit
3. App validates data
4. App saves to local storage
5. App shows success message
6. App updates displayCloud Flow (Supabase):
1. User enters data in form
2. User clicks submit
3. App validates data
4. App sends to Supabase (internet)
5. Supabase saves to database
6. Supabase confirms success
7. App receives confirmation
8. App shows success message
9. App updates displayThe Key Difference: Local is immediate; Cloud involves network communication.
Even though AI builds your app, understanding these concepts helps you: - Write better prompts (you know what to ask for) - Troubleshoot issues (you understand what’s happening) - Design better apps (you know what’s possible) - Communicate clearly (you use correct terminology)
You don’t need to know how to build these components—just what they are and when to use them.
What is Local Storage?
Imagine a notebook that’s always in your pocket. You can write in it anytime, and the notes stay there until you erase them. That’s local storage.
Technical Definition: Browser or device storage that persists data locally without requiring a server or internet connection.
Characteristics: - ✅ Data stays on the device - ✅ Works offline - ✅ Fast access (no network delay) - ✅ Simple to implement - ❌ Can’t share between users - ❌ Limited storage space (~5-10MB typically) - ❌ Lost if app/browser data cleared
When to Use Local Storage: - Learning and practice - Single-user apps - Offline-first apps - Settings and preferences - Draft/temporary content - Quick prototypes
Let’s build a simple but functional app together.
App Purpose: Track visitors to your office or school.
Features: - Form to register visitor - List of all registered visitors - Ability to delete visitors
Your First Prompt:
Create a simple mobile app to register visitors.
The app should have a form with these fields:
- Name (text input, required)
- Email (email input, required)
- Purpose of Visit (text input, required)
Add a submit button labeled "Register Visitor".
Store the visitor data in local storage.
After successful submission:
- Show success message "Visitor registered successfully!"
- Clear the form
Use a clean, professional design with:
- Primary color: #2563eb (blue)
- White background
- Proper spacing between elementsExpected Result: - Form appears with three input fields - Submit button at bottom - Fill out form → Click submit - Success message appears - Form fields clear - Data saved to device
What Just Happened: The AI created: - HTML form structure - Input validation - Submit handler - Local storage save operation - Success feedback - Form reset logic
All from your natural language description!
Now let’s display the registered visitors.
Your Second Prompt:
Add a new section below the form that displays all registered visitors.
Display each visitor as a card showing:
- Name (large, bold)
- Email (medium, blue)
- Purpose (smaller text)
- Registration time (small, gray text)
Show visitors in order from newest to oldest.
If no visitors registered yet, show message:
"No visitors registered yet"Expected Result: - Below the form, you now see a list - If you’ve already registered visitors, they appear here - Each visitor is nicely formatted in a card - Most recent visitor at top
Test It: 1. Register a new visitor 2. Watch it appear at top of list immediately 3. Register another 4. See it appear above the first one
Let’s add the ability to remove visitors.
Your Third Prompt:
Add a delete button to each visitor card.
The button should:
- Appear on the right side of each card
- Be red colored with a trash icon or "×" symbol
- When clicked, show confirmation dialog:
"Are you sure you want to delete [visitor name]?"
- If user confirms: remove visitor from list and local storage
- If user cancels: do nothing
After deletion, show message: "Visitor removed"Expected Result: - Each visitor card now has a delete button - Click delete → confirmation dialog appears - Confirm → visitor disappears from list - Data removed from local storage - Refresh page → visitor still gone (data persisted)
Let’s polish the app with validation and feedback.
Your Fourth Prompt:
Improve the form with better validation:
1. Make email field validate format
- Show error "Please enter a valid email" if invalid
- Error appears in red below the field
2. Make all fields required
- Show error "This field is required" if empty on submit
- Prevent submission if any field invalid
3. Disable submit button if form is invalid
- Button should be gray when disabled
- Button should be blue when enabled
4. Add a visitor count
- Above the list, show: "Total Visitors: X"
- Update count when visitors added/removed
5. Add a "Clear All" button
- Below visitor count
- Ask for confirmation before clearing all
- Message: "Are you sure you want to delete all X visitors?"Expected Result: - Form won’t submit if fields empty - Email validation works - Submit button only enabled when form valid - Visitor count displays correctly - Clear All button works with confirmation
You Just Created: - A complete CRUD app (Create, Read, Delete) - Form with validation - Data persistence - User feedback - Error handling - Confirmation dialogs
Without writing: - A single line of code - HTML, CSS, or JavaScript - Database queries - Validation logic
The Power of Vibe Coding: You focused on what the app should do, not how to build it.
Test Checklist: - [ ] Can add visitor with all fields filled - [ ] Can’t submit with empty fields - [ ] Email validation catches invalid emails - [ ] Visitor appears in list immediately - [ ] Visitor count updates - [ ] Can delete individual visitor - [ ] Deletion asks for confirmation - [ ] Can clear all visitors - [ ] Data persists after page refresh - [ ] No errors in browser console
Issue: “Data disappears when I refresh”
This means local storage isn’t saving properly.
Fix Prompt:
The data is not persisting after page refresh.
Ensure that:
1. When form is submitted, data is saved to localStorage with key "visitors"
2. When page loads, data is loaded from localStorage key "visitors"
3. Data is stored as JSON string: JSON.stringify(data)
4. Data is parsed when loaded: JSON.parse(storedData)
5. If no data exists, use empty array: []
Add console logging:
- "Saving to localStorage: " + JSON.stringify(data)
- "Loading from localStorage: " + storedData
- "Parsed data: " + JSON.stringify(parsedData)
This will help debug the issue.Issue: “Submit button always disabled”
Fix Prompt:
The submit button remains disabled even when form is valid.
Debug the validation:
1. Log validation state for each field
2. Log overall form validity
3. Ensure button enabled when all fields valid
4. Check that validation updates on input changeIssue: “Visitors not sorted correctly”
Fix Prompt:
Visitors are not displaying in correct order (newest first).
Fix the sorting:
1. Add timestamp to each visitor when registered
2. Sort visitors by timestamp in descending order
3. Most recent visitor should be at topLocal Storage Limitations: - ❌ Can’t share data between users - ❌ Lost if app deleted or device changed - ❌ Limited storage space - ❌ No collaboration possible - ❌ No backup
Cloud Database Benefits: - ✅ Share data across users - ✅ Access from any device - ✅ Data safely backed up - ✅ Real-time collaboration - ✅ Much larger storage capacity - ✅ Professional solution
When to Use Cloud: - Multi-user applications - Data that needs to sync - Important information - Collaborative tools - Production applications - Anything beyond personal use
What is Supabase?
Supabase is like “Google Sheets meets Database” - it’s a cloud database that’s visual, easy to set up, and has a simple API for your apps.
Why Supabase for Learning: - ✅ Free tier (no credit card) - ✅ Visual dashboard (see your data) - ✅ Instant setup - ✅ JavaScript library (AI can use it) - ✅ Real-time updates - ✅ Built-in authentication (future feature)
Supabase vs Traditional Database:
| Feature | Traditional DB | Supabase |
|---|---|---|
| Setup time | Hours/days | Minutes |
| Server required | Yes | No (managed) |
| Visual interface | Separate tool | Built-in |
| API | Build yourself | Automatic |
| Learning curve | Steep | Gentle |
| Cost | $ setup + hosting | Free tier |
Prerequisites: - Computer with internet - Email address or GitHub account - Modern web browser
Step-by-Step Setup:
Step 1: Create Account (2 minutes) 1. Go to: https://supabase.com 2. Click “Start your project” 3. Sign up with GitHub (easiest) or email 4. Verify email if using email signup
Step 2: Create Organization (1 minute) 1. Enter organization name (your name) 2. Click “Create organization”
Step 3: Create Project (3 minutes setup time) 1.
Click “New Project” 2. Fill in details: - Name:
visitor-management - Database Password:
Create strong password - ⚠️ SAVE THIS PASSWORD SOMEWHERE SAFE - You’ll
need it later - Can’t recover if lost - Region: Choose
closest to you - Singapore → Singapore - Europe → Ireland/Frankfurt - US
→ US East/West - Pricing: Free (default) 3. Click
“Create new project” 4. Wait 2-3 minutes (making coffee time!) 5.
Project ready when green indicator shows
Step 4: Get Your Credentials (1 minute) 1. In your
project, click Settings (gear icon) 2. Click “API” 3. You’ll see: -
Project URL: https://xxxxx.supabase.co -
anon public key: eyJhbGc... (very long) 4.
Copy both and save in a text file
Save as: supabase-credentials.txt
PROJECT_URL=https://xxxxx.supabase.co
ANON_KEY=eyJhbGc...very-long-key...
⚠️ KEEP THIS FILE SAFE - DON'T SHAREStep 1: Open Table Editor 1. Click “Table Editor” in left sidebar 2. Click “Create a new table”
Step 2: Name Your Table
Table name: visitors
Description: Stores visitor registration dataStep 3: Enable Row Level Security
✅ Enable Row Level Security (RLS)(We’ll configure this in next step)
Step 4: Add Columns
Supabase starts with two columns: - id (UUID, primary
key) - created_at (timestamp)
Add these columns:
Column 1: name - Click “+ Add column” - Name:
name - Type: text - Nullable: ❌ (unchecked -
required)
Column 2: email - Name: email - Type:
text - Nullable: ❌
Column 3: purpose - Name: purpose -
Type: text - Nullable: ❌
Step 5: Save Table Click “Save” - your table is created!
Your Table Structure:
visitors
├── id (uuid) - Unique ID, auto-generated
├── name (text) - Visitor name
├── email (text) - Visitor email
├── purpose (text) - Purpose of visit
└── created_at (timestamptz) - Registration time, auto-generatedWhat is RLS? Row Level Security controls who can access what data.
For This Demo (Learning Only): We’ll allow anyone with the key to do anything.
⚠️ WARNING: Don’t use this in production!
Step 1: Open RLS Panel 1. In Table Editor, click on
visitors table 2. Click “RLS” tab 3. RLS is enabled (you
should see toggle ON)
Step 2: Create Policy 1. Click “New Policy” 2.
Choose “Create a policy from scratch” 3. Fill in: - Policy
name: Allow all operations - Target
roles: public - Policy
definition: ALL operations - Check all boxes: - ✅
SELECT - ✅ INSERT - ✅ UPDATE - ✅ DELETE - For all, use expression:
true
What This Does: Allows anyone with your anon key to create, read, update, and delete visitors.
Production Alternative: In real apps, you’d use authentication and user-specific policies like: - Users can only see their own data - Admins can see all data - Teachers can see their students only - Etc.
Let’s add test data so you can verify everything works.
Step 1: Insert Row 1. In Table Editor, on
visitors table 2. Click “Insert” → “Insert row”
Step 2: Fill Data
name: John Smith
email: john@example.com
purpose: Meeting with Dr. LeeStep 3: Save Click “Save” - row appears!
Repeat for 2-3 more visitors
Why Add Sample Data: - Test that table works - Have data to fetch in app - Verify queries return results - Learn how data looks
Now the exciting part - connecting your visitor app to Supabase!
Step 1: Install Supabase Library
Prompt:
Add the Supabase JavaScript library to this app.
Import from CDN:
https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2
Make it available globally.
Log "Supabase library loaded" when ready.Step 2: Initialize Supabase Connection
Prompt:
Initialize Supabase client with these credentials:
URL: [paste your PROJECT_URL]
Key: [paste your ANON_KEY]
Store the client globally as: supabase
Add a "Test Connection" button on the page.
When clicked:
1. Try to fetch one record from visitors table
2. If successful: show green alert "✅ Connected to Supabase!"
3. If failed: show red alert "❌ Connection failed: [error]"
4. Log result to console
Test query:
const { data, error } = await supabase
.from('visitors')
.select('*')
.limit(1)Step 3: Test the Connection 1. Click “Test Connection” button 2. Should see: ✅ Connected to Supabase! 3. Console should show your sample visitor
If Connection Fails:
Check these: - [ ] URL is correct (starts with https://) - [ ] Key is correct (very long string starting with eyJ) - [ ] No extra spaces in URL or key - [ ] Internet connection working - [ ] Supabase project is active (check dashboard)
Let’s update your visitor registration app to use Supabase instead of local storage.
Prompt 1: Update Form Submission
Update the visitor registration form to save data to Supabase instead of local storage.
When form is submitted:
1. Validate fields (keep existing validation)
2. Prepare data object:
{
name: [from form],
email: [from form],
purpose: [from form]
}
3. Save to Supabase visitors table:
const { data, error } = await supabase
.from('visitors')
.insert([visitorData])
.select()
4. Handle response:
- If successful:
* Show success message "✅ Visitor registered!"
* Clear form
* Refresh visitor list
- If error:
* Show error message "❌ Could not register: [error]"
* Log error to console
* Keep form data
5. Show loading indicator while saving:
- Disable submit button
- Show "Registering..." text on buttonTest This: 1. Fill out form 2. Click submit 3. See loading state briefly 4. See success message 5. Go to Supabase dashboard 6. Open visitors table 7. See your new visitor row!
Prompt 2: Load Visitors from Supabase
Update the visitor list to load data from Supabase instead of local storage.
When page loads:
1. Show loading indicator: "Loading visitors..."
2. Fetch all visitors from Supabase:
const { data, error } = await supabase
.from('visitors')
.select('*')
.order('created_at', { ascending: false })
3. Handle response:
- If successful:
* Display visitors in list
* Show count: "Total Visitors: X"
* Hide loading indicator
- If error:
* Show error message
* Log error to console
- If no visitors:
* Show "No visitors registered yet"
4. Update list whenever:
- Page first loads
- New visitor added
- Visitor deletedTest This: 1. Refresh page 2. See loading indicator briefly 3. See visitors from Supabase (including ones you added in dashboard) 4. Count should match
Prompt 3: Update Delete to Remove from Supabase
Update the delete functionality to remove visitors from Supabase.
When delete button clicked:
1. Show confirmation (keep existing)
2. If confirmed:
- Show loading state
- Delete from Supabase:
const { error } = await supabase
.from('visitors')
.delete()
.eq('id', visitorId)
- Handle response:
* If successful:
- Remove from display immediately
- Show "Visitor removed"
- Update count
* If error:
- Show error message
- Keep visitor in list
- Log error to consoleTest This: 1. Click delete on a visitor 2. Confirm deletion 3. See loading state 4. Visitor disappears 5. Check Supabase dashboard 6. Visitor row is gone!
What You Just Achieved: - ✅ Set up cloud database - ✅ Created database table - ✅ Configured security - ✅ Connected app to cloud - ✅ Saved data to cloud - ✅ Loaded data from cloud - ✅ Deleted data from cloud
Your App Now: - Stores data in professional database - Can be accessed from any device - Data is backed up automatically - Multiple users can use simultaneously - Data persists reliably
The Amazing Part: You did all this without learning SQL, server management, or database administration!
API = Application Programming Interface
Let’s use the restaurant analogy to understand APIs:
You are: Your mobile app Restaurant Kitchen: External system (ERP, CRM, etc.) Menu: API documentation (what’s available) Waiter: The API (takes orders, brings food)
The Process: 1. You look at menu → Read API documentation 2. You order food → Send API request 3. Waiter takes order to kitchen → API routes request to system 4. Kitchen prepares food → System processes request 5. Waiter brings food → API returns data 6. You eat → Your app displays data
Key Insights: - You don’t enter the kitchen (don’t access database directly) - You use standardized ordering (API format/structure) - You can only order what’s on menu (API endpoints available) - Kitchen might refuse order (authentication, permissions)
What APIs Let You Do: - GET: Retrieve data (read) - POST: Send new data (create) - PUT/PATCH: Update existing data (update) - DELETE: Remove data (delete)
This is called CRUD (Create, Read, Update, Delete)
API Request Components:
1. Endpoint (URL)
https://api.company.com/v1/customersThis is “where” you’re sending the request.
2. Method
GET, POST, PUT, DELETEThis is “what” you want to do.
3. Headers
Authorization: Bearer [token]
Content-Type: application/jsonThis is authentication and metadata.
4. Body (for POST/PUT)
{
"name": "John Smith",
"email": "john@example.com"
}This is the data you’re sending.
API Response:
{
"status": "success",
"data": {
"id": "123",
"name": "John Smith",
"email": "john@example.com"
}
}Let’s say you want to display weather data in your app:
Without API: - Set up weather stations - Collect meteorological data - Process forecasts - Store in database - Update continuously Cost: Millions of dollars
With Weather API: - Sign up for API key (often free)
- Make request:
GET https://api.weather.com/current?city=Singapore -
Receive current weather data Cost: Free to few
dollars
The Magic: APIs let you leverage other people’s data, infrastructure, and expertise.
Use Supabase When: - Building new app from scratch - You control the data structure - Need flexibility - Want visual database interface - Learning and prototyping
Use APIs When: - Data exists in another system - Connecting to business software (ERP, CRM) - Integrating with third-party services - Data structure is fixed - Company requires it
You Can Use Both: - Store your app data in Supabase - Fetch external data from APIs - Best of both worlds
A good prompt has four parts:
[CONTEXT] + [ACTION] + [DETAILS] + [SUCCESS CRITERIA]Example Breakdown:
Bad Prompt:
Make a form.Good Prompt:
[CONTEXT] For the visitor registration app,
[ACTION] create a form to collect visitor information
[DETAILS] with the following fields:
- Full Name (text, required, max 100 characters)
- Email (email format, required)
- Company (text, optional)
- Purpose of Visit (dropdown: Meeting, Delivery, Interview, Other)
[SUCCESS CRITERIA] The form should:
- Validate email format
- Show error messages below each invalid field
- Only enable submit button when all required fields are valid
- Show success message after submission
- Clear fields after successful submission"Create an app"Problem: AI has no idea what you want.
"Create a student registration app"Problem: Missing crucial details about fields, actions, storage.
"Create a student registration app with name, email, and course fields.
Save data to local storage.
Display all students in a list."Why it works: Clear fields, clear action, clear display.
"Create a student registration app with:
Fields:
- Name (text, required, 2-100 characters)
- Email (email format, required, unique)
- Course (dropdown: CS, Engineering, Business, required)
Actions:
- On submit: validate, save to local storage, show success, clear form
- Display students in list below form, newest first
- Show student count
UI:
- Professional blue color scheme
- Mobile-responsive
- Error messages in red below fields"Why it’s better: Complete specification with validation, UX, and styling.
See full detailed example in handbook
Pattern 1: Create with Specifications
Create a [THING] with [SPECIFICATIONS]
Example:
Create a customer feedback form with:
- Rating (1-5 stars, required)
- Comments (text area, 500 character max, optional)
- Contact me checkbox (default: unchecked)
- Submit button (blue, disabled until rating given)Pattern 2: Modify Existing Feature
In the [EXISTING FEATURE], make the following changes:
[LIST OF CHANGES]Pattern 3: Fix Specific Issue
The [FEATURE] is not working as expected.
Expected behavior: [WHAT SHOULD HAPPEN]
Current behavior: [WHAT ACTUALLY HAPPENS]
Please fix this issue.Pattern 4: Add New Feature
Add a new feature to [EXISTING APP]:
Purpose: [WHY YOU NEED IT]
Functionality: [WHAT IT SHOULD DO]
Integration: [HOW IT CONNECTS TO EXISTING FEATURES]Key Principle: When something doesn’t work, it’s usually a communication issue, not a technical limitation.
The Process: 1. Identify: What’s wrong? (Expected vs. actual) 2. Diagnose: Why did it happen? (Missing details, unclear prompt) 3. Fix: Clarify your instructions 4. Test: Verify it works 5. Learn: Remember for next time
See full troubleshooting section with specific fix prompts for: - Button does nothing - Form submits when empty - Data doesn’t persist - Supabase connection failed - List shows no data
Complete building sequence with prompts
Complete building sequence with prompts
Complete building sequence with prompts
Universal Prompt Structure:
I want to build [THING] that [PURPOSE]
The user should be able to: [ACTIONS]
When [TRIGGER], the app should [RESPONSE]
Store data in [STORAGE TYPE]
Show data as [FORMAT]Data Storage Decision Tree:
Need to share data between users?
├─ NO → Use Local Storage
└─ YES → Connect to existing system?
├─ YES → Use API
└─ NO → Use SupabaseAPI: Application Programming Interface CRUD: Create, Read, Update, Delete Database: Organized collection of data Local Storage: Data storage on device Prompt: Instructions given to AI Supabase: Cloud database service Validation: Checking if data is correct Vibe Coding: Building apps with natural language
Feedback form section
Thank you for participating! Now go build amazing things! 🚀
End of Trainee Handbook Version 2.0 | December 2024 © Orangekloud Technology Inc. | eMOBIQ AI Platform