📊 CORE CONCEPT

What is Databoard?

Databoard is the core engine of ANTSAND. It's a visual website compiler that transforms structured JSON configuration into deployed full-stack websites — complete with controllers, views, routing, access control, and assets. Think of it as an IDE where the source code is a data object and the output is a running website.

The simple version:

JSON object → Databoard compiler → running website

Pages, menus, sections, fields, CSS classes, HMVC routes, access control, modules — all stored in one MongoDB document. Deploy generates a full PHP/Volt application from it.

The compiler picture

Databoard input → generated website output
Databoard JSON
  → HMVC / routes / ACL
  → pages / list / datalist
  → templates / Volt
  → Sass v2 + board Sass
  → deployed Phalcon website

This is why Databoard is more than a page builder. The board is the source object; deployment compiles that object into controllers, views, styles, routes, access control, and runtime assets.

🗄️ What's inside a Databoard object

A Databoard is a single MongoDB document. It contains everything needed to generate and run a website.

Databoard JSON — top-level structure
{
  "_id":               "ObjectId — unique board identifier"
  "boardname":         "my-website"
  "user":              "owner's user_hash"

  // PAGES — each entry = one page on the generated site
  "list":              [{ name, module, controller, action, datalist: [...] }]
  "hmvc_list":         [{ ... same but for HMVC-managed pages }]

  // NAVIGATION
  "menu":              { sections: header, footer, subscribe, sidebar, etc. }

  // APPLICATION ARCHITECTURE
  "hmvc":              { enabled, roles, routes, components, acl, database }

  // STYLING
  "sass":              "site-level SCSS (common_styles)"
  "branding_brief":    { colors, fonts, tone }
  "website_settings":  { domain, alias, SEO, analytics }
}

📄 Pages, datalists, and sections

Each page in the list array contains a datalist — an ordered array of sections that make up that page. Each section references a template and contains its own data and CSS configuration.

A page in the list array
{
  "name": "Home",
  "module": "home",
  "controller": "Index",
  "action": "index",
  "datalist": [
    {
      // Section 0 — Hero
      "phalcon_template": "service_3_modern.volt",
      "data": { /* content fields */ },
      "css": {
        "section": { "container": "antsand-section theme-bold-gradient" },
        "data": {
          "container": "antsand-grid md:grid-cols-2 gap-8",
          "h3": "text-fluid-xl",
          "p": "text-fluid-base opacity-75",
          "cta": "antsand-btn antsand-btn-primary"
        }
      }
    },
    { /* Section 1 — Services */ },
    { /* Section 2 — Testimonials */ },
    { /* Section 3 — CTA */ }
  ]
}
Key insight: The css object on each datalist item is where AI and the Databoard UI attach Sass v2 classes. When the site deploys, the template reads these CSS values and renders them onto the fixed class hierarchy (.data-container, .data-h3, etc.).

🏗️ HMVC — the application layer

HMVC (Hierarchical MVC) is what turns a Databoard from a "collection of pages" into a full application. When hmvc.enabled = true, the compiler generates not just views but also:

👥 Roles & ACL

Guest, Member, Subscriber, PremiumSubscriber, Admin — each with priority levels. The compiler generates Security.php from the ACL config, controlling which roles can access which routes.

🔀 Routes

URL routing rules map paths to Module/Controller/Action triplets. The compiler writes controller files that handle each route and bind page data.

🧩 Components

Feature modules (Forms, Notes, Ecommerce, Resume, etc.) plug into HMVC pages. Each component has its own controller logic and renders inside the page's datalist.

🗃️ Database

Federated SQLite databases per site. Each deployed website gets its own database for module data — forms submissions, ecommerce products, user records. Owned by the Databoard, not the modules.

🚀 The deploy pipeline

When you hit Deploy (or call POST /api/v1/databoards/{id}/deploy), the compiler runs this sequence:

1

Read the Databoard JSON

Load the full MongoDB document — pages, menu, HMVC config, sass, settings.

2

Generate controllers

For each page in list/hmvc_list, create a PHP controller with the Module/Controller/Action route. Bind page data to the controller action.

3

Resolve templates

