Congratulations on reaching this milestone! You've learned about data structure (tables, fields, records) and user interface (pages, components). Now it's time to put everything together by building a complete, working application from scratch.

In this tutorial, you'll build a Contact Manager application step-by-step. This practical exercise will reinforce everything you've learned and give you confidence to build your own applications.

Your Contact Manager will have:

• A database table to store contact information
• A list page to view all contacts
• A form page to add new contacts
• A details page to view individual contact information
• An edit form to update existing contacts
• Navigation between all pages
• Search and filter functionality

By the end, you'll have a fully functional application that demonstrates all Phase 1 concepts!

Before building, let's plan what we need.

What Information to Track

For each contact, we'll track:

• First Name (required)
• Last Name (required)
• Email Address (required, unique)
• Phone Number
• Company Name
• Job Title
• Address (street, city, state, zip)
• Status (Active, Inactive, Prospect)
• Category (Customer, Partner, Vendor, Other)
• Notes

What Pages Needed

We'll create:

1. Home/Dashboard - Overview with quick stats
2. All Contacts List - Searchable table of all contacts
3. Add Contact Form - Form to add new contact
4. Contact Details - View complete information about one contact
5. Edit Contact Form - Form to update existing contact

User Workflow

The typical user workflow will be:

1. Land on home page with overview
2. Click "View All Contacts" to see list
3. Search/filter to find contacts
4. Click contact to view details
5. Edit contact if needed
6. Or add new contact via "Add New" button

Let's start by creating a new application.

Create New App

1. Log into your Tadabase account
2. From the dashboard, click "Create New App"
3. Choose "Start from Scratch"
4. Enter app name: Contact Manager
5. Enter description: A simple contact management system
6. Click "Create App"

Verify App Created

You should now see the builder interface with:

• Empty Data Builder (no tables yet)
• Empty Page Builder (no pages yet)
• App name in top bar
• Published app URL available

Now let's create the data structure to store contact information.

Create Table

1. Click "Data Builder" in left sidebar
2. Click "+ Create Table"
3. Enter table name: Contacts
4. Enter description: Store contact information
5. Click "Create"

Verify Default Fields

Your table now exists with default system fields:

• Record ID
• Date Created
• Date Modified

Now let's add custom fields!

We'll add fields one by one. Follow each step carefully.

Field 1: First Name

1. Click "+ Add Field"
2. Select field type: Short Text
3. Field name: first_name
4. Display name: First Name
5. Check "Required"
6. Click "Save"

Field 2: Last Name

1. Click "+ Add Field"
2. Field type: Short Text
3. Field name: last_name
4. Display name: Last Name
5. Check "Required"
6. Click "Save"

Field 3: Email Address

1. Click "+ Add Field"
2. Field type: Email
3. Field name: email
4. Display name: Email Address
5. Check "Required"
6. Check "Unique" (no duplicate emails allowed)
7. Click "Save"

Field 4: Phone Number

1. Click "+ Add Field"
2. Field type: Phone
3. Field name: phone
4. Display name: Phone Number
5. Required: No
6. Click "Save"

Field 5: Company

1. Click "+ Add Field"
2. Field type: Short Text
3. Field name: company
4. Display name: Company
5. Required: No
6. Click "Save"

Field 6: Job Title

1. Click "+ Add Field"
2. Field type: Short Text
3. Field name: job_title
4. Display name: Job Title
5. Required: No
6. Click "Save"

Field 7: Street Address

1. Click "+ Add Field"
2. Field type: Short Text
3. Field name: street_address
4. Display name: Street Address
5. Required: No
6. Click "Save"

Field 8: City

1. Click "+ Add Field"
2. Field type: Short Text
3. Field name: city
4. Display name: City
5. Required: No
6. Click "Save"

Field 9: State

1. Click "+ Add Field"
2. Field type: Short Text
3. Field name: state
4. Display name: State
5. Required: No
6. Max length: 2 (for state abbreviations)
7. Click "Save"

Field 10: Zip Code

1. Click "+ Add Field"
2. Field type: Short Text
3. Field name: zip_code
4. Display name: Zip Code
5. Required: No
6. Click "Save"

Field 11: Status

1. Click "+ Add Field"
2. Field type: Dropdown
3. Field name: status
4. Display name: Status
5. Check "Required"
6. Add options:
   • Active
   • Inactive
   • Prospect
7. Set default value: Active
8. Click "Save"

Field 12: Category

