1.3. About the App
The app generated is a basic React admin panel for managing blog posts. It is created as default at initialization by refine App Scaffolder, which employs the create refine app CLI in the background. Generally, for a custom app, we need to remove the blog post resources and then start tweaking according to our requirements. However, for the simple purposes of this tutorial, we'll stick with the Example CRUD app resources.
The React admin panel app stack consists of:
- Vite for managing tooling and configurations
- Material UI for the UI/UX
- A Simple REST API as backend API, developed and hosted by refine for learning purposes
- Custom Athentication provided by refine core and refine's Material UI (
@refinedev/mui) support packages
Prefer to go through this tutorial in an online code editor? That's possible!
Follow these instructions, then go directly to "Inferencer for CRUD Pages" section!
Set up CodeSandbox
Click here to open the Material UI template.
Click “Sign in” on the top right to log in using your GitHub credentials.
In the upper left of the CodeSandbox editor window, click the "fork" button to fork the template (save to your own account dashboard).
After the project loads, you will see a live preview of the “refine-mui-boilerplate” starter.
Make Changes
In the files panel, click on src/App.tsx to open it. Afterwards, go to this part of the tutorial to learn how to make changes to this file: Inferencer for CRUD Pages
Create a GitHub Repository
Press the "Connect Repository" button at the top of your list of files, enter a new name for your repository, and click "Create repo & push".
When you have changes to be commit to GitHub, a “Commit” button will appear at the top left of your workspace. Clicking on this will allow you to enter a commit message, and update your repository.
What's next?
Now you can navigate to Inferencer for CRUD Pages to start building with refine!