Each datalist item's phalcon_template maps to a Volt file (e.g., service_3_modern.volt). The compiler includes all required sub-templates: common_init_modern, common_section_body_modern, image handlers, icon modules, and component partials.

4

Build Security.php

If HMVC is enabled, generate the ACL from hmvc.acl — which roles can access which controllers and actions.

5

Compile assets

Bundle CSS from sass/common_styles, board-local utilities from /utilities/compile, and Sass v2 from CDN. Bundle custom JS.

6

Write to deployment path

Output the full application: app/controllers/, app/views/, app/config/Security.php, public/css/, public/js/. Update the WebsiteDeployed record.

Site is live

The generated application runs on Phalcon with Nginx. The Volt templates read the CSS classes from the datalist and render the Header/Body/Footer hierarchy with Sass v2 styling.

📐 The template system

Templates are Volt files that know how to render datalist items. The primary template is service_3_modern, which handles most section types. It includes ~30 sub-templates for different content patterns.

Template Purpose
service_3_modern.volt Primary section renderer — handles services, products, cards, hero, CTA, team, pricing, and most content layouts
common_init_modern.volt Data mapper — transforms source data (API, static, module) into the template's internal structure
common_section_body_modern.volt Renders the Body (data) portion — the grid of .data-sub-container items
common_section_footer_modern.volt Renders the section Footer — CTA buttons, "View All" links
parameter_files.json Maps template names to Volt paths and default CSS field values. Seeds new sections with correct class hierarchy.
The Header / Body / Footer contract: Every template renders the same HTML hierarchy: .section → .data-container → .data-sub-container → .data-h3, .data-p, .data-cta. This is the contract that makes Sass v2 themes, utilities, and AI automation work — the class names are fixed, only the CSS behind them changes.

🧩 Modules that plug into Databoard

ANTSAND modules are self-contained features that integrate with Databoard pages. Each module has its own backend (controllers, models, views) and can be embedded as a component in any page's datalist.

📝 Notes (Blog)

Content management for blog posts and articles. Data feeds into Databoard pages via the blog template. Powers the blog sections on generated sites.

📋 Forms

Form builder for contact forms, surveys, registrations. Rendered as components in Databoard pages. Submissions stored in the federated database.

🛒 Ecommerce

Product catalog, cart, checkout, orders. Uses Databoard's federated database. Products render through datalist templates with pricing sections.

📄 Resume

Resume/portfolio builder with multiple templates. Renders as a Databoard page with timeline, skills, experience sections. Exportable to PDF.

🎓 Masterclass

Course platform with lessons and modules. Content managed through the module, rendered on Databoard pages with progress tracking.

🔄 Workflows

Automation engine for triggers and actions. Can be triggered by form submissions, ecommerce events, or scheduled tasks.

Other modules: Recruit (job listings), Scheduler (calendar), Sales (CRM), Analytics (tracking), Groups (team management).

🎨 How Sass v2 fits into Databoard

This is where styles.antsand.com connects to the Databoard system. Sass v2 provides the CSS library; Databoard is the consumer.

Sass v2 (source) → Defines 400+ utility classes, 12 components, 4 themes in SCSS
antsand-v2.css → Compiled CSS served from CDN / styles.antsand.com
Databoard CSS → Users or AI type class names into datalist[N].css.* fields
AI prompt agentPromptCss.module.js tells AI what classes are available
Sass scanner /utilities/compile generates board-local CSS for any extra utilities used
Deploy → Templates render the fixed class hierarchy + your field CSS classes → live site

⚖️ Databoard vs. other builders

  Databoard Typical website builders
Source of truth One JSON document in MongoDB Scattered files, database tables, CMS entries
Output Full PHP/Volt application with controllers, views, ACL Static HTML or locked-in platform pages
Styling Structured CSS fields on fixed hierarchy — AI-readable Inline styles or drag-and-drop with no contract
Backend logic HMVC with roles, routes, ACL, federated databases Plugins or third-party integrations
AI integration API-driven — AI reads prompt, patches fields, deploys Bolt-on AI features, no structured API
Ownership You own the JSON, the code, the database, the server Platform owns your data, charges monthly
🤖 AI Quick Start → Style a Databoard site in 7 API calls ⚡ Databoard Utilities Loop → Sass v2 → CSS → Databoard → Scanner → Site