How to Build a Image Hosting with Lovable

1Create an image hosting platform with Supabase. Set up these tables:
2
3- images: id, owner_id (references auth.users, nullable for public anonymous uploads), title (text nullable), alt_text (text nullable), slug (text unique — 8-char random alphanumeric), storage_path (text), file_size_bytes (int), width_px (int nullable), height_px (int nullable), mime_type (text), view_count (int default 0), created_at
4- albums: id, owner_id (references auth.users), title, description (nullable), slug (text unique — 8-char), cover_image_id (references images nullable), visibility (public|private), created_at
5- album_images: id, album_id (references albums), image_id (references images), position (int), added_at
6
7RLS:
8- images: SELECT is public for all rows (anonymous image hosting). INSERT requires authentication. UPDATE/DELETE requires owner_id = auth.uid()
9- albums: SELECT is public for visibility = 'public'. All CRUD for private albums requires owner_id = auth.uid()
10- album_images: SELECT inherits parent album visibility. Modify requires album owner
11
12Create a Supabase Storage bucket called 'images':
13- Public bucket (allow public URL access)
14- Allowed MIME types: image/jpeg, image/png, image/gif, image/webp, image/svg+xml
15- Max upload size: 10MB
16
17Create an RPC function increment_image_views(p_image_id uuid) that increments view_count by 1.

1import { useCallback, useState } from 'react'
2import { supabase } from '@/integrations/supabase/client'
3import { Progress } from '@/components/ui/progress'
4import { Button } from '@/components/ui/button'
5import { X, Upload, ImageIcon } from 'lucide-react'
6
7type UploadFile = { file: File; progress: number; status: 'queued' | 'uploading' | 'done' | 'error'; imageId?: string }
8
9function randomSlug(n: number) {
10  return Array.from(crypto.getRandomValues(new Uint8Array(n))).map((b) => b.toString(16).padStart(2, '0')).join('').slice(0, n)
11}
12
13export function ImageUploader({ onUploaded }: { onUploaded: (ids: string[]) => void }) {
14  const [files, setFiles] = useState<UploadFile[]>([])
15  const [dragging, setDragging] = useState(false)
16
17  const addFiles = (incoming: FileList | null) => {
18    if (!incoming) return
19    const newFiles = Array.from(incoming)
20      .filter((f) => f.type.startsWith('image/'))
21      .map((file) => ({ file, progress: 0, status: 'queued' as const }))
22    setFiles((prev) => [...prev, ...newFiles])
23  }
24
25  const uploadAll = async () => {
26    const uploadedIds: string[] = []
27    await Promise.all(
28      files.filter((f) => f.status === 'queued').map(async (entry, i) => {
29        const slug = randomSlug(8)
30        const ext = entry.file.name.split('.').pop() ?? 'jpg'
31        const path = `${slug}.${ext}`
32        setFiles((prev) => prev.map((f) => f === entry ? { ...f, status: 'uploading' } : f))
33        const { error } = await supabase.storage.from('images').upload(path, entry.file, {
34          onUploadProgress: ({ loaded, total }) => {
35            const pct = Math.round((loaded / (total ?? 1)) * 100)
36            setFiles((prev) => prev.map((f) => f === entry ? { ...f, progress: pct } : f))
37          },
38        })
39        if (error) {
40          setFiles((prev) => prev.map((f) => f === entry ? { ...f, status: 'error' } : f))
41          return
42        }
43        const { data: row } = await supabase.from('images').insert({
44          slug,
45          storage_path: path,
46          file_size_bytes: entry.file.size,
47          mime_type: entry.file.type,
48          title: entry.file.name.replace(/\.[^.]+$/, ''),
49        }).select('id').single()
50        if (row) uploadedIds.push(row.id)
51        setFiles((prev) => prev.map((f) => f === entry ? { ...f, status: 'done', imageId: row?.id } : f))
52      })
53    )
54    onUploaded(uploadedIds)
55  }
56
57  return (
58    <div className="space-y-4">
59      <div
60        onDragOver={(e) => { e.preventDefault(); setDragging(true) }}
61        onDragLeave={() => setDragging(false)}
62        onDrop={(e) => { e.preventDefault(); setDragging(false); addFiles(e.dataTransfer.files) }}
63        onClick={() => document.getElementById('file-input')?.click()}
64        className={`border-2 border-dashed rounded-xl p-12 text-center cursor-pointer transition-colors ${ dragging ? 'border-primary bg-primary/5' : 'border-muted-foreground/30 hover:border-primary/50'}`}
65      >
66        <Upload className="w-8 h-8 mx-auto mb-3 text-muted-foreground" />
67        <p className="text-sm font-medium">Drop images here or click to browse</p>
68        <p className="text-xs text-muted-foreground mt-1">JPEG, PNG, GIF, WebP — up to 10MB each</p>
69      </div>
70      <input id="file-input" type="file" multiple accept="image/*" className="hidden" onChange={(e) => addFiles(e.target.files)} />
71      {files.length > 0 && (
72        <div className="space-y-2">
73          {files.map((f, i) => (
74            <div key={i} className="flex items-center gap-3">
75              <ImageIcon className="w-4 h-4 shrink-0 text-muted-foreground" />
76              <div className="flex-1 min-w-0">
77                <p className="text-sm truncate">{f.file.name}</p>
78                {f.status === 'uploading' && <Progress value={f.progress} className="h-1 mt-1" />}
79              </div>
80              <span className="text-xs text-muted-foreground shrink-0">
81                {f.status === 'done' ? 'Done' : f.status === 'error' ? 'Error' : f.status === 'uploading' ? `${f.progress}%` : 'Queued'}
82              </span>
83              {f.status !== 'uploading' && (
84                <Button variant="ghost" size="icon" className="h-6 w-6" onClick={(e) => { e.stopPropagation(); setFiles((prev) => prev.filter((_, j) => j !== i)) }}>
85                  <X className="h-3 w-3" />
86                </Button>
87              )}
88            </div>
89          ))}
90          <Button onClick={uploadAll} className="w-full" disabled={files.every((f) => f.status !== 'queued')}>
91            Upload {files.filter((f) => f.status === 'queued').length} image{files.filter((f) => f.status === 'queued').length !== 1 ? 's' : ''}
92          </Button>
93        </div>
94      )}
95    </div>
96  )
97}

