Forem: react-admin

How to build a CMS with Supabase and React-admin

react-admin — Mon, 03 Feb 2025 13:21:03 +0000

In this post, I will explain how to build a CMS proof of concept using react-admin and Supabase. You can check out the result in the video below:

I've been working with react-admin on various projects, some of which required basic CMS features in addition to the core application. We've used headless CMS like Strapi, Directus, or Prismic for these features. However, react-admin is so powerful that it can be used to build the CMS part, too. That's why I worked on a CMS proof-of-concept using react-admin for the admin UI and Supabase (which provides a REST API) for the backend.

Defining The Data Model

A CMS requires a data model that is both flexible and dynamic, allowing the addition of new entities and new fields to existing entities. The following diagram represents the data model I came up with:

Entities like posts and pages are stored in an entities table, while fields such as title or content are stored in a fields table. Since an entity can have multiple fields and fields can be shared by multiple entities, it is a many-to-many relationship materialized by the entities_fields table. A separate field_types table is needed to store the different PostgreSQL types of fields (text, integer, boolean, etc.).

If we follow this structure for posts and pages entities, it results in the following data being stored in the configuration tables:

Using SQL Triggers For Dynamic Tables

The data model described above is the configuration model. I'll need a second model to store data for posts and pages. For instance, when a 'posts' record is added to the entities table, I want to create a posts table. The actual posts will be stored in this posts table. Similarly, when a new post field is added to the entities_fields table, I want to add a column to the posts table.

So I need to implement logic to dynamically create, update, or delete entities table based on the data in the entities, fields, and field_types tables. I’ll use SQL triggers to achieve this. They can be configured directly within the Supabase Studio interface.

The first trigger handles entity tables. It automatically creates, updates, and deletes the table associated with an entity whenever a row is inserted, updated, or removed from the entities table:

With the triggers to manage the tables in place, I now need another trigger to handle the columns of these tables. This trigger will execute after each insert or delete operation on the entities_fields join table.

With the example posts and page configuration defined earlier, these triggers will create the following entity tables:

posts: id, title, content, draft
pages: id, title, content

The frontend will only need to query the posts and page tables, without having to worry about the underlying structure. This approach offers great flexibility for the configuration and good performance for the data storage.

The SQL triggers do not account for SQL injection vulnerabilities and could likely be improved in terms of security. I will not cover these aspects in this post. Additionally, other triggers may be needed to handle cases such as renaming a column when a field name is updated, but these are not included in this proof of concept.

Using React-Admin Components For CMS Configuration

After bootstrapping a basic React-Admin app with the ra-supabase package, I need to create the list, show, create, and edit pages for the configuration tables: entities, fields, and field_types. For example, in the entities form, I use the following code to manage the fields:

A key detail here is using the <ReferenceManyToManyInput> component to handle the many-to-many relationship between entities and fields. It enables the selection of multiple fields from the fields table their association with an entity. The through and using props define the join table and the columns that establish the relationship between the two tables.

Similarly, I use the <ReferenceManyToManyField> component to create the entities list, displaying the associated fields as chips:

I'll use a similar approach to define the CRUD views for the fields and field_types tables.

Handling Dynamic Resources With React-Admin

Thanks to the SQL triggers I set up earlier, when a user changes the CMS configuration by altering the entities, fields, or field_types tables, the corresponding entity tables are automatically created, updated, or deleted.

Now, how can I define CRUD views for these entities? Since the tables are created dynamically, I cannot explicitly define the resources in the <Admin> component. Instead, I need to generate the resources dynamically based on the data from the entities and fields tables.

To achieve this, I’ll create a query that fetches the entities and fields from the API. I'll use Supabase's ability to join data from several tables with its select function. I'll store the result in a React context. The App component will then use this context to generate the resources dynamically.

Below is the <DynamicResourceProvider> implementation:

Next, I can wrap the entire application within this context provider. It's essential to ensure that <App /> is a child of the <DynamicResourceProvider> since the context will be utilized within the <App /> component:

Finally, I can consume the context to render one Resource for each entity within the <Admin> component:

