Generating Web Apps with ScaffoldHub

Felipe Lima
Felipe Lima
May 29, 2019 - ScaffoldHub

Introduction

ScaffoldHub is a premium web application generator that enables you to create a full admin application with your entities, relationships, fields, and validations.

Let's go to each of the steps you need to have your first application generated.

1 - Select a Frontend Framework

Select a framework of your preference. You can choose between:

  • React
  • Vue
  • Angular

PS.: You can see a running example clicking at "Live Demo".

2 - Select a Database

As the first step, you need to select a database of your choice.

  • SQL
  • MongoDB
  • Firebase Firestore

3 - Documentation

At this part, you can check the videos, screenshots and, most importantly, the How To's that shows you how to set up and deploy the application with the selected frontend framework and database.

4 - Model/Design

Ok, here's where the magic happens. Now you'll model your entities, relationships, fields, and validations.

Pre-defined

The User, Audit Logs, and Settings you don't have to model/design because they're pre-defined.

User

The user is the base for authentication and authorization, so ScaffoldHub doesn't allow you to remove or edit it - yet you can always do it later on the source code.

The user comes with those fields:

NameTypeRequiredDescription
idUUIDYesAuto-generated. All the entities have it as a unique identifier.
emailTextYesEmail of the user, set at the signup page. It's unique.
firstNameTextNoFirst name of the user, set at the user's profile page.
lastNameTextNoLast name of the user, set at the user's profile page.
phoneNumberTextNoPhone number of the user, set at the user's profile page.
avatarsImagesNoAvatar of the user, set at the user's profile page.

Audit Logs

Every interaction between the user and the generated app is logged.

The Audit Log record has this format:

NameTypeRequiredDescription
idUUIDYesAuto-generated. All the entities have it as a unique identifier.
entityNameTextYesThe name of the entity being logged.
entityIdUUIDYesThe ID of the entity being logged.
timestampDateTimeYesThe creation date time of the log.
valuesTextYesThe snapshot of the entity at the time of the log. For delete operations, it's just the ID

Settings

The Settings is the global record of all the settings of the application.

It starts only with the Theme, but as you extend the source code of the generated application, you'll probably add more fields to it.

NameTypeRequiredDescription
idTextYesThe ID is fixed to 'default' because this table/collection have only one unique record.
themeTextYesThe theme color of the application.

Properties

At properties, you must select the platform you'll use to deploy your source code.

PlatformDescriptionAuthenticationFile Upload
No Platform (Docker)Uses no platform. You can deploy at any server you want, no external dependencies. Ideal for clients/companies with a strict data policy.JWT Token. Password Hash stored at the database.Save uploads to the file system.
Google Cloud/FirebaseUses the Google Cloud Platform and the Firebase.Firebase AuthGoogle Cloud Storage

Entities

A CRUD is generated for each entity you define. At the IAM (Users) page, you can control which users have access to read and edit this entity records.

Entity Basics

PropertyTypeRequiredDescription
NameTextYesIt's the variables name of the entity inside the code.
LabelTextYesIt's the singular form of the label of this entity. Used on the form, view, etc.
Label PluralTextYesIt's the plural form of the label of this entity. Used on the menu, lists, etc.

Entity Properties

PropertyTypeRequiredDescription
LabelSelect of FieldsNoIt's the field used as the label of the record. The ID is used when blank.
PriorityNumberNoIt's the index of the entity at the Menu. 0 is the highest priority.

Fields

At the fields, you define the relationships between the entities, fields, and validations.

Fields can have different types, and each is described above.

Text

A Text field can be a Text or TextArea.

Properties

PropertyDescription
HTML TypeThe field type that is rendered on the HTML. Text or TextArea.
List?Flags if the field should be added at the listing page.
Filter?Flags if a filter of this field should be added at the listing page.
Export to Excel?Flags if the field should be included on the export to excel.
PriorityOrder of the field for tables, forms, and viewing. 0 is the first one.

Validations

PropertyDescription
RequiredFlags if the field is required.
Min LengthMin length of the field.
Max LengthMax length of the field.

Integer

It represents a number without decimal digits.

Properties

PropertyDescription
List?Flags if the field should be added at the listing page.
Filter?Flags if a filter of this field should be added at the listing page.
Export to Excel?Flags if the field should be included on the export to excel.
PriorityOrder of the field for tables, forms, and viewing. 0 is the first one.

Validations

PropertyDescription
RequiredFlags if the field is required.
MinMin value of the field.
MaxMax value of the field.

Decimal

It represents a number with decimal digits.

Properties

PropertyDescription
List?Flags if the field should be added at the listing page.
Filter?Flags if a filter of this field should be added at the listing page.
Export to Excel?Flags if the field should be included on the export to excel.
PriorityOrder of the field for tables, forms, and viewing. 0 is the first one.

Validations

PropertyDescription
RequiredFlags if the field is required.
MinMin value of the field.
MaxMax value of the field.
ScaleNumber of digits after the decimal separator.

Date

It represents a date without the time and uses a Date picker on the form page.

Properties

PropertyDescription
List?Flags if the field should be added at the listing page.
Filter?Flags if a filter of this field should be added at the listing page.
Export to Excel?Flags if the field should be included on the export to excel.
PriorityOrder of the field for tables, forms, and viewing. 0 is the first one.

