How to Build a CMS (MVP Version) in Hours?

Introduction

This guide walks you through building a blog web app (CMS MVP) in Momen—no coding required.
You’ll learn the basic process, how to use components, and how to bind actions.

Core pages in this MVP:

1. Upload post page: Users create a new post

2. Show post page: Displays all posts in a list

How to Build a Blog Upload Page

Start by creating a blank page named “Upload Post”.

On this page, users can enter a title, cover image, and content.
You’ll use components like Text, Button, Image Picker, and Input.

Main features:

• Add a title
• Add a cover image
• Add content
• Add the upload button

Add a Title

1. Drag a Text component onto the page, set content to “Title”, align left.
2. Drag a Text Input onto the page, rename it “Title Input”.

Add a Cover Image

1. Drag a Text component onto the page, set content to “Cover Image”.
2. Drag an Image Picker onto the page, rename it “Cover Image Picker”.

Add Content

1. Drag a Text component onto the page, set content to “Content”.
2. Drag a Text Input onto the page, rename it “Content Input”, set width to 700, height to 240, and enable “Multi-line”.

Add the “Upload” Button

Drag a Button onto the page and set its content to “Upload”.

How to Configure the Database

When the user clicks “Upload”, the title, cover image, and content should be saved to the database.

Create a Data Model

Create a data model to define where the data will be stored.

1. Click “Add Model” and name it “Post”.

2. Add columns:
   • Title (Text)
   • Cover Image (Image)
   • Content (Text)

Now you have a “Post” table with three columns: Title, Cover Image, and Content.

Bind Data

Go back to the Upload button on the Post page.
Bind the button’s interaction to upload the data to the Post table.

• Select the button, go to Interaction, and add Action-Request-Mutation-Insert Post.

• In Parameters, bind:
  • Title: inputs-Title input
  • Cover Image: inputs-Cover Image Picker
  • Content: inputs-Content input

• On success, show a toast: add action-view-show toast with “Upload successful”.

Click Preview (top right), wait for it to load, and open the URL.
You should see your “Upload Post” page, where you can enter a title, cover image, and content, then click “Upload”.

When you see “Upload successful”, check the backend’s Post table to confirm the data was added.

Show Post Page

To display posts, create a new “Show Posts” page and set it as the homepage.

• Drag a List component onto the page and name it “Post List”.

• Set the Post table as the data source for Post List.

• In the left sidebar, select the blank container under Post List.

• Drag a Text component into the Cell View. Bind it to Item data - Post - item - title.

Now, all post titles from the Post table will display in the Post List.

To display the cover image and content:

• In the blank container, drag an Image component. Bind it to Item data - Post - item - Cover Image.
• Add a Text component and bind it to Item data - Post - item - Content.

Preview in real time to check if the Post List displays all content.

To enable navigation between pages:

• On the Show Posts page, add a button labeled “Go to Upload”. Set its interaction to Action-Router-Go to-Upload Post.
• On the Upload Post page, add a button labeled “Go back” and set its interaction to Action-Router-Go back.

Seeing the data created on the “Upload Post” page displayed on the Post List means you’ve mastered the basics!