Skip to main content

1.1. Build Your First refine App

About This Tutorialโ€‹

This tutorial guides through the process of using refine App Scaffolder to quickly initialize, build and launch a fully-functional React admin panel using refine framework๐Ÿš€.

It step by step covers what constitutes a basic refine CRUD app and explores fundamental refine concepts, namely: the dataProvider, authProvider and resources props.

Most of the code is already generated by the magic of refine App Scaffolder. So, the content mainly presents low level inspections of boilerplate code to show how refine works under the hood. Units related to dataProvider and resources explain how refine handles API calls and RESTful routing for implementing CRUD actions in a React admin panel. The later part of the series elaborates on the implementation of CRUD pages using Material UI components. The last unit sees how user authentication is implemented in a refine app.

This tutorial covers the following topics:

๐Ÿ‘‰ You can view the app we'll build during the tutorial from this link.

tutorial material ui

๐Ÿ„ If you're a busy developer, you can quickly download the final version of the application by clicking on the "Build & Download" button.

What is refine?โ€‹

refine is a React-based open-source framework that uses React to help developers create web applications faster and easier. It's excellent for applications that handle a lot of data, like admin panels, internal tools and dashboards, but it's versatile enough to use for any kind of CRUD application.

Think of refine as a handy tool that takes care of the monotonous parts of creating CRUD operations in web development. It comes with built-in solutions for essential project needs such as authentication, access control, routing, networking, state management, and i18n.

react admin panel

One of the key features of refine is that it's "headless," meaning it doesn't impose any styling or design on you. You have complete freedom to create your own unique look and feel. Plus, if you want to speed up your design process, refine comes pre-integrated with popular UI libraries like Ant Design, Material UI, Mantine, and Chakra UI .

Another great thing about refine is its ability to connect with over 15 different backend services. This includes both REST API and GraphQL, and popular services like Airtable, Strapi, Supabase, Firebase, Hasura, and Directus.


If you would rather start exploring refine with some examples before diving in, visit our examples page and choose an example to open and explore it in an online editor.

Thank you Astro Community! โค๏ธ

While preparing the refine's tutorial, we were quite inspired by the Astro tutorial. We thank Astro for your contributions to the open-source community ๐ŸŽ‰