2.2. Creating your project with refine App Scaffolder

In this post, we initialize our React admin panel for a CRUD app on the refine App Scaffolder. We then navigate through the pages to experience the UI and functionalities implemented.

Initialize a refine App​

Before starting initialization, we are presented with options to choose the stack we want to use in our app. We can choose from Vite, Next.js or Remix for tooling and framework options; Material UI, Ant Design or Chakra UI, etc. for the frontend; REST API, Supabase or Strapi, etc. for the backend; and Google Auth or a Custom Auth, etc. for auth providers.

For our React admin panel app, we are using Vite, Material UI, a Simple REST API and Custom refine Auth. So let's navigate to refine App Scaffolder in our browser and follow the steps as below:

1. Choose the above options one by one, clicking the Continue button after completing each section of the form.

2. After completing and reviewing all steps, click the Create button a final time and within a minute or so the refine React admin panel app should be initialized, built and deployed in the cloud.

We should then be directed to the preview of an actual running instance of the app:

As we can see, the app is running smoothly on refine.new and we are presented with a choice to login with credentials:

When we use the default credentials available in the login form, we are able to access all parts via the refine.new UI interface:

Please feel free to navigate through the app and try out different CRUD actions on blog_posts and categories resources.