/how-to-build-lovable

How to build Image hosting with Lovable?

Step-by-step guide to build scalable, secure image hosting with Lovable. Learn setup storage, CDN, upload API and best practices for fast delivery

Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.

Book a free No-Code consultation

How to build Image hosting with Lovable?

Use a public Supabase Storage bucket (or a bucket you make readable for public URLs) and build a small front-end page in your Lovable app that uploads images directly from the browser to Supabase's Storage REST API. Store the Supabase URL and anon key in Lovable Cloud Secrets (so no terminal is needed). Lovable will edit files, you Preview to test, and Publish when ready — no CLI required.

 

What we’re building / changing (plain English)

 

Client-side image upload + list page that uploads images to a Supabase Storage bucket using the browser (fetch), lists files, and shows public URLs. Secrets (Supabase URL and anon key) are configured in Lovable Cloud Secrets. All changes made in Lovable Chat Mode, verified via Preview, then Publish.

 

Lovable-native approach

 

  • Use Chat Mode edits to create two files: src/lib/supabase.ts and src/pages/images.tsx.
  • Configure Secrets in Lovable Cloud Secrets UI for NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON\_KEY.
  • Preview the /images route inside Lovable Preview to test uploads and listing.
  • Publish via Lovable Publish when tests pass. No terminal required. If you need private-server signing, export to GitHub for server-side work (outside Lovable).

 

Meta-prompts to paste into Lovable (one at a time)

 

Prompt: Add Secrets

 

Goal: Add Supabase credentials to Lovable Secrets.

  • Action for Lovable: Tell the user to open the Secrets UI and create two secrets named NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON\_KEY, each set to their Supabase project's values.
  • Acceptance criteria: Done when both secrets appear in Lovable Secrets and are marked as available to Preview/Publish.

 

Prompt: Create client helper

 

Goal: Create src/lib/supabase.ts to centralize env access and bucket name.

  • Files to create: create src/lib/supabase.ts
  • Content (instruct Lovable to add): a small module that exports SUPABASE_URL, SUPABASE_KEY, and BUCKET_NAME constant (e.g., "public-images"). Use comments to explain editing BUCKET_NAME to your bucket.
  • Acceptance criteria: File exists and exports constants used by the page.
// src/lib/supabase.ts
// Expose env vars and bucket name for the image page
export const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL
export const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
export const BUCKET_NAME = 'public-images' // change if your bucket has a different name

 

Prompt: Create image upload page

 

Goal: Create a page at src/pages/images.tsx that allows selecting an image, uploading to Supabase Storage via fetch, listing objects, and showing image URLs.

  • Files to create: create src/pages/images.tsx
  • Content (instruct Lovable to add): a React page that:
    • Reads SUPABASE_URL and SUPABASE_ANON\_KEY from the module above
    • Uploads file with fetch POST to `${SUPABASE_URL}/storage/v1/object/${BUCKET_NAME}` using FormData and header "apikey" and "Authorization: Bearer {anon\_key}"
    • Lists files via GET to `${SUPABASE_URL}/storage/v1/object/list/{BUCKET_NAME}`
    • Displays images using public URL `${SUPABASE_URL}/storage/v1/object/public/${BUCKET_NAME}/{path}`
  • Acceptance criteria: On Preview, the page allows selecting an image, uploading succeeds (200/201), and uploaded images appear in the list with visible thumbnails.
// src/pages/images.tsx
// Minimal React page to upload and list images using Supabase Storage REST API
import React, {useEffect, useState} from 'react'
import {SUPABASE_URL, SUPABASE_ANON_KEY, BUCKET_NAME} from '../lib/supabase'

export default function ImagesPage() {
  // state and handlers...
  // implement upload with fetch to `${SUPABASE_URL}/storage/v1/object/${BUCKET_NAME}`
  // implement list with GET `${SUPABASE_URL}/storage/v1/object/list/${BUCKET_NAME}`
  // show images using `${SUPABASE_URL}/storage/v1/object/public/${BUCKET_NAME}/${file.name}`
}

 

How to verify in Lovable Preview

 

  • Open Preview and navigate to /images.
  • Test upload: choose an image and click upload. Network tab should show a POST to /storage/v1/object/\* with 200/201.
  • Confirm list: image appears in the list and the thumbnail loads via the public URL.

 

How to Publish / re-publish

 

  • Publish from Lovable's Publish button once Preview tests pass. The Secrets you configured will be used in Live.
  • If you need server-side signing or Service Role key, use GitHub export/sync and complete server code outside Lovable (terminal required). Label that action “outside Lovable (terminal required).”

 

Common pitfalls in Lovable (and how to avoid them)

 

  • Using service\_role key in client: Never store the service role key in a front-end secret. Use anon key for public buckets, or implement a server-side signed upload (requires GitHub export).
  • Bucket privacy: If your bucket is private, client-side anon uploads won’t work — either make the bucket public or implement server-side upload signing.
  • CORS / headers: Ensure your fetch sets "apikey" and "Authorization: Bearer {anon}" headers. Verify in Preview network tab.
  • Secret names: Use NEXT_PUBLIC_ prefix so env vars are available in browser builds in Lovable Preview/Publish.

 

Validity: All steps use Lovable Chat Mode edits, Preview, and the Secrets UI. No terminal commands are required unless you later add server-side signing — in that case export to GitHub and run CLI tools externally.

Want to explore opportunities to work with us?

Connect with our team to unlock the full potential of no-code solutions with a no-commitment consultation!

Book a Free Consultation

How to add signed expiring download links for images

This prompt helps an AI assistant understand your setup and guide to build the feature

AI AI Prompt

How to add per-user and per-IP adaptive rate limiting for image uploads

This prompt helps an AI assistant understand your setup and guide to build the feature

