A simple step-by-step guide — no coding experience needed! If you can follow a recipe, you can build this.
Understand the big picture before diving in
You are going to build a real website where people can upload an old, blurry photo, pay a small fee, and get back a sharp, clear, high-quality restored version — powered by AI!
Here is how it works from your customer's point of view:
The face of your site — what customers see and click on
Analyzes and restores each photo using smart AI
Stores original uploads AND the restored results
Safely handles credit card payments from your customers
You'll sign up for all of these — most are free to start!
Click each step to expand it. Check it off when you're done!
Think of this like getting your ingredients before cooking. You need accounts at all services before connecting them together.
Supabase is like a filing cabinet for your website's photos. You need to create two folders (called "buckets") — one for photos customers upload, one for the restored results.
An API key is like a secret password your website uses to talk to OpenAI's AI. Think of it as your VIP pass to use the AI.
Stripe is the cash register of your website. It safely handles credit card payments so you don't have to deal with any of that yourself.
pk_) and Secret key (starts with sk_). Save both.No real money moves. Use card 4242 4242 4242 4242 to test.
Switch to this when ready for real customers and real payments.
Here is the cool part — no code needed! Just tell Lovable what you want in plain English and it builds the site for you. Copy and paste the prompt below.
Build a photo restoration web app with the following: TECH STACK: - Frontend: Clean, modern UI with drag-and-drop photo upload - Storage: Supabase (buckets: original-photos and restored-photos) - AI: OpenAI API to restore and enhance uploaded photos to 4K - Payments: Stripe checkout before the restoration runs - Email: Send a confirmation email when restoration is complete FEATURES: 1. Hero section: "Restore Your Old Photos to 4K Quality" 2. Drag and drop photo uploader 3. Stripe payment ($9.99 per photo restoration) 4. Progress indicator while AI processes 5. Side-by-side before/after comparison 6. Download button for the restored photo 7. Clean, professional design (not AI-looking) IMPORTANT: - AI restoration runs AFTER payment is confirmed - Store original in 'original-photos' bucket - Store result in 'restored-photos' bucket - Show a loading spinner while AI is working
This is the special instruction that tells the AI exactly how to restore a photo. It was tested and gives the best results. Tell Lovable to use this when sending photos to OpenAI:
You are an expert AI in photo restoration and enhancement. Task: Analyze and restore the provided image, which may be old, blurry, or low-resolution. Enhance it to ultra-high-definition 4K quality while preserving realism and original identity. Instructions: - Sharpen details without introducing artificial textures - Restore facial features accurately (eyes, skin, hair, edges) - Remove blur, noise, compression artifacts, and pixelation - Reconstruct missing details using realistic inference - Maintain natural skin tones and correct color balance - Improve lighting, contrast, and dynamic range subtly - Preserve original composition, framing, and proportions - Do NOT add stylization, filters, or creative effects - Avoid plastic or AI-smoothed skin — keep natural texture - Ensure edges are clean and well-defined Output: A high-quality restored image that looks like a real photograph, not AI-generated art.
Now plug in all the "secret passwords" (API keys) you saved earlier. In Lovable, look for Environment Variables or Settings → Secrets.
KEYS TO ADD IN LOVABLE:
OPENAI_API_KEYYour OpenAI secret key (starts with sk-)SUPABASE_URLYour Supabase project URLSUPABASE_ANON_KEYYour Supabase public/anon API keySTRIPE_PUBLISHABLE_KEYYour Stripe public key (starts with pk_)STRIPE_SECRET_KEYYour Stripe secret key (starts with sk_)A domain name is your website's address — like a street address but for the internet. Pick something short, easy to type, and related to photo restoration.
✅ Short, clear, action-based. (The real one that was registered!)
✅ Descriptive and easy to remember
✅ Short and simple
⚠️ A bit long — but still clear
Before you show the world your site, test it yourself like a customer would. This catches problems before real people find them.
4242 4242 4242 4242, any future expiry, any 3-digit CVCEverything is tested and working! Now it's time to make it real.
Hit a wall? Click to see the fix!
sk-. Create a new key if you're unsure.