Quick Start

Quick Walk through showing how to:

• Create an App
• Create a Model
• Add a Route
• Test the App
• View Code

Step 1 - Create App

Start on Builder tab and create app by clicking + Create App (upper right corner).

On the Create App dialog, enter following:

App Name: Quick Start

And click Create to create the app. Select the newly created app Quick Start, this will take you to the Visual Builder for the app.

Step 2 - Create Model

Ensure you have Models tab selected. On the Models tab, click Add to create new model. This will open Add Model dialog. On the dialog enter following:

Model Name: Catalog

Click Save to create new model.

Find newly added Catalog and click + to add new field.

💡 Tip: You will generally find newly added model in lower right quadrant of the schema diagram.

In the Add Field dialog, enter following:

Name: catalogName

Name: catalogName

Check Is Required for catalogName field. Click Add to add new field.

Again click + on Catalog table to add description field.

Next Select More (triple vertical dots) on Catalog and click + Audit Fields to add fields to track who created the record and when it was last updated.

Step 3 - Add Route

Select Routes tab and click Add Route.

On the Add Route dialog, enter following

Template: Select > Table List + Detail Form
Model: Select > Catalog
Label: Catalog

Template: Select > Table List + Detail Form
Model: Select > Catalog
Label: Catalog

You should now have UI with table view to show items and form view for item details.

Step 4 - Test

Click on Run App to test the app. This will open Preview dialog with test app.

Select Catalog tab and add new item by clicking Add button

This will open Add Catalog dialog. Enter following to create new catalog item:

Name: Laptop

Name: Laptop

Click Add to save item to database.

Repeat to add one more catalog item with following details:

Name: Desktop

Name: Desktop

Try updating an item or even delete it.

Click Done to exit preview.

Step 5 - Code

Click on Export Code, to generate codebase for the app.

This will open Export Code dialog. Enter following

Version: 1.0.0

Version: 1.0.0

Click Export Code button. This will start code export. Once completed, select Code tab and view generated code files.

Click on Download Code to continue development in local editor! Run npm run init to initialize the project. This will download node modes and create prisma client and seed the database. Once completed, run the project with npm run dev. Add data and test the app.

Next Steps

NextAppFast can help you build app remarkably fast. Jumpstart your next project with a generated codebase that covers 60% to 80% of traditional development and concentrate on engineering your core functionality!