The <Admin /> component now creates one menu entry per entity.

Generating List And Form Components With Dynamic Fields

Next, I need to generate dynamic list, edit, and create components for each resource. That's the purpose of the DynamicResourceList, DynamicResourceEdit, and DynamicResourceCreate components.

In these components, I need to map PostgreSQL types to corresponding React-Admin fields and inputs. For instance, a text field can be represented as a <TextField> in the List component and a <TextInput> in the Form component.

I create utility functions to manage this mapping, such as for the inputs:

I can then use it to generate the components for the dynamic resources:

And that's it! I can now enter data in entity tables using the admin interface.

Limitations

This proof of concept has some limitations that need to be addressed.

One issue I encountered is with React-Admin’s efficient cache management, which helps reduce the number of API calls. However, I need to invalidate the cache for the query fetching the dynamic resources whenever an entity is created, updated, or deleted. To resolve this, I specify an onSuccess callback that triggers after performing any of these actions. For example, in the EntitiesCreate component:

Another limitation is the lack of support for relationships between entities. For instance, I might need a comment entity with a post_id foreign key to associate a comment with a post. This can be probably addressed by adding a reference_entities column to the entities table to store foreign key relationships between entities. Implementing this would require updating the triggers to create the necessary foreign keys.

Conclusion

In this post, I showed how to build a CMS proof of concept using React-Admin and Supabase. By combining SQL triggers for managing the database schema, React-Admin for the administration interface, and a custom context provider to handle dynamic resources, I was able to create a flexible and dynamic CMS with minimal code.

This proof of concept can be expanded with additional features not covered here, such as authentication or mandatory fields. It also has some limitations, as noted earlier. Nevertheless, it offers a strong foundation for building a CMS with React-Admin and Supabase. More importantly, it highlights how React-Admin can effectively handle dynamic resources.

The full code for this proof of concept is on GitHub: marmelab/react-admin-cms.

5 Essential Practices for Building Efficient Gen AI Programs

react-admin — Tue, 12 Nov 2024 13:35:22 +0000

Building efficient Gen AI programs requires more than just deploying a model — it demands a structured approach that balances performance, cost, and reliability. Understanding how to optimize workflows will make the difference between a well-functioning AI solution and one that drains resources. In this article, we’ll explore the key principles and best practices to help you maximize the efficiency of your Gen AI programs.

How to build efficient Gen AI programs?

1) Break the problem into smaller sub-tasks. 🏗️

First, not all tasks require the most powerful LLM. Break the problem into smaller sub-tasks, use traditional programming techniques for data-heavy processes and user interface rendering, leverage small models for simpler AI tasks like sentiment analysis and spelling correction, and reserve the heavy lifting for larger models only when necessary.

2) Implement LLM Orchestration. ⚙️

Orchestration becomes crucial because LLMs are slow. Streaming, parallelism, and speculative execution can help speed up the process. For instance, while Midjourney shows a half-finished image as it generates, you still need to wait for the full result to evaluate it. The same goes for using LLMs to determine function parameters—you can’t execute the function until all parameters are ready.

3) Establish robust error handling. 🚨

Error handling is another essential component. You need mechanisms to detect when an LLM has produced a wrong or harmful output and decide whether to retry, adjust, or abandon that task. Many commercial LLMs have built-in safety layers that cut off offensive content during streaming (a.k.a. safeguarding).

4) Evaluate your LLM setup regularly. 🕵🏻

Evaluating the effectiveness of an LLM setup is like running continuous integration tests. You need robust evaluation to ensure reliability, given the numerous ways to configure and prompt an LLM. The eval systems may even involve other LLMs, which require their own tuning. Just like with automated tests, you need to rerun the evaluation benchmarks after every configuration change to catch issues before they reach customers.

5) Monitor costs closely. 💸

Monitoring costs is crucial too—FinOps must be part of Gen AI from day one. Whether using a hosted LLM or running one on your own GPUs, managing expenses is a significant challenge, especially as you scale.

Conclusion

The good news? You don't need to be an AI researcher to use LLMs. Off-the-shelf models, standardized APIs, and abundant tutorials have made it possible for traditional developers to build Gen AI applications.

