Create Full Featured Admin Panel with React and Ant Design
Tags: refine, react, tutorial, javascript
Published: 2022-02-21 08:41:15

---
canonical_url: https://refine.dev/blog/refine-react-ant-design-admin-panel-framework/
---

[**refine**](https://refine.dev/) is a **headless** [React](https://en.reactjs.org/) **internal tool** framework. It helps you develop quickly while developing both B2B and B2C applications. While speeding you up, it is never restricted and has a fully customizable structure.

#### Key features​
🔥 Headless : So you can bring your own UI and fuel it with Refine for top speed development.

⚙️ Zero-configuration : One-line setup with superplate. It takes less than a minute to start a project.

📦 Out-of-the-box : Routing, networking, authentication, state management, i18n and UI.

🔌 Backend Agnostic : Connects to any custom backend. Built-in support for REST API, GraphQL, NestJs CRUD, Airtable, Strapi, Strapi v4, Strapi GraphQL, Supabase, Hasura, Appwrite, Firebase and Altogic.

📝 Native Typescript Core : You can always opt out for plain JavaScript.

🐜 Enterprise UI : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)

📝 Boilerplate-free Code : Keeps your codebase clean and readable.

You can use it with any UI library you want without any problems. Also, [Ant Design](https://ant.design/) as out-of-the-box is supported.

**refine** directly provides Ant Design components and some hooks to work with those components. These hooks give you the required props for those Ant Design components.

## Refine Advanced Tutorial 

This article will proceed through refine's [Refine Basic Tutorial](https://refine.dev/docs/next/ui-frameworks/antd/tutorial/). That's why I suggest you read the basic tutorial of refine.

In this tutorial, we will learn how to include the features(i18n, Realtime, Access Control) provided by the refine in our project and how we can use it.

### Create Refine Project

Let's start by creating our refine project. You can use the [superplate](https://github.com/pankod/superplate) to create a refine project.

```bash
npx superplate-cli -p refine-react refine-advanced-tutorial
```

```bash
✔ What will be the name of your app › refine-advanced-tutorial

✔ Package manager: · npm

✔ Do you want to using UI Framework?: · antd

✔ Do you want to customize theme?: · css

✔ Data Provider: · custom-json-rest-data-provider

✔ Auth Provider: · none

✔ Do you want to add an example page? · example-resource

✔ Do you want to customize layout? · no
```

`✔ Do you want to add an example page? ·example-resource` By selecting  you can view the tutorial in your local.


```bash
cd refine-advanced-tutorial

npm run dev
```

![refine_tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xyga7hkkgqnihs3r3v3.gif)

As you have seen, our example project is ready. Now let's examine how the features offered by **refine** are included in a project and how they are used.

## Adding i18n Provider to Your Project

### Create i18n Instance

First, we will create an i18n instance using react-i18next.

`src/i18n.ts:`

```tsx
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-xhr-backend";
import detector from "i18next-browser-languagedetector";

i18n
  .use(Backend)
  .use(detector)
  .use(initReactI18next)
  .init({
    supportedLngs: ["en", "de"],
    backend: {
      loadPath: "/locales/{{lng}}/{{ns}}.json",
    },
    defaultNS: "common",
    fallbackLng: ["en", "de"],
  });

export default i18n;

```

Let's import the `i18n` instance we created in index.tsx. Then let's wrap the App in `React.Suspense`.

`src/index.tsx:`

```tsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

import "./i18n";

ReactDOM.render(
    <React.StrictMode>
        <React.Suspense fallback="loading">
            <App />
        </React.Suspense>
    </React.StrictMode>,
    document.getElementById("root"),
);
```

Let's define our i18n provider and give it a **refine**.

`src/App.tsx:`

```tsx
import { Refine } from "@pankod/refine-core";
import { notificationProvider, Layout } from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router";
import "@pankod/refine-antd/dist/styles.min.css";
import dataProvider from "@pankod/refine-simple-rest";
import { PostList, PostCreate, PostEdit, PostShow } from "pages/posts";

import { useTranslation } from "react-i18next";

function App() {
  const { t, i18n } = useTranslation();

  const i18nProvider = {
    translate: (key: string, params: object) => t(key, params),
    changeLocale: (lang: string) => i18n.changeLanguage(lang),
    getLocale: () => i18n.language,
  };

  return (
    <Refine
      routerProvider={routerProvider}
      notificationProvider={notificationProvider}
      Layout={Layout}
      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
      resources={[
        {
          name: "posts",
          list: PostList,
          create: PostCreate,
          edit: PostEdit,
          show: PostShow,
        },
      ]}
      i18nProvider={i18nProvider}
    />
  );
}

export default App;
```

Now let's add our own translation. Let's create two separate json files in English and German.

`/public/locales/en/common.json`

```json
{
  "posts": {
    "posts": "Posts",
    "fields": {
      "id": "Id",
      "title": "Title",
      "category": "Category",
      "status": {
        "title": "Status",
        "published": "Published",
        "draft": "Draft",
        "rejected": "Rejected"
      },
      "content": "Content",
      "createdAt": "Created At"
    },
    "titles": {
      "create": "Create Post",
      "edit": "Edit Post",
      "list": "Posts",
      "show": "Show Post"
    }
  },
  "table": {
    "actions": "Actions"
  }
}
```

`/public/locales/de/common.json`

```json
{
  "posts": {
    "posts": "Einträge",
    "fields": {
      "id": "Id",
      "title": "Titel",
      "category": "Kategorie",
      "status": {
        "title": "Status",
        "published": "Veröffentlicht",
        "draft": "Draft",
        "rejected": "Abgelehnt"
      },
      "content": "Inhalh",
      "createdAt": "Erstellt am"
    },
    "titles": {
      "create": "Erstellen",
      "edit": "Bearbeiten",
      "list": "Einträge",
      "show": "Eintrag zeigen"
    }
  },
  "table": {
    "actions": "Aktionen"
  }
}
```

In this article, we have included the translation of only a small part as an example.

Now, let's create a select component in the header and examine our posts according to the language we have chosen.

`src/components/header.tsx:`

```tsx
import { useGetLocale, useSetLocale } from "@pankod/refine-core";
import {
  AntdLayout,
  Space,
  Menu,
  Button,
  Icons,
  Dropdown,
} from "@pankod/refine-antd";
import { useTranslation } from "react-i18next";

const { DownOutlined } = Icons;

export const Header: React.FC = () => {
  const { i18n } = useTranslation();
  const locale = useGetLocale();
  const changeLanguage = useSetLocale();

  const currentLocale = locale();

  const menu = (
    <Menu selectedKeys={[currentLocale]}>
      {[...(i18n.languages || [])].sort().map((lang: string) => (
        <Menu.Item key={lang} onClick={() => changeLanguage(lang)}>
          {lang === "en" ? "English" : "German"}
        </Menu.Item>
      ))}
    </Menu>
  );

  return (
    <AntdLayout.Header
      style={{
        display: "flex",
        justifyContent: "flex-end",
        alignItems: "center",
        padding: "0px 24px",
        height: "48px",
        backgroundColor: "#FFF",
      }}
    >
      <Dropdown overlay={menu}>
        <Button type="link">
          <Space>
            {currentLocale === "en" ? "English" : "German"}
            <DownOutlined />
          </Space>
        </Button>
      </Dropdown>
    </AntdLayout.Header>
  );
};
```

Let's define the header we created within the refine.

```tsx
  return (
    <Refine
      routerProvider={routerProvider}
      notificationProvider={notificationProvider}
      Layout={Layout}
      i18nProvider={i18nProvider}
      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
      Header={Header}
      resources={[
        {
          name: "posts",
          list: PostList,
          create: PostCreate,
          edit: PostEdit,
          show: PostShow,
        },
      ]}
    />
  );
```

Now our i18n Provider is ready to use, let's test it together.
 

![i18n Provider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z4iw7wk33h0i9ccdrr49.gif)

### Use the translation with Table Content

```tsx
import { 
  useTranslate,
  useMany,
} from "@pankod/refine-core";
import {
  List,
  Table,
  TextField,
  useTable,
  Space,
  EditButton,
  ShowButton,
} from "@pankod/refine-antd";

import { IPost, ICategory } from "interfaces";

export const PostList: React.FC = () => {
  const translate = useTranslate();
  const { tableProps } = useTable<IPost>();

  const categoryIds =
      tableProps?.dataSource?.map((item) => item.category.id) ?? [];
  const { data, isLoading } = useMany<ICategory>({
      resource: "categories",
      ids: categoryIds,
      queryOptions: {
          enabled: categoryIds.length > 0,
      },
  });

  return (
      <List>
          <Table {...tableProps} rowKey="id">
              <Table.Column dataIndex="id" title="ID" />
              <Table.Column
                  dataIndex="title"
                  title={translate("posts.fields.title")}
              />
              <Table.Column
                  dataIndex={["category", "id"]}
                  title={translate("posts.fields.category")}
                  render={(value) => {
                      if (isLoading) {
                          return <TextField value="Loading..." />;
                      }

                      return (
                          <TextField
                              value={
                                  data?.data.find((item) => item.id === value)
                                      ?.title
                              }
                          />
                      );
                  }}
              />
              <Table.Column<IPost>
                  title={translate("table.actions")}
                  dataIndex="actions"
                  key="actions"
                  render={(_value, record) => (
                      <Space>
                          <EditButton size="small" recordItemId={record.id} />
                          <ShowButton size="small" recordItemId={record.id} />
                      </Space>
                  )}
              />
          </Table>
      </List>
  );
};
```
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avkxcl2zumuo75v774cp.gif)

