DEV Community: Melih Ekinci

How to Create Full Stack React/Next.JS Web App in Few Hour

Melih Ekinci — Mon, 02 May 2022 06:23:03 +0000

We frequently require quick development and sometimes flexibility while developing a Full Stack application. Aside from speed and flexibility, we must establish the application architecture correctly at the start so that we are not subjected to any more needless work throughout the development process.

In this article, we will use the refine framework to develop a full stack application. refine will provide us with the speed and flexibility we are looking for, while assisting with the overall project architecture during web application development.

What is Refine?

refine is a React-based framework for rapid building of internal tools. It's is a a collection of helper hooks, components and providers. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.

Refine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to admin panels, B2B applications and dashboards.

Why Should Use Refine?

refine offers you almost everything you need while developing an Admin Panel, Dashboard, B2B or B2C application, with many features it provides. It does not limit you in situations that may arise during project development and offers you the opportunity to customize it.

With the Data Provider feature it provides, you don't need to think about your API or GraphQL queries and write extra queries! Thanks to Refine hooks, you can easily fetching the data in your database and manage your state structure. In addition to quickly fetch and manage your data, you can easily design your UI with Ant Design and Material UI (comming soon) ready components used as out-of-the-box by refine.

refine is a headless React framework. It can be used independently of the UI. You can easily use all the features of refinement with any UI library.

Key features

🔥 Headless : Works with any UI framework

⚙️ 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, Nhost, Appwrite, Firebase, Directus 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.

To learn more about refine features, we recommend that you read the Overview and Learn the Basics guides before starting development.

Benchmark

refine, by removing unnecessary repetition in your code, reduces number of lines of code and makes it easier to maintain. Below is a size comparison for an example project:

Create Full Stack App

As we mentioned above, you can easily handle any API and GraphQL queries without writing extra code thanks to the refine Data Provider hooks. If you do not have a custom backend, you can choose one of the following backend providers that work in harmony with refine.

refine includes many out-of-the-box data providers to use in your projects like:

Refer to the dataProvider documentation for detailed usage.

You can develop a full-featured web application by using any your custom backend or the above backend providers with refine.

Check out the Full Stack application examples created with refine and out-of-the-box data providers:

How to use Refine

refine is very simple to use. Its examples and structure are handled in their simplest form. It is very successful in terms of documentation. You can find the answers you are looking for or a very detailed explanation of how to use a feature in the documentation.

Let's see how to use it!

Create a Refine Project

Let's start by creating our refine project. You can use the superplate to create a refine project. superplate will quickly create our refine project according to the features we choose.

npx superplate-cli -p refine-react my-first-refine-project

✔ What will be the name of your app › my-first-refine-project

✔ Package manager: · npm

✔ Do you want to using UI Framework?: · Yes, I want Ant Design

✔ Do you want to customize theme?: · css

✔ Router Provider: · react-router-v6

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

✔ Auth Provider: · none

✔ i18n - Internationalization: · no

Creating your project is that easy. All the packages you need and choose come ready-made.

Our project is ready. Now let's consider the process of fetching items from an API with 1000 items and listing only their titles.
First, we will use libraries such as axios, fetch to fetch the data. Then after the data comes, we will show it in the UI. If there is a change in the state, we will have to change them from the beginning and think about them. Even in its simplest form, it can be challenging to handle.

With refine, with just a few lines of code,
Besides basic operations (such as data fetching), you can manage and manipulate state changes in your user interface. You can also manage filtering, sorting and pagination of your data by adding just a few simple lines of code.

Let's see how we can use these processes and features that we talked about with refine.

We will use refine's https://api.fake-rest.refine.dev/ API to fetch the titles we mentioned. Thanks to the project we set up with superplate, our App.tsx comes ready. Now let's create a list component with Refine and see how to fetch the titles.

{
    "id": 1,
    "title": "Facilis voluptas sit consequatur commodi.",
    "slug": "enim-possimus-nostrum",
    "content": "Laborum consequatur illo illum sit. Dolorem et recusandae consequatur qui voluptas fuga mollitia voluptate. Et excepturi magnam. Et fugiat doloribus et. Ipsa aperiam et. Qui saepe repudiandae quam tempora. Eos necessitatibus voluptatem facilis maxime. Nobis et accusantium rerum libero tempore earum autem suscipit quas. Dolorem consequatur quam. Repellat praesentium veniam tempora excepturi iste veritatis quia sit.",
    "hit": 798263
}

import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

import "@pankod/refine-antd/dist/styles.min.css";

const App: React.FC = () => {
    return (
        <Refine
            routerProvider={routerProvider}
            dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
        />
    );
};

export default App;

Step I

import { List, Table, useTable } from "@pankod/refine-antd";

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

    return (
        <List>
            <Table {...tableProps} rowKey="id">
                <Table.Column dataIndex="title" title="TITLE" />
            </Table>
        </List>
    );
};

interface IPost {
    title: string;
}

Step II

import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";

import "@pankod/refine-antd/dist/styles.min.css";

import { PostList } from "pages/post";

const App: React.FC = () => {
    return (
        <Refine
            routerProvider={routerProvider}
            dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
            resource={[{ name: "posts", list: PostList }]}
        />
    );
};

export default App;

As you have seen, we have listed and paginated the titles coming from an API by writing just a few lines of code, thanks to the refine and refine-antd package. This is the simplest example of refinement. It is possible to do much more, and the Dashboard you need, B2B, B2C, Admin Panel and any web application you want with refine in a very short time and in a very flexible way.

Refine Demo Apps

Refine Client Example -> Refine Headless + Refine Core + Next.js (SSR) + Tailwind CSS

Refine Admin Panel Example -> Refine Antd + Refine Core

Powerful Features of Refine

Headless
Next.js/SSR Support 🚀🚀🚀
Realtime
Access Control (RBAC, LDAP, ACL, ABAC, etc.)
i18n (internationalization)
Audit Log(Comming Soon)
Material UI Support(Comming Soon)
CSV Import/Export
Multi Level Menu
GraphQL Support
Dynamic Multi-level Menus
All features of refine are available as open source.

For more information about all refine features and refine →

Learn the refine basics →

Comparison | Refine vs React-Admin vs AdminBro vs Retool →

Conclusion

In this article, we went through refine and showed you how to create a full stack application with backend providers that are integrated with it. You may rapidly and flexibly create a web application with refine. refine is a very successful and developing open source internal tool framework. It solves the deficiencies in B2B, B2C and Admin panel development processes well and offers features suitable for needs.

One of the biggest features that distinguishes refine from other frameworks is that it is customizable. Combined with refine headless, it now provides more customization options. This provides a great deal of convenience in the project you will develop.

You can develop any web application or admin panel you want in a very short time with refine.

Give refine a star on GitHub if you like it - your support will help us continue making this tool amazing!

How to Multipart File Upload Using FormData with React Hook Form

Melih Ekinci — Thu, 31 Mar 2022 09:12:11 +0000

In this example, we will learn how to upload files with React Hook Form, which is very preferred for managing forms with React. We will use FormData to upload a file and we will upload a file of type multipart/form-data.

Introduction

We will examine step by step how to use the Multipart file upload process, which is generally used to upload an image or file to a server, with React Hook Form. Let's first create a simple express server to upload the files. Then, let's upload our files to this server with the React Hook form. Let's start!

Create Express Server

npm i express

Then, let's install the cors package necessary to allow file upload to the server, and the express-fileupload package to manage the paths of the downloaded files.

npm i cors express-fileupload

We have completed our installations to create a simple server. This server will indicate that the file has been uploaded successfully or failed, in response to a POST call to an endpoint that we have specified.

import express from "express";
import fileupload from "express-fileupload";
import cors from "cors";

const app = express();

app.use(
    fileupload({
        createParentPath: true,
    }),
);

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.post("/upload-file", async (req, res) => {
    try {
        if (!req.files) {
            res.send({
                status: "failed",
                message: "No file uploaded",
            });
        } else {
            let file = req.files.file;

            console.log(req.files);

            file.mv("./uploads/" + file.name);

            res.send({
                status: "success",
                message: "File is uploaded",
                data: {
                    name: file.name,
                    mimetype: file.mimetype,
                    size: file.size,
                },
            });
        }
    } catch (err) {
        res.status(500).send(err);
    }
});

const port = process.env.PORT || 5000;

app.listen(port, () => console.log(`Server started on port ${port}`));

We created a server with Express. As you can see, we have successfully started our server, now we have an endpoint to handle requests to this port. Now let's create a React project and send our files to this server with React Hook Form.

Create React Project

Let's create a react project with Create React App and then install the necessary packages for our project.

npx create-react-app react-hook-form-multipart-upload

After your project is ready, let's go to our project directory and install the React Hook Form package.

cd react-hook-form-multipart-upload
npm install react-hook-form

npm run start

Multipart File Upload with React Hook Form

We created our React project and installed our react hook form package. Now let's create a form and manage it with the react hook form.

import React from "react";
import { useForm } from "react-hook-form";

function App() {
    const { register, handleSubmit } = useForm();

    const onSubmit = () => {};

    return (
        <div className="App">
            <form onSubmit={handleSubmit(onSubmit)}>
                <input type="file" {...register("file")} />

                <input type="submit" />
            </form>
        </div>
    );
}

export default App;

To manage our form and its elements, we defined the register and handleSubmit methods from the react hook form. Now, let's upload the file selected in our onSubmit method to our server by placing it in the formData.

import React from "react";
import { useForm } from "react-hook-form";

function App() {
    const { register, handleSubmit } = useForm();

    const onSubmit = async (data) => {
        const formData = new FormData();
        formData.append("file", data.file[0]);

        const res = await fetch("http://localhost:5000/upload-file", {
            method: "POST",
            body: formData,
        }).then((res) => res.json());
        alert(JSON.stringify(`${res.message}, status: ${res.status}`));
    };

    return (
        <div className="App">
            <form onSubmit={handleSubmit(onSubmit)}>
                <input type="file" {...register("file")} />

                <input type="submit" />
            </form>
        </div>
    );
}

export default App;

Our project is ready! With React Hook Form, we can now send the selected file to our server in multipart/form-data type. Let's test it!

Are You Looking React Web Framework?

A React-based framework for building internal tools, rapidly. refine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to admin panels, B2B applications and dashboards.

🔥 Headless : Works with any UI framework

⚙️ 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, Strapi, NestJs CRUD, Hasura, Nhost, Airtable, Supabase, Appwrite 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.

Refer to the refine documentation for more information. →

How to Multipart File Upload with Refine and React Hook Form?

It allows you to manage your forms and send data to your server with the refine-react-hook-form adapter it publishes with its refine headless feature. With this adapter, you can use all the features of the React Hook Form in harmony with refine. You can also perform Multipart File Upload(multipart/form-data) operation very easily using this adapter.

Refer to the refine-react-hook-form adapter documentation for detailed information. →

View Source

You can manage your form very easily with the refine-react-hook-form adapter. The data created in the form will be automatically saved to the database with the refine onFinish method.

This is a basic CMS app that was created with refine's headless feature. You may quickly build records and save them to your database using refine. We'll look at the CreatePost page of this step. We'll create a record in the form and manage it with the refine-react-hook-form adapter.

Refine Create Post Page:

import { useState } from "react";
import { useForm } from "@pankod/refine-react-hook-form";
import { useSelect, useApiUrl } from "@pankod/refine-core";

import axios from "axios";

export const PostCreate: React.FC = () => {
    const [isUploading, setIsUploading] = useState<boolean>(false);

    const {
        refineCore: { onFinish, formLoading },
        register,
        handleSubmit,
        formState: { errors },
        setValue,
    } = useForm();

    const apiURL = useApiUrl();

    const { options } = useSelect({
        resource: "categories",
    });

    const onSubmitFile = async () => {
        setIsUploading(true);
        const inputFile = document.getElementById(
            "fileInput",
        ) as HTMLInputElement;

        const formData = new FormData();
        formData.append("file", inputFile?.files?.item(0) as File);

        const res = await axios.post<{ url: string }>(
            `${apiURL}/media/upload`,
            formData,
            {
                withCredentials: false,
                headers: {
                    "Access-Control-Allow-Origin": "*",
                },
            },
        );

        setValue("thumbnail", res.data.url);
        setIsUploading(false);
    };
    return (
        <form onSubmit={handleSubmit(onFinish)}>
            <label>Title: </label>
            <input {...register("title", { required: true })} />
            {errors.title && <span>This field is required</span>}
            <br />
            <label>Status: </label>
            <select {...register("status")}>
                <option value="published">published</option>
                <option value="draft">draft</option>
                <option value="rejected">rejected</option>
            </select>
            <br />
            <label>Category: </label>
            <select
                defaultValue={""}
                {...register("category.id", { required: true })}
            >
                <option value={""} disabled>
                    Please select
                </option>
                {options?.map((category) => (
                    <option key={category.value} value={category.value}>
                        {category.label}
                    </option>
                ))}
            </select>
            {errors.category && <span>This field is required</span>}
            <br />
            <label>Content: </label>
            <br />
            <textarea
                {...register("content", { required: true })}
                rows={10}
                cols={50}
            />
            {errors.content && <span>This field is required</span>}
            <br />
            <br />
            <label>Image: </label>
            <input id="fileInput" type="file" onChange={onSubmitFile} />
            <input
                type="hidden"
                {...register("thumbnail", { required: true })}
            />
            {errors.thumbnail && <span>This field is required</span>}
            <br />
            <br />
            <input type="submit" disabled={isUploading} value="Submit" />
            {formLoading && <p>Loading</p>}
        </form>
    );
};