1. Click "+ Add Field"
2. Field type: Dropdown
3. Field name: category
4. Display name: Category
5. Required: No
6. Add options:
   • Customer
   • Partner
   • Vendor
   • Other
7. Click "Save"

Field 13: Notes

1. Click "+ Add Field"
2. Field type: Long Text
3. Field name: notes
4. Display name: Notes
5. Required: No
6. Click "Save"

Verify All Fields

Your Contacts table should now have all these fields. Take a moment to review them and ensure everything is correct.

Before building pages, let's add some sample contacts so we have data to display.

Add First Contact

1. In the Contacts table, click "Records" tab
2. Click "+ Add Record"
3. Fill in the form:
   • First Name: John
   • Last Name: Smith
   • Email: john.smith@example.com
   • Phone: 555-0101
   • Company: Acme Corporation
   • Job Title: Sales Manager
   • Street Address: 123 Main St
   • City: New York
   • State: NY
   • Zip Code: 10001
   • Status: Active
   • Category: Customer
   • Notes: Met at trade show 2024
4. Click "Save"

Add More Contacts

Add at least 4 more contacts with different information. Here are suggestions:

Contact 2:

• Name: Sarah Johnson
• Email: sarah.j@techcorp.com
• Company: TechCorp Industries
• Job Title: CTO
• Status: Active
• Category: Partner

Contact 3:

• Name: Michael Chen
• Email: mchen@supplies.com
• Company: Office Supplies Inc
• Job Title: Account Manager
• Status: Active
• Category: Vendor

Contact 4:

• Name: Emily Davis
• Email: emily.davis@startup.io
• Company: StartupCo
• Job Title: Founder
• Status: Prospect
• Category: Customer

Contact 5:

• Name: Robert Martinez
• Email: r.martinez@consulting.com
• Company: Martinez Consulting
• Job Title: Senior Consultant
• Status: Inactive
• Category: Other

Verify Sample Data

You should now have at least 5 contacts in your table. This gives us data to work with when building pages.

Let's create a simple home page that welcomes users and shows quick statistics.

Create Home Page

1. Go to "Page Builder"
2. Click "+ Add Page"
3. Page name: home
4. Page title: Contact Manager
5. Click "Create"

Add Welcome Text

1. From left panel, drag "Rich Text" component to page
2. Click the component to edit
3. Enter text:

   <h2>Welcome to Contact Manager</h2>
   <p>Manage all your contacts in one place. View, add, edit, and organize your professional network.</p>

4. Save

Add Quick Stats (Optional)

You can add statistics components showing total contacts, active contacts, etc. For now, we'll keep it simple with just the welcome text and buttons.

Add Navigation Buttons

1. Drag another "Rich Text" component below the first
2. Add HTML for buttons:

   <div style="margin-top: 20px;">
     <a href="/contacts_list" class="btn btn-primary">View All Contacts</a>
     <a href="/add_contact" class="btn btn-success">Add New Contact</a>
   </div>

3. Save

Note: These page links won't work yet since we haven't created those pages. We'll create them next!

Set as Home Page

1. Click page settings (gear icon)
2. Find "Home Page" or "Landing Page" option
3. Set this page as the home page
4. Save

Now let's create the main contacts list page with a searchable table.

Create List Page

1. Click "+ Add Page"
2. Page name: contacts_list
3. Page title: All Contacts
4. Click "Create"

Add Table Component

1. Drag "Table" component to page
2. Component will appear on canvas

Configure Data Source

1. In right panel, find "Data Source"
2. Select table: Contacts
3. Sort by: Last Name (ascending)
4. Leave filters empty (show all)

Configure Columns

1. In "Columns" section, select these fields:
   • First Name
   • Last Name
   • Email
   • Phone
   • Company
   • Job Title
   • Status
   • Category
2. Arrange in this order (drag to reorder)

Configure Table Options

1. Enable "Search" - lets users search across all fields
2. Enable "Pagination" - set to 25 records per page
3. Enable "Column Sorting" - users can click headers to sort
4. Enable "Export to CSV" - users can download data
5. Set component title: All Contacts

Configure Actions

