Generate admin dashboard

The admin dashboard is a quite common business requirement. Wouldn't it be nice if we could generate a default admin dashboard from the backend code? Thus, we implemented admin dashboard generation. And the generated admin dashboard can be mixed with custom code. It can be extended and customized in any way.

Currently admin dashboard generation is in beta. Missing features including the charts, graphs and tables will be implemented soon.

The backend code

Let's start with creating a new project. Create a new directory and a schema file named schema.teo.

mkdir hello-teo-admin-dashboard-backend
cd hello-teo-admin-dashboard-backend
touch schema.teo

Create a .env file with the following content.

JWT_SECRET=my_top_secret

After created the schema file, install Teo.

Start the server.

The generate command

Let's generate the admin dashboard code into the directory that we described in the admin block.

After files are generated, move to the admin dashboard directory and install dependencies.

cd ..
cd hello-teo-admin-dashboard
npm install

Start the frontend server for the generated admin dashboard.

npm start

Open a browser, and navigate to http://localhost:9000. Sign in with this credential:

• Email: admin@gmail.com
• Password: Aa123456

Create a record

To create a new record, follow these steps:

1. Navigate to "Records" in the leading tabs.
2. Click "Records" at the top of the page. Now the records list is empty.
3. Create a record by clicking the "Create" button.
4. Fill the form and click "Submit".

Update or delete a record

To update or delete an existing record, double click the record in the list. And then edit and submit or click the "Delete" button.

Summary

It's quite easy to generate an admin dashboard. The code is generated. Thus, developers can modify and extend it in any way. How to extend and write custom code in the admin dashboard is far beyond this tutorial. There aren't any simpler way to generate an admin dashboard from the backend code directly.