As you can see, we have easily saved both our data such as title, category, status and an image in the form of multipart/form-data to our database using the refine-react-hook-form adapter. We've only shown how to utilize the Multipart File Upload feature for our example in this tutorial. For examine refine CMS example, checkout the live codeSandbox below.

Refine Multipart Upload Live CodeSandbox Example

We are going back to 1995! The perfect harmony of Modern stack and Win95

Melih Ekinci — Fri, 25 Mar 2022 11:17:38 +0000

With refine's headless feature, you can include any UI in your project and take full advantage of all its features without worrying about compatibility. To build a project with a vintage Windows95 style using React95 UI components, we'll use the refine headless feature.

Introduction

In this tutorial, we will use Supabase Database in the backend of our project. Our goal with this is to create a Windows95-style admin panel using refine headless and refine Supabase Data Provider features.

Project Setup

Let's start by creating our refine project. You can use the superplate to create a refine project. superplate will quickly create our refine project according to the features we choose.

npx superplate-cli -p refine-react refine-react95-example

✔ What will be the name of your app › refine-react95-example

✔ Package manager: · npm

✔ Do you want to using UI Framework?: · no(headless)

✔ Data Provider: · supabase-data-provider

✔ i18n - Internationalization: · no

That's it! After the installation process is finished, our refine project is ready. In addition, Supabase Data Provider features will also come ready. As we mentioned above, since we are using the headless feature of refine, we will manage the UI processes ourselves. In this project, we will use React95 for the UI. Let's continue by installing the necessary packages in our refine Project directory.

npm i react95 styled-components

Manually Project Setup

npm install @pankod/refine-core @pankod/refine-supabase

npm install react95 styled-components

Let's begin editing our project now that it's ready to use.

Usage

refine, automatically creates supabaseClient and AuthProvider for you. All you have to do is define your Database URL and Secret_Key. You can see how to use it in detail below.

Supabase Client

src/utility/supabaseClient.ts:

import { createClient } from "@pankod/refine-supabase";

const SUPABASE_URL = "YOUR_DATABASE_URL";
const SUPABASE_KEY = "YOUR_SUPABASE_KEY";

export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY);

AuthProvider

src/authProvider.ts:

import { AuthProvider } from "@pankod/refine-core";

import { supabaseClient } from "utility";

const authProvider: AuthProvider = {
    login: async ({ username, password }) => {
        const { user, error } = await supabaseClient.auth.signIn({
            email: username,
            password,
        });

        if (error) {
            return Promise.reject(error);
        }

        if (user) {
            return Promise.resolve();
        }
    },
    logout: async () => {
        const { error } = await supabaseClient.auth.signOut();

        if (error) {
            return Promise.reject(error);
        }

        return Promise.resolve("/");
    },
    checkError: () => Promise.resolve(),
    checkAuth: () => {
        const session = supabaseClient.auth.session();

        if (session) {
            return Promise.resolve();
        }

        return Promise.reject();
    },
    getPermissions: async () => {
        const user = supabaseClient.auth.user();

        if (user) {
            return Promise.resolve(user.role);
        }
    },
    getUserIdentity: async () => {
        const user = supabaseClient.auth.user();

        if (user) {
            return Promise.resolve({
                ...user,
                name: user.email,
            });
        }
    },
};

export default authProvider;

Configure Refine for Supabase

src/App.tsx

import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";

import { dataProvider } from "@pankod/refine-supabase";
import authProvider from "./authProvider";
import { supabaseClient } from "utility";

function App() {
    return (
        <Refine
            routerProvider={routerProvider}
            dataProvider={dataProvider(supabaseClient)}
            authProvider={authProvider}
        />
    );
}

export default App;

We've completed our project structure. Now we can easily access our Supabase Database and utilize our data in our user interface. To begin, let's define the React95 library and create a Login page to access our Supabase data.

React95 Setup

src/App.tsx:

import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import { dataProvider } from "@pankod/refine-supabase";
import authProvider from "./authProvider";
import { supabaseClient } from "utility";

import original from "react95/dist/themes/original";
import { ThemeProvider } from "styled-components";

function App() {
    return (
        <ThemeProvider theme={original}>
            <Refine
                routerProvider={routerProvider}
                dataProvider={dataProvider(supabaseClient)}
                authProvider={authProvider}
            />
        </ThemeProvider>
    );
}

export default App;

In this step, we imported and defined the React95 library in our Refine project. We can now use React95 components and Refine features together in harmony. Let's design a Windows95-style Login page!

Refine Login Page

src/pages/login/LoginPage.tsx:

import { useState } from "react";
import { useLogin } from "@pankod/refine-core";

import {
    Window,
    WindowHeader,
    WindowContent,
    TextField,
    Button,
} from "react95";

interface ILoginForm {
    username: string;
    password: string;
}

export const LoginPage = () => {
    const [username, setUsername] = useState("info@refine.dev");
    const [password, setPassword] = useState("refine-supabase");

    const { mutate: login } = useLogin<ILoginForm>();

    return (
        <div
            style={{
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",
                textAlign: "center",
                minHeight: "100vh",
                backgroundColor: "rgb(0, 128, 128)",
            }}
        >
            <Window>
                <WindowHeader active={true} className="window-header">
                    <span> Refine Login</span>
                </WindowHeader>
                <div style={{ marginTop: 8 }}>
                    <img src="./refine.png" alt="refine-logo" width={100} />
                </div>
                <WindowContent>
                    <form
                        onSubmit={(e) => {
                            e.preventDefault();
                            login({ username, password });
                        }}
                    >
                        <div style={{ width: 500 }}>
                            <div style={{ display: "flex" }}>
                                <TextField
                                    placeholder="User Name"
                                    fullWidth
                                    value={username}
                                    onChange={(e) => {
                                        setUsername(e.target.value);
                                    }}
                                />
                            </div>
                            <br />
                            <TextField
                                placeholder="Password"
                                fullWidth
                                type="password"
                                value={password}
                                onChange={(e) => {
                                    setPassword(e.target.value);
                                }}
                            />
                            <br />
                            <Button type="submit" value="login">
                                Sign in
                            </Button>
                        </div>
                    </form>
                </WindowContent>
            </Window>
        </div>
    );
};

We used React95 components to construct our Login page design. Then, using the refine <AuthProvider> <useLogin> hook, we carried out the database sign-in operation. We can now access our database and fetch our Posts and Categories, as well as create our pages.

Refine Post Page

After our login process, we'll get the posts from our Supabase Database and display them in the table. We will use React95 components for the UI portion of our table, as well as refine-react-table package to handle pagination, sorting, and filtering. You can use all the features of React Table with the refine-react-table adapter. On this page, we will use this adapter of refine to manage the table.

In this step, we'll show how to use the refine-react-table package to create a data table. We will begin by examining this page in two parts. In the first step, we'll utilize our refine-react-table package and React95 UI components to only use our data. Then, in the following stage, we'll arrange the sorting, pagination processes and our UI part. Let's start!

Refer to the refine React Table packages documentation for detailed information. →

PostList Part I:

import { useMemo } from "react";
import { useOne } from "@pankod/refine-core";
import { useTable, Column } from "@pankod/refine-react-table";

import { IPost, ICategory, ICsvPost } from "interfaces";
import {
    Table,
    TableBody,
    TableHead,
    TableRow,
    TableHeadCell,
    TableDataCell,
    Window,
    WindowHeader,
    WindowContent,
} from "react95";

export const PostList = () => {
    const columns: Array<Column> = useMemo(
        () => [
            {
                id: "id",
                Header: "ID",
                accessor: "id",
            },
            {
                id: "title",
                Header: "Title",
                accessor: "title",
            },
            {
                id: "category.id",
                Header: "Category",
                accessor: "category.id",
                Cell: ({ cell }) => {
                    const { data, isLoading } = useOne<ICategory>({
                        resource: "categories",
                        id: cell.row.original.categoryId,
                    });

                    if (isLoading) {
                        return <p>loading..</p>;
                    }

                    return data?.data.title ?? "Not Found";
                },
            },
        ],
        [],
    );

    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
        useTable<IPost>({ columns });

    return (
        <>
            <Window style={{ width: "100%" }}>
                <WindowHeader>Posts</WindowHeader>
                <WindowContent>
                    <Table {...getTableProps()}>
                        <TableHead>
                            {headerGroups.map((headerGroup) => (
                                <TableRow
                                    {...headerGroup.getHeaderGroupProps()}
                                >
                                    {headerGroup.headers.map((column) => (
                                        <TableHeadCell
                                            {...column.getHeaderProps()}
                                        >
                                            {column.render("Header")}
                                        </TableHeadCell>
                                    ))}
                                </TableRow>
                            ))}
                        </TableHead>
                        <TableBody {...getTableBodyProps()}>
                            {rows.map((row, i) => {
                                prepareRow(row);
                                return (
                                    <TableRow {...row.getRowProps()}>
                                        {row.cells.map((cell) => {
                                            return (
                                                <TableDataCell
                                                    {...cell.getCellProps()}
                                                >
                                                    {cell.render("Cell")}
                                                </TableDataCell>
                                            );
                                        })}
                                    </TableRow>
                                );
                            })}
                        </TableBody>
                    </Table>
                </WindowContent>
            </Window>
        </>
    );
};

As you can see, our first step is complete. Thanks to the refine-react-table adapter, we fetch our Supabase data and process as table data. Then we placed this data in React95 components. Now let's move on to the second step.

PostList Part II:

import { useMemo, useRef, useState } from "react";
import { useOne, useNavigation, useDelete } from "@pankod/refine-core";
import {
    useTable,
    Column,
    useSortBy,
    usePagination,
    useFilters,
} from "@pankod/refine-react-table";

import { IPost, ICategory } from "interfaces";
import {
    Table,
    TableBody,
    TableHead,
    TableRow,
    TableHeadCell,
    TableDataCell,
    Window,
    WindowHeader,
    WindowContent,
    Button,
    Select,
    NumberField,
    Progress,
} from "react95";

export const PostList = () => {
    const { edit, create } = useNavigation();
    const { mutate } = useDelete();

    const columns: Array<Column> = useMemo(
        () => [
            {
                id: "id",
                Header: "ID",
                accessor: "id",
            },
            {
                id: "title",
                Header: "Title",
                accessor: "title",
            },
            {
                id: "category.id",
                Header: "Category",
                accessor: "category.id",
                Cell: ({ cell }) => {
                    const { data, isLoading } = useOne<ICategory>({
                        resource: "categories",
                        id: cell.row.original.categoryId,
                    });

                    if (isLoading) {
                        return <p>loading..</p>;
                    }

                    return data?.data.title ?? "Not Found";
                },
            },
            {
                id: "action",
                Header: "Action",
                accessor: "id",
                Cell: ({ value }) => (
                    <div>
                        <Button onClick={() => edit("posts", value)}>
                            Edit
                        </Button>

                        <Button
                            style={{ marginLeft: 4, marginTop: 4 }}
                            onClick={() =>
                                mutate({ id: value, resource: "posts" })
                            }
                        >
                            Delete
                        </Button>
                    </div>
                ),
            },
        ],
        [],
    );

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
        pageOptions,
        setPageSize,
        gotoPage,
        state: { pageIndex, pageSize },
    } = useTable<IPost>({ columns }, useFilters, useSortBy, usePagination);

    return (
        <>
            <Window style={{ width: "100%" }}>
                <WindowHeader>Posts</WindowHeader>
                <WindowContent>
                    <Table {...getTableProps()}>
                        <TableHead>
                            {headerGroups.map((headerGroup) => (
                                <TableRow
                                    {...headerGroup.getHeaderGroupProps()}
                                >
                                    {headerGroup.headers.map((column) => (
                                        <TableHeadCell
                                            {...column.getHeaderProps(
                                                column.getSortByToggleProps(),
                                            )}
                                        >
                                            {column.render("Header")}
                                        </TableHeadCell>
                                    ))}
                                </TableRow>
                            ))}
                        </TableHead>
                        <TableBody {...getTableBodyProps()}>
                            {rows.map((row, i) => {
                                prepareRow(row);
                                return (
                                    <TableRow {...row.getRowProps()}>
                                        {row.cells.map((cell) => {
                                            return (
                                                <TableDataCell
                                                    {...cell.getCellProps()}
                                                >
                                                    {cell.render("Cell")}
                                                </TableDataCell>
                                            );
                                        })}
                                    </TableRow>
                                );
                            })}
                        </TableBody>
                    </Table>
                </WindowContent>
                <div
                    style={{
                        display: "flex",
                        justifyContent: "flex-end",
                        marginBottom: 8,
                        marginTop: 8,
                        alignItems: "flex-end",
                    }}
                >
                    <Select
                        style={{ marginLeft: 8 }}
                        value={pageSize}
                        onChange={(_, selection) => {
                            setPageSize(selection.value);
                        }}
                        options={opt}
                        defaultValue={"10"}
                    ></Select>
                    <span style={{ marginLeft: 8 }}>
                        Page{" "}
                        <strong>
                            {pageIndex + 1} of {pageOptions.length}
                        </strong>
                        <span style={{ marginLeft: 8 }}>
                            Go to page:
                            <NumberField
                                style={{ marginLeft: 8 }}
                                min={1}
                                defaultValue={pageIndex + 1}
                                width={130}
                                onChange={(value) => {
                                    const page = value ? Number(value) - 1 : 0;
                                    gotoPage(page);
                                }}
                            />
                        </span>
                    </span>
                </div>
            </Window>
        </>
    );
};