1. Find "Actions" section
2. Enable "Add Record Button"
3. Button text: Add New Contact
4. Link to page: add_contact (we'll create this next)
5. Enable "Row Click Action"
6. Action: Go to page
7. Select page: contact_details (we'll create this later)

Save Page

1. Click "Save" in top right
2. Page is now saved

Let's create a form page for adding new contacts.

Create Form Page

1. Click "+ Add Page"
2. Page name: add_contact
3. Page title: Add New Contact
4. Click "Create"

Add Form Component

1. Drag "Form" component to page

Configure Form Data Source

1. Select table: Contacts
2. Mode: Add New Record

Configure Form Fields

1. In "Fields" section, select all fields:
   • First Name (required)
   • Last Name (required)
   • Email Address (required)
   • Phone Number
   • Company
   • Job Title
   • Street Address
   • City
   • State
   • Zip Code
   • Status (default: Active)
   • Category
   • Notes
2. Arrange in logical order (name fields first, then contact info, then address, then other)

Configure Form Layout

1. Layout: 2 Columns (name fields side by side)
2. Group related fields:
   • First Name and Last Name in same row
   • Email and Phone in same row
   • City and State in same row

Configure Submit Settings

1. Submit button text: Add Contact
2. After submit action: Redirect to page
3. Select page: contacts_list
4. Success message: Contact added successfully!
5. Enable "Reset form after submit" - allows adding multiple contacts

Add Cancel Button

1. Enable "Show Cancel Button"
2. Cancel button text: Cancel
3. Cancel action: Go to page
4. Select page: contacts_list

Save Page

1. Click "Save"

Now create a page to view all details about a single contact.

Create Details Page

1. Click "+ Add Page"
2. Page name: contact_details
3. Page title: Contact Details
4. Click "Create"

Add Details Component

1. Drag "Details" component to page

Configure Details Data Source

1. Select table: Contacts
2. Record source: From URL (record ID will come from the URL when clicking from list)

Configure Details Fields

1. Select all fields to display:
   • First Name
   • Last Name
   • Email Address
   • Phone Number
   • Company
   • Job Title
   • Street Address
   • City
   • State
   • Zip Code
   • Status
   • Category
   • Notes
   • Date Created
   • Date Modified
2. Arrange in logical groupings

Configure Layout

1. Layout: 2 Columns
2. Group fields into sections:
   • Contact Information (name, email, phone)
   • Company Information (company, job title)
   • Address (street, city, state, zip)
   • Classification (status, category)
   • Notes
   • System Info (dates)

Add Action Buttons

1. Enable "Show Edit Button"
2. Edit button text: Edit Contact
3. Link to page: edit_contact (we'll create this next)
4. Enable "Show Delete Button"
5. Delete confirmation: Yes
6. After delete: Redirect to contacts_list
7. Add "Back Button"
8. Back to: contacts_list

Save Page

1. Click "Save"

Create a form to edit existing contacts.

Create Edit Page

1. Click "+ Add Page"
2. Page name: edit_contact
3. Page title: Edit Contact
4. Click "Create"

Add Form Component

1. Drag "Form" component to page

Configure Form Data Source

1. Select table: Contacts
2. Mode: Edit Existing Record
3. Record source: From URL

Configure Form Fields

1. Select same fields as add form (all contact fields)
2. Arrange in same order as add form for consistency
3. Use 2-column layout

Configure Submit Settings

1. Submit button text: Update Contact
2. After submit: Redirect to page
3. Select page: contact_details (return to details view)
4. Success message: Contact updated successfully!

Add Cancel Button

1. Enable cancel button
2. Cancel text: Cancel
3. Cancel action: Go back to previous page

Save Page

1. Click "Save"

Let's add a navigation menu so users can easily move between pages.

Access Menu Settings

1. Click app name dropdown in top bar
2. Go to "Settings" → "Layout" → "Menu"

Add Menu Items

1. Click "Add Menu Item"
2. Add these items:
   • Home
     • Label: Home
     • Link to: home page
     • Icon: home (optional)
   • Contacts
     • Label: All Contacts
     • Link to: contacts_list page
     • Icon: users (optional)
   • Add Contact
     • Label: Add Contact
     • Link to: add_contact page
     • Icon: plus (optional)

Configure Menu Style

1. Choose menu position: Top or Side (your preference)
2. Choose color scheme: Match your theme
3. Save settings

Now let's test the complete application!

Access Published App

1. In builder, find published app URL in top bar
2. Click to open in new tab
3. You should see your home page!

Test Complete Workflow

Go through each function:

1. Home Page
   • Verify welcome message displays
   • Click "View All Contacts" button
2. Contacts List
   • Verify all contacts display in table
   • Test search (search for a name)
   • Test column sorting (click headers)
   • Click a contact row
3. Contact Details
   • Verify all information displays
   • Click "Edit Contact" button
4. Edit Contact
   • Modify some fields
   • Click "Update Contact"
   • Verify you return to details with updated info
5. Add New Contact
   • Use menu to go to "Add Contact"
   • Fill out form with new contact
   • Submit
   • Verify you return to list with new contact visible
6. Delete Contact
   • Open a contact's details
   • Click delete button
   • Confirm deletion
   • Verify contact is removed from list
7. Navigation Menu
   • Test all menu items
   • Verify navigation works from any page

Let's review how everything works together:

Data Flow

1. Data Table stores all contact information
2. Form Components add and edit records in the table
3. Table Component displays multiple records from the table
4. Details Component displays a single record from the table
5. All components interact with the same underlying data

Page Navigation Flow

1. Home → Links to list and add pages
2. List → Click row goes to details, click "Add New" goes to add form
3. Details → Edit button goes to edit form, back button returns to list
4. Edit Form → Submit returns to details, cancel returns to previous page
5. Add Form → Submit returns to list with new record

How Record ID Works

When you click a contact in the list:

1. The URL includes the record ID: /contact_details?id=123
2. Details page reads the ID from URL
3. Details component fetches that specific record
4. Edit button passes same ID to edit form
5. Edit form loads that specific record's data

This is how Tadabase connects list views to detail views and edit forms!

Form Submission Flow

1. User fills out form fields
2. Tadabase validates required fields and data types
3. On submit, data is saved to the table
4. Success message displays
5. User is redirected to specified page
6. Table components automatically show updated data

You've built a complete, functional application! Here are ideas to enhance it:

Add More Features

• Search Page - Dedicated advanced search page
• Reports - Charts showing contacts by category, status
• Export - Bulk export contacts to CSV
• Import - Import contacts from spreadsheet
• Filters - Quick filter buttons (Active only, Customers only, etc.)

Improve User Interface

• Styling - Customize colors and fonts to match your brand
• Images - Add profile photos for contacts
• Icons - Use icons in navigation and buttons
• Better Layout - Organize form fields into tabs or sections

Add Related Tables

• Companies Table - Separate table for company info
• Activities Table - Track interactions with contacts
• Tags Table - Add tags to categorize contacts
• Link these tables using relationships (Phase 2 topic)

Add Automation

• Email Notifications - Send email when new contact added
• Auto-Assignment - Automatically assign contacts to users
• Reminders - Set follow-up reminders
• (These are Phase 4 topics - automation and rules)

If something isn't working, check these common issues:

Page Links Don't Work

• Verify page name is spelled correctly in link configuration
• Check page exists and is saved
• Ensure page is not set to "hidden"

Details Page Shows No Data

• Verify details component is set to "From URL"
• Check that table component has "Click Action" configured
• Test by manually adding record ID to URL: ?id=1

Form Won't Submit

• Check all required fields are filled
• Verify email format is correct
• Check for validation errors (red text)
• Ensure submit action is configured

Table Shows No Data

• Verify table component is connected to Contacts table
• Check that table has records in Data Builder
• Remove any filters that might hide records
• Ensure columns are selected for display

Menu Doesn't Appear

• Check menu is enabled in app settings
• Verify menu items are added and linked
• Refresh browser cache

Congratulations! You've successfully built your first complete Tadabase application. Through this process, you've learned:

• How to plan an application before building
• Creating a data table with appropriate field types
• Adding and managing records
• Creating multiple page types (list, form, details)
• Configuring table components with search and sorting
• Configuring form components for add and edit
• Configuring details components to display records
• Linking pages together for navigation
• Creating a navigation menu
• Testing the complete workflow
• Understanding how data flows through components

You've completed the core learning for Phase 1! In the final Phase 1 article, you'll get a summary of everything learned, a checklist to verify your skills, and a project challenge to test your knowledge.

Hands-On Exercise (To Be Added)

Exercise placeholders will include:

• Build the complete Contact Manager following all steps
• Add at least 10 contacts with complete information
• Test every feature thoroughly
• Customize the styling and layout
• Add additional fields based on your needs
• Create filter buttons on the list page
• Add export functionality
• Share your published app URL with someone for testing

Knowledge Check (To Be Added)

Quiz questions will test understanding of:

• Why we create multiple pages in an application
• How record IDs are passed between pages
• Difference between add form and edit form configuration
• How to configure table component click actions
• Form submission and redirect workflow
• Best practices for organizing pages