Home/Lovable (Vibe Coding) Tutorials/Build a Toy Collectible Gallery with Lovable
Lovable (Vibe Coding) TutorialIntermediate180 min read

Build a Toy Collectible Gallery with Lovable

Build a bright collectible-figure showcase with a protected admin area, editable hero, image editor, and openly licensed image search.

Tutorial ForgeUpdated Aug 28, 2026
Build **Toy Trove**, a bright and playful website for cataloguing and displaying toy collectible figures. Visitors can browse published collectibles and open an accessible quick-view window, while one protected curator manages the collection, hero content, images, and publication settings.
What You Will Build

- A colorful public collectible-figure gallery - Tall baseball-card-style collectible cards - An accessible quick-view modal - Lovable Cloud data and protected image storage - A single-curator authentication system - Collectible and hero administration tools - Phone uploads and a non-AI image editor - Openverse image search with source and licence credits

Before You Begin

- [A Lovable account](https://lovable.dev/invite/0ZUZ1A0) - A modern desktop or mobile browser - One or two sample collectible records - A photo you own or have permission to use - Approximately two to three hours for building and testing
Use Safe Demonstration Content

Do not place passwords, API keys, private information, or environment values in prompts or tutorial content. Use your own photos or images whose licences permit your intended use. Keep source and licence credits when required.

Part 1 — Build the Public Showcase

Start with the smallest complete public experience: a responsive hero, collectible-card grid, quick-view modal, and footer. This part uses demonstration content only. Cloud and administration tools come later.
Part 1 Outcome

- A polished public home page - A tall collectible-card grid - A keyboard-accessible quick-view modal - Responsive desktop, tablet, and mobile layouts

Step 1 — Create the Lovable Project

01

Start a New Lovable Project

Create a new Lovable project and wait for the workspace and preview to open.
Name the project **Toy Trove** when Lovable asks for a project name.

Step 2 — Build the Public Page

02

Create the Hero and Collection Grid

Copy this prompt into Lovable.
Build the Toy Trove Public Page
Create a polished responsive public website named Toy Trove for showcasing a personal collection of toy collectible figures. Use a bright, colorful, playful but professional light theme with bold rounded typography, cheerful saturated accents, soft shadows, subtle toy-inspired shapes, and strong contrast. Add a sticky header, a large hero with an image, oversized headline, supporting text, and a button that scrolls to the collection. Add a responsive collection grid with tall rounded cards shaped like baseball cards. Each demonstration card should support an image, name, series or franchise, release year, rarity or edition, and condition. Add a footer explaining that this is a collection showcase rather than a shop. Use semantic HTML, visible keyboard focus, large touch targets, reduced-motion support, and prevent horizontal scrolling on mobile. Do not add shopping, prices, checkout, public accounts, favourites, comments, ratings, or social features. Keep the code organised and finish by running the build and type checks and fixing errors.
Creates the first responsive public version of Toy Trove.
Verify that the page contains a hero, at least four tall demonstration cards, and a footer. Resize the preview to desktop, tablet, and mobile widths.

Step 3 — Add the Quick-View Modal

03

Open Collectibles Without Leaving the Page

Copy this focused prompt into Lovable.
Add the Collectible Quick View
Add an accessible quick-view modal to the existing Toy Trove collectible cards without changing the established visual design. Selecting a card with a mouse, touch, Enter, or Space should open a larger image and complete collectible details. Include name, series, maker, release year, rarity or edition, condition, collected date, and description when available. Add a visible close button, Escape-to-close support, focus trapping, focus restoration, background-scroll locking, and a mobile layout that does not overflow. Keep the public page and all existing working features intact. Finish with build and type checks and fix errors.
Adds an accessible detail view for each collectible.
Test the modal with a mouse and keyboard. Close it with the visible button and with Escape. Confirm focus returns to the card that opened it.

Step 4 — Add Public States

04

Handle Loading, Empty, and Error States

Copy this prompt into Lovable.
Add Public Gallery States
Improve the existing Toy Trove public gallery with polished loading, empty, missing-image, and error states. When no real collectibles exist, show an honest empty message plus four decorative baseball-card-shaped placeholders labelled Coming soon; do not present placeholder content as saved records. Add skeleton loading cards, a friendly retry action for load failures, and an attractive No photo yet state inside cards and quick view. Preserve the hero, gallery, quick-view accessibility, responsive design, and all existing features. Run build and type checks and fix errors.
Makes the public experience understandable in every data state.
Verify that empty placeholders look decorative and cannot be mistaken for real collectibles.

Part 1 Checklist

Part 1 Complete

Toy Trove now has a complete public demonstration experience. Next, replace the demonstration data with Lovable Cloud records.

Part 2 — Add Lovable Cloud and Collection Data

Create the data foundation once. Later parts extend this foundation instead of recreating it.
Part 2 Outcome

- Collectible and hero-settings data - Public reads limited to published collectibles - Protected storage for collectible images - Real data powering the public page

Step 1 — Enable Lovable Cloud

01

Create the Backend Foundation

Copy this prompt into Lovable.
Enable Cloud and Create the Data Model
Enable Lovable Cloud for the existing Toy Trove project and preserve the completed public interface. Create a collectibles data model with name, series_or_franchise, manufacturer_or_brand, release_year, rarity_or_edition, condition, description, primary_image, image_alt, collected_date, featured, display_order, published, created_at, and updated_at. Create one hero_settings record with headline, supporting_text, hero_image, hero_image_alt, button_label, button_target, and optional featured_collectible_id. Use appropriate required fields, nullable optional fields, numeric and date types, safe defaults, timestamps, and update timestamps. Do not create public accounts or marketplace data. Finish by applying the schema safely and running build and type checks.
Adds the reusable collection and hero data foundation.
Open the backend data view and confirm the collectible and hero-settings structures exist.

Step 2 — Protect Public and Private Data

02

Add Read and Write Policies

Copy this prompt into Lovable.
Secure Collection Data and Storage
Add database and storage security for Toy Trove. Public visitors may read only collectibles where published is true and may read the public hero settings. Anonymous visitors must never create, update, or delete records. Create a protected storage bucket for Toy Trove images where only authorised administrators can upload, replace, or delete objects. The public site may receive safe signed image URLs for images belonging to published records. Keep all mutation checks on the backend rather than relying on hidden buttons. Do not expose storage credentials, environment values, or private paths. Preserve the current public design and finish with security, build, and type checks.
Restricts public access to published content and protects image writes.
Verify that an anonymous visitor cannot create or update a collectible through the backend.

Step 3 — Connect the Public Page to Cloud Data

03

Replace Demonstration Cards with Published Records

Copy this prompt into Lovable.
Load Published Collectibles
Connect the existing Toy Trove public page to Lovable Cloud. Load the single hero-settings record and only published collectibles, ordered with the featured item first and then by display_order. Replace demonstration cards with real records while preserving the exact card design, quick-view behaviour, skeleton loading state, honest empty placeholders, missing-image state, and error state. Use signed storage URLs where required and never expose unpublished records. Keep query caching reasonable and refresh public data after future administrator changes. Run build and type checks and fix errors.
Makes the completed public interface render real cloud records.
With no published records, confirm the honest empty state still appears. Do not manually insert secrets or private environment values.

Part 2 Checklist

Part 2 Complete

Toy Trove now has a secure data foundation. Next, create the single-curator authentication system.

Part 3 — Create the Single-Curator System

Toy Trove is a personal showcase, so it needs one protected curator rather than public user registration.
Authentication Is Added Only Once

This part creates authentication and administrator roles. Later parts must extend this foundation and must not create another sign-in system.

Step 1 — Add Curator Sign-In

01

Create the Authentication Page

Copy this prompt into Lovable.
Add Curator Authentication
Add Lovable Cloud authentication to the existing Toy Trove project for one curator account. Create a responsive /auth sign-in page with email, password, validation, loading, helpful error messages, and keyboard accessibility. Do not expose public registration or a public sign-up route. Add a protected authenticated route group and redirect signed-out visitors who request /admin back to /auth. Preserve the public gallery and all current routes. Do not hardcode an administrator email or password. Finish with build and type checks and fix errors.
Adds one protected sign-in flow without public registration.
Open `/admin` while signed out and confirm it redirects to `/auth`.

Step 2 — Add the One-Time Administrator Claim

02

Assign the Sole Curator Safely

Copy this prompt into Lovable.
Create the Single-Administrator Role
Extend the existing Toy Trove authentication with a secure single-administrator role. Store roles in a protected user_roles table rather than a user-editable profile. Add a backend has_role helper and an assertAdmin check used by every protected server mutation. Allow the first authenticated account to claim the administrator role only while zero administrators exist, using an atomic database operation that prevents concurrent claims. After one administrator exists, permanently refuse additional claims and hide the claim action. Do not hardcode credentials or trust client-side role checks. Preserve the current sign-in and public site. Run security, build, and type checks and fix errors.
Creates a safe one-time curator claim and backend role enforcement.
Create your intended curator account through the backend user-management area, sign in at `/auth`, and claim the role once.
Claim the Correct Account

The claim is designed for one account. Confirm you are signed in with the intended curator identity before selecting the claim action.

Step 3 — Verify Access Boundaries

03

Test Curator and Visitor Access

Test these observable behaviours:
- Open `/admin` in a signed-out browser and confirm redirection to `/auth`. - Sign in as the curator and confirm `/admin` opens. - Confirm the administrator claim action no longer appears after it is used. - Confirm the public home page still works without signing in. - Confirm no public sign-up link exists.

Part 3 Checklist

Part 3 Complete

Toy Trove now has one protected curator. Next, build the administration tools that use this access foundation.

Part 4 — Build the Administration Area

Create collection and hero-management tools without changing the public experience or recreating authentication.
Part 4 Outcome

- Searchable collectible management - Add and edit forms - Publish, feature, order, and delete actions - Editable hero settings with a live preview

Step 1 — Create the Admin Layout

01

Add Protected Admin Navigation

Copy this prompt into Lovable.
Build the Protected Admin Layout
Build a protected /admin layout for the existing Toy Trove curator system. Add clear navigation for Collectibles and Hero Settings, show the signed-in curator state, and include a sign-out action. Keep the public header and navigation separate from the admin experience. Every admin route must verify authentication and administrator role server-side. Add responsive desktop and mobile navigation, semantic landmarks, visible keyboard focus, and loading and access-error states. Preserve all existing routes, data, security, and public functionality. Run build and type checks and fix errors.
Creates the reusable administration shell.
Verify both administration sections can be reached on desktop and mobile.

Step 2 — Manage Collectibles

02

Add Collectible CRUD

Copy this prompt into Lovable.
Build Collectible Management
Add complete collectible management inside the existing protected Toy Trove admin area. Display a searchable management list with thumbnail, name, series, display order, published status, and featured status. Allow the curator to add and edit name, series or franchise, manufacturer or brand, release year, rarity or edition, condition, description, primary image reference, image alt text, collected date, display order, featured, and published. Validate required text, year, date, order, and URL values; prevent duplicate submissions; show loading, empty, success, and error feedback. Add publish or unpublish, feature, edit, and delete actions. Require a named confirmation before permanent deletion. Enforce every create, update, flag change, order change, and delete through existing backend administrator checks. Preserve the public gallery and current security. Run build and type checks and fix errors.
Adds the protected collection-management workflow.
Add one unpublished record and confirm it appears in admin but not publicly.

Step 3 — Enforce One Featured Collectible

03

Make Featured Status Exclusive

Copy this prompt into Lovable.
Enforce One Featured Collectible
Improve the existing Toy Trove Featured control so at most one collectible can be featured. When the curator features one record, automatically unfeature every other record in the same safe backend operation. Enforce this in the database with transactional logic and an appropriate unique partial index or equivalent constraint so concurrent requests cannot leave duplicates. Refresh admin and public queries after the change and clearly show which item is featured. Never expose an unpublished featured record publicly. Preserve all existing CRUD, authentication, and public behaviour. Run migration, security, build, and type checks and fix errors.
Guarantees a single featured record across the application.
Feature the second record and confirm the first immediately loses Featured status.

Step 4 — Edit the Hero

04

Add Hero Settings and Preview

Copy this prompt into Lovable.
Build Hero Settings
Add a Hero Settings section to the existing protected Toy Trove admin area. Allow the curator to edit the headline, supporting text, hero image reference, hero image alt text, button label, button target, and optional highlighted collectible. Show a responsive live preview beside or below the form. Validate values, prevent duplicate submissions, and show loading, success, and error feedback. Use safe defaults when optional fields are blank. Preserve the public hero design, collectible administration, authentication, and all security checks. Finish with build and type checks and fix errors.
Lets the curator update the public hero without editing code.
Change the headline, save it, and refresh the public home page to confirm it updates.

Part 4 Checklist

Part 4 Complete

Toy Trove now has complete curator tools. Next, add phone uploads and non-AI image editing.

Part 5 — Add Phone Uploads and Image Editing

Build the image workflow in two focused stages: safe selection first, then editing and storage.
Part 5 Outcome

- Phone, desktop, and drag-and-drop selection - A reusable accessible image editor - Card and hero aspect-ratio presets - Optimised storage uploads - Cleanup of replaced and abandoned images

Step 1 — Add the Image Source Workspace

01

Select Images From a Device

Copy this prompt into Lovable.
Add Device Image Selection
Replace the basic image field in the existing Toy Trove collectible and hero forms with a reusable admin image workspace. Add a From device source tab with phone camera or photo-library selection, desktop file selection, and a keyboard-accessible drag-and-drop area. Validate safe image MIME types and a 10 MB maximum before editing. Use Choose photo when no image exists and Replace photo when one exists. Show the current preview, Remove action, validation messages, and processing state. Do not upload immediately when a file is selected; hold it locally for the image editor. Preserve all current forms, authentication, security, and public behaviour. Run build and type checks and fix errors.
Adds clear device selection without premature uploads.
Select a phone or desktop photo and confirm it is not stored before applying edits.

Step 2 — Build the Image Editor

02

Crop and Adjust Images

Copy this prompt into Lovable.
Build the Non-AI Image Editor
Create a reusable accessible ImageEditorDialog for the existing Toy Trove image workspace using browser Canvas processing rather than AI. Add a live preview, zoom, horizontal and vertical position, rotate left and right, flip horizontally and vertically, brightness, contrast, saturation, and Reset. Offer 4:5 Collectible card as the default for collectible images plus Square and Original; offer 16:9 Hero as the default for hero images plus Original. Add Cancel and Apply image. Cancel must preserve the previously saved image. Apply must render the crop and adjustments, respect normal mobile image orientation, export an optimised WebP with JPEG fallback at a sensible maximum dimension and quality, and then pass the processed result to the protected storage upload. Use a Radix-style dialog with Escape, focus trapping, visible labels, keyboard access, touch-friendly controls, and reduced-motion support. Preserve existing data and forms. Run build and type checks and fix errors.
Adds reusable crop and adjustment tools without paid AI processing.
Test zoom, position, rotate, brightness, Reset, Cancel, and Apply image.

Step 3 — Keep Editor Actions Visible

03

Polish the Editor Layout

Copy this prompt into Lovable.
Add a Sticky Image Editor Footer
Improve only the existing Toy Trove ImageEditorDialog layout. Cap the dialog within the viewport, keep the header visible, place the preview and adjustment controls in a scrollable middle area, and keep Cancel and Apply image visible in a non-shrinking sticky footer with an opaque background, top border, safe spacing, and sufficient stacking order. Avoid nested page scrolling. Preserve crop calculations, export quality, storage, keyboard focus, Escape behaviour, disabled states, and touch-friendly sizing. Verify the layout at a short desktop viewport and a 375-pixel mobile viewport. Run build and type checks and fix errors.
Keeps the important editor actions visible on every screen size.
Scroll through all controls on desktop and mobile and confirm both footer actions remain visible.

Step 4 — Clean Up Stored Images

04

Remove Replaced and Abandoned Objects Safely

Copy this prompt into Lovable.
Add Safe Storage Cleanup
Add safe image-object cleanup to the existing Toy Trove admin workflow. When a collectible or hero image is replaced or removed, delete the old object only after the database save succeeds. Never delete remote source images, paths outside the Toy Trove bucket, or an object still referenced by another record. If the record save fails, preserve the previous image and reference. When a newly uploaded image is abandoned by cancelling the form, remove that unused object where it is safe. Treat cleanup failure as a non-destructive warning rather than undoing an otherwise successful save. Keep all cleanup admin-only on the backend. Preserve the working editor and public images. Run security, build, and type checks and fix errors.
Prevents storage clutter without risking live images.
Replace one image and confirm the updated record still displays after refreshing.

Part 5 Checklist

Part 5 Complete

The curator can now upload, edit, optimise, and safely store images. Next, add openly licensed image discovery and attribution.

Part 6 — Find and Credit Images Online

Extend the existing image workspace with Openverse search and protected HTTPS importing. Do not scrape Google Images or invent missing licence information.
Review Every Image Before Publishing

Choose an image that matches the collectible and review its licence details before using it. Attribution information is provided directly by Openverse for convenience.

Step 1 — Add Openverse Search

01

Find Openly Licensed Images

Copy this prompt into Lovable.
Add Openverse Image Search
Add a Find online tab to the existing protected Toy Trove ImageField. Create an OnlineImageSearch component that uses the public Openverse API through an admin-only server function with no exposed API key. Add an accessible search field and button, return no more than the anonymous service limit, and display a responsive thumbnail grid. Show each available title, creator, licence, provider, and original source-page link without inventing missing values. Add loading, no-results, unavailable-service, and error states plus a friendly reminder to review the match and licence. Each result needs a Use this image action. Avoid nested forms that could submit the parent collectible form. Do not scrape Google Images or add paid services. Preserve device uploads and the image editor. Run build and type checks and fix errors.
Adds openly licensed image discovery inside the admin workspace.
Search for a collectible and confirm results include source and licence information.

Step 2 — Import Online Results Through the Editor

02

Avoid Hotlinking and Duplicate Objects

Copy this prompt into Lovable.
Import Search Results Safely
Connect the existing Toy Trove Openverse result actions to the working ImageEditorDialog. When Use this image is selected, fetch the remote bytes through an admin-only server function with HTTPS validation, timeout, size, image MIME-type, redirect, and private-network protections. Return the bytes inline for editing rather than creating an intermediate storage object. Convert the result to an editable File, open ImageEditorDialog, and upload only the final optimised image after Apply image. Never permanently hotlink the remote URL and avoid duplicate or orphan storage objects. Preserve creator, source-page URL, licence name, licence URL, and provider through editing. Keep device upload behaviour unchanged. Run security, build, and type checks and fix errors.
Routes remote images through safe importing, editing, and final storage.
Select one result and confirm the image editor opens before the final upload.

Step 3 — Add Manual HTTPS Importing

03

Import a Direct Image URL

Copy this prompt into Lovable.
Add Protected URL Import
Add an Import URL tab to the existing Toy Trove image workspace. Provide an HTTPS image URL field, Preview and import action, and optional source-page URL, creator, licence name, and licence URL fields. Use the same protected remote-image validation as Openverse imports, including blocking local or private destinations and unsafe redirects. Do not assume a manually entered URL is licensed and label missing creator or licence information as unknown rather than inventing values. Route the imported bytes through the existing ImageEditorDialog and upload only the applied optimised result. Include clear validation, importing, and failure states. Preserve every working image source. Run build and type checks and fix errors.
Adds safe manual importing for a direct HTTPS image file.
Test with a valid direct HTTPS image and with an invalid non-image URL.

Step 4 — Save and Display Image Credits

04

Preserve Attribution

Copy this prompt into Lovable.
Add Image Attribution
Extend the existing Toy Trove collectible data, validation, server functions, generated types, and admin form with nullable image_source_url, image_creator, image_license, image_license_url, and image_provider fields. Prefill these fields from Openverse results, keep them editable, and leave them optional for personal uploads. Use the saved image_alt text on both collectible cards and quick view, with the current generated description only as a fallback. Add a compact Image credit section to the public quick-view modal when credit data exists, with safe external Source page and Licence links and a note that the displayed image may have been cropped or adjusted. Do not clutter the card grid. Preserve public-read restrictions and all existing functionality. Apply migrations and run security, build, and type checks.
Carries image credits from discovery through public display.
Publish an imported image and confirm its quick view shows the correct creator, provider, source, and licence links.

Part 6 Checklist

Part 6 Complete

Toy Trove now supports device photos, openly licensed image search, manual importing, editing, storage, and attribution.

Part 7 — Final Polish and Publishing

Finish with small quality improvements and a complete visitor, curator, security, and responsive test.

Step 1 — Format Dates and Development Copy

01

Improve Visitor-Facing Details

Copy this prompt into Lovable.
Polish Dates and Footer Copy
Apply two focused public polish changes to the existing Toy Trove site. Format stored YYYY-MM-DD collected dates as friendly localised dates such as August 3, 2012 while treating the value as a calendar date so timezone conversion cannot change the day. Keep missing or malformed values safely hidden or unchanged. Update the footer copyright sentence to: This site is a personal collection showcase. Demonstration entries and credited images may be included during development. Preserve the current year, footer layout, quick-view design, and all other features. Run build and type checks and fix errors.
Improves date readability and keeps development copy accurate.
Open quick view for a dated collectible and confirm the intended calendar day is unchanged.

Step 2 — Complete the Public Test

02

Test the Visitor Experience

Test these behaviours without signing in:
- Open the home page and refresh it directly. - Confirm the edited hero content appears. - Confirm only published collectibles appear. - Confirm the Featured badge appears on only one card. - Open every card and inspect its details. - Test quick view with mouse, touch, Enter, Space, and Escape. - Confirm saved alt text is used where supplied. - Confirm image-credit links open safely. - Test desktop, tablet, and mobile widths. - Test reduced-motion preferences when available.

Step 3 — Complete the Curator Test

03

Test the Administration Workflow

Sign in as the curator and verify:
- Add, edit, publish, unpublish, feature, order, and delete a collectible. - Feature a second record and confirm the first is automatically unfeatured. - Upload and edit a phone photo. - Search Openverse and apply an image. - Import a valid direct HTTPS image. - Cancel an image edit and preserve the previous image. - Replace and remove an image without breaking the record. - Edit the hero and confirm the public page updates. - Sign out and confirm `/admin` is protected again.

Step 4 — Publish the Project

04

Run Final Checks and Publish

Copy this final prompt into Lovable.
Run the Final Toy Trove Review
Perform a final production review of the completed Toy Trove project without adding features. Run the full TypeScript check and production build, fix errors, review console errors, verify public routes and direct refreshes, verify the protected /admin redirect, confirm only one Featured collectible can exist, confirm public reads exclude unpublished records, confirm image mutations and cleanup require the administrator role, and confirm no secrets or environment values are exposed in source or UI. Check desktop and mobile layouts for overflow, focus visibility, touch targets, dialog scrolling, loading, empty, and error states. Preserve all working functionality and report the exact checks completed.
Performs the final technical, responsive, and security review.
Review Lovable's final report. When the checks pass, use Lovable's publishing controls to publish the project.

Final Project Checklist

Toy Trove Is Complete

You built a full-stack collectible-figure showcase with a polished public gallery, secure curator tools, editable content, device uploads, non-AI image editing, openly licensed image search, attribution, and safe storage cleanup.

Optional Enhancements for Later

Keep these outside the main tutorial until the collection is large enough to need them:
- Public search - Series and manufacturer filters - Sorting by name, year, or date collected - Shareable links to a specific collectible - Collection statistics - Separate series pages
Stop Before Feature Creep

The completed project already solves the primary goal: cataloguing and presenting a personal toy collection safely. Add optional discovery features only when the number of collectibles makes them genuinely useful.

Tags
#lovable#collectibles#admin#image-editor#openverse#accessibility