export const opt = [
    { value: 10, label: "10" },
    { value: 20, label: "20" },
    { value: 30, label: "30" },
    { value: 40, label: "40" },
];

You may quickly handle sorting and paging operations by simply adding a few lines thanks to refine's out-of-the-box features. We have completed our Post page by adding the pagination and sorting features provided by the Refine useTable hook to our table.

Refine Create and Edit Page

We have created our post page. Now we will create pages where we can create and edit posts. refine provides a refine-react-hook-form adapter that you can use with the headless feature. All the features of React Hook Form work in harmony with refine and the form you will create.

Create Page

import { Controller, useForm } from "@pankod/refine-react-hook-form";
import { useSelect, useNavigation } from "@pankod/refine-core";
import {
    Select,
    Fieldset,
    Button,
    TextField,
    Window,
    WindowHeader,
    WindowContent,
    ListItem,
} from "react95";

export const PostCreate: React.FC = () => {
    const {
        refineCore: { onFinish, formLoading },
        register,
        handleSubmit,
        control,
        formState: { errors },
    } = useForm();

    const { goBack } = useNavigation();

    const { options } = useSelect({
        resource: "categories",
    });

    return (
        <>
            <Window style={{ width: "100%", height: "100%" }}>
                <WindowHeader active={true} className="window-header">
                    <span>Create Post</span>
                </WindowHeader>
                <form onSubmit={handleSubmit(onFinish)}>
                    <WindowContent>
                        <label>Title: </label>
                        <br />
                        <br />
                        <TextField
                            {...register("title", { required: true })}
                            placeholder="Type here..."
                        />
                        {errors.title && <span>This field is required</span>}
                        <br />
                        <br />

                        <Controller
                            {...register("categoryId", { required: true })}
                            control={control}
                            render={({ field: { onChange, value } }) => (
                                <Fieldset label={"Category"}>
                                    <Select
                                        options={options}
                                        menuMaxHeight={160}
                                        width={160}
                                        variant="flat"
                                        onChange={onChange}
                                        value={value}
                                    />
                                </Fieldset>
                            )}
                        />
                        {errors.category && <span>This field is required</span>}
                        <br />
                        <label>Content: </label>
                        <br />
                        <TextField
                            {...register("content", { required: true })}
                            multiline
                            rows={10}
                            cols={50}
                        />

                        {errors.content && <span>This field is required</span>}
                        <br />
                        <Button type="submit" value="Submit">
                            Submit
                        </Button>
                        {formLoading && <p>Loading</p>}
                    </WindowContent>
                </form>
            </Window>
        </>
    );
};

Edit Page

import { useEffect } from "react";
import { Controller, useForm } from "@pankod/refine-react-hook-form";
import { useSelect, useNavigation } from "@pankod/refine-core";
import {
    Select,
    Fieldset,
    Button,
    TextField,
    WindowContent,
    Window,
    WindowHeader,
    ListItem,
} from "react95";

export const PostEdit: React.FC = () => {
    const {
        refineCore: { onFinish, formLoading, queryResult },
        register,
        handleSubmit,
        resetField,
        control,
        formState: { errors },
    } = useForm();

    const { goBack } = useNavigation();

    const { options } = useSelect({
        resource: "categories",
        defaultValue: queryResult?.data?.data.categoryId,
    });

    useEffect(() => {
        resetField("categoryId");
    }, [options]);

    return (
        <>
            <Window style={{ width: "100%", height: "100%" }}>
                <form onSubmit={handleSubmit(onFinish)}>
                    <WindowHeader active={true} className="window-header">
                        <span>Edit Post</span>
                    </WindowHeader>
                    <WindowContent>
                        <label>Title: </label>
                        <br />
                        <TextField
                            {...register("title", { required: true })}
                            placeholder="Type here..."
                        />
                        {errors.title && <span>This field is required</span>}
                        <br />
                        <br />

                        <Controller
                            {...register("categoryId", { required: true })}
                            control={control}
                            render={({ field: { onChange, value } }) => (
                                <Fieldset label={"Category"}>
                                    <Select
                                        options={options}
                                        menuMaxHeight={160}
                                        width={160}
                                        variant="flat"
                                        onChange={onChange}
                                        value={value}
                                    />
                                </Fieldset>
                            )}
                        />
                        {errors.category && <span>This field is required</span>}
                        <br />
                        <label>Content: </label>
                        <br />
                        <TextField
                            {...register("content", { required: true })}
                            multiline
                            rows={10}
                            cols={50}
                        />

                        {errors.content && <span>This field is required</span>}
                        <br />
                        <Button type="submit" value="Submit">
                            Submit
                        </Button>
                        {formLoading && <p>Loading</p>}
                    </WindowContent>
                </form>
            </Window>
        </>
    );
};

We can manage our forms and generate Posts thanks to the refine-react-hook-form adapter, and we may save the Post that we created with the refine onFinish method directly to Supabase.

Customize Refine Layout

Our app is almost ready. As a final step, let's edit our Layout to make our application more like Window95. Let's create a footer component first and then define it as a refine Layout.

Refer to the refine Custom Layout docs for detailed usage. →

Footer

components/Footer.tsx

import React, { useState } from "react";
import { useLogout, useNavigation } from "@pankod/refine-core";
import { AppBar, Toolbar, Button, List, ListItem } from "react95";

export const Footer: React.FC = () => {
    const [open, setOpen] = useState(false);

    const { mutate: logout } = useLogout();
    const { push } = useNavigation();

    return (
        <AppBar style={{ top: "unset", bottom: 0 }}>
            <Toolbar style={{ justifyContent: "space-between" }}>
                <div style={{ position: "relative", display: "inline-block" }}>
                    <Button
                        onClick={() => setOpen(!open)}
                        active={open}
                        style={{ fontWeight: "bold" }}
                    >
                        <img
                            src={"./refine.png"}
                            alt="refine logo"
                            style={{ height: "20px", marginRight: 4 }}
                        />
                    </Button>
                    {open && (
                        <List
                            style={{
                                position: "absolute",
                                left: "0",
                                bottom: "100%",
                            }}
                            onClick={() => setOpen(false)}
                        >
                            <ListItem
                                onClick={() => {
                                    push("posts");
                                }}
                            >
                                Posts
                            </ListItem>
                            <ListItem
                                onClick={() => {
                                    push("categories");
                                }}
                            >
                                Categories
                            </ListItem>
                            <ListItem
                                onClick={() => {
                                    logout();
                                }}
                            >
                                <span role="img" aria-label="🔙">
                                    🔙
                                </span>
                                Logout
                            </ListItem>
                        </List>
                    )}
                </div>
            </Toolbar>
        </AppBar>
    );
};

import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-react-router-v6";
import { dataProvider } from "@pankod/refine-supabase";
import authProvider from "./authProvider";
import { supabaseClient } from "utility";

import original from "react95/dist/themes/original";
import { ThemeProvider } from "styled-components";

import { PostList, PostEdit, PostCreate } from "pages/posts";
import { CategoryList, CategoryCreate, CategoryEdit } from "pages/category";
import { LoginPage } from "pages/login";
import { Footer } from "./components/footer";

import "./app.css";

function App() {
    return (
        <ThemeProvider theme={original}>
            <Refine
                routerProvider={routerProvider}
                dataProvider={dataProvider(supabaseClient)}
                authProvider={authProvider}
                LoginPage={LoginPage}
                Layout={({ children }) => {
                    return (
                        <div className="main">
                            <div className="layout">{children}</div>
                            <div>
                                <Footer />
                            </div>
                        </div>
                    );
                }}
                resources={[
                    {
                        name: "posts",
                        list: PostList,
                        create: PostCreate,
                        edit: PostEdit,
                    },
                ]}
            />
        </ThemeProvider>
    );
}

export default App;

Now we'll make a top menu component that's specific to the Windows 95 design.

Top Menu

components/bar/TopMenu:

import React, { useState } from "react";
import { AppBar, Toolbar, Button, List } from "react95";

type TopMenuProps = {
    children: React.ReactNode[] | React.ReactNode;
};

export const TopMenu: React.FC<TopMenuProps> = ({ children }) => {
    const [open, setOpen] = useState(false);

    return (
        <AppBar style={{ zIndex: 1 }}>
            <Toolbar>
                <Button
                    variant="menu"
                    onClick={() => setOpen(!open)}
                    active={open}
                >
                    File
                </Button>
                <Button variant="menu" disabled>
                    Edit
                </Button>
                <Button variant="menu" disabled>
                    View
                </Button>
                <Button variant="menu" disabled>
                    Format
                </Button>
                <Button variant="menu" disabled>
                    Tools
                </Button>
                <Button variant="menu" disabled>
                    Table
                </Button>
                <Button variant="menu" disabled>
                    Window
                </Button>
                <Button variant="menu" disabled>
                    Help
                </Button>
                {open && (
                    <List
                        style={{
                            position: "absolute",
                            left: "0",
                            top: "100%",
                        }}
                        onClick={() => setOpen(false)}
                    >
                        {children}
                    </List>
                )}
            </Toolbar>
        </AppBar>
    );
};

Project Overview

Conclusion

refine is a very powerful and flexible internal tool development framework. The features it provides will greatly reduce your development time. In this example, we have shown step-by-step how a development can be quick and easy using a custom UI and refine-core features. refine does not restrict you, and it delivers almost all of your project's requirements via the hooks it provides, regardless of the UI.

Live CodeSandbox Example

Check out for detailed information about refine. →

ReactJS Frameworks You Should Know Before Start Developing B2B/Internal Application

Melih Ekinci — Thu, 17 Mar 2022 06:47:28 +0000

Best Internal Tool Frameworks for ReactJS

In this article, I will talk about new open-source React.js frameworks that will greatly contribute to your project while developing internal-tool applications and make your work easier with their features.

What is Internal Tool?

Internal tools, also known as Backoffice applications, are software pieces developed to improve your corporate processes and make your work easier. Internal tool applications are generally used to control your business follow-up or to manage your product's internal processes.

Internal tools manage the activities your company or product needs, such as tracking inventory, processing customer requests, controlling payments. Although its field is quite wide, the needs of each product or company differ. Here in this article, we will review React.js Frameworks that will help you quickly develop your own internal-tool applications according to your needs.

Internal Tool React.js Frameworks that we will review:

1. Blitz.js

Blitz is a batteries-included is built on Next.js, and features a Zero-API data layer abstraction that eliminates the need for REST/GraphQL. Provides helpful defaults and conventions for things like routing, file structure, and authentication while also being extremely flexible.

Key Features

The zero-api data layer
Authentication
Authorization
Conventions
New app templates

Installation

yarn global add blitz

or

npm install -g blitz

For Blitz.js examples, you can take a look at the showcase section. →

2. Refine

refine is a React-based framework for rapid building of internal tools. It's is a a collection of helper hooks, components and providers. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.

refine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to admin panels, B2B applications and dashboards

Key Features

🔥 Headless : Works with any UI framework

⚙️ 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.

📝 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.

Installation

You can quickly create the project containing refine and all the features you will use with it, thanks to refine's Project Creator CLI (Superplate). No extra setup required!

If you want, you can manually install the refine packages.

npm i @pankod/refine-core @pankod/refine-antd

Refine Examples

Refine Admin Panel Example

Refine Headless + Tailwind CSS Client(B2C) Example

3. RedwoodJS

Redwood is an opinionated, full-stack, JavaScript/TypeScript web application framework designed to keep you moving fast as your app grows from side project to startup.

Redwood includes deploy support for Netlify, Vercel, Render.com, AWS and more. Built on React, GraphQL, and Prisma, with full TypeScript support, and Webpack/Babel ready to go with zero config. Redwood gives you the workflow you love, but with simple conventions and helpers to make your experience even better.

Key Features

Database and Data migrations
Automatic page-based code-splitting
Cells: a declarative way to fetch data from the backend API
Scaffold generator for CRUD operations specific to a DB table
Simple but powerful GraphQL Directives to validate access or transform resolved data
Simple but powerful routing (all routes defined in one file) with dynamic (typed)
Opinionated defaults for formatting, file organization, Webpack, Babel, and more

Installation

  yarn create redwood-app my-redwood-app

RedwoodJS Example

Link

4. React Admin

React Admin is a frontend Framework for building data-driven applications running in the browser, on top of REST/GraphQL APIs, using React and Material Design.

Key Features

Powered by material-ui, redux, react-final-form, react-router and a few more
Adapts to any backend (REST, GraphQL, SOAP, etc.)
Internationalization (i18n)
Supports any authentication provider (REST API, OAuth, Basic Auth, ...)
Can be included in another React app
Powered by material-ui, redux, react-final-form, react-router and a few more

Installation

npm install react-admin

or

yarn add react-admin

React Admin Example

Link

