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:

• Initializing a React admin panel app using refine App Scaffolder
• Understanding dataProvider and CRUD Actions in refine
• Understanding the concept of the resources prop in refine
• Adding CRUD pages to refine app
• Understanding the authProvider prop and refine Auth Pages

👉 You can view the app we'll build during the tutorial from this link.

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

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.