Creating a custom feature

What is a feature?

A feature, within the context of software development or product design, refers to a distinct functionality that contributes to the overall utility and value of the product.
It encompasses a set of capabilities that are designed and implemented to serve a particular purpose, address a specific need, or provide a solution to a particular problem.
Features are the building blocks of a product, each offering a unique set of functionalities or characteristics that enhance the user experience or enable users to accomplish tasks effectively. They can range from basic functionalities such as user authentication or data storage to more complex capabilities such as advanced search algorithms or real-time collaboration tools.

Click here to learn about Magic Features!

The initial step involves planning all the screens or pages required for the feature.

Make a list of pages required for the feature. For e.g., in Authentication feature, 2 fundamental pages are needed: the Login page and the Register page.

Existing templates or features available in can provide insights into the structure and components of such pages within a feature.

With the pages identified for the feature, let's move on to the next step...

User Interface (UI) design and development

You have the option to utilize the AI assistant in for UI development tailored to your requirements, or you can leverage frameworks like React, Tailwind, Ant Design (AntD), or others for UI implementation.

Below, you'll find the necessary guide links for UI development:

Step-by-step guide to create a UI file in mern.ai.

You have the flexibility to install any npm package using the terminal provided in mern.ai.

Pro Tip: Consider integrating responsiveness during UI development to ensure optimal viewing across various devices.

Integration into the Application:

Import into Required Pages: If the UI is a component that needs to be rendered within existing pages, import it into those pages where it's required. Ensure that the component is imported correctly and rendered within the appropriate context.

Now that the UI has been developed, let's categorize the functionalities required for the developed page.

PreviousIncorporating an existing template NextFunctionalities in a page

Last updated 1 year ago

What is a feature?

A feature, within the context of software development or product design, refers to a distinct functionality that contributes to the overall utility and value of the product.

It encompasses a set of capabilities that are designed and implemented to serve a particular purpose, address a specific need, or provide a solution to a particular problem.

Features are the building blocks of a product, each offering a unique set of functionalities or characteristics that enhance the user experience or enable users to accomplish tasks effectively. They can range from basic functionalities such as user authentication or data storage to more complex capabilities such as advanced search algorithms or real-time collaboration tools.

Click here to learn about Magic Features!

The initial step involves planning all the screens or pages required for the feature.

Make a list of pages required for the feature. For e.g., in Authentication feature, 2 fundamental pages are needed: the Login page and the Register page.

Existing templates or features available in can provide insights into the structure and components of such pages within a feature.

With the pages identified for the feature, let's move on to the next step...

User Interface (UI) design and development

Below, you'll find the necessary guide links for UI development:

Step-by-step guide to create a UI file in mern.ai.

You have the flexibility to install any npm package using the terminal provided in mern.ai.

Pro Tip: Consider integrating responsiveness during UI development to ensure optimal viewing across various devices.

Integration into the Application:

Map the page to a URL: To understand routing in and how to map UI to URLs, click here.

Import into Required Pages: If the UI is a component that needs to be rendered within existing pages, import it into those pages where it's required. Ensure that the component is imported correctly and rendered within the appropriate context.

Now that the UI has been developed, let's categorize the functionalities required for the developed page.