😲😲 Creation of CRUD in 5 minutes
Tags: opensource, programming, react, api
Published: 2023-08-17 09:24:26

Where to start... Not too long ago we released our Open Source solution for creating back office on React -  https://github.com/dev-family/admiral

It provides out-of-the-box components and tools that make developing an admin interface easy and fast.

The reasons we made it were huge:

- We wanted a solution that quickly creates CRUDs (create, read, update, delete) and requires minimal effort. 
- We wanted to be able to create some complex interface if the task required it.
- We make cool, beautiful projects, so we wanted a visually pleasing solution. 
- We wanted the solution to be language-independent on the back-end.

In short, we wanted fast, beautiful and custom. And we got it. To prove our words, we decided to show, how you can create CRUD in 5 minutes.

## Let's begin

`Express.js` is a modular framework for `Node.js` that is used to build web servers and handle HTTP requests. It is great for a quick CRUD startup on Admiral.

This article consists of 2 parts – creating Backend Admin API and creating entities on the Admiral side.

## Preparation

1. Run the command `git pull https://github.com/dev-family/admiral.git`
2. Go to the `/examples/express-server folder`
3. Follow the installation instructions in the `Readme.md` file

![admiral express server example app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3deat5oi2t1bp3961uzy.png)

## Express JS Admin API

Now we need to implement the Front part of our application. To do this, you should perform the following actions

1) Go to the folder `/examples/express-server/admin/src/crud`
2) Create the brands folder, in which we create the `index.ts` file with the following contents

```
import { createCRUD, SlugInput, TextInput } from 'admiral'
import React from 'react'

export const CRUD = createCRUD({
    path: '/brands',
    resource: 'brands',
    index: {
        title: 'Brands',
        newButtonText: 'Add',
        tableColumns: [
            {
                title: 'ID',
                dataIndex: 'id',
                key: 'id',
                width: 90,
            },
            {
                title: 'Name',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: 'Slug',
                dataIndex: 'slug',
                key: 'slug',
            },
            {
                title: 'Description',
                dataIndex: 'description',
                key: 'description',
            }
        ],
    },
    form: {
        create: {
            fields: (
                <>
                    <TextInput label="Name" name="name" placeholder="Name" required />
                    <SlugInput from="name" label="Slug" name="slug" placeholder="Slug" required />
                    <TextInput label="Description" name="description" placeholder="Description" required />
                </>
            ),
        },
        edit: {
            fields: (
                <>
                    <TextInput label="Name" name="name" placeholder="Name" required />
                    <SlugInput from="name" label="Slug" name="slug" placeholder="Slug" required />
                    <TextInput label="Description" name="description" placeholder="Description" required />
                </>
            ),
        },
    },
    filter: {
        topToolbarButtonText: 'Filters',
        fields: (
            <>
                <TextInput label="Name" name="name" placeholder="Name" />
            </>
        ),
    },
    create: {
        title: 'Create Brand',
    },
    update: {
        title: (id: string) => `Edit Brand #${id}`,
    },
})
```
Let's talk a little bit more about the CRUD object itself. As you can see, we use various Input components to build CRUD. The full list of components can be found here - https://admiral.dev.family/components/.

3) Now create a folder in `/examples/express-server/admin/pages` (pages - a folder with all pages) with the files:

- create.tsx (for entity creation mode)

```
import { CRUD } from '@/src/crud/brands'

export default CRUD.CreatePage
```

- [id].tsx (for entity update mode)

```
import { CRUD } from '@/src/crud/brands'

export default CRUD.UpdatePage
```

- index.tsx (for entity list view)

```
import { CRUD } from '@/src/crud/brands'

export default CRUD.IndexPage
```
4) Open our menu file - `/examples/express-server/admin/src/config/menu.tsx` and add a new menu item to go to the Brands entity.

5) Go to our panel, usually http://localhost:3000/ and we should see the following result

![admiral crud creation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/js5ygv6egwesrt14nnnu.png)

6) Let's create a test entity

![admiral entity creation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2mj2893fhmdllop2k4n.png)

7) Result

![admiral crud](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ss7hq4o7m9w7azxz69ph.png)