1Build a MasonryGallery component at src/components/gallery/MasonryGallery.tsx.
2
3Props: images (array of { id, slug, storage_path, title, width_px, height_px, view_count })
4
5Logic:
6- For each image, construct a thumbnail URL using Supabase Storage transformation:
7  const { data } = supabase.storage.from('images').getPublicUrl(storage_path, {
8    transform: { width: 400, format: 'webp', quality: 80 }
9  })
10- Layout: CSS columns, not flexbox or grid.
11  <div style={{ columnCount: columns, columnGap: '1rem' }}> where columns = 2 on mobile, 3 on tablet, 4 on desktop (use a custom hook useBreakpoint).
12  Each image: <div style={{ breakInside: 'avoid', marginBottom: '1rem' }}>
13- On hover, show a dark overlay with the image title and view count.
14- Clicking an image opens a shadcn/ui Dialog lightbox showing:
15  - Full-resolution image (not the thumbnail URL)
16  - Title (editable inline for the owner)
17  - Slug-based share URL: window.location.origin + '/i/' + slug with a Copy button
18  - Download button (anchor tag pointing to original storage URL)
19  - Embed code: <img src='...' alt='...'> in a code block with a Copy button
20  - Delete button (only visible to the image owner)
21- Lazy load images using loading='lazy' on the img tag.

1Build album management pages.
2
31. Albums list page at src/pages/Albums.tsx:
4- Fetch all albums where owner_id = auth.uid() ordered by created_at desc.
5- Display as a grid of Cards with cover image (or grid of up to 4 thumbnails), title, image count, and visibility Badge.
6- 'New Album' Button opens a Dialog:
7  - title Input (required)
8  - description Textarea (optional)
9  - visibility Select (public/private)
10  - Submit inserts into albums table.
11
122. Album detail page at src/pages/AlbumDetail.tsx (route: /albums/[id]):
13- Fetch album metadata and all album_images joined with images, ordered by position.
14- Show the album title, description, and visibility Badge.
15- Render images in the MasonryGallery component.
16- 'Add Images' Button opens a Sheet showing the user's uploaded images as a checkbox grid. Checking images and clicking 'Add to Album' inserts rows into album_images with position = max(position) + 10 for each new image.
17- 'Share Album' Button copies window.location.origin + '/a/' + album.slug to clipboard using navigator.clipboard.writeText.
18- For public albums, show a 'Make Private' Button. For private, show 'Make Public' Button.
19- 'Remove' button on each image in the album removes the album_images row.

1Build two public pages:
2
31. Image page at src/pages/PublicImage.tsx (route: /i/[slug]):
4- Fetch image by slug from the images table (no auth required — public SELECT policy).
5- If not found, show a 404 state with a Button linking back to the homepage.
6- On component mount, call supabase.rpc('increment_image_views', { p_image_id: image.id }).
7- Layout: centered image with max-width 1200px, metadata below.
8- Metadata row: file size formatted (e.g., '2.4 MB'), dimensions (e.g., '1920 x 1080'), upload date, view count.
9- Share row: copy URL Button, download Button (direct link to storage), embed Button.
10- Embed dialog: shows <img src='...' alt='...'> snippet in a shadcn/ui code block with one-click copy.
11- 'See all uploads by this user' link to /user/[owner_id] if the image has an owner.
12
132. Album page at src/pages/PublicAlbum.tsx (route: /a/[slug]):
14- Fetch album by slug. If visibility = 'private' and the viewer is not the owner, return a 403 state.
15- Show album title, description, and image count.
16- Render images using the MasonryGallery component.
17- 'Share' button copies the current URL.