How We Delivered a Scalable Production App in 4 Days

What is Refine ? How it simplifies the Front End Logic and UI ?

Think of Refine as a pre-built CRUD application that you can integrate and customize for your business requirements. You can connect your backend services, build authentication providers, and it works seamlessly. It offers great flexibility within the React ecosystem. Our team had experience with Shadcn, Tailwind, and Jotai, and we were able to use them easily with Refine.

Features of Refine

• Auto-generation of CRUD UIs based on your API data structures
• Perfect state management and mutations with React Query
• Providers for seamless authentication and access control flows
• Out-of-the-box support for live / real-time applications

How to Configure Refine Framework to your business requirement

Following code is a sample data provider that seamlessly integrate our back end API into the front end data. Methods inside this provider will work as translators between them.

Refine Architecture

• Refine CORE ( The “View” Layer)

This represents your UI components (tables, forms, lists) built with Refine. When a user interacts with the UI the Core component doesn’t fetch data directly. Instead, it calls a hook.

• Data Hooks (The State Management Layer)

These are Refine’s custom hooks (like useList, useOne, useUpdate). Refine wraps React Query so you don’t have to manually configure it for every request. The hook prepares the request and send it to next layer.

• Data Provider (The Adapter Layer)

This is the most critical architectural component. It serves as a bridge or translator. Refine is backend-agnostic. It doesn’t know if your backend is a standard REST API, GraphQL, Supabase, or Firebase. The Data Provider takes the generic request from the Hook and translates it into the specific HTTP Request.

• API (The Backend)

Your actual server or database interface. It receives the standard HTTP request, processes it, and returns the JSON data back up the chain.

Inside a Data Provider: The Actual Code

1
import { DataProvider } from "@refinedev/core";
2
import { axiosInstance } from "@/lib/axios"; // Your configured axios
3
import { API_URL } from "./constants";
4

5
export const dataProvider: DataProvider = {
6
  // 1. Get List: Fetches a list of items with pagination and filters
7
  getList: async ({ resource, pagination, filters }) => {
8
    const params = new URLSearchParams();
9

10
    // Handle Pagination
11
    if (pagination) {
12
      params.append("page", String(pagination.current));
13
      params.append("per_page", String(pagination.pageSize));
14
    }
15

16
    // Handle Filters (Simple equals check)
17
    filters?.forEach((filter) => {
18
      if ("field" in filter && filter.operator === "eq") {
19
        params.append(filter.field, String(filter.value));
20
      }
21
    });
22

23
    const { data } = await axiosInstance.get(`${API_URL}/${resource}?${params.toString()}`);
24

25
    return {
26
      data: data.data,
27
      total: data.total,
28
    };
29
  },
30

31
  // 2. Get One: Fetches a single item by ID
32
  getOne: async ({ resource, id }) => {
33
    const { data } = await axiosInstance.get(`${API_URL}/${resource}/${id}`);
34
    return { data: data.data };
35
  },
36

37
  // 3. Create: Creates a new item
38
  create: async ({ resource, variables }) => {
39
    const { data } = await axiosInstance.post(`${API_URL}/${resource}`, variables);
40
    return { data: data.data };
41
  },
42

43
  // 4. Update: Updates an existing item
44
  update: async ({ resource, id, variables }) => {
45
    const { data } = await axiosInstance.put(`${API_URL}/${resource}/${id}`, variables);
46
    return { data: data.data };
47
  },
48

49
  // 5. Delete: Deletes an item
50
  deleteOne: async ({ resource, id }) => {
51
    const { data } = await axiosInstance.delete(`${API_URL}/${resource}/${id}`);
52
    return { data: data.data };
53
  },
54

55
  getApiUrl: () => API_URL,
56
};

Access Control: Show or Hide UI by Role

1
const ACCESS_DENY_MAP: Record<string, Record<string, DenyRule>> = {
2
  super_admin: {
3
    "spin-wheel": {
4
      can: false,
5
      reason: "Super Admins cannot access the Spin Wheel",
6
    },
7
  },
8
  outlet_admin: {
9
    "outlets:list": {
10
      can: false,
11
      reason: "Outlet Admins cannot access this resource",
12
    },
13
  },
14
};
15

