Custom drag-and-drop system on Supabase

Introduction

Introducing our custom drag-and-drop system, perfect for venues, clubs, restaurants, and more. This component is derived from a production-grade dashboard used for table management and integrates natively with Supabase. Its drag-and-drop functionality allows you to create and customize floorplans with ease, allowing for efficient management and improved customer experience. Now available on the FlutterFlow marketplace.

Real-world use case

Imagine running a busy restaurant where table management is crucial. With our drag-and-drop system, you can easily create and edit floorplans, manage table bookings, and provide a smooth experience for your customers. Whether it’s a small café or a large event venue, this system adapts to your needs, making management effortless and efficient.

Key features

1.   Drag-and-drop floorplan creation

Easily create and customize floorplans with drag-and-drop functionality. Add new elements like tables, bars, and text with a simple click and drag gesture.

2.   Component management

Add, edit, and delete components within your floorplan. Customize elements to fit the specific needs of your venue.

3.   User-side booking system

Integrated user-side booking system allows customers to reserve tables in a click. Tables can be clicked to book, and booked tables change color for instant feedback for customers and yourself.

4.   Supabase integration

Data is stored in Supabase, utilizing Supabase Edge Functions to handle the backend operation of saving the floorplan. 

Setting up your custom floorplan

1.   Create & edit screen:

• Start by creating new floorplans or editing existing ones through a user-friendly interface. Drag items from the sidebar to the canvas to build your floorplan.
• Each item can be edited to include specific properties like table type, price, and more.

2.   View screen:

• View your floorplans on a large screen, providing a comprehensive overview of your setup. This screen is perfect for managers to oversee the entire venue layout.

3.   Book screen:

• The booking screen allows users to click on tables to book them. Booked tables change color to indicate their status, and users can view or unbook tables as needed.

Technical details

1.   Supabase tables:

This integration only uses 2tables that are able to handle the whole process.

• floorplans: stores the basic information of each floorplan.
• floorplan_objects: contains details of each object within the floorplan, such as position, type, capacity, and more.

2.   Supabase Edge Function:

• A custom Edge Function saves your canvas data to the Supabase database. This function guarantees that all changes are accurately recorded and updated in real-time.

Why choose our drag-and-drop system?

• Ease of use – the intuitive drag-and-drop interface makes it easy for anyone to create and manage floorplans without extensive technical knowledge.
• Customizable – the system is highly customizable, allowing you to add new components and tailor the floorplan to meet your specific needs.
• Integration – seamless integration with Supabase allows for efficient data handling and real-time updates. We give you the complete documentation on how it works and how you could optimize it for your use-case. Full details provided.

Conclusion

Our custom drag-and-drop system on Supabase offers a powerful solution for venue management. With features like real-time booking, easy customization, and simple integration, it’s the perfect tool to enhance your venue’s operations. Available on the FlutterFlow marketplace, it’s ready to transform your business.