In this article, we have listed the popular open-source ReactJS internal-tool frameworks. If you want a more detailed review article, you can like and share this article. Thank you for your interest and reading.

For more information about refine ->

Building an Customizable Invoice Generator App with Refine, Strapi & Ant Design | Part II

Melih Ekinci — Thu, 03 Mar 2022 08:19:35 +0000

Looking for an invoice generator that is easy to use and lets you customize your invoices? With refine simple and intuitive interface, you can create your own invoices in few hours. Plus, we offer a wide range of templates and customization options so you can get the exact look you want. Learn more about our invoice generator here!

Introduction

We are almost ready to launch our refine Invoice Generator. In this Part II article, we'll customize it just a little more and then take an in-depth look at what you can do with the finished refine product!

In this part, we will create a missions part for the services your company provides. Then we will create our invoice page using these missions and the clients and contacts we created in Part I. In addition, you will not only be able to create your invoices, but you will also be able to view and download these invoices as PDF.

This article is written as a continuation of our Develop your Own Customizable Invoice Generator with Refine article. If you have not read Part I, we recommend that you read Part I before reading this article.

Let's see together how easily and in a short time we can develop our project with its refine features.

Create New Strapi Collections

In our Part I article, we created our company, contact and client collections. In this section, let's create the Missions and Invoice Strapi collections for the missions and invoices pages.

Mission Collection:

Mission(Mission Title): Text
Mission_description: Text
Day: Number
Daily_rate: Number

Invoice Collection:

Name: Text
Date: Date
Company : Relation with Company
Discount : Number
Tax: Number
Custom_id: Text
Contact: Relation with Contact
Missions: Relation with Mission

We created our missions and invoice collections fields. Our goal here is to define the products or services you offer specifically to your company and to create invoices based on them. By determining how many working days a product or service will last and its price on a daily basis, the total will be automatically reflected on your invoice. Now let's create our refine Missions page using this collection. And let's understand better by creating an example missions with refine.

Refine Missions Page

Let's use the refine-antd package's useTable hook to create our page, and let's define the fields in our Table Component.

src/pages/MissionList.tsx:

import {
    List,
    Table,
    useTable,
    TagField,
    useModalForm,
    EditButton,
} from "@pankod/refine-antd";

import { IMission } from "interfaces";

export const MissionList: React.FC = () => {
    const { tableProps } = useTable<IMission>();

    return (
        <List>
            <Table {...tableProps}>
                <Table.Column dataIndex="id" title="ID" />
                <Table.Column dataIndex="mission" title="Mission" />
                <Table.Column
                    dataIndex="mission_description"
                    title="Mission Description"
                />
                <Table.Column dataIndex="day" title="Day(s)" />
                <Table.Column
                    dataIndex="daily_rate"
                    title="Daily Rate"
                    render={(value) => <TagField value={value} color="red" />}
                />
                <Table.Column<IMission>
                    title="Total"
                    render={(_, record) => {
                        return (
                            <TagField
                                value={`${record.daily_rate * record.day} $`}
                                color="green"
                            />
                        );
                    }}
                />
                <Table.Column<IMission>
                    title="Actions"
                    dataIndex="actions"
                    key="actions"
                    render={(_value, record) => (
                        <EditButton
                            hideText
                            size="small"
                            recordItemId={record.id}
                            onClick={() => editShow(record.id)}
                        />
                    )}
                />
            </Table>
        </List>
    );
};

We defined the fields we created on the strapi side with the refine Table and created our table. Let's take a look at how our table looks like.

As you can see, we were able to create and display our table very simply thanks to the refine. Let's learn how to create a Mission from our refine interface now.

Refine Missions Create Page

Let's create a modal component for our Mission Create page. Let's connect our fields using Modal and Form from the refine-antd package.

src/components/mission/CreateMission.tsx:

import {
    Modal,
    Form,
    Input,
    ModalProps,
    FormProps,
    InputNumber,
} from "@pankod/refine-antd";

type CreateMissionProps = {
    modalProps: ModalProps;
    formProps: FormProps;
};

export const CreateMission: React.FC<CreateMissionProps> = ({
    modalProps,
    formProps,
}) => {
    return (
        <Modal {...modalProps} title="Create Contact">
            <Form {...formProps} layout="vertical">
                <Form.Item
                    label="Title"
                    name="mission"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item label="Description" name="mission_description">
                    <Input />
                </Form.Item>
                <Form.Item label="Day(s)" name="day">
                    <InputNumber defaultValue={1} />
                </Form.Item>
                <Form.Item label="Daily Rate" name="daily_rate">
                    <InputNumber defaultValue={1} />
                </Form.Item>
            </Form>
        </Modal>
    );
};

Let's define the CreateMission component we created above in our MissionList and fill its props with refine useModalForm.

src/pages/MissionList.tsx:

import {
    List,
    Table,
    useTable,
    TagField,
    useModalForm,
} from "@pankod/refine-antd";

import { IMission } from "interfaces";
import { CreateMission, EditMission } from "components/mission";

export const MissionList: React.FC = () => {
    const { tableProps } = useTable<IMission>();

    const { formProps, modalProps, show } = useModalForm({
        resource: "missions",
        action: "create",
    });

    return (
        <>
            <List
                createButtonProps={{
                    onClick: () => {
                        show();
                    },
                }}
            >
                <Table {...tableProps}>
                    <Table.Column dataIndex="id" title="ID" />
                    <Table.Column dataIndex="mission" title="Mission" />
                    <Table.Column
                        dataIndex="mission_description"
                        title="Mission Description"
                    />
                    <Table.Column dataIndex="day" title="Day(s)" />
                    <Table.Column
                        dataIndex="daily_rate"
                        title="Daily Rate"
                        render={(value) => (
                            <TagField value={value} color="red" />
                        )}
                    />
                    <Table.Column<IMission>
                        title="Total"
                        render={(_, record) => {
                            return (
                                <TagField
                                    value={`${
                                        record.daily_rate * record.day
                                    } $`}
                                    color="green"
                                />
                            );
                        }}
                    />
                </Table>
            </List>
            <CreateMission modalProps={modalProps} formProps={formProps} />
        </>
    );
};

Missions Page is now ready, you can create and manage your business's products or services here with refine.

Our next step is to create invoices according to these tasks and clients. Let's create, organize and display invoices with refine.

Refine Invoices Page

Let's put the Invoice Collections fields that we created with Strapi into our Table by fetch the refine-antd useTable. Our Invoice collection has a relation with the client, company and missions collections.

Thanks to the refine-strapi-v4 dataProvider, we can use the data of collections that are related to each other.

In order to use the fields of the collections that are related to each other, we must populate the collections in metaData.

Populate the contacts, companies and missions related with our Invoice collection in metaData.

src/pages/InvoiceList.tsx:

import {
    List,
    Table,
    useTable,
    DateField,
    TagField,
    EmailField,
    Space,
    DeleteButton,
    EditButton,
    Icons,
    Button,
    Modal,
} from "@pankod/refine-antd";

import { IInvoice } from "interfaces";
import { PdfLayout } from "components/pdf";

const { FilePdfOutlined } = Icons;

export const InvoiceList: React.FC = () => {
    const { tableProps } = useTable<IInvoice>({
        metaData: {
            populate: {
                contact: { populate: ["client"] },
                company: { populate: ["logo"] },
                missions: "*",
            },
        },
    });

    return (
        <>
            <List>
                <Table {...tableProps}>
                    <Table.Column dataIndex="id" title="ID" />
                    <Table.Column<IInvoice>
                        dataIndex="name"
                        title="Invoice Name"
                        render={(_, record) => {
                            return `Invoice_#${record.id}${record.name}`;
                        }}
                    />
                    <Table.Column<IInvoice>
                        dataIndex="date"
                        title="Invoice Date"
                        render={(value) => (
                            <DateField format="LL" value={value} />
                        )}
                    />
                    <Table.Column
                        dataIndex={["company", "name"]}
                        title="Your Company"
                    />
                    <Table.Column
                        dataIndex={"missions"}
                        title="Missions"
                        render={(value) => {
                            return value.map((item: any) => {
                                return (
                                    <TagField
                                        color="blue"
                                        value={item.mission}
                                    />
                                );
                            });
                        }}
                    />
                    <Table.Column
                        dataIndex="discount"
                        title="Discount(%)"
                        render={(value) => (
                            <TagField color="blue" value={value} />
                        )}
                    />
                    <Table.Column
                        dataIndex="tax"
                        title="Tax(%)"
                        render={(value) => (
                            <TagField color="cyan" value={value} />
                        )}
                    />
                    <Table.Column
                        dataIndex="custom_id"
                        title="Custom Invoice ID"
                    />

                    <Table.Column
                        dataIndex={["contact", "email"]}
                        title="Contact"
                        render={(value) => <EmailField value={value} />}
                    />
                    <Table.Column<IInvoice>
                        title="Actions"
                        dataIndex="actions"
                        render={(_, record) => {
                            return (
                                <Space>
                                    <EditButton
                                        hideText
                                        size="small"
                                        recordItemId={record.id}
                                    />
                                    <DeleteButton
                                        hideText
                                        size="small"
                                        recordItemId={record.id}
                                    />
                                </Space>
                            );
                        }}
                    />
                </Table>
            </List>
        </>
    );
};

As you can see, we were able to list invoices with refine. Using the Invoice collection and the fields associated with it, we can create a fully featured Invoice.

Our invoice contains all the information. With Refine Invoice Generator you can define the company issuing the invoice, discount percentage, tax percentage, customId and similar information in a single invoice.

Let's understand better by creating an invoice example from our refine UI.

Refine Create Invoice Page

Here, we first fetch the company, contacts and missions using the refine's useSelect hook, and by giving it to the Select component, we create selectable components to detail our invoice.

Then, we fill our refine Create and Form components with the fields of the collection in the strap to perform a creation process as we did in our previous examples.

src/pages/invoice/CreateInvoice:

import { IResourceComponentsProps } from "@pankod/refine-core";

import {
    Create,
    Form,
    Input,
    Select,
    useForm,
    useSelect,
    DatePicker,
} from "@pankod/refine-antd";

import { ICompany, IContact, IMission, IInvoice } from "interfaces";

export const CreateInvoice: React.FC<IResourceComponentsProps> = () => {
    const { formProps, saveButtonProps } = useForm<IInvoice>();

    const { selectProps: companySelectProps } = useSelect<ICompany>({
        resource: "companies",
        optionLabel: "name",
    });

    const { selectProps: contactSelectProps } = useSelect<IContact>({
        resource: "contacts",
        optionLabel: "first_name",
    });

    const { selectProps: missionSelectProps } = useSelect<IMission>({
        resource: "missions",
        optionLabel: "mission",
    });

    return (
        <Create saveButtonProps={saveButtonProps}>
            <Form {...formProps} layout="vertical">
                <Form.Item label="Invoice Name" name="name">
                    <Input />
                </Form.Item>
                <Form.Item
                    label="Select Your Company"
                    name="company"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Select {...companySelectProps} />
                </Form.Item>

                <Form.Item
                    label="Mission"
                    name="missions"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Select {...missionSelectProps} mode="multiple" />
                </Form.Item>
                <Form.Item label="Discount(%)" name="discount">
                    <Input />
                </Form.Item>
                <Form.Item label="Tax(%)" name="tax">
                    <Input />
                </Form.Item>
                <Form.Item label="Custom ID" name="custom_id">
                    <Input />
                </Form.Item>
                <Form.Item
                    label="Contact"
                    name="contact"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Select {...contactSelectProps} />
                </Form.Item>
                <Form.Item label="Invoice Date" name="date">
                    <DatePicker style={{ width: "50%" }} />
                </Form.Item>
            </Form>
        </Create>
    );
};

Our invoice generator is almost ready! As you can see, we can now create a fully featured invoice with refine and display it in our table. As the last step, let's view and download the invoices we created as PDF.

View and Download Invoice as PDF

In this example, we will use the KendoReact PDF package to view as PDF. Let's start our process by installing our package.

Let's start our process by installing our package.

Installation

npm i @progress/kendo-react-pdf

Usage

To begin, let's create a pdf layout and add props to receive the data in our Invoice List.

src/components/pdf/PdfLayout.tsx:

import { useRef } from "react";

import "./pdf.css";

import { PDFExport } from "@progress/kendo-react-pdf";
import { IInvoice } from "interfaces";

type PdfProps = {
    record: IInvoice | undefined;
};

export const PdfLayout: React.FC<PdfProps> = ({ record }) => {
    return <></>;
};

Let's create a button to display our PDF arrangement in the Invoice List, as well as a modal component for this field to appear.

src/pages/invoice/InvoiceList.tsx:


import { useState } from "react";
import { useModal } from "@pankod/refine-core";
import {
    List,
    Table,
    useTable,
    DateField,
    TagField,
    EmailField,
    Space,
    DeleteButton,
    EditButton,
    Icons,
    Button,
    Modal,
} from "@pankod/refine-antd";

import { IInvoice } from "interfaces";
import { PdfLayout } from "components/pdf";

const { FilePdfOutlined } = Icons;