You can add the translation you want and organize your content according to different languages ​​together with the **refine** i18n Provider.

Check out [refine i18n Provider](https://refine.dev/docs/core/providers/i18n-provider/) for more detailed information and step-by-step guide

 
## Add Live Provider(Realtime) to Your Project with Refine

refine lets you add Realtime support to your app via liveProvider prop for <Refine>. It can be used to update and show data in Realtime throughout your app. 

Now let's make our application Realtime using the [refine Live Provider](https://refine.dev/docs/next/guides-and-concepts/real-time/)

We will using [Ably](https://ably.com/) in this article to provide Realtime features.

### Installation

We need to install Ably live provider package from refine.

```bash
 npm install @pankod/refine-ably
```

First, let's create ably-client and define our Ably API key.

`src/utility/client.ts:`

```tsx
import { Ably } from "@pankod/refine-ably";

export const ablyClient = new Ably.Realtime("YOUR_ABLY_API_KEY");
```

Then pass liveProvider from @pankod/refine-ably to <Refine>.

`src/App.tsx:`

```tsx
import { Refine } from "@pankod/refine-core";
import { notificationProvider, Layout } from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router";
import "@pankod/refine-antd/dist/styles.min.css";
import dataProvider from "@pankod/refine-simple-rest";
import { liveProvider } from "@pankod/refine-ably";
import { ablyClient } from "utility";

import { PostList, PostCreate, PostEdit, PostShow } from "pages/posts";

import { Header } from "./components/header";

import { useTranslation } from "react-i18next";

function App() {
  const { t, i18n } = useTranslation();

  const i18nProvider = {
    translate: (key: string, params: object) => t(key, params),
    changeLocale: (lang: string) => i18n.changeLanguage(lang),
    getLocale: () => i18n.language,
  };

  return (
    <Refine
      routerProvider={routerProvider}
      notificationProvider={notificationProvider}
      Layout={Layout}
      i18nProvider={i18nProvider}
      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
      Header={Header}
      liveProvider={liveProvider(ablyClient)}
      liveMode="auto"
      resources={[
        {
          name: "posts",
          list: PostList,
          create: PostCreate,
          edit: PostEdit,
          show: PostShow,
        },
      ]}
    />
  );
}

export default App;
```

You can configure `liveMode`, this example use "auto" mode. 

Check out [Refine Live Provider](https://refine.dev/docs/next/guides-and-concepts/real-time/) for more detailed information and step-by-step guide.

Our project is now Realtime! Thanks to **refine** Live Provider, we made our project Realtime by adding only 2 lines.

Let's see how our RealTime Project works.

![Refine Live Provider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wx22nygkiwkzr6g2blpg.gif)
 
 
## Add Access Control to Your Project with Refine

You can control your project as you wish with the **refine react admin framework**. Now let's add [Access Control Provider](https://refine.dev/docs/next/core/providers/accessControl-provider/) to our refine project.

Access control is a broad topic where there are lots of advanced solutions that provide different set of features. refine is deliberately agnostic for its own API to be able to integrate different methods (RBAC, ABAC, ACL, etc.) and different libraries (Casbin, CASL, Cerbos, AccessControl.js). can method would be the entry point for those solutions.

[Refer to the Access Control Provider documentation for detailed information. →](https://refine.dev/docs/next/core/providers/accessControl-provider/)

Let's create two Roles, Admin and Editor. Admin have full CRUD authority on the posts. The Editor role, on the other hand, only has the authority to create and edit new posts. In other words, the person in the editor role cannot delete the posts and cannot view all the rows on the table.

Let's start by creating two buttons for the `Admin` and `Editor` roles in our created Header Component.

`/src/componets/header.tsx:`

```tsx
import { useGetLocale, useSetLocale } from "@pankod/refine-core";
import {
  AntdLayout,
  Space,
  Menu,
  Button,
  Icons,
  Dropdown,
  Radio,
} from "@pankod/refine-antd";
import { useTranslation } from "react-i18next";

const { DownOutlined } = Icons;

interface HeaderProps {
  role: string;
}

export const Header: React.FC<HeaderProps> = ({ role }) => {
  const { i18n } = useTranslation();
  const locale = useGetLocale();
  const changeLanguage = useSetLocale();

  const currentLocale = locale();

  const menu = (
    <Menu selectedKeys={[currentLocale]}>
      {[...(i18n.languages || [])].sort().map((lang: string) => (
        <Menu.Item key={lang} onClick={() => changeLanguage(lang)}>
          {lang === "en" ? "English" : "German"}
        </Menu.Item>
      ))}
    </Menu>
  );

  return (
    <AntdLayout.Header
      style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        padding: "0px 24px",
        height: "48px",
        backgroundColor: "#FFF",
      }}
    >
      <Radio.Group
      value={role}
      onChange={(event) => {
        localStorage.setItem("role", event.target.value);
        location.reload();
      }}
      >
        <Radio.Button value="admin">Admin</Radio.Button>
        <Radio.Button value="editor">Editor</Radio.Button>
      </Radio.Group>

      <Dropdown overlay={menu}>
        <Button type="link">
          <Space>
            {currentLocale === "en" ? "English" : "German"}
            <DownOutlined />
          </Space>
        </Button>
      </Dropdown>
    </AntdLayout.Header>
  );
};
```

![Refine Role Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zuddkwpwh3eeyeq57xx8.png)

In this article, we will use [Cerbos](https://cerbos.dev/) to **refine** Access Control.

```bash
npm install cerbos
```

After the installation is complete, let's create a Cerbos object in the App.tsx file and define it in <Refine>.

```tsx
import { Cerbos } from "cerbos";

const cerbos = new Cerbos({
  hostname: "https://demo-pdp.cerbos.cloud", // The Cerbos PDP instance
  playgroundInstance: "WS961950bd85QNYlAvTmJYubP0bqF7e3", // The playground instance ID to test
});
```

```tsx
    <Refine
      routerProvider={routerProvider}
      notificationProvider={notificationProvider}
      Layout={Layout}
      i18nProvider={i18nProvider}
      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
      Header={() => <Header role={role} />}
      liveProvider={liveProvider(ablyClient)}
      liveMode="auto"
      accessControlProvider={{
        can: async ({ action, params, resource }) => {
          const cerbosPayload = {
            principal: {
              id: "demoUser", // Fake a user ID
              roles: [role],
              // this is where user attributes can be passed
              attr: {},
            },
            // the resouces being access - can be multiple
            resource: {
              kind: resource,
              instances: {
                [params?.id || "new"]: {
                  attr: params,
                },
              },
            },
            // the list of actions on the resource to check authorization for
            actions: [action],
          };
          const result = await cerbos.check(cerbosPayload);
          return Promise.resolve({
            can: result.isAuthorized(params?.id || "new", action),
          });
        },
      }}
      resources={[
        {
          name: "posts",
          list: PostList,
          create: PostCreate,
          edit: PostEdit,
          show: PostShow,
          canDelete: true,
        },
      ]}
    />
``` 

We will perform our actions according to the role we choose from the header. As you can see above, we set this with the `access Control Provider` `can` method.

Now using the **refine** [`useCan`](https://refine.dev/docs/next/core/hooks/accessControl/useCan/)hook Let's perform operations according to roles within our list.


`src/pages/PostList.tsx:`

```tsx
import {
  IResourceComponentsProps,
  useMany,
  useTranslate,
  useCan,
} from "@pankod/refine-core";

import {
  List,
  Table,
  TextField,
  useTable,
  Space,
  EditButton,
  ShowButton,
  FilterDropdown,
  useSelect,
  Select,
  Radio,
  TagField,
  NumberField,
} from "@pankod/refine-antd";

import { IPost, ICategory } from "interfaces";

export const PostList: React.FC<IResourceComponentsProps> = () => {
  const translate = useTranslate();
  const { tableProps } = useTable<IPost>();

  const categoryIds =
    tableProps?.dataSource?.map((item) => item.category.id) ?? [];
  const { data, isLoading } = useMany<ICategory>({
    resource: "categories",
    ids: categoryIds,
    queryOptions: {
      enabled: categoryIds.length > 0,
    },
  });

  const { selectProps: categorySelectProps } = useSelect<ICategory>({
    resource: "categories",
    optionLabel: "title",
    optionValue: "id",
  });

  const { data: canAccess } = useCan({
    resource: "posts",
    action: "field",
    params: { field: "hit" },
  });

  return (
    <List>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="id" title="ID" />
        <Table.Column
          dataIndex="title"
          title={translate("posts.fields.title")}
        />
        <Table.Column
          dataIndex={["category", "id"]}
          title={translate("posts.fields.category")}
          render={(value) => {
            if (isLoading) {
              return <TextField value="Loading..." />;
            }

            return (
              <TextField
                value={data?.data.find((item) => item.id === value)?.title}
              />
            );
          }}
          filterDropdown={(props) => (
            <FilterDropdown {...props}>
              <Select
                style={{ minWidth: 200 }}
                mode="multiple"
                placeholder="Select Category"
                {...categorySelectProps}
              />
            </FilterDropdown>
          )}
        />
        {canAccess?.can && (
          <Table.Column
            dataIndex="hit"
            title="Hit"
            render={(value: number) => (
              <NumberField
                value={value}
                options={{
                  notation: "compact",
                }}
              />
            )}
          />
        )}
        <Table.Column
          dataIndex="status"
          title="Status"
          render={(value: string) => <TagField value={value} />}
          filterDropdown={(props: any) => (
            <FilterDropdown {...props}>
              <Radio.Group>
                <Radio value="published">Published</Radio>
                <Radio value="draft">Draft</Radio>
                <Radio value="rejected">Rejected</Radio>
              </Radio.Group>
            </FilterDropdown>
          )}
        />
        <Table.Column<IPost>
          title={translate("table.actions")}
          dataIndex="actions"
          render={(_, record) => (
            <Space>
              <EditButton hideText size="small" recordItemId={record.id} />
              <ShowButton hideText size="small" recordItemId={record.id} />
            </Space>
          )}
        />
      </Table>
    </List>
  );
};
```

Here, if the selected role is Admin, the 'Hit' section will appear in our Table. We have stated that the Editor role cannot display this section.

![Refine Access Control](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/685bjc78n9avfvzwrpkw.gif)
 
Check out [**refine** Access Control](https://refine.dev/docs/next/guides-and-concepts/access-control/) Provider for more detailed information and step-by-step guide

## Conclusion 

In this tutorial, we have shown that the features of the **refine** internal tool Framework are useful and how simple it is. These features will shorten your development time considerably. While Refine offers you the opportunity to develop quickly, it does not limit you and gives you the opportunity to customize your project as you wish.

We saw how simple it was for refine to include and use the Internationalization (i18n), Live Provider(Realtime) and Access Control features. You can develop more complex applications in a simple way with **refine**.

With **refine** react admin, you can develop any web application you want with `Admin Panel`, Basic `Crud App` or Next.js-SSR Support.


**refine** offers the opportunity to develop `B2B` and `B2C` applications without any restrictions and in a fully customizable manner.

[Check out for detailed information about refine. →](https://refine.dev/docs/getting-started/overview/)

[For information about other features of **refine** →](https://refine.dev/docs/core/providers/data-provider/)

[Live CodeSandbox Example](https://codesandbox.io/s/x5rtmg)