Validations

PropertyDescription
RequiredFlags if the field is required.

DateTime

It represents date and time and uses a Date Time picker on the form page.

Properties

PropertyDescription
List?Flags if the field should be added at the listing page.
Filter?Flags if a filter of this field should be added at the listing page.
Export to Excel?Flags if the field should be included on the export to excel.
PriorityOrder of the field for tables, forms, and viewing. 0 is the first one.

Validations

PropertyDescription
RequiredFlags if the field is required.

Boolean

It represents a Boolean value. At the form page, it can be a switch, checkbox or radio buttons.

Properties

PropertyDescription
HTML TypeCan be a Switch, Checkbox or Radio Buttons.
List?Flags if the field should be added at the listing page.
Filter?Flags if a filter of this field should be added at the listing page.
Export to Excel?Flags if the field should be included on the export to excel.
PriorityOrder of the field for tables, forms, and viewing. 0 is the first one.

Enumerator

It represents a pre-defined value from a list of choices. At the form page, it can be a select or radio buttons. The options/choices must be defined.

Properties

PropertyDescription
OptionsComma separated options. Use the values that will be saved at the database. No spaces or special characters allowed. Example: open,in_progress,closed
HTML TypeCan be a Select or Radio Buttons.
List?Flags if the field should be added at the listing page.
Filter?Flags if a filter of this field should be added at the listing page.
Export to Excel?Flags if the field should be included on the export to excel.
PriorityOrder of the field for tables, forms, and viewing. 0 is the first one.

Validations

PropertyDescription
RequiredFlags if the field is required.

Relation (One)

It represents a relation to one record of another entity. Renders an autocomplete on the form, using the label property of the target entity as the query.

Properties

PropertyDescription
List?Flags if the field should be added at the listing page.
Filter?Flags if a filter of this field should be added at the listing page.
Export to Excel?Flags if the field should be included on the export to excel.
PriorityOrder of the field for tables, forms, and viewing. 0 is the first one.

Relation

PropertyDescription
EntityThe target entity.
Two-way-fieldTarget field used for the two-way relationship. It's optional.

Validations

PropertyDescription
RequiredFlags if the field is required.

Relation (Many)

It represents a relation to many records of another entity. Renders a multiple autocomplete on the form, using the label property of the target entity as the query.

Properties

PropertyDescription
List?Flags if the field should be added at the listing page.
Filter?Flags if a filter of this field should be added at the listing page.
Export to Excel?Flags if the field should be included on the export to excel.
PriorityOrder of the field for tables, forms, and viewing. 0 is the first one.

Relation

PropertyDescription
EntityThe target entity.
Two-way-fieldTarget field used for the two-way relationship. It's optional.

Validations

PropertyDescription
RequiredFlags if the field is required.
MinMinimum number of records.
MaxMaximum number of records.

Relation to User (One)

It represents a relation to one record of the User entity. Renders an autocomplete on the form, using the user's email as the query.

Properties

PropertyDescription
List?Flags if the field should be added at the listing page.
Filter?Flags if a filter of this field should be added at the listing page.
Export to Excel?Flags if the field should be included on the export to excel.
PriorityOrder of the field for tables, forms, and viewing. 0 is the first one.

Validations

PropertyDescription
RequiredFlags if the field is required.

Relation to User (Many)

It represents a relation to many records of the User entity. Renders a multiple autocomplete on the form, using the user's email as the query.

Properties

PropertyDescription
List?Flags if the field should be added at the listing page.
Filter?Flags if a filter of this field should be added at the listing page.
Export to Excel?Flags if the field should be included on the export to excel.
PriorityOrder of the field for tables, forms, and viewing. 0 is the first one.

Validations

PropertyDescription
RequiredFlags if the field is required.
MinMinimum number of records.
MaxMaximum number of records.

Files

It represents a File Upload field.

Properties

PropertyDescription
List?Flags if the field should be added at the listing page.
Export to Excel?Flags if the field should be included on the export to excel.
PriorityOrder of the field for tables, forms, and viewing. 0 is the first one.

Validations

PropertyDescription
RequiredFlags if the field is required.
MinMinimum number of files.
MaxMaximum number of files.
Size in BytesFile size limit in bytes.
FormatsComma separated valid formats. Example: doc, txt, csv

Images

It represents an Image Upload field.

Properties

PropertyDescription
List?Flags if the field should be added at the listing page.
Export to Excel?Flags if the field should be included on the export to excel.
PriorityOrder of the field for tables, forms, and viewing. 0 is the first one.

Validations

PropertyDescription
RequiredFlags if the field is required.
MinMinimum number of files.
MaxMaximum number of files.
Size in BytesFile size limit in bytes.

5 - Preview

After you've modeled your application, you can preview it. It takes between 5-10 minutes until ScaffoldHub finishes building and deploying your application. You must be a premium user (have purchased credits) to be able to preview applications, but this operation doesn't use credits.

6 - Download the Code

That's the final step. It's time to download the code, setup, customize it and deploy to production.

For more information on how to set up the application, check the How To's section of the chosen Scaffold.