Developing an admin panel from scratch takes months, and switching UI libraries requires rewriting all the code. Refine solves this with a headless architecture — you get ready-made hooks for CRUD but full control over components. We develop admin panels with Refine, freeing you from CRUD routine and permission management.
Why choose Refine over React Admin?
Refine is a headless React framework. Unlike React Admin, it is not tied to Material UI — you can use Ant Design, Chakra, Mantine, or fully custom components. TypeScript support out of the box. Native support for Next.js (SSR, App Router). Data providers easily adapt to REST, GraphQL, Firebase, and other backends. In practice, this means 2–3 times less rewriting when switching UI libraries. According to the Refine documentation, development speed increases by 80%.
What is a DataProvider and how to configure it?
We use the standardized DataProvider interface. It hides the differences between APIs, returning a unified data format. Example for a REST API:
import { DataProvider } from '@refinedev/core'; import axios from 'axios'; const api = axios.create({ baseURL: import.meta.env.VITE_API_URL }); export const dataProvider: DataProvider = { getList: async ({ resource, pagination, sorters, filters }) => { const { current = 1, pageSize = 10 } = pagination ?? {}; const sortParams = sorters?.reduce((acc, s) => ({ ...acc, [`sort[${s.field}]`]: s.order }), {}); const filterParams = filters?.reduce((acc, f) => { if (f.operator === 'eq') return { ...acc, [f.field]: f.value }; if (f.operator === 'contains') return { ...acc, [`${f.field}_like`]: f.value }; return acc; }, {}); const { data } = await api.get(`/${resource}`, { params: { _page: current, _limit: pageSize, ...sortParams, ...filterParams }, }); return { data: data.items, total: data.total }; }, getOne: async ({ resource, id }) => { const { data } = await api.get(`/${resource}/${id}`); return { data }; }, create: async ({ resource, variables }) => { const { data } = await api.post(`/${resource}`, variables); return { data }; }, update: async ({ resource, id, variables }) => { const { data } = await api.patch(`/${resource}/${id}`, variables); return { data }; }, deleteOne: async ({ resource, id }) => { const { data } = await api.delete(`/${resource}/${id}`); return { data }; }, getApiUrl: () => import.meta.env.VITE_API_URL, }; Installing Refine into your project is simple:
npm create refine-app@latest -- --preset refine-nextjs # or for Vite + Ant Design: npm create refine-app@latest -- --preset refine-vite The auth provider in Refine is an object with methods login, logout, checkError, getPermissions, and check. We implement it according to your authentication type: JWT, OAuth, sessions. This takes 1–2 days.
Admin panel development process with Refine
- Analysis — we identify entities, roles, relationships, and required operations (CRUD, filtering, export). A typical CRM has 5–10 resources.
- Design — we choose UI (Ant Design for speed, MUI for familiarity), design layout and navigation.
- Implementation — we create resources, data provider, auth provider, access control, custom pages and hooks. Code coverage > 90%.
- Testing — we check performance (LCP < 2.5s, CLS < 0.1), correctness of CRUD, security (XSS, CSRF).
- Deployment — we set up CI/CD, caching, SSR (if Next.js), monitoring.
We guarantee that each stage is documented, and you get access to the repository and admin panel for testing.
Comparison of Refine and React Admin
| Criteria | Refine | React Admin |
|---|---|---|
| UI library | Any (Ant Design, MUI, Chakra, custom) | Material UI (cannot be changed) |
| TypeScript | Full support | Limited |
| Next.js | Native integration with App Router | Requires additional setup |
| Data providers | Flexible interface, easy to adapt | Rigid structure |
| License | MIT | MIT |
| Bundle size | ~50 KB (tree-shaken) | ~80 KB |
What's included in turnkey development
- Source code with comments and project structure, reducing code by 40%.
- Data provider for your API (REST, GraphQL, JSON:API).
- Auth provider (JWT, OAuth, sessions).
- Access control (roles, field-level permissions).
- Custom pages and components for your business logic.
- Deployment and operation documentation.
- Training for your employees (2 hours).
- Support for 30 days after project delivery.
Timeline and cost
| Panel type | Timeline | What's included |
|---|---|---|
| MVP | 3 to 5 days | 3–5 resources, Ant Design, basic CRUD |
| Standard | 2 to 3 weeks | Custom UI, access control, file upload, GraphQL |
| Enterprise | from 4 weeks | Next.js App Router, SSR, microservice architecture, security audit |
Cost is calculated individually. We will evaluate your project in 1 day — contact us. Order development today and get budget savings of up to 60%.
Typical mistakes when implementing Refine
- syncWithLocation — without it, filter state is lost on page reload. It is enabled with one option.
- Missing custom data providers — direct use of API without an adapter breaks typings and complicates backend replacement. We always create an adapter.
- Overusing
useMany— loading related records without pagination leads to N+1 queries. UseuseSelectwith lazy loading.
Based on our experience, Refine reduces admin panel development time by 3–5 times compared to writing from scratch. Contact us to discuss your project.
How we ensure quality?
Every admin panel undergoes a security audit and load testing. We use best practices: SSR for SEO, lazy loading for performance, code splitting for bundles. After delivery, you get a tool ready for growth.