Incorporating Gen AI into applications opens up vast possibilities, but it requires oversight to ensure efficiency. As AI technology continues to evolve, mastering these fundamental practices will empower developers and organizations to build robust, scalable, and sustainable Gen AI solutions.

Want to read more from us? Hop over to our blog.

Building a Complete React CRM App with Atomic CRM 🛠️

react-admin — Fri, 06 Sep 2024 14:20:00 +0000

Every company has unique CRM needs, but not many can afford a custom solution.

To solve this problem we built Atomic CRM — an open-source CRM framework made for developers and designed to be user-friendly for everyone.

Every Company Needs A Custom CRM

For small and medium-sized businesses, finding the right CRM solution can be difficult, and building an in-house system is often the best option.

Off-the-shelf solutions like SuiteCRM, Odoo, OroCRM, or Vtiger frequently fall short of addressing specific business needs, forcing teams to use workarounds or make compromises. These platforms tend to be complex, require expensive integrations, or come with high costs that don’t match the value they provide.

For companies with straightforward but unique CRM requirements, developing an in-house solution is often more cost-effective. We've experienced this ourselves. Seeing these challenges, we created a simple CRM tailored to our own needs, named Atomic CRM. But why should every company reinvent the wheel?

We believe that Atomic CRM offers a powerful foundation that can save businesses time and resources. That’s why we’re open-sourcing it today under the permissive MIT license, empowering companies to build a custom CRM solution at a fraction of the cost: marmelab/atomic-crm.

The Features Everybody Needs

Atomic CRM covers all the essential CRM features and can be used straight out of the box to:

📇 Organize Contacts: Keep all your contacts in one accessible place, making it convenient to find and manage your contacts. The intuitive interface ensures that you have the right information at your fingertips whenever you need it.
📝 Take Notes: Capture important insights effortlessly with the note-taking feature.
⏰ Create Tasks & Set Reminders: Stay on top of your to-do list with Atomic CRM’s task management feature. Create tasks, set reminders, and never miss a follow-up again.
📊 Manage Deals: Visualize your sales pipeline effectively in a Kanban board. This feature helps you track deal progress, prioritize tasks and close deals faster, ultimately boosting your team's productivity.

However, CRMs don’t operate in isolation — they need to integrate with other enterprise tools. Atomic CRM enables you to:

🔄 Import & Export Data: Easily transfer contacts and other important information in and out of the system, ensuring smooth integration with your existing workflows.
✉️ Capture Emails: Integrate your email communications seamlessly. By including Atomic CRM in your email's CC, the system automatically saves the correspondence as a note.
🛠️ API Integration: Connect Atomic CRM with other systems effortlessly through its robust API. This integration provides a cohesive and unified data environment, making Atomic CRM a central hub for all your customer relationship management needs.

In summary, Atomic CRM is packed with all the required features to streamline customer relationship management, allowing developers to focus on implementing custom business logic. By handling the basics, it frees up time for your team to create solutions that deliver real value.

Ready For Customization

With a simple relational data model, developers can easily modify the system to store additional data. Its component-based architecture allows for replacing or customizing any part of the application, giving developers full control over the user experience. Built using React and react-admin, two widely supported frameworks, it comes with a rich library of pre-built components ready for use.

Atomic CRM supports adding custom pages, enabling scalability as your business evolves. Developers can integrate custom logos and themes to match the company's brand identity.

Designed to be customized directly through code, the framework avoids the need for a complex customization UI. This makes the codebase clean and simple, allowing developers to modify and extend it easily to meet specific requirements.

Deploy Anywhere

Atomic CRM leverages Supabase for data storage and backend APIs, combined with a static single-page application for the UI. This simple architecture allows you to host it for free almost anywhere. The default deployment, using Supabase.com and GitHub Pages, can be set up in just 5 minutes with a single command.

Since customer data is often sensitive, many companies require strict control over their CRM hosting. With Atomic CRM, you can store customer data on your own infrastructure, behind your firewall, and integrate your own authentication system. It supports single sign-on with popular providers like Google, Azure, and Auth0, ensuring secure login using existing enterprise accounts-with no additional charge.

