Skip to main content
You might want to build a file upload and display system to handle various file types (such as PDFs, images, documents).
Let’s use Supabase as the backend and integrate it into your Readdy project.

​
File Upload and Display System

1

Preparation

Before you start, make sure you have the following ready:
  • Project Environment
    Create a React-Next.js project, or a React project.
  • Backend Service
    Use Supabase as your backend.
    Please check How to connect Supabase first.
2

Create the File Upload System

In Readdy, enter the requirement:
Design a file upload and display system
3

Define the Prompt

Add the following functional requirements as your Prompt:
I need a backend to upload papers in PDF format.
After the PDF is successfully uploaded, the uploaded PDF needs to be displayed on the front-end interface.
4

Add Tips

To ensure proper configuration, add these Tips:
- Set strict check constraints in Supabase.
- Pay attention to creating buckets and setting correct RLS permissions.
- Set default database form data.
5

Check the Implementation

After development, verify your implementation in three ways:1. Check prompt execution: Confirm Readdy generated the correct logic.
2. Check functionality: Verify upload, display, and download work correctly.
3. Check Supabase data: Ensure the bucket and database contain the uploaded records.
6

Error Handling

If the feature fails, handle errors as follows:
  • Copy the error message (see example below).
  • In Readdy, enter: 
    Error Report: [your error message]
Review all code and fix all issues
⌘I