export const InvoiceList: React.FC = () => {
    const [record, setRecord] = useState<IInvoice>();

    const { tableProps } = useTable<IInvoice>({
        metaData: {
            populate: {
                contact: { populate: ["client"] },
                company: { populate: ["logo"] },
                missions: "*",
            },
        },
    });

    const { show, visible, close } = useModal();

    return (
        <>
            <List>
                <Table {...tableProps}>
                    ...
                    <Table.Column<IInvoice>
                        title="Actions"
                        dataIndex="actions"
                        render={(_, record) => {
                            return (
                                <Space>
                                    <EditButton
                                        hideText
                                        size="small"
                                        recordItemId={record.id}
                                    />
                                    <DeleteButton
                                        hideText
                                        size="small"
                                        recordItemId={record.id}
                                    />
                                    <Button
                                        size="small"
                                        icon={<FilePdfOutlined />}
                                        onClick={() => {
                                            setRecord(record);
                                            show();
                                        }}
                                    />
                                </Space>
                            );
                        }}
                    />
                </Table>
            </List>
            <Modal visible={visible} onCancel={close} width={700} footer={null}>
                <PdfLayout record={record} />
            </Modal>
        </>
    );
};

We`ve created a button in our Invoice List and when this button is pressed, we show the Modal component that contains the PdfLayout we created. Finally, as you can see, we passed the record data in the Invoice List as PdfLayout props.

Now that we have the data of the Invoices we can edit the PdfLayout.

Check out PdfLayout design and code

Conclusion

In this post, we've created a fully customizable and completely functional Invoice Generator app. If you want to construct an application similar to this, you may add any feature with refine and personalize your invoice generator to your liking. We developed in very short amount of time, thanks to refine's features and the possibilities it provides for customization.

You can develop any web application or admin panel you want in a very short time with refine.

With refine's headless and SSR-Next.js features, it is possible and very easy to develop both B2B and B2C applications using a single framework.

Live CodeSandbox Example

PDF download may not work in codeSandbox mode. With this link, you can open the example in the browser and try it.

Username: demo
Password: demodemo

CodeSandbox Link

Source Code

For more information about refine ->

Develop your Own Customizable Invoice Generator with Refine and Strapi | Part I

Melih Ekinci — Wed, 23 Feb 2022 13:55:18 +0000

Introduction

We are going to develop an invoice generator application for our business using refine and Strapi. Let's see together how simple yet functional it can be!

This article will consist of two parts and we will try to explain each step in detail. In this section, we will create the basic parts of our application.

In this part, we will create a panel where our own company information is included, where we can create customers and create contacts with customer companies.

Setup Refine Project

Let's start by creating our refine project. You can use the superplate to create a refine project.

npx superplate-cli -p refine-react refine-invoice-genarator

✔ What will be the name of your app ·refine-invoice-genarator
✔ Package manager: · npm
✔ Do you want to using UI Framework? > Yes, I want Ant Design
✔ Do you want to customize theme?: … no
✔ Data Provider: Strapi
✔ Do you want to customize layout? … no
✔ i18n - Internationalization: · no

superplate will quickly create our refine project according to the features we choose. Let's continue by install the refine Strapi-v4 Data Provider that we will use later.

npm i @pankod/refine-strapi-v4

Our refine project and installations are now ready! Let's start using it.

Usage

src/authProvider.ts:

import { AuthProvider } from "@pankod/refine-core";
import { AuthHelper } from "@pankod/refine-strapi-v4";

import { TOKEN_KEY, API_URL } from "./constants";

import axios from "axios";

export const axiosInstance = axios.create();
const strapiAuthHelper = AuthHelper(API_URL + "/api");

export const authProvider: AuthProvider = {
    login: async ({ username, password }) => {
        const { data, status } = await strapiAuthHelper.login(
            username,
            password,
        );
        if (status === 200) {
            localStorage.setItem(TOKEN_KEY, data.jwt);

            // set header axios instance
            axiosInstance.defaults.headers = {
                Authorization: `Bearer ${data.jwt}`,
            };

            return Promise.resolve();
        }
        return Promise.reject();
    },
    logout: () => {
        localStorage.removeItem(TOKEN_KEY);
        return Promise.resolve();
    },
    checkError: () => Promise.resolve(),
    checkAuth: () => {
        const token = localStorage.getItem(TOKEN_KEY);
        if (token) {
            axiosInstance.defaults.headers = {
                Authorization: `Bearer ${token}`,
            };
            return Promise.resolve();
        }

        return Promise.reject();
    },
    getPermissions: () => Promise.resolve(),
    getUserIdentity: async () => {
        const token = localStorage.getItem(TOKEN_KEY);
        if (!token) {
            return Promise.reject();
        }

        const { data, status } = await strapiAuthHelper.me(token);
        if (status === 200) {
            const { id, username, email } = data;
            return Promise.resolve({
                id,
                username,
                email,
            });
        }

        return Promise.reject();
    },
};

Configure Refine for Strapi-v4

src/App.tsx:

import { Refine } from "@pankod/refine-core";
import { notificationProvider, Layout, LoginPage } from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router";

import { DataProvider } from "@pankod/refine-strapi-v4";
import { authProvider, axiosInstance } from "./authProvider";

import "@pankod/refine-antd/dist/styles.min.css";

function App() {
    const API_URL = "Your_Strapi_Url";
    const dataProvider = DataProvider(API_URL + "/api", axiosInstance);

    return (
        <Refine
            routerProvider={routerProvider}
            notificationProvider={notificationProvider}
            Layout={Layout}
            dataProvider={dataProvider}
            authProvider={authProvider}
            LoginPage={LoginPage}
        />
    );
}

Create Strapi Collections

We created three collections on Strapi as company, client and contact and added a relation between them. For detailed information on how to create a collection, you can check here.

Company:

Logo: Media
Name: Text
Address: Text
Country: Text
City: Text
email: Email
Website: Text

Client:

Name: Text
Contacts: Relation with Contact

Contact:

First_name: Text
Last_name: Text
Phone_number Text
Email: email
Job: Text
Client: Relation with Client

We have created our collections by Strapi, now we can create Clients and their contacts with refine.

Your Company Detail Page

As a first step, let's start to create the part where our own Company will be located. If there are other companies you need to manage you can create them on the Your Company page and view them here.

Company Card Component

Let's design a component that includes the details of our company. Then let's show it using refine-antd List. We will put the information such as name, logo and address from the Company collection we created on Strapi into Card component.

src/components/company/CompanyItem.tsx:

import {
    Card,
    DeleteButton,
    UrlField,
    EmailField,
    EditButton,
    Typography,
} from "@pankod/refine-antd";

import { ICompany } from "interfaces";
import { API_URL } from "../../constants";

const { Title, Text } = Typography;

type CompanyItemProps = {
    item: ICompany;
};

export const CompanyItem: React.FC<CompanyItemProps> = ({ item }) => {
    const image = item.logo ? API_URL + item.logo.url : "./error.png";

    return (
        <Card
            style={{ width: "300px" }}
            cover={
                <div style={{ display: "flex", justifyContent: "center" }}>
                    <img
                        style={{
                            width: 220,
                            height: 100,
                            padding: 24,
                        }}
                        src={image}
                        alt="logo"
                    />
                </div>
            }
            actions={[
                <EditButton key="edit" size="small" hideText />,
                <DeleteButton
                    key="delete"
                    size="small"
                    hideText
                    recordItemId={item.id}
                />,
            ]}
        >
            <Title level={5}>Company Name:</Title>
            <Text>{item.name}</Text>
            <Title level={5}>Company Address:</Title>
            <Text>{item.address}</Text>
            <Title level={5}>County:</Title>
            <Text>{item.country}</Text>
            <Title level={5}>City:</Title>
            <Text>{item.city}</Text>
            <Title level={5}>Email:</Title>
            <EmailField value={item.email} />
            <Title level={5}>Website:</Title>
            <UrlField value={item.website} />
        </Card>
    );
};

Company List Page

Let's place the CompanyItem component that we created above in the refine-antd List and display company information.

src/pages/company/CompanyList.tsx:

import { IResourceComponentsProps } from "@pankod/refine-core";
import { useSimpleList, AntdList, List } from "@pankod/refine-antd";

import { CompanyItem } from "components/company";

export const CompanyList: React.FC<IResourceComponentsProps> = () => {
    const { listProps } = useSimpleList<ICompany>({
        metaData: { populate: ["logo"] },
    });

    return (
        <List title={"Your Companies"}>
            <AntdList
                grid={{ gutter: 16 }}
                {...listProps}
                renderItem={(item) => (
                    <AntdList.Item>
                        <CompanyItem item={item} />
                    </AntdList.Item>
                )}
            />
        </List>
    );
};

src/App.tsx:

...

import { CompanyList } from "pages/company";

function App() {
    const API_URL = "Your_Strapi_Url";
    const dataProvider = DataProvider(API_URL + "/api", axiosInstance);

    return (
        <Refine
            routerProvider={routerProvider}
            notificationProvider={notificationProvider}
            Layout={Layout}
            dataProvider={dataProvider}
            authProvider={authProvider}
            LoginPage={LoginPage}
            resources={[
                {
                    name: "companies",
                    options: { label: "Your Company" },
                    list: CompanyList,
                },
            ]}
        />
    );
}

We fetch the data of the Company collection that we created by Strapi, thanks to the refine dataProvider, and put it into the card component we created.

Contact Page

Our Contact Page is a page related to Clients. Communication with client companies will be through the contacts we create here. The Contact Page will contain the information of the people we will contact. Let's create our list using refine useTable hook.

src/pages/contact/ContactList.tsx:

import {
    List,
    Table,
    TagField,
    useTable,
    Space,
    EditButton,
    DeleteButton,
    useModalForm,
} from "@pankod/refine-antd";

import { IContact } from "interfaces";
import { CreateContact } from "components/contacts";

export const ContactsList: React.FC = () => {
    const { tableProps } = useTable<IContact>({
        metaData: { populate: ["client"] },
    });

    const {
        formProps: createContactFormProps,
        modalProps,
        show,
    } = useModalForm({
        resource: "contacts",
        action: "create",
        redirect: false,
    });

    return (
        <>
            <List
                createButtonProps={{
                    onClick: () => {
                        show();
                    },
                }}
            >
                <Table {...tableProps} rowKey="id">
                    <Table.Column dataIndex="id" title="ID" />
                    <Table.Column dataIndex="first_name" title="First Name" />
                    <Table.Column dataIndex="last_name" title="Last Name" />
                    <Table.Column
                        dataIndex="phone_number"
                        title="Phone Number"
                    />
                    <Table.Column dataIndex="email" title="Email" />
                    <Table.Column
                        dataIndex="job"
                        title="Job"
                        render={(value: string) => (
                            <TagField color={"blue"} value={value} />
                        )}
                    />
                    <Table.Column<{ id: string }>
                        title="Actions"
                        dataIndex="actions"
                        render={(_, record) => (
                            <Space>
                                <EditButton
                                    hideText
                                    size="small"
                                    recordItemId={record.id}
                                />
                                <DeleteButton
                                    hideText
                                    size="small"
                                    recordItemId={record.id}
                                />
                            </Space>
                        )}
                    />
                </Table>
            </List>
            <CreateContact
                modalProps={modalProps}
                formProps={createContactFormProps}
            />
        </>
    );
};

Client List Page

We have created example company and contacts above. Now let's create a Client List where we can view our clients.

Client Card Component

Let's design the cards that will appear in our Client List.

src/components/client/ClientItem.tsx:

import { useDelete } from "@pankod/refine-core";
import {
    Card,
    TagField,
    Typography,
    Dropdown,
    Menu,
    Icons,
} from "@pankod/refine-antd";

import { IClient } from "interfaces";

const { FormOutlined, DeleteOutlined } = Icons;
const { Title, Text } = Typography;

type ClientItemProps = {
    item: IClient;
    editShow: (id?: string | undefined) => void;
};

export const ClientItem: React.FC<ClientItemProps> = ({ item, editShow }) => {
    const { mutate } = useDelete();

    return (
        <Card style={{ width: 300, height: 300, borderColor: "black" }}>
            <div style={{ position: "absolute", top: "10px", right: "5px" }}>
                <Dropdown
                    overlay={
                        <Menu mode="vertical">
                            <Menu.Item
                                key="1"
                                style={{
                                    fontWeight: 500,
                                }}
                                icon={
                                    <FormOutlined
                                        style={{
                                            color: "green",
                                        }}
                                    />
                                }
                                onClick={() => editShow(item.id)}
                            >
                                Edit Client
                            </Menu.Item>
                            <Menu.Item
                                key="2"
                                style={{
                                    fontWeight: 500,
                                }}
                                icon={
                                    <DeleteOutlined
                                        style={{
                                            color: "red",
                                        }}
                                    />
                                }
                                onClick={() =>
                                    mutate({
                                        resource: "clients",
                                        id: item.id,
                                        mutationMode: "undoable",
                                        undoableTimeout: 5000,
                                    })
                                }
                            >
                                Delete Client
                            </Menu.Item>
                        </Menu>
                    }
                    trigger={["click"]}
                >
                    <Icons.MoreOutlined
                        style={{
                            fontSize: 24,
                        }}
                    />
                </Dropdown>
            </div>

            <Title level={4}>{item.name}</Title>
            <Title level={5}>Client Id:</Title>
            <Text>{item.id}</Text>
            <Title level={5}>Contacts:</Title>

            {item.contacts.map((item) => {
                return (
                    <TagField
                        color={"#d1c4e9"}
                        value={`${item.first_name} ${item.last_name}`}
                    />
                );
            })}
        </Card>
    );
};

Client Create and Edit Page

The client page is a place where you can update your client info and add new clients. Let's create the Create and Edit pages to create new customers and update existing customers.

Create Client

src/components/client/CreateClient.tsx

import {
    Create,
    Drawer,
    DrawerProps,
    Form,
    FormProps,
    Input,
    ButtonProps,
    Grid,
    Select,
    useSelect,
    useModalForm,
    Button,
} from "@pankod/refine-antd";

import { IContact } from "interfaces";
import { CreateContact } from "components/contacts";

type CreateClientProps = {
    drawerProps: DrawerProps;
    formProps: FormProps;
    saveButtonProps: ButtonProps;
};

export const CreateClient: React.FC<CreateClientProps> = ({
    drawerProps,
    formProps,
    saveButtonProps,
}) => {
    const breakpoint = Grid.useBreakpoint();

    const { selectProps } = useSelect<IContact>({
        resource: "contacts",
        optionLabel: "first_name",
    });

    const {
        formProps: createContactFormProps,
        modalProps,
        show,
    } = useModalForm({
        resource: "contacts",
        action: "create",
        redirect: false,
    });

    return (
        <>
            <Drawer
                {...drawerProps}
                width={breakpoint.sm ? "500px" : "100%"}
                bodyStyle={{ padding: 0 }}
            >
                <Create saveButtonProps={saveButtonProps}>
                    <Form
                        {...formProps}
                        layout="vertical"
                        initialValues={{
                            isActive: true,
                        }}
                    >
                        <Form.Item
                            label="Client Company Name"
                            name="name"
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item label="Select Contact">
                            <div style={{ display: "flex" }}>
                                <Form.Item name={"contacts"} noStyle>
                                    <Select {...selectProps} mode="multiple" />
                                </Form.Item>
                                <Button type="link" onClick={() => show()}>
                                    Create Contact
                                </Button>
                            </div>
                        </Form.Item>
                    </Form>
                </Create>
            </Drawer>

            <CreateContact
                modalProps={modalProps}
                formProps={createContactFormProps}
            />
        </>
    );
};

Edit Client

src/components/client/EditClient.tsx:

import {
    Edit,
    Drawer,
    DrawerProps,
    Form,
    FormProps,
    Input,
    ButtonProps,
    Grid,
    Select,
    useSelect,
} from "@pankod/refine-antd";

type EditClientProps = {
    drawerProps: DrawerProps;
    formProps: FormProps;
    saveButtonProps: ButtonProps;
};

export const EditClient: React.FC<EditClientProps> = ({
    drawerProps,
    formProps,
    saveButtonProps,
}) => {
    const breakpoint = Grid.useBreakpoint();

    const { selectProps } = useSelect({
        resource: "contacts",
        optionLabel: "first_name",
    });

    return (
        <Drawer
            {...drawerProps}
            width={breakpoint.sm ? "500px" : "100%"}
            bodyStyle={{ padding: 0 }}
        >
            <Edit saveButtonProps={saveButtonProps}>
                <Form
                    {...formProps}
                    layout="vertical"
                    initialValues={{
                        isActive: true,
                    }}
                >
                    <Form.Item
                        label="Client Company Name"
                        name="name"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item label="Select Contact" name="contacts">
                        <Select {...selectProps} mode="multiple" />
                    </Form.Item>
                </Form>
            </Edit>
        </Drawer>
    );
};

Client List Page

Above, we created Card, Create and Edit components. Let's define and use these components we have created in our ClientList.

src/pages/client/ClientList.tsx:

import { IResourceComponentsProps, HttpError } from "@pankod/refine-core";

import {
    useSimpleList,
    AntdList,
    List,
    useDrawerForm,
    CreateButton,
} from "@pankod/refine-antd";

import { IClient } from "interfaces";
import { ClientItem, CreateClient, EditClient } from "components/client";

export const ClientList: React.FC<IResourceComponentsProps> = () => {
    const { listProps } = useSimpleList<IClient>({
        metaData: { populate: ["contacts"] },
    });

    const {
        drawerProps: createDrawerProps,
        formProps: createFormProps,
        saveButtonProps: createSaveButtonProps,
        show: createShow,
    } = useDrawerForm<IClient, HttpError, IClient>({
        action: "create",
        resource: "clients",
        redirect: false,
    });

    const {
        drawerProps: editDrawerProps,
        formProps: editFormProps,
        saveButtonProps: editSaveButtonProps,
        show: editShow,
    } = useDrawerForm<IClient, HttpError, IClient>({
        action: "edit",
        resource: "clients",
        redirect: false,
    });

    return (
        <>
            <List
                pageHeaderProps={{
                    extra: <CreateButton onClick={() => createShow()} />,
                }}
            >
                <AntdList
                    grid={{ gutter: 24, xs: 1 }}
                    {...listProps}
                    renderItem={(item) => (
                        <AntdList.Item>
                            <ClientItem item={item} editShow={editShow} />
                        </AntdList.Item>
                    )}
                />
            </List>
            <CreateClient
                drawerProps={createDrawerProps}
                formProps={createFormProps}
                saveButtonProps={createSaveButtonProps}
            />
            <EditClient
                drawerProps={editDrawerProps}
                formProps={editFormProps}
                saveButtonProps={editSaveButtonProps}
            />
        </>
    );
};

We created our Client and Contact pages. Now, let's create a Client with refine and define contacts for our clients.

Conclusion

We have completed the first step of our project, creating a basic platform for users to create their company and clients. In the next section, we will add more functionality to this program by allowing users to generate invoices and track payments. Stay tuned as we continue working on Refine Invoice Generator!

For more information about refine ->

Live CodeSandbox Example

You can find the Refine Invoice Generator Part II article here →

Create Full Featured Admin Panel with React and Ant Design

Melih Ekinci — Mon, 21 Feb 2022 08:41:15 +0000

refine is a headless React 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 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. 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 to create a refine project.

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

✔ 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.

cd refine-advanced-tutorial

npm run dev

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:

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:

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:

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

{
  "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

{
  "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:

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.

  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.

Use the translation with Table Content

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>
  );
};

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 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 . 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

We will using Ably in this article to provide Realtime features.

Installation

We need to install Ably live provider package from refine.

 npm install @pankod/refine-ably

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

src/utility/client.ts:

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

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

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

src/App.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 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.

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 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. →

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:

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>
  );
};

In this article, we will use Cerbos to refine Access Control.

npm install cerbos

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

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
});

    <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 useCanhook Let's perform operations according to roles within our list.

src/pages/PostList.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.

Check out refine 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. →

For information about other features of refine →

Live CodeSandbox Example

Next.js E-commerce App with Strapi and Chakra UI

Melih Ekinci — Wed, 16 Feb 2022 06:30:07 +0000

In this article, we will create the e-commerce app of our Strapi-Multitenancy admin panel that we have done before.

It is now used headless with the refine 3 version. You can use any UI library you want with the headless feature.

We will use Strapi and Chakra-UI together with Next.js in our E-commerce client example application.

Refine Project Setup

Let's start by creating our refine project. You can use the superplate to create a refine project.

npx superplate-cli -p refine-nextjs refine-ecommerce-example

✔ What will be the name of your app · refine-ecommerce-example
✔ Package manager: · npm
✔ Do you want to using UI Framework? > No(headless)
✔ Data Provider: Strapi
✔ i18n - Internationalization: · no

superplate will quickly create our refine project according to the features we choose. Let's continue by install the refine Strapi-v4 Data Provider and Chakra-UI packages that we will use later.

Installation

cd refine-ecommerce-example

npm i @pankod/refine-strapi-v4
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Our refine project and installations are now ready! Let's start using it.

Usage

Configure Refine for Strapi-v4

pages/index.tsx:

import React from "react";
import { AppProps } from "next/app";
import Head from "next/head";
import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-nextjs-router";
import { DataProvider } from "@pankod/refine-strapi-v4";

const API_URL = "https://api.strapi-multi-tenant.refine.dev/api";

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
    const dataProvider = DataProvider(API_URL);

    return (
        <Refine
            routerProvider={routerProvider}
            dataProvider={dataProvider}
        >
            <Component {...pageProps} />
        </Refine>
    );
}

Chakra-UI Provider Setup

pages/index.tsx:

import React from "react";
import { AppProps } from "next/app";
import Head from "next/head";
import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-nextjs-router";
import { DataProvider } from "@pankod/refine-strapi-v4";

import { ChakraProvider } from "@chakra-ui/react";

const API_URL = "https://api.strapi-multi-tenant.refine.dev/api";

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
    const dataProvider = DataProvider(API_URL);

    return (
        <Refine routerProvider={routerProvider} dataProvider={dataProvider}>
            <ChakraProvider>
                <Component {...pageProps} />
            </ChakraProvider>
        </Refine>
    );
}

Create Strapi Collections

We created three collections on Strapi as store, product and order and added a relation between them. For detailed information on how to create a collection, you can check here.

We created our collections in the previous Strapi Multitenancy guide. Now we will use the same collections.

Refer to the Project Collections for detailed information. →

Create Refine Layout

refine headless is not affiliated with any UI. It is entirely up to you to customize your UI. Let's create a simple layout for this example.

The Layout we've created now will only show the refine logo. In the following steps, we will edit our Layout.

components/Layout.tsx:

import { Box, Container, Flex, Image } from "@chakra-ui/react";

export const Layout: React.FC = ({ children }) => {
    return (
        <Box
            display={"flex"}
            flexDirection={"column"}
            backgroundColor={"#eeeeee"}
            minH={"100vh"}
        >
            <Container maxW={"container.lg"}>
                <Flex justify={"space-between"} mt={4} alignSelf={"center"}>
                    <a href="https://refine.dev">
                        <Image alt="Refine Logo" src={"./refine_logo.png"} />
                    </a>
                </Flex>
                {children}
            </Container>
        </Box>
    );
};

pages/_app.tsx:

import React from "react";
import { AppProps } from "next/app";
import Head from "next/head";
import { Refine } from "@pankod/refine-core";
import routerProvider from "@pankod/refine-nextjs-router";
import { DataProvider } from "@pankod/refine-strapi-v4";

import { ChakraProvider } from "@chakra-ui/react";
import { Layout } from "src/components";

const API_URL = "https://api.strapi-multi-tenant.refine.dev/api";

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
    const dataProvider = DataProvider(API_URL);

    return (
        <Refine
            routerProvider={routerProvider}
            dataProvider={dataProvider}
            Layout={Layout}
        >
            <ChakraProvider>
                <Component {...pageProps} />
            </ChakraProvider>
        </Refine>
    );
}

Product Card Design with Chakra-UI

Let's design our product cards with Chakra-UI.

src/components/ProductCard.tsx

import React from "react";
import { Box, Image, Badge, Button } from "@chakra-ui/react";

export type ProductProps = {
    id: string;
    title: string;
    description: string;
    cardImage: string;
};

export const ProductCard: React.FC<ProductProps> = ({
    id,
    title,
    description,
    cardImage,
}) => {
    return (
        <Box maxH={"sm"} borderWidth="1px" borderRadius="lg" overflow="hidden">
            <Image w={"100%"} h={200} src={cardImage} />
            <Box p="6" bgColor={"gray.600"}>
                <Box display="flex" alignItems="baseline" mb={2} ml={-2}>
                    <Badge borderRadius="full" px="2" colorScheme="teal">
                        New Product
                    </Badge>
                </Box>

                <Box
                    mt="1"
                    fontWeight="semibold"
                    as="h4"
                    lineHeight="tight"
                    isTruncated
                    color={"white"}
                >
                    {title}
                </Box>

                <Box color={"white"}>{}</Box>
                <Box
                    color="white"
                    fontSize="sm"
                    display={"flex"}
                    mt={4}
                    justifyContent={"flex-end"}
                ></Box>
            </Box>
        </Box>
    );
};

We created our Product Card component. Now let's move on to the process of fetch and showing our products from the Strapi.

Fetch Products with SSR

First, let's fetch our products with the nextjs getServerSideProps function.

`GetServerSideProps`

pages/index.tsx:

import { GetServerSideProps } from "next";
import { DataProvider } from "@pankod/refine-strapi-v4";

import { IProduct } from "interfaces";

const API_URL = "https://api.strapi-multi-tenant.refine.dev/api";

export const getServerSideProps: GetServerSideProps = async (context) => {
    const data = await DataProvider(API_URL).getList<IProduct>({
        resource: "products",
        metaData: { populate: ["image"] },
    });

    return {
        props: { products: data },
    };
};

Create Product List with Refine

Let's process the data we fetch above using refine's useTable hook. Then let's put our data in our ProductCard component.

pages/index.tsx:

import { GetServerSideProps } from "next";
import { LayoutWrapper, GetListResponse, useTable } from "@pankod/refine-core";
import { DataProvider } from "@pankod/refine-strapi-v4";

import { IProduct } from "interfaces";
import { SimpleGrid } from "@chakra-ui/react";
import { ProductCard } from "src/components";

const API_URL = "https://api.strapi-multi-tenant.refine.dev/api";

type ItemProps = {
    products: GetListResponse<IProduct>;
};

export const ProductList: React.FC<ItemProps> = ({ products }) => {
    const { tableQueryResult } = useTable<IProduct>({
        resource: "products",
        queryOptions: {
            initialData: products,
        },
        metaData: { populate: ["image"] },
    });

    return (
        <LayoutWrapper>
            <SimpleGrid columns={[1, 2, 3]} mt={6} spacing={3}>
                {tableQueryResult.data?.data.map((item) => (
                    <ProductCard
                        id={item.id}
                        title={item.title}
                        description={item.description}
                        cardImage={
                            item.image
                                ? API_URL + item.image.url
                                : "./error.png"
                        }
                    />
                ))}
            </SimpleGrid>
        </LayoutWrapper>
    );
};

export default ProductList;

export const getServerSideProps: GetServerSideProps = async (context) => {
    const data = await DataProvider(API_URL).getList<IProduct>({
        resource: "products",
        metaData: { populate: ["image"] },
    });

    return {
        props: { products: data },
    };
};

Adding Store-based Filtering

We have fetch all the products above. Now, let's fetch the stores and list the store-specific products separately.

First, let's fetch our stores by using the refine useMany hook within the getServerSideProps function. Next we will create buttons for the stores. When these buttons are clicked, a store is selected, we will do a filtering with useTable setFilters and list the products specific to that store.

pages/index.tsx:

export const getServerSideProps: GetServerSideProps = async (context) => {
    const data = await DataProvider(API_URL).getList<IProduct>({
        resource: "products",
        metaData: { populate: ["image"] },
        pagination: { current: 1, pageSize: 9 },
    });

    const { data: storesData } = await DataProvider(API_URL).getMany({
        resource: "stores",
        ids: ["1", "2", "3"],
    });

    return {
        props: {
            products: data,
            stores: storesData,
        },
    };
};

pages/index.tsx:

import { GetServerSideProps } from "next";
import { LayoutWrapper, GetListResponse, useTable } from "@pankod/refine-core";
import { DataProvider } from "@pankod/refine-strapi-v4";

import { IProduct, IStore } from "interfaces";
import { Button, SimpleGrid, Flex, Text } from "@chakra-ui/react";
import { ProductCard, FilterButton } from "src/components";

const API_URL = "https://api.strapi-multi-tenant.refine.dev/api";

type ItemProps = {
    products: GetListResponse<IProduct>;
    stores: IStore[];
};

export const ProductList: React.FC<ItemProps> = ({ products, stores }) => {
    const { tableQueryResult, setFilters } = useTable<IProduct>({
        resource: "products",
        queryOptions: {
            initialData: products,
        },
        metaData: { populate: ["image"] },
    });

    return (
        <LayoutWrapper>
            <Flex mt={6} gap={2}>
                <FilterButton
                    setFilters={() =>
                        setFilters([
                            {
                                field: "stores][id]",
                                operator: "eq",
                                value: undefined,
                            },
                        ])
                    }
                >
                    <Text fontSize={{ base: "12px", md: "14px", lg: "14px" }}>
                        All Products
                    </Text>
                </FilterButton>
                {stores?.map((item) => {
                    return (
                        <FilterButton
                            setFilters={() =>
                                setFilters([
                                    {
                                        field: "stores][id]",
                                        operator: "eq",
                                        value: item.id,
                                    },
                                ])
                            }
                        >
                            <Text
                                fontSize={{
                                    base: "12px",
                                    md: "14px",
                                    lg: "14px",
                                }}
                            >
                                {item.title}
                            </Text>
                        </FilterButton>
                    );
                })}
            </Flex>
            <SimpleGrid columns={[1, 2, 3]} mt={6} spacing={3}>
                {tableQueryResult.data?.data.map((item) => (
                    <ProductCard
                        id={item.id}
                        title={item.title}
                        description={item.description}
                        cardImage={
                            item.image
                                ? API_URL + item.image.url
                                : "./error.png"
                        }
                    />
                ))}
            </SimpleGrid>
        </LayoutWrapper>
    );
};

export default ProductList;

export const getServerSideProps: GetServerSideProps = async (context) => {
    const data = await DataProvider(API_URL).getList<IProduct>({
        resource: "products",
        metaData: { populate: ["image"] },
        pagination: { current: 1, pageSize: 9 },
    });

    const { data: storesData } = await DataProvider(API_URL).getMany({
        resource: "stores",
        ids: ["1", "2", "3"],
    });

    return {
        props: {
            products: data,
            stores: storesData,
        },
    };
};

Adding Pagination

We list all products on our All Products page. Let's add pagination to this page and divide the products into pages. We will perform pagination using the pageSize, current and setCurrent properties from the useTable hook.

Refer to the useTable documentation for detailed information. →

pages/index.tsx:

import { GetServerSideProps } from "next";
import { LayoutWrapper, GetListResponse, useTable } from "@pankod/refine-core";
import { DataProvider } from "@pankod/refine-strapi-v4";

import { IProduct, IStore } from "interfaces";
import { Button, SimpleGrid, Flex, Text } from "@chakra-ui/react";
import { ProductCard, FilterButton } from "src/components";

const API_URL = "https://api.strapi-multi-tenant.refine.dev/api";

type ItemProps = {
    products: GetListResponse<IProduct>;
    stores: IStore[];
};

export const ProductList: React.FC<ItemProps> = ({ products, stores }) => {
    const { tableQueryResult, setFilters, current, setCurrent, pageSize } =
        useTable<IProduct>({
            resource: "products",
            queryOptions: {
                initialData: products,
            },
            initialPageSize: 9,
            metaData: { populate: ["image"] },
        });

    const totalPageCount = Math.ceil(tableQueryResult.data?.total!! / pageSize);

    return (
        <LayoutWrapper>
            <Flex mt={6} gap={2}>
                <FilterButton
                    setFilters={() =>
                        setFilters([
                            {
                                field: "stores][id]",
                                operator: "eq",
                                value: undefined,
                            },
                        ])
                    }
                >
                    <Text fontSize={{ base: "12px", md: "14px", lg: "14px" }}>
                        All Products
                    </Text>
                </FilterButton>
                {stores?.map((item) => {
                    return (
                        <FilterButton
                            setFilters={() =>
                                setFilters([
                                    {
                                        field: "stores][id]",
                                        operator: "eq",
                                        value: item.id,
                                    },
                                ])
                            }
                        >
                            <Text
                                fontSize={{
                                    base: "12px",
                                    md: "14px",
                                    lg: "14px",
                                }}
                            >
                                {item.title}
                            </Text>
                        </FilterButton>
                    );
                })}
            </Flex>
            <SimpleGrid columns={[1, 2, 3]} mt={6} spacing={3}>
                {tableQueryResult.data?.data.map((item) => (
                    <ProductCard
                        id={item.id}
                        title={item.title}
                        description={item.description}
                        cardImage={
                            item.image
                                ? API_URL + item.image.url
                                : "./error.png"
                        }
                    />
                ))}
            </SimpleGrid>
            <Flex justify={"flex-end"} mt={4} mb={4} gap={2}>
                {Array.from(Array(totalPageCount), (e, i) => {
                    if (current > totalPageCount) {
                        setCurrent(i);
                    }
                    return (
                        <Button
                            colorScheme={"teal"}
                            onClick={() => setCurrent(i + 1)}
                        >
                            {"Page: " + (i + 1)}
                        </Button>
                    );
                })}
            </Flex>
        </LayoutWrapper>
    );
};

export default ProductList;

export const getServerSideProps: GetServerSideProps = async (context) => {
    const data = await DataProvider(API_URL).getList<IProduct>({
        resource: "products",
        metaData: { populate: ["image"] },
        pagination: { current: 1, pageSize: 9 },
    });

    const { data: storesData } = await DataProvider(API_URL).getMany({
        resource: "stores",
        ids: ["1", "2", "3"],
    });

    return {
        props: { products: data, stores: storesData },
    };
};

Adding Basket and Payment features with Snipcart

One of the steps that should be in an E-commerce application is the cart and payment transactions. In our example, we will use Snipcart for this process.

Refer to the Snipcart documentation for detailed information. →

Installation Snipcart Widget

pages/_app.tsx:

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
    const dataProvider = DataProvider(API_URL);

    return (
        <>
            <Head>
                <link rel="preconnect" href="https://app.snipcart.com" />
                <link
                    rel="stylesheet"
                    href="https://cdn.snipcart.com/themes/v3.0.16/default/snipcart.css"
                />
                <script
                    async
                    src="https://cdn.snipcart.com/themes/v3.0.16/default/snipcart.js"
                />
            </Head>
            <Refine
                routerProvider={routerProvider}
                dataProvider={dataProvider}
                resources={[{ name: "products" }]}
                Layout={Layout}
            >
                <ChakraProvider>
                    <Component {...pageProps} />
                </ChakraProvider>
            </Refine>
            <div hidden id="snipcart" data-api-key="YOUR_SNIPCART_TEST_KEY" />
        </>
    );
}

Adding "Add to Basket" Button on ProductCard component

src/components/ProductCard.tsx:

import React from "react";
import { Box, Image, Badge, Button } from "@chakra-ui/react";

export type ProductProps = {
    id: string;
    title: string;
    description: string;
    cardImage: string;
};

export const ProductCard: React.FC<ProductProps> = ({
    id,
    title,
    description,
    cardImage,
}) => {
    return (
        <Box
            maxH={"sm"}
            maxW="sm"
            borderWidth="1px"
            borderRadius="lg"
            overflow="hidden"
        >
            <Image w={"100%"} h={200} src={cardImage} />
            <Box p="6" bgColor={"gray.600"}>
                <Box display="flex" alignItems="baseline" mb={2} ml={-2}>
                    <Badge borderRadius="full" px="2" colorScheme="teal">
                        New Product
                    </Badge>
                </Box>

                <Box
                    mt="1"
                    fontWeight="semibold"
                    as="h4"
                    lineHeight="tight"
                    isTruncated
                    color={"white"}
                >
                    {title}
                </Box>
                <Box
                    color="white"
                    fontSize="sm"
                    display={"flex"}
                    mt={4}
                    justifyContent={"flex-end"}
                >
                    <Button
                        className="buy-button snipcart-add-item"
                        bgColor={"green.400"}
                        data-item-id={id}
                        data-item-price="5"
                        data-item-url="/"
                        data-item-name={title}
                        data-item-description={description}
                        data-item-image={cardImage}
                    >
                        Add to Basket
                    </Button>
                </Box>
            </Box>
        </Box>
    );
};

Conclusion

One of the biggest features that distinguishes refine from other frameworks is that it is customizable. Combined with refine headless, it now provides more customization options. This provides a great deal of convenience in the project you will develop.

As you can see in this article, we have developed the Client part of our Admin Panel, which we have done before, with refine. refine offers the opportunity to develop B2B and B2C applications without any restrictions and in a fully customizable manner.

Refer to the Admin side of the project →

Source Code

Live CodeSandbox Example

Check out for detailed information about refine. →

How to Import CSV File with React

Melih Ekinci — Wed, 19 Jan 2022 07:22:30 +0000

In this guide, we will learn how to import any CSV file received from the user with React. Our application will consist of two parts. We will create a form for the user to select a file. Next, we will do some operations with Javascript to be able to view this CSV file. Let's start with our example.

Example

First, let's create a Form in React so that the user can upload a CSV file.



function App() {
    return (
        <div style={{ textAlign: "center" }}>
            <h1>REACTJS CSV IMPORT EXAMPLE </h1>
            <form>
                <input type={"file"} accept={".csv"} />
                <button>IMPORT CSV</button>
            </form>
        </div>
    );
}

We created a simple form and our input items. With the accept feature of the input element, we specify that the format of the file can only be CSV. Now, let's load and read the CSV file selected by the user with FileReader.



import React, { useState } from "react";

function App() {
    const [file, setFile] = useState();

    const fileReader = new FileReader();

    const handleOnChange = (e) => {
        setFile(e.target.files[0]);
    };

    const handleOnSubmit = (e) => {
        e.preventDefault();

        if (file) {
            fileReader.onload = function (event) {
                const csvOutput = event.target.result;
            };

            fileReader.readAsText(file);
        }
    };

    return (
        <div style={{ textAlign: "center" }}>
            <h1>REACTJS CSV IMPORT EXAMPLE </h1>
            <form>
                <input
                    type={"file"}
                    id={"csvFileInput"}
                    accept={".csv"}
                    onChange={handleOnChange}
                />

                <button
                    onClick={(e) => {
                        handleOnSubmit(e);
                    }}
                >
                    IMPORT CSV
                </button>
            </form>
        </div>
    );
}

Here, once the user-selected file has been successfully uploaded, we can process and display the file. Now let's load a sample CSV file and see it output on our console.

As you can see, we can now read a selected CSV file. We can convert this file, which we read as a plain text type, into an Array of Object with JavaScript and place it inside a Table element.



function App() {
 import React, { useState } from "react";

function App() {
  const [file, setFile] = useState();
  const [array, setArray] = useState([]);

  const fileReader = new FileReader();

  const handleOnChange = (e) => {
    setFile(e.target.files[0]);
  };

  const csvFileToArray = string => {
    const csvHeader = string.slice(0, string.indexOf("\n")).split(",");
    const csvRows = string.slice(string.indexOf("\n") + 1).split("\n");

    const array = csvRows.map(i => {
      const values = i.split(",");
      const obj = csvHeader.reduce((object, header, index) => {
        object[header] = values[index];
        return object;
      }, {});
      return obj;
    });

    setArray(array);
  };

  const handleOnSubmit = (e) => {
    e.preventDefault();

    if (file) {
      fileReader.onload = function (event) {
        const text = event.target.result;
        csvFileToArray(text);
      };

      fileReader.readAsText(file);
    }
  };

  const headerKeys = Object.keys(Object.assign({}, ...array));

  return (
    <div style={{ textAlign: "center" }}>
      <h1>REACTJS CSV IMPORT EXAMPLE </h1>
      <form>
        <input
          type={"file"}
          id={"csvFileInput"}
          accept={".csv"}
          onChange={handleOnChange}
        />

        <button
          onClick={(e) => {
            handleOnSubmit(e);
          }}
        >
          IMPORT CSV
        </button>
      </form>

      <br />

      <table>
        <thead>
          <tr key={"header"}>
            {headerKeys.map((key) => (
              <th>{key}</th>
            ))}
          </tr>
        </thead>

        <tbody>
          {array.map((item) => (
            <tr key={item.id}>
              {Object.values(item).map((val) => (
                <td>{val}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
....

We formatted the CSV file that came in plain text format, using Javascript slice and split methods, and created two separate array. Then we converted Header and Rows arrays to Array of Object format as Key, Value.

Live Codesandbox Example

Are You Looking React Web Framework?

A React-based framework for building data-intensive applications in no time. refine offers lots of out-of-the box functionality for rapid development, without compromising extreme customizability. Use-cases include, but are not limited to admin panels, B2B applications and dashboards.

⚙️ 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, Strapi, NestJs CRUD, Airtable, Supabase, Appwrite and Altogic.

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

🔘 Decoupled UI : UI components are exposed directly without encapsulation. You have full control on UI elements.

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

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

Refer to the refine documentation for more information. →

How to CSV Import with Refine?

The CSV import with refine is very simple and out-of-the-box feature. How to use it is explained step by step in the guide and example.

Refer to the refine CSV import guide for more information. →

View Source

Refine CSV Import Usage

Importing CSV files is simple and fast using the useImport hook and ImportButton provided by Refine.



import {
    List,
    Table,
    useTable,
    useImport,
    ImportButton,

} from "@pankod/refine";

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

    const importProps = useImport<IPostFile>();

    return (
        <List
            pageHeaderProps={{
                extra: <ImportButton {...importProps} />,
            }}
        >
            <Table {...tableProps} rowKey="id">
                <Table.Column dataIndex="id" title="ID" />
                <Table.Column dataIndex="title" title="Title" />
                <Table.Column dataIndex="status" title="Status" />
            </Table>
        </List>
    );
};

interface IPostFile {
    title: string;
    categoryId: string;
}
interface IPost {
    id: string;
    title: string;
    status: string;
}

You can also divide the data into chunk with the batchSize option while performing the insertion process.

Refer to the refine CSV Import API References for more information. →

Refine CSV Import Live Codesandbox Example

How to Multipart File Upload Using FormData with HTML

Melih Ekinci — Tue, 28 Dec 2021 11:52:46 +0000

In this guide, we will look at how we can upload a file from HTML form data to a server with the multipart-upload method. Multipart-Upload is commonly used method for sending files or data to a server.

What is Multipart Upload Request?

A multipart request is a HTTP request that HTTP clients construct to send files and data over to a HTTP Server. It is commonly used by browsers and HTTP clients to upload files to the server.

Example

We will take a file from the user with FormData and send it to the server. First, let's create our fields for the user to choose a file using HTML form.

<body>
    <div class="container">
        <h1>Multipart File Upload</h1>
        <form id="form" enctype="multipart/form-data">
            <div class="input-group">
                <label for="files">Select files</label>
                <input id="file" type="file" multiple />
            </div>
            <button class="submit-btn" type="submit">Upload</button>
        </form>
    </div>
    <script src="index.js"></script>
</body>

Here we simply created an input and a button. With these HTML elements we have created, we can get the file chosen by the user.

Let's make a request with JavaScript and Fetch to send the selected files to the server.

const form = document.getElementById("form");
const inputFile = document.getElementById("file");

const formData = new FormData();

const handleSubmit = (event) => {
    event.preventDefault();

    for (const file of inputFile.files) {
        formData.append("files", file);
    }

    fetch("http://localhost:8080/files", {
        method: "post",
        body: formData,
    }).catch((error) => ("Something went wrong!", error));
};

form.addEventListener("submit", handleSubmit);

We added the file we received from the user with the input file to FormData. We then created a request to send this FormData object to the server.

Now, let's create a simple server using Express and Multer in order to see that the files we sent are received by the server successfully.

Multer: JavaScript middleware for handling multipart/form-data , which is used for uploading files.

import express from "express";
import cors from "cors";
import multer from "multer";

const app = express();

//Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins
app.use(cors());

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, __dirname + "/uploads");
    },
    filename: (req, file, cb) => {
        cb(null, file.originalname);
    },
});

const Data = multer({ storage: storage });

app.post("/files", Data.any("files"), (req, res) => {
    if (res.status(200)) {
        console.log("Your file has been uploaded successfully.");
        console.log(req.files);
        res.json({ message: "Successfully uploaded files" });
        res.end();
    }
});

app.listen(8000, () => {
    console.log("Server is running");
});

As you can see, we have created our multer structure and a simple server to run locally in order to manage and receive FormData.

The requests we created to send files by JavaScript will now be sent to our local server.

Are You Looking React Web Framework?

⚙️ 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, Strapi, NestJs CRUD, Airtable, Supabase, Appwrite and Altogic.

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

🔘 Decoupled UI : UI components are exposed directly without encapsulation. You have full control on UI elements.

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

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

Refer to the refine documentation for more information. →

How to Multipart Upload with Refine?

The Multipart file upload process with refine is very simple. How to use it is explained step by step in the guide and example.

Refer to the refine Multipart Upload guide for more information. →

View Source

Refine Multipart Upload Live Codesandbox Example

How to upload files from your HTML form using Base64 encoding

Melih Ekinci — Mon, 27 Dec 2021 06:44:33 +0000

Uploading files using Base64 encoding is a common practice. In this guide, I'm going to show you how to upload files using base64 encoding

What is Base64 encoding?

Base64 Encoding is the most widely used technique for storing or transmitting binary data by converting it to text. With this technique, binary data, which basically consists of 8-bit bytes, is divided into 6-bit (2^6 = 64) parts. 64 different numbers expressed in 6 bits are matched with 64 different characters expressed as Printable Characters in the ASCII character set.

Base64 encoding is most commonly used to attach binary files to electronic mail in applications of the MIME (Multipurpose Internet Mail Extensions) standard.

Another usage area of Base64 Encoding is adding images and other files to HTML and CSS documents by encoding with Base64 using Data URLs format in modern browsers.

Example

In our example, we will upload the image file by encoding the image as Base64. First, let's write simple HTML and set the Bootstrap CSS link.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="./index.css" />
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />
        <title>Base64 File Upload</title>
    </head>

    <body>
        <div style="margin: 24px">
            <h2>Upload Image</h2>
        </div>

        <script src="./index.js"></script>
    </body>
</html>

Then we need to use the HTML input tag to receive an image file from the user.

We will use file input because it must be the input type file we want to receive.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./index.css" />
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <title>Base64 File Upload</title>
  </head>
  <body>
    <div style="margin: 24px">
      <h2>Upload Image</h2>
    </div>
    <div style="margin: 16px; padding: 16px">
      <input
        class="form-control form-control-lg"
        id="selectAvatar"
        type="file"
      />
    </div>
</html>

Now we have an input to interact with the user and select a file. Let's add the HTML elements that will show the image file and Base64 code we received from the user.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="./index.css" />
        <link href="assets/css/bootstrap-responsive.css" rel="stylesheet" />
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous"
        />

        <title>Base64 File Upload</title>
    </head>
    <body>
        <div style="margin: 24px">
            <h2>Upload Image</h2>
        </div>

        <div style="margin: 16px; padding: 16px">
            <input
                class="form-control form-control-lg"
                id="selectAvatar"
                type="file"
            />
        </div>
        <div class="container">
            <div class="row">
                <div class="col">
                    <h6>Image Preview:</h6>
                    <img class="img" id="avatar" />
                </div>
                <div class="col">
                    <h6>Base64 Output</h6>
                    <textarea id="textArea" rows="30" cols="50"></textarea>
                </div>
            </div>
        </div>
        <script src="./index.js"></script>
    </body>
</html>

Our fields are ready to display image file and Base64 code. Now let's do our operations on the JavaScript side.

const input = document.getElementById("selectAvatar");
const avatar = document.getElementById("avatar");
const textArea = document.getElementById("textAreaExample");

const convertBase64 = (file) => {
    return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.readAsDataURL(file);

        fileReader.onload = () => {
            resolve(fileReader.result);
        };

        fileReader.onerror = (error) => {
            reject(error);
        };
    });
};

const uploadImage = async (event) => {
    const file = event.target.files[0];
    const base64 = await convertBase64(file);
    avatar.src = base64;
    textArea.innerText = base64;
};

input.addEventListener("change", (e) => {
    uploadImage(e);
});

Here we take data in file format and encode it as Base64. Then we show this encoded image and Base64 encoding output.

View Live Codesandbox Example

Are You Looking React Web Framework?

⚙️ 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, Strapi, NestJs CRUD, Airtable, Supabase, Appwrite and Altogic.

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

🔘 Decoupled UI : UI components are exposed directly without encapsulation. You have full control on UI elements.

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

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

Refer to the refine documentation for more information. →

How to Base64 Upload with Refine?

The Base64 file upload process with refine is very simple. How to use it is explained step by step in the guide and example.

Refer to the refine Base64 Upload guide for more information. →

View Source

Refine Base64 Upload Live Codesandbox Example

Web3 with Refine

Melih Ekinci — Mon, 13 Dec 2021 13:41:40 +0000

What is Web3

Web 3.0 eliminates intermediates. There’s no centralized database that stores the application state.

In web3, developers don't usually build and deploy applications that run on a single server or that store their data in a single database.
Instead of, Web3 applications run on blockchains, decentralized networks of many peer to peer nodes

Features provided by Web3:

Verifiable
Self-governing
Permissionless
Stateful
Trustless
Native built-in payments
Anonymity

What is dApps(Dapps)?

Dapps is short for "Decentralized Applications" and refers to any application that is decentralized in nature, built on a blockchain, and may use tokens for transactions.

Dapps is just like any other software application you use. It could be a website or an app on your phone. What makes a Dapp different than a traditional app is that it's built on a decentralized network, like Ethereum.

Many applications on the logic of dApp have been developed and continue to be developed.

Here you can browse some dapps

We have developed a simple app where you can login with ethereum and send ethereum over the network using Metamask Wallet and refine.

This application allows you to login with your web3 wallet and you can also send ethereum over the ethereum network.

This example is simple intro to dApps development built with web3 and refine.

You can develop many fast and functional dApps using web3 and refine.

Code Example

Guide

Live Code Example

DEV Community: Melih Ekinci

How to Create Full Stack React/Next.JS Web App in Few Hour

What is Refine?

Why Should Use Refine?

Key features​

Benchmark

Create Full Stack App

How to use Refine

Create a Refine Project

Step I

Step II

Refine Demo Apps

Powerful Features of Refine

Conclusion

How to Multipart File Upload Using FormData with React Hook Form

Introduction

Create Express Server

Create React Project

Multipart File Upload with React Hook Form

Are You Looking React Web Framework?

How to Multipart File Upload with Refine and React Hook Form?

Refine Multipart Upload Live CodeSandbox Example

We are going back to 1995! The perfect harmony of Modern stack and Win95

Introduction

Project Setup

Manually Project Setup

Usage

Supabase Client

AuthProvider

Configure Refine for Supabase

React95 Setup

Refine Login Page

Refine Post Page

Refine Create and Edit Page

Customize Refine Layout

Project Overview

Conclusion

ReactJS Frameworks You Should Know Before Start Developing B2B/Internal Application

Best Internal Tool Frameworks for ReactJS

What is Internal Tool?

1. Blitz.js

Key Features

Installation

2. Refine

Key Features​

Installation

Refine Examples

3. RedwoodJS

Key Features

Installation

RedwoodJS Example

4. React Admin

Key Features

Installation

React Admin Example

Building an Customizable Invoice Generator App with Refine, Strapi & Ant Design | Part II

Introduction

Create New Strapi Collections

Refine Missions Page

Refine Missions Create Page

Refine Invoices Page

Refine Create Invoice Page

View and Download Invoice as PDF

Installation

Usage

Conclusion

Live CodeSandbox Example

Develop your Own Customizable Invoice Generator with Refine and Strapi | Part I

Introduction

Setup Refine Project

Usage

Configure Refine for Strapi-v4​

Create Strapi Collections​

Your Company Detail Page

Company Card Component

Company List Page

Contact Page

Client List Page

Client Card Component

Client Create and Edit Page

Key features

Key Features

Configure Refine for Strapi-v4

Create Strapi Collections

Key features

Configure Refine for Strapi-v4

Chakra-UI Provider Setup

`GetServerSideProps`