16
export const accessControlProvider: AccessControlProvider = {
17
  can: async ({ resource, action }): Promise<CanReturnType> => {
18
    const userRole = localStorage.getItem(USER_TYPE_KEY);
19
    const roleRules = userRole ? ACCESS_DENY_MAP[userRole] : undefined;
20

21
    if (roleRules && resource != null) {
22
      const resourceDeny = roleRules[resource];
23
      if (resourceDeny) return resourceDeny;
24

25
      if (action != null) {
26
        const actionKey = `${resource}:${action}`;
27
        const actionDeny = roleRules[actionKey];
28
        if (actionDeny) return actionDeny;
29
      }
30
    }
31

32
    return { can: true };
33
  },
34
};
35

36

37
// APP.tsx (injecting the providers)
38

39
    <Refine
40
      dataProvider={dataProvider}
41
      notificationProvider={useNotificationProvider()}
42
      routerProvider={routerProvider}
43
      authProvider={authProvider}
44
      accessControlProvider={accessControlProvider}
45
      resources={resources}
46
      options={{
47
        syncWithLocation: true,
48
        warnWhenUnsavedChanges: true,
49
        projectId: "aGc8b6-n8GqQk-zhQYV5",
50
        title: {
51
          icon: <Logo className="w-8 h-8" />,
52
          text: "Sample",
53
        },
54
      }}
55
    >

Database and Storage

D1 is Cloudflare’s serverless database that works like SQLite. It automatically handles backups and can be accessed using Cloudflare Workers or HTTP APIs. It’s built to scale by letting you create many small databases (up to 10 GB each). For our requirement this 10 GB limit will never exceed. This was the best free option for us.

D1 offers an awesome developer experience with easier SQL based migrations and local database setup.

Cloudflare R2 is object storage for storing large files and unstructured data. We used R2 for storing images and other data files. Its 10 GB free offer is also enough for our requirement.

Both D1 and R2 seamlessly integrate with Hono framework giving us the best Dev Experience. This faster integrations allow building back end API faster within few days.

How Easy It Is to Integrate D1 & R2 with Hono

1
# Bind the D1 Database
2
[[d1_databases]]
3
binding = "MY_D1" # variable name you will use in your code
4
database_name = "my-database-name"
5
database_id = "your-database-id-here"
6

7
# Bind the R2 Bucket
8
[[r2_buckets]]
9
binding = "MY_R2" # variable name you will use in your code
10
bucket_name = "my-bucket-name"

1
// index.ts or types.ts
2
import { Hono } from 'hono'
3

4
// Define the Bindings interface
5
type Bindings = {
6
  MY_D1: D1Database;
7
  MY_R2: R2Bucket;
8
}
9

10
// Pass the Bindings type to the Hono instance
11
const app = new Hono<{ Bindings: Bindings }>()
12

13
export default app

Wrangler will emulate D1 and R2 locally, so you don’t need to connect to the production resources immediately.

Philosophy of Shipping Great Products Fast

“The real problem is that programmers have spent far too much time worrying about efficiency in the wrong places and at the wrong times; premature optimization is the root of all evil (or at least most of it) in programming.”

— Donald Knuth

With an extremely tight timeline to deliver the product, we made one principle very clear from day one “focus only on what truly matters”. Instead of trying to build a perfect, over-polished system, we intentionally trimmed everything down to the absolute business essentials. We knew that if we obsessed over micro-optimizations or unnecessary complexity, shipping within the deadline would simply not be possible. Our entire team stayed hyper-focused on delivering real business value first, leaving minor refinements for later iterations.

Our team members were skilled in Java Spring Boot, FastAPI, and AWS. But if we had overengineered with Java and verbose code, this project couldn’t have been done this easily, and the deployments would have been a real pain.

We did not worry about deployments at all because our pipelines, which were handled using GitHub Actions, seamlessly integrated with Cloudflare, giving us faster deployment across dev and prod environments. This allows us to do critical changes to our application code easier and fast with the time we had for user acceptance testing.

This did not mean being careless. Our philosophy was to mix the perfect amount of everything to balance the strict timeline with the best quality output possible.

Written with ❤️ for the dev community by Epazingha