AI AI Prompt

How to add pHash duplicate detection to Image hosting

This prompt helps an AI assistant understand your setup and guide to build the feature

AI AI Prompt

Want to explore opportunities to work with us?

Connect with our team to unlock the full potential of no-code solutions with a no-commitment consultation!

Book a Free Consultation
Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.

Book a free No-Code consultation

Best Practices for Building a Image hosting with AI Code Generators

Build the image-hosting service around a secure client-direct upload flow (presigned URLs), store searchable metadata in a DB, run async workers to generate thumbnails/moderation, protect secrets in Lovable’s Secrets UI, and use Lovable’s Chat Mode + Preview to iterate and GitHub export/Publish to deploy. Rigorously review any AI-generated code before shipping, add tests, and enforce rate limits and content-moderation to prevent abuse.

 

Architecture (short)

 

Client uploads directly to object storage via presigned URLs. Server issues presigned upload URLs and records metadata to a DB (e.g., Supabase). Background worker generates thumbnails, runs moderation (AI), and updates DB. Use CDN in front of the bucket.

  • Presigned uploads keep credentials off the browser.
  • Metadata (owner, prompt, model, ai\_generated, size, contentType) stored in DB.
  • Async jobs for thumbnails and moderation avoid blocking upload request.

 

Example server snippets (real, minimal)

 

// // Server: create presigned PUT URL (Node, AWS SDK v3)
// // Put this code in your Lovable project serverless/route file.
// import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
// import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
// import { createClient } from "@supabase/supabase-js";

// const s3 = new S3Client({
//   region: process.env.AWS_REGION,
//   credentials: {
//     accessKeyId: process.env.AWS_ACCESS_KEY_ID,
//     secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
//   },
// });

// const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_SERVICE_ROLE_KEY);

// export async function handler(req, res) {
//   // // Validate auth, file name, content-type, size here!
//   const { filename, contentType, userId, prompt, model } = await req.json();

//   const key = `uploads/${userId}/${Date.now()}-${filename}`;
//   const command = new PutObjectCommand({ Bucket: process.env.S3_BUCKET, Key: key, ContentType: contentType });
//   const url = await getSignedUrl(s3, command, { expiresIn: 300 });

//   // // Insert metadata placeholder; mark as pending processing
//   await supabase.from("images").insert([{ key, url: `https://${process.env.S3_BUCKET}.s3.amazonaws.com/${key}`, user_id: userId, status: "uploaded", prompt, model, ai_generated: true }]);

//   return res.json({ uploadUrl: url, key });
// }

 

Lovable workflow tips

 

  • Use Chat Mode edits to iterate routes and handlers. Accept patches and review diffs before applying.
  • Secrets UI — store AWS keys, SUPABASE_SERVICE_ROLE\_KEY, and any API keys there; never embed secrets in code. Reference them via process.env in Preview and Publish.
  • Preview — test end-to-end uploads (use small test files). Lovable Preview runs the app so you can validate presigned URL flow and DB inserts without a CLI.
  • Publish / GitHub export — export to GitHub or publish directly; use GitHub CI (Vercel/Netlify) for production, since Lovable has no terminal for advanced infra tasks.
  • Review AI-generated code carefully — run Preview, read diffs, add unit/integration tests, and linting before publishing.

 

Operational & security best practices

 

  • Never use anon keys for server tasks; use service\_role keys stored in Secrets.
  • Validate inputs (content-type, size, filename) server-side before issuing presigned URLs.
  • Content moderation — run an AI moderation step in background; mark and quarantine results.
  • Rate limit & quota to avoid abuse and unexpected cost.
  • Generate thumbnails asynchronously (Edge Functions / workers) and store separate optimized objects.
  • Use CDN in front of storage for fast delivery and lower egress cost.
  • Audit logs & observability — track uploads, deletions, and moderation decisions.

 

Final practical note: With Lovable you must do all iteration via Chat Mode, file diffs, Preview, and Secrets UI — you cannot run CLI commands inside the editor. For production infra (CDN/S3 policies, scheduled workers), export to GitHub or deploy to a provider (Vercel, Fly, AWS) from the repo Lovable creates.

Client trust and success are our top priorities

When it comes to serving you, we sweat the little things. That’s why our work makes a big impact.

Rapid Dev was an exceptional project management organization and the best development collaborators I've had the pleasure of working with. They do complex work on extremely fast timelines and effectively manage the testing and pre-launch process to deliver the best possible product. I'm extremely impressed with their execution ability.

CPO, Praction - Arkady Sokolov

May 2, 2023

Working with Matt was comparable to having another co-founder on the team, but without the commitment or cost. He has a strategic mindset and willing to change the scope of the project in real time based on the needs of the client. A true strategic thought partner!

Co-Founder, Arc - Donald Muir

Dec 27, 2022

Rapid Dev are 10/10, excellent communicators - the best I've ever encountered in the tech dev space. They always go the extra mile, they genuinely care, they respond quickly, they're flexible, adaptable and their enthusiasm is amazing.

Co-CEO, Grantify - Mat Westergreen-Thorne

Oct 15, 2022

Rapid Dev is an excellent developer for no-code and low-code solutions.
We’ve had great success since launching the platform in November 2023. In a few months, we’ve gained over 1,000 new active users. We’ve also secured several dozen bookings on the platform and seen about 70% new user month-over-month growth since the launch.

Co-Founder, Church Real Estate Marketplace - Emmanuel Brown

May 1, 2024 

Matt’s dedication to executing our vision and his commitment to the project deadline were impressive. 
This was such a specific project, and Matt really delivered. We worked with a really fast turnaround, and he always delivered. The site was a perfect prop for us!

Production Manager, Media Production Company - Samantha Fekete

Sep 23, 2022