Building a System with FormCMS

This guide outlines the end-to-end workflow for building features in FormCMS. The philosophy is data-driven: you start with the data structure and build upwards to the user interface.

Core Workflow

The standard development lifecycle follows this path:

Entity -> Seed Data -> Query -> Page

1. Entity Definition

Everything starts with the Scheme (Entity). This defines the shape of your data in the database.

1. Defined in the Backend/Database layer.
2. Example: Defining a Product, Course, or Article entity with fields like title, price, author.

Relationships

Defining how entities connect is essential for a rich data model.

1. Lookup: One-to-Many relationship (e.g., A Product belongs to a Category).
2. Junction: Many-to-Many relationship (e.g., A Student takes many Courses).
3. Collection: One-to-Many relationship (e.g., An Order has multiple OrderItems).

2. Seed Data

Crucial Step: Before building the UI, you must have data.

1. The Page Builder relies on existing data to infer schemas and provide live previews.
2. Without seed data, it is difficult to visualize layout components or test queries.
3. Action: Populate your local database with mock data or initial entries immediately after defining your entities.

3. Query Generation

Detailed data fetching is handled via GraphQL.

1. Once entities and data exist, you generate queries to fetch exactly what the UI needs.
2. Leverage Relationships: You can nest queries to fetch related data in a single request.
3. Use the AI Query Generator or write GraphQL manually.

Example: Fetch a course with its instructor and enrolled students:

4. Page Construction

Finally, you build the visual interface using the Page Builder (Orchestrator).

1. Binding: Connect your GraphQL queries to UI components.
2. Layout: Arrange components on the canvas.
3. SSR & SEO: Pages are Server-Side Rendered by default, ensuring optimal performance and search engine visibility.
4. Tech Stack: Uses Handlebars (templating) and Alpine.js (interactivity). See Page Templates & Interactivity for details.

Component Library

FormCMS provides a rich set of pre-built components to accelerate development:

Core Components

1. Lists & Tables: These are standard UI patterns. The AI can easily generate these views for displaying collections of entities.

Advanced & Engagement Components

1. Engagement Bar: Tools for user interaction (likes, shares, comments).
2. User Avatar: Standardized user profile display.
3. Toplist: specialized list for ranking items (e.g., "Trending Posts", "Top Users").
4. Tracking: Built-in analytics and event tracking integrations.