Background

These days, more and more companies are adopting various open-source Content Management Systems (CMS) to manage static content. However, over time, these systems often present challenges with integration and customization.

While open-source CMSs can accelerate development speed, they also increase the burden on operations, communication, and efficiency. This extra overhead must be carefully considered when choosing an open-source CMS to ensure it can effectively support the company's long-term business growth.

Goals

• Reduce communication costs. Previously, when users had to maintain JSON files, engineers needed to write extra documentation.
• Provide a more user-friendly maintenance interface.
• Adopt the latest low-code technologies.
• Solve the problem of having to configure file uploads and path settings separately.
• Address the difficulty of integrating and customizing off-the-shelf CMS solutions.
• Enable data scheduling capabilities.

Concept for a Custom Low-Code Platform

1. Designing the Form Structure

Engineers drag and drop components to build a schema in JSON format, which is then saved to the database.

2. Content Maintenance

The form schema, previously designed by an engineer, is retrieved from the database. The application then renders the form based on this JSON schema, allowing users to input their data.

3. Page Rendering

For page rendering, this API can be called directly to render the page.

Requirements

• File upload functionality.
• A product dropdown selection.
• When the structure changes, only keep the latest version.
• Scheduling capabilities.

Avoiding Reinventing the Wheel

As drag-and-drop technology matures, building a low-code platform from scratch has become both time-consuming and uneconomical. With this in mind, we evaluated several popular low-code editors and Content Management Systems (CMS). Given that our company primarily uses the Next.js tech stack and requires a high degree of customization, we ultimately chose an open-source, Next.js-based low-code editor as our foundation.

To further save development time, we decided to purchase a pre-built Next.js template from the market, which included a backend admin system and various components. This allowed us to quickly build a system that meets our business needs while maintaining flexibility and scalability in our development process.

• Github repo
• Demo
• Website Template

Flowchart and Mockups

• Flowchart (draw.io)

Learning Resources:

• Drag-and-Drop Technology

Open-Source Next.js Low-Code Code

Link

preview => 左側導覽清單的設定
edit => 元件編輯時的預設值
fields => 定義元件

Form Validation

We use React Hook Form for form validation.

Defining Data Structures and Frontend Input Components

Defining the mapping between data types and their corresponding components:

• text > input (Input box)
• json > json editor (JSON editor)
• html > rich html editor (Rich text editor)
• value in array > single select (Single-select dropdown)
• array > multi select (Multi-select dropdown)
• date > date picker (Date picker)
• upload image > single upload (Single image upload)
• upload images > multi upload (Multiple image upload)
• model select > model select (Product model selector)
• true / false > switch (Switch toggle)

Conclusion

By leveraging existing technologies and resources to avoid reinventing the wheel, we can significantly accelerate the development process, reduce costs, and improve product quality. Choosing the right tools and technologies enables a company to meet specific business needs more efficiently.

Demo Video