Building CRUD app with React meta-framework

Jovica Zorić, CTO at ProductDock, discussed “Building a CRUD App with React meta-framework” in our Friday Talk. He analyzed a new Refine framework, and its classification as a meta-framework caught his attention. Refine aims to simplify CRUD App development, prompting him to give it a try after a brief review of its documentation.

Building CRUD App with React Meta-framework

Jovica discussed Refine.dev, a framework he came across. What intrigued him was its classification as a meta-framework. Refine. dev aims to simplify the development of CRUD apps, which got him interested enough to try it out. They say a picture is worth a thousand words, so here’s an image that illustrates what Refine is all about.

How Refine fits into a Meta framework

Before delving further into his exploration journey, Jovica talked about a Meta framework. He also mentioned other frameworks like Remix, Astro, and NextJS and discussed how Refine fits into this category.

A meta framework is a system one level above that provides a set of abstractions and tools built on top of another library, framework or platform.

Exploring Refine concepts

After this, Jovica wanted to take a quick look at the official documentation and the first tutorial. He mentioned some concepts in Refine that he found interesting, like Inferencer, Swizzle, Data Fetching with DataProviders, Router providers, and Authentication and Authorization. He was eager to explore these features and more through a simple example of Ticket management. Here’s what it looks like:

CRUD App with Refine code

The idea was to focus on UI and Refine and cover the other aspects like API, Database, and Authentication. You can find the code here: https://github.com/ProductDock/crud-app-with-refine

Different examples for the CRUD App

In the examples, Jovica first shows what a basic CRUD app looks like using the Inferencer component. Then, he demonstrates how to add a login and registration feature using out-of-the-box components like Login and Register. Afterward, he switches gears to Keycloak and connects everything using the OIDC plugin with our API Gateway. Next, Jovica adds Strapi as another way to provide data and demonstrates how it works. Finally, he shows how to customize an update action to handle specific situations beyond basic CRUD operations.

A wealth of potential for streamlining CRUD App development

In summary, Jovica’s exploration of Refine.dev has uncovered a wealth of potential for streamlining CRUD app development. So far, Refine looks like the sweet spot between low-code and full-code, and, in Jovica’s opinion, it’s worth exploring it in more detail. Follow our blog section for more exciting topics we will share with you in the next period.