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

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:

• Airtable
• Altogic
• Appwrite
• GraphQL
• Hasura
• NestJS CRUD
• Nhost
• Simple REST API
• Strapi
• Strapi GraphQL
• Strapi v4
• Supabase

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:

• E-commerce Example
• Invoice Genarator Example | Part I - Invoice Genarator Example | Part II
• Windows95 UI Admin Panel
• Feedback Admin Panel
• Job Posting Admin Panel
• E-mail Subscription Example

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!