Conclusion

Whether you're a startup or a large business looking to improve customer management, Atomic CRM is a great starting point. It offers all the key features you need and is easy to customize, letting developers build a CRM that fits their exact needs. Best of all, it's free.

Check out the Atomic CRM website or dive straight into the code.

We're curious to hear about your experience! What challenges have you faced in developing CRM solutions? What functionalities are you looking for in a framework to overcome those challenges?

Are No-Code Tools A Good Choice For Developers?

react-admin — Fri, 17 Feb 2023 12:00:00 +0000

Developers often use low-code tools like react-admin to increase their development speed. But what about no-code tools? How far can they get and are they nice to use?

As an experiment, I decided to try replicating the React-Admin demo using a no-code tool. This e-commerce demo shows an admin for a fictional poster shop. I chose the most popular no-code platform, Retool. My goal is to see if it is possible to replicate the functionality of a developer tool using a no-code approach. Stay tuned to see how it turns out!

Working With A Fake API

Before diving into no-code, I need to set up an API that Retool can use. To do this, I have to write some code - but it's for testing purposes, and it should be the only code in this post. I use the e-commerce fake data generator published with react-admin, along with JSON Server to create the API, and ngrok to expose it.

Now I have an API running locally and accessible from the outside via a ngrok.io URL:

Setting Up The API Connection

To access my API in Retool, I create a new resource of type REST API using the ngrok URL. I name this resource "Posters Galore".

Creating The First Component

It's time to start building the first component: the leftmost block of the top row in the demo dashboard, which displays the monthly revenue.

To begin, I create a new app in Retool and name it "Dashboard". To display data in the component, I need to set up a query that retrieves the commands for the last 30 days. I name this query "commands_for_last_30_days" and use the "Posters Galore" resource and the commands endpoint.

In order to filter the results to the last 30 days, I need to set the date_gte URL parameter. For the value, Retool allows me to use a JavaScript expression with some included libraries like moment. This expression will return the date 30 days ago: {{moment().startOf('day').subtract(30, 'days')}}.

Next, I add a Statistic component to my app. To allow for more customization, such as changing the background color, I wrap it in a Container component. Using the sidebar, I can easily configure the Statistic component to meet my needs, such as adding a label and icon.

To set the displayed value, I select the commands_for_last_30_days query and use a JavaScript expression to compute the sum of the total field: {{commands_for_last_30_days.data.reduce((acc, command) => acc + command.total, 0)}}.

The first component that fetches the API and renders the result is now ready!

I can follow the same process to create the component that displays the number of orders in the last 30 days with the following displayed value: {{commands_for_last_30_days.data.length}}.

Displaying A List Of Records

The next component I want to build is the list of pending reviews.

To do this, I need to create a pending_reviews query that retrieves all the reviews with a status of "pending". Then, I use a List view component to display these reviews. To set the number of rows in the list view, I use the following expression: {{pending_reviews.data.length}}.

Then, I can put in the List view the compoents that will be used to display each row. In this case, it is an Avatar component and a Text component. In a row, we can use the i variable to access data of the current row. For example, to display the comment of the review in the Text component, I use the following expression: {{pending_reviews.data[i].comment}}.

To display the avatar, it is a little bit more complex because it is a relationship between reviews and customers. The pending_reviews query does not directly contain the customer's avatar. To get the customer's avatar, I need to create a new query that retrieves all customers with the ID of the review. I name this query customers and use the customers endpoint. I can now use the customers query to get the avatar of the customer who write the review in the Avatar component using the following expression: {{customers.data.find((customer) => customer.id === pending_reviews.data[i].customer_id).avatar}}.

The list of pending reviews is now ready!

The only problem is that it calls the API once for the reviews, and once for each review to fetch the author...

Displaying a chart

One key benefit of using no-code tools is their ability to effortlessly create complex elements such as charts, which can be challenging to accomplish with traditional coding methods. Let's try this on the chart displaying the revenue from the last 30 days.

