Create an admin panel full-stack app for your database in minutes.
Published: 2021-08-28 12:44:41

If you store information in a relational database, I bet you wish you had a handy application through which you could view or edit that data. Then, as far as I can guess, you started making this app or even made it.

In any case, if you've ever created an application for working with a database, you know that it's not easy at all.

You have to choose a technology stack. Then you have to design the architecture of the application to ensure security, speed, and accuracy of data, etc.

Fortunately, there are already numerous frameworks and libraries that can be used as building blocks for full-stack applications.

But still, writing and debugging code takes a lot of time. Even if you are a very experienced software engineer.

So we decided to create a tool that would generate application code for your database using these "blocks". We wanted to make the generated source code usable right out of the box. If not, you could use it as a seed for your own application.

And we did it! Meet [IKODIX](https://ikodix.com), an online source code generator for full-stack applications.

**IKODIX does not require access to your database** to generate code. It uses a declarative approach.

I hate to give a long and tedious description of IKODIX - let's go straight to creating a small application. This should take you no more than 50-60 minutes.

Even if you already have some test databases available, let's run the MySQL database in Docker to speed up the process.

## Run the database

Install [Docker Desktop](https://www.docker.com/products/docker-desktop) on your localhost. We need it not only to run the database but also to run the generated application.

* Create a `todo-db` directory, go into it, and create a `docker-compose.yml` file
* Copy the following code into this file
```yaml
services:
  db:
    image: mysql:8.0.19
    volumes:
      - ./data:/var/lib/mysql
      - ./init.sql:/init.sql
    restart: always
    environment:
      - MYSQL_ROOT_PASSWORD=root_password
      - MYSQL_DATABASE=todo
      - MYSQL_USER=myuser
      - MYSQL_PASSWORD=mypassword
    expose:
      - 3306
    ports:
      - 3306:3306
    command: --init-file /init.sql
```
* Create an `init.sql` file and copy the following code into it
```sql
CREATE DATABASE IF NOT EXISTS todo;
USE todo;
DROP TABLE IF EXISTS `employee`;
CREATE TABLE `employee` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `full_name` varchar(1000) NOT NULL,
  PRIMARY KEY (`id`)
);
DROP TABLE IF EXISTS `task_status`;
CREATE TABLE `task_status` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `status_name` varchar(200) NOT NULL,
  PRIMARY KEY (`id`)
);
DROP TABLE IF EXISTS `task`;
CREATE TABLE `task` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `description` varchar(5000) NOT NULL,
  `to_date` date DEFAULT NULL,
  `assignee_id` bigint DEFAULT NULL,
  `status_id` bigint NOT NULL,
  PRIMARY KEY (`id`),
  KEY `task_employee_id_fk` (`assignee_id`),
  KEY `task_task_status_id_fk` (`status_id`),
  CONSTRAINT `task_employee_id_fk` FOREIGN KEY (`assignee_id`) REFERENCES `employee` (`id`),
  CONSTRAINT `task_task_status_id_fk` FOREIGN KEY (`status_id`) REFERENCES `task_status` (`id`)
);
```
* Create another `data` directory inside the `todo-db` directory
* Run the command in terminal: `docker-compose up -build`
* Wait until the container reports that it is ready…

![IKODIX - MySQL server is ready](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fd0z913xwf6zdxq71zr8.png)

You now have a Docker container running on your computer with the `todo` database. It contains 3 tables: `employee`, `task`, `task_status`.

## Open IKODIX

We can start describing tables in IKODIX. [Open IKODIX](https://app.ikodix.com). Go to **Data Tables**, and add tables with columns as described below.

![IKODIX - Data Tables screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/osnzvxyg9zjm2d65wipo.png)

**employee** table
* Add the `employee` table. By default, it will already have a mandatory `Primary Key` column with type `Long` and name `id`. This is fine for us because the real table `employee` has a primary key column named `id`. **This applies to all other tables in our database.**
* Add `full_name` column with `String` type.

**task_status** table
* Add the `task_status` table.
* Add the `status_name` column with the type `String`.

**task** table
* Add the `task` table.
* Add the `description` column of type `String`.
* Add the `assignee_id` column of `Long` type.
* Add the `status_id` column as a `Long`.
* Add the `to_date` column of type `Date`.

![IKODIX - Data Tables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/due2qqx0ymixt8rvu9o8.png)

Once we have a list of tables we can start creating projections.

A **projection** is data from some linked tables. This data will be displayed on the front-end on a separate page in the **Data Grid**. You can make an analogy with the SQL query that you write to select some records from the database.

As you may have guessed, our database contains information about some tasks. The first thing we need to see is all the tasks and the employees assigned to them.

Create the **Task** projection.

![IKODIX - Create new projection](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phwsagfdfh1vxb5kjeec.png)

A diagram will open in front of us, where we need to add tables that we want to see records from.

![IKODIX - Empty diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60l0877lf85eqsn8g0on.png)

We will add the `task` table first. The first table is the **root table** in the diagram and we will link the other tables to it. This is very similar to how we write a SQL query.

![IKODIX - Add the root table to the diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/377so5van7hmp3ta94aj.png)

Let's add the `task_status` table. Link the `status_id` column from the `task` table to the `id` column in the `task_status` table.

Add the `employee` table. Link the `assignee_id` column from the `task` table to the `id` column in the `employee` table.

![IKODIX - Linked tables on the diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yeyi99ehhiafizvh8zfz.png)

Let's go to the **View** tab. Here we should mark as `Visible` all columns from the tables in the diagram, which we want to see on the front-end.

Mark the `description` and `to_date` columns from the task table. Set any suitable names for these columns in the **Grid Column Title**.

Set visible the `full_name` column from the `employee` table, and the `status_name` column from the `task_status table`. Give them names, too.

![IKODIX - Data Grid settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xgzhegqxkrf57gznsh80.png)

You can rearrange the order of the columns that will be displayed in the **Data Grid**.

![IKODIX - Data Grid columns order](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8l7vnywrpviv1nhzxd8.png)

Next, go to the **Create** tab. On this tab, we configure the form for creating a record for the **root table** in the diagram. That is, the record will be created only in the `task` table.

Let's mark `description` and `to_date` fields as visible, give them names and corresponding field types.

![IKODIX - Create Form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/281qfwgrj9gzep8imw99.png)

But besides these fields, we have linked fields with other tables: `assignee_id` and `status_id`. Let's mark them as visible, name them, and choose `Select` type.

![IKODIX - Create Form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5grxiz9h43q5zyc24z1.png)

Once we mark them as visible, we have the option in the **Select Control Settings** section to customize the drop-down lists. We can specify the column from the linked table that will be used for the names in the drop-down list.

Select the `status_name` column for `status_id`, and the `full_name` column for `assignee_id`.

![IKODIX - Select controls settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kuz3ajg0xtrsnctkjc7g.png)

Go to the **Update** tab and do the same as in the **Create** tab.

![IKODIX - Update Form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rse1icwne0690ldsnc3m.png)

We have the first projection ready. Now IKODIX will be able to generate an application where we will have a page with all the tasks and the employees assigned to them. And we will be able to add tasks through the input form.

But we don't have a page and input form to add employees to the list. In addition, there is no page and form for entering job statuses.

This is easy to fix. Create two projections for employees and for statuses: **Employees** and **Statuses**. Add to each projection one table on the diagram: `employee` and `task_status`, respectively.

> It would probably be preferable if you try to configure **Data Grid** and forms in the tabs **View**, **Create** and **Update** for each projection by yourself.

![IKODIX - new projections](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9swc15nvg29phc7m98mp.png)

When you have completed all the settings in the new projections, we can start generating the source code for the application.

## Generating the source code

But there is one more thing not finished - we need to choose the type of database MySQL. Let's go to the **System Settings** section and set the database type we want.

![IKODIX - System Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/be7pkb4mur9fczykj4jf.png)

Click the **Download Source Code** button and name the application something like "ToDo Admin".

![IKODIX - Downloading the code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrvwwgmat8m4fgmjmi3w.png)

Save the archive to the localhost in the empty `todo-app` directory. Unzip the archive in this directory.

Now we can get started with our application. We don't need to install anything extra to start the application.

Open the `README.txt` file and read carefully what is written there.

According to the manual, there are two modes of running the application: **demo** and **dev**.

**Demo** is when a ready-to-use application is built and run.

**Dev** is when the application is launched for development. The **Hot Reloading** for the front-end works in this mode.

Let's run the application in demo mode to see how it works out of the box.

Before we start, we need to configure access to our database. This can be done in the `.env` file. Find there the variable `dataSource.url` and replace its value with **jdbc:mysql://host.docker.internal:3306/todo**. Then replace the username (`dataSource.username`) with **myuser** and the password (`dataSource.password`) with **mypassword**. Save the file.

## Running the application

Two Docker containers are used to run all the parts of the application. But all we need to do is run the command `app.sh demo` (or `app.cmd demo` for Windows). And wait for the application to start.

![IKODIX - running the application in demo mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yr9wnyzaeeyipg70i3g0.png)

Since the containers with the application run in the background, we need to keep track of them. Let's run the two commands `app.sh client-log` and `app.sh service-log` in separate terminals.

Once we see that everything is up and running, we can open the browser with the address **http://localhost:3030**

There is one user with administrative rights by default in the system. So we will log in under his account, username: **administrator**, and password: **administrator_password**.

![IKODIX - login page in the application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q20exv2n81w4gs7u25lz.png)

There are no records in our tables, so let's try to get new employees, new statuses, and create tasks.

![IKODIX - create employee record](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w283aywwpys43t3cd4d7.png)

![IKODIX - statuses list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gogtksjfggxvm2xbfht5.png)

![IKODIX - create new task](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bhzppzxk4m7ee7ft8e8l.png)

![IKODIX - tasks list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54w95dzndsg06s0rln3p.png)

Even though the app works out of the box, we need to change the company name in the upper left corner.

In order to do this, let's run the application in development mode. Simply run the command `app.sh dev`.

Let's wait for all Docker containers to start. To ensure that they are ready, use the commands: `app.sh client-log` and `app.sh service-log` in separate terminals.

When ready let's open the browser with the address **http://localhost:3030**

Now, find the `WorkspacePage.tsx` file in the front-end code in the `to-do-admin-client/src/features/layout` directory, and replace the text "Company Name" with the value we need: "ToDo Admin".

![IKODIX - app source file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7feeb8uni387a35xjxgj.png)

Save the changes in the file.... and see the page in your browser. The value should automatically change.

Docker containers for the front-end are made so that **Hot Reloading** works.

After the final changes you need to run the `app.sh demo` again - then the parts of the application will be built for use in the production. You will find the distributions in `to-do-admin-client/build` and in `to-do-admin-service/target`.

> If you are going to extend the functionality of the application, first read the `README.md` files with a detailed description of the code structure in the `to-do-admin-client` and `to-do-admin-service` directories. This will help you to understand the code without difficulty.

I hope you are not too tired and enjoy building with [IKODIX](https://ikodix.com). In any case, it is much faster and more comfortable than developing such applications by yourself.

If you have any comments or questions, do not hesitate to post them on our forum: [IKODIX forum](https://github.com/ikodix/ikodix/discussions)

Also follow new IKODIX releases on our Twitter account: [@kodix](https://twitter.com/ikodix)

#### Thank you!!!