All I need to do is create the query invoices_for_last_30_days and use the chart component. With the sidebar, I can then select the invoices_for_last_30_days query as the data source, choose the Line chart type, and select to display only the total data from the query.

I have a problem when my query returns several invoices for the same day. To group invoices by day, I can directly transform the result of the query with some custom JavaScript code. For this particular case, I can accomplish this task with a reduce function.

The chart is now ready!

Except I had to use JavaScript... Can a non-developer do that?

Building a Multi-Page App

Creating a dashboard is nice but I need to have other views in my admin app. The react-admin demo is a complete app showing orders, invoices, products, customers, reviews, etc.

Unfortunately, Retool does not allow to create multiple pages in a single app. To solve this problem, I have to create a new app.

Let's create a new app for the invoices list, that I name "Invoices list". Then, I add a header to my app with the left sidebar. By default, the header contains a Navigation component. This is exactly what I need! With the right sidebar, I can easily configure each link of the navigation. For example, I can set the link to the dashboard app and the label to "Dashboard".

This navigation has to be added in each separate app of my "multi-page" app. So, I also add it to the Dashboard app. Now, I can navigate between the two apps.

TIP:

If some components have to be shared between several apps, it is probably better to use the Module features provided by Retool. The queries can also be shared by exporting them to the "Query library".

Creating A Table View

To create the invoices view, I first create a new query called invoices to retrieve all invoices, and use it in a Table component. Using the right sidebar, I can easily customize the column labels and select the fields to display in the table, such as hiding the tax_rate. The Table component also enables user to choose the sort field and add filters.

Currently, the order ID is visible in the table. To enhance the user experience, it would be great to directly display the order reference, similar to how the React Admin ReferenceField works. To achieve this, I have to create another query, orders to retrieve all orders. I can then add an "Order" column to the table and use JavaScript with the keyword currentRow to obtain the reference of the corresponding order ID:

I would like to achieve a similar outcome with the customer ID by directly displaying the customer's avatar in the table. Unfortunately, it appears that it is not possible to nest a component like the Avatar component within the Table component. However, it is possible to use Image URL as the column type. To display the avatar, I can use the following expression:

Additionally, I can create another column to display the customer's name by using the following expression:

The invoices table is now ready!

But again, without basic coding knowledge, I would be very limited in terms of customization.

Adding Actions To A Table

In the invoices list, I would like to have actions to edit or delete an invoice. To do this, I can use the Actions feature of the Table component. With the right sidebar, I can add a new action which I name Delete and select a query to run for this action. In this case, I create the remove_invoice query. In the query endpoint, I can access to the table data, so my endpoint is invoices/{{ table1.data[i].id }}.

As this action is deleting an invoice, I want to refresh the table once the action is executed. I can achieve this by using the "Event handlers" of the query. I set it to trigger the invoices query upon the successful execution of the remove_invoice query.

Success! But is the notion of event handlers and triggers really a "no-code" notion?

Conclusion

With the creation of a dashboard and a table view that includes a delete feature, my small admin application is now complete. It is only a subset of the react-admin e-commerce demo, but the main building blocks are there.

The main building blocks, but not the creation and edition features! That's maybe for another post.

In my opinion, as a JavaScript developer, this no-code tool has left me with mixed feelings. While it may be well-suited for building simple applications, more complex or customized projects will require the use of JS code. At the start of my experiment, I did not anticipate the need to write Javascript for nearly every component I had in mind.

In terms of development speed, I do not find it to be faster than using a framework such as React-Admin. This may be due to my background as a developer and my first-time use of the tool. For example, with React-Admin, the same type of table view can be created with just 3 lines of code.

Even for non-developers, I believe that it may not be enough user-friendly, as it requires a basic understanding of Javascript and how APIs work. For instance, creating a query requires knowledge of how to write a query endpoint, which may not be obvious for those without a development background.

To conclude, I think it requires the knowledge of a developer to tweak no-code tools such as ReTool enough to build moderately complex apps. And developers are more productive with low-code tools... So I wouldn't recommend it, except for simple dashboards.

Did you like this article? Share it!

✍️ Written by our team member Thibault Barrat :)