Lovable (Vibe Coding) TutorialIntermediate

Build a Harmless Prank Tutorial Website with Lovable

Tutorial ForgeUpdated Aug 31, 2026

In this project, you will build **Prank Lab**, an adults-only collection of harmless, reversible prank tutorials. Visitors can browse guides, search and filter the library, and follow steps containing text, images, or YouTube videos. A protected admin area controls tutorials, homepage copy, featured videos, and up to six YouTube Shorts.

prank-lab-vault.lovable.app

Prank Lab — Harmless Pranks & Joke Tutorials for Adults

Explore the completed public website before starting the build.

Visit Website

Lovable

Claim your invite and earn 10 credits - Lovable

Create or open your Lovable project. This is a referral link that gives eligible new accounts 10 extra credits.

Visit Website

Info

This tutorial uses focused prompts instead of asking Lovable to build the entire application at once. Complete the verification checklist after every step before moving forward.

What you will build

- A wide, responsive public website with consistent navigation - An editable hero with a standard YouTube video and a shelf of Shorts - A searchable and filterable tutorial library - Tutorial pages with static covers and media-rich step cards - Lovable Cloud tables, storage, authentication, roles, and row-level security - A protected admin dashboard and complete tutorial editor - Draft, preview, publish, unpublish, and save-changes workflows - Accessible loading, empty, validation, and error states

Before you begin

Part 1 — Establish the Prank Lab foundation

Create the initial Prank Lab website

Start with the public experience and temporary sample data. Cloud and administration will be added only after the public design is stable.

Paste into Lovable

Build a responsive website called Prank Lab for adults who want harmless, reversible prank and joke tutorials. Use temporary local sample data for now. Create a dark near-black visual style with bright purple as the main accent, lime green for safety and success details, and orange for selected media accents. The tone should feel playful and polished, never childish or mean-spirited. Add a public header with the Prank Lab logo, Home, Tutorials, Safety Rules, About, and a prominent Browse pranks button. Add a footer with the same essential navigation. Every public page must use one shared wide container with a maximum width near 1680px and comfortable responsive side gutters. Preserve all working features as later prompts are applied.

Creates the public shell, brand direction, and shared navigation.

Verify:

Build the homepage hero

Create the primary message before adding the media shelf.

Paste into Lovable

Create a wide homepage hero inside a rounded container with a thick purple border and a subtle purple glow. Use a two-column desktop layout with generous width for the text and media on the right. Add the eyebrow “18+ · Harmless by design,” the headline “Laugh with people. Never at them.”, a concise consent-first description, a purple Browse the tutorials button, and a dark Read the safety rules button. Include three live-looking statistics below the actions: published tutorial count, zero that cause damage, and 100% consent required. The tutorial count must come from the current published tutorial data rather than being hard-coded. Add a lime-green divider immediately after the hero section. Stack the layout cleanly on mobile without horizontal overflow.

Builds the bordered hero, actions, dynamic statistics, and divider.

Verify:

Add the safety-led homepage sections

Safety is part of the product design, not a disclaimer added at the end.

Paste into Lovable

Below the homepage hero, add a Featured Prank Tutorials section, a Three rules the whole lab runs on section, and a Know where the line is callout. The three rules are Consent first, Fully reversible, and Safety-reviewed. State that Prank Lab excludes fear, humiliation, food or drink tampering, fake emergencies, harassment, property damage, and anything targeting identity, health, employment, or vulnerability. Separate every major homepage section with the same lime-green divider. Keep static informational panels visually stable; reserve lift animations for cards that are actually clickable.

Adds the public standards and prohibited-content messaging.

Verify:

Part 2 — Build the public tutorial experience

Define sample tutorial content

Give Lovable enough realistic content to design every public state.

Paste into Lovable

Create at least seven realistic sample tutorials across Office, Roommate, Digital, Kitchen, Party, and Friends categories. Include The Phantom Mouse, The Infinite Cereal Box, The Autocorrect Gremlin, The Sticky-Note Blizzard, The Slow-Motion Party, The Desktop Museum, and The Overly Supportive Audience. Each tutorial needs a unique slug, title, emoji, short excerpt, introduction, category, difficulty, setup and cleanup times, cost, best setting, cover image URL and alt text, materials, numbered steps, safety notes, when-not-to-use guidance, reveal instructions, cleanup instructions, helpful tips, status, and featured state. Each step must support instructions plus an optional image with alt text and an optional YouTube URL with a caption.

Creates the complete content shape using safe sample tutorials.

Verify:

Design interactive tutorial cards

Use the theme effect only where interaction is meaningful.

Paste into Lovable

Build a reusable clickable tutorial card. Show a 16:9 thumbnail, category, difficulty, title, excerpt, setup time, cost, and a clear View tutorial action. Keep the existing dark Prank Lab palette. Add a soft-lift interaction: on hover or keyboard focus the card rises slightly, its shadow strengthens, and a thin gradient rail becomes visible along one edge using purple, lime, and orange. The effect must also appear for keyboard focus, must not shift surrounding layout, and must be disabled when reduced motion is requested. Do not apply this interaction to static panels.

Creates accessible thumbnail cards with the gradient-rail treatment.

Verify:

Show six tutorials on the homepage

The homepage preview must stay useful as the library grows.

Paste into Lovable

Update the Featured Prank Tutorials homepage section to display the first six published tutorials in a responsive grid. If more than six are published, show a button whose label is dynamically calculated as “See all N tutorials,” where N is the actual published count. Link it to /tutorials. If there are no published tutorials, display a friendly empty state instead of an empty grid. Never hard-code the number six into the link text.

Adds the six-card homepage preview and accurate total count.

Verify:

Build the searchable tutorial directory

Paste into Lovable

Build /tutorials using the same wide public container as the homepage. Add a search field that matches title, excerpt, introduction, and category. Add category and difficulty filters plus sorting for Featured, Quickest first, Easiest first, Highest rated, and A–Z. Display “Showing X of N tutorials,” where both values come from the current published dataset. Add a Clear filters action, loading skeletons, a helpful no-results state, and a responsive grid that can reach four columns on very wide screens.

Creates the public library, filtering, sorting, and feedback states.

Verify:

Part 3 — Create detailed step-by-step tutorials

Build the tutorial detail header

Paste into Lovable

Create /tutorials/:slug using the shared wide public container. Add a link back to all tutorials, centered category and difficulty badges, emoji, title, summary, and a statistics row for setup time, cost, rating, and difficulty. Center the cover image above the tutorial content, restrict it to approximately 75% width with a maximum near 1100px on desktop, and add a rounded border that matches the purple, lime, and orange theme. The cover image must be static and must never open a modal or lightbox. Include loading, error, and not-found states.

Builds the responsive tutorial header and restrained static cover.

Verify:

Render materials and highlighted step cards

Paste into Lovable

Add a What you need section and a numbered How to do it section to each tutorial detail page. Render every step as a distinct rounded card with a prominent step number and title. Inside each card, place instructions in a purple-accented area, an optional image in a lime-accented area, and an optional YouTube video in an orange-accented area. Omit empty media areas entirely. Keep typography readable and preserve the full width of the instructions. Add useful spacing between step cards.

Creates the visual step-by-step tutorial structure.

Verify:

Add safe image and YouTube behavior

Paste into Lovable

Create reusable media components for tutorial steps. Images must use meaningful alt text, preserve their aspect ratio, load lazily below the fold, and show an optional caption. Step images may open in an accessible lightbox with an obvious close button, Escape-key support, focus management, and a dark backdrop. YouTube embeds must accept standard watch URLs, youtu.be links, and Shorts URLs, extract the video ID safely, use privacy-enhanced embedding when practical, preserve 16:9 for standard videos and 9:16 for Shorts, lazy-load, and show a useful fallback for invalid links. Never render raw untrusted HTML.

Adds robust optional images, videos, captions, and accessible expansion.

Verify:

Complete the safety and ending sections

Paste into Lovable

Add prominent Safety notes, When not to use this prank, Reveal, Cleanup, and Helpful tips sections after the tutorial steps. Safety, reveal, and cleanup must be treated as required tutorial content. Add up to three related published tutorials beneath the guide and exclude the current tutorial. Keep all safety content visible in the normal reading flow rather than hiding it behind a modal.

Completes the consent-first tutorial reading experience.

Verify:

Part 4 — Connect Lovable Cloud securely

Warning

Do not paste service-role keys, database passwords, access tokens, or other secrets into Lovable chat or client-side code. Use Lovable Cloud’s managed configuration and secret storage.

Enable Lovable Cloud and authentication

Paste into Lovable

Enable Lovable Cloud for this project and add email authentication for administrators. Preserve the completed public site. Create a dedicated /admin/login page with email and password fields, validation, loading feedback, helpful generic errors, and a redirect to /admin after successful sign-in. Add sign-out support. Do not expose database secrets or privileged keys in the browser.

Enables the managed backend and establishes administrator sign-in.

Verify:

Create the content database

Paste into Lovable

Create normalized Lovable Cloud tables for profiles, user_roles, categories, tutorials, tutorial_steps, tutorial_materials, homepage_settings, and featured_shorts. Tutorials need all public metadata plus draft or published status, featured state, published_at, created_at, and updated_at. Steps and materials need tutorial_id, explicit numeric position, and cascading deletion. Homepage settings should be a single editable record. Featured Shorts need title, YouTube URL, optional caption, position, active state, and timestamps. Add unique tutorial and category slugs and useful indexes for status, category, tutorial relationships, and ordering. Migrate the sample content into the database without duplicating it.

Creates the persistent relational content model.

Verify:

Add storage for tutorial media

Paste into Lovable

Create a public-read storage bucket named tutorial-media for cover and step images. Permit authenticated administrators to upload, replace, and delete files. Validate uploads as images, create collision-resistant file paths, show progress and failures, and return the final public URL to the editor. Do not allow arbitrary executable files. Keep YouTube content URL-based rather than downloading remote videos into storage.

Adds controlled image uploads without duplicating YouTube files.

Verify:

Protect drafts and administration with RLS

Paste into Lovable

Add admin, editor, and user roles using a separate user_roles table and security-definer role-check functions. Enable row-level security on every content table. Anonymous visitors may read categories, active homepage settings, active featured Shorts, and published tutorials with their published steps and materials. Only administrators may read drafts or create, update, delete, publish, reorder, or upload content. Protect admin routes in the interface, but treat database policies as the real security boundary. Provide a safe one-time way for the first authenticated account to claim the initial admin role, then prevent later self-promotion.

Secures unpublished content and write operations at the database layer.

Verify:

Part 5 — Build the tutorial administration system

Create the admin shell and dashboard

Paste into Lovable

Build a protected /admin layout with a wide workspace, responsive sidebar, current-page highlighting, and links for Dashboard, Homepage, Tutorials, Categories, Media, View Website, and Sign Out. The dashboard should summarize total, published, and draft tutorials and provide quick actions to create a tutorial or edit the homepage. Use loading skeletons and helpful error states. Keep public navigation separate from the admin shell.

Creates the protected content-management workspace.

Verify:

Build the tutorial management list

Paste into Lovable

Build /admin/tutorials with a searchable list or table of all tutorials, including drafts. Show title, category, status, updated time, and useful actions. Add Create tutorial, Edit, Preview, Publish, Unpublish, and Delete. Require confirmation before deletion. Preview must let an administrator inspect a draft without making it publicly discoverable. Refresh relevant public and admin queries after mutations so counts and lists do not remain stale.

Adds complete tutorial discovery and publishing actions for administrators.

Verify:

Create the tabbed tutorial editor

Paste into Lovable

Create one reusable tutorial editor for new and existing tutorials with tabs named Basics, Materials, Steps, Media, Safety, and Publishing. Basics includes title, generated-but-editable slug, excerpt, introduction, category, difficulty, timing, cleanup level, best setting, emoji, cost, and rating. Materials supports ordered rows and an optional flag. Media includes cover upload, cover alt text, and optional main YouTube fields. Safety includes safety notes, when not to use, reveal instructions, cleanup instructions, and helpful tips. Publishing includes status and featured controls. Preserve unsaved values while switching tabs and warn before leaving with unsaved changes.

Establishes the complete editing form and content groups.

Verify:

Build the block-style step editor

Paste into Lovable

In the Steps tab, create highlighted collapsible step cards. Each card needs a visible step number, title, instructions, optional image upload with alt text, optional YouTube URL, and media caption. Use purple for the instruction area, lime for image controls, and orange for video controls. Add controls to collapse, expand, move up, move down, drag to reorder, duplicate, and delete a step. Newly inserted steps must appear at the expected insertion point, and saved numeric positions must exactly match the visible order. Keep a little vertical space between cards and prevent the selected card border from being clipped.

Adds the media-rich tutorial step builder.

Verify:

Add validation and intentional save actions

Paste into Lovable

Add a validation summary to the tutorial editor. Require title, slug, excerpt, category, difficulty, at least one non-empty step, safety notes, reveal instructions, and cleanup instructions. Validate all optional YouTube URLs when supplied. For a new tutorial, label the primary non-publishing action Save draft. For an existing tutorial, label it Save changes. Also provide Preview plus Publish or Unpublish as appropriate. Disable actions during a save, show success or failure feedback, track the last saved time, and clear the dirty state only after every tutorial, step, and material write succeeds.

Makes creation, updates, and publishing explicit and reliable.

Verify:

Part 6 — Make the homepage editable

Build the wide homepage editor

Paste into Lovable

Build /admin/homepage as a wide responsive editor. Use a sidebar plus an editing panel and a useful live preview, but allow the page to use nearly all available desktop width. Edit the hero eyebrow, headline, description, primary and secondary button labels and URLs. Add Save changes, pending feedback, last-updated information, and failure recovery. The preview must approximate the true public hero proportions instead of forcing the headline into an unnaturally narrow mobile column.

Creates the homepage settings editor and accurate preview.

Verify:

Add the editable featured standard video

Paste into Lovable

Add a Standard Featured Video section to the homepage editor. Include an enabled switch, label, YouTube URL, optional title, and preview. Render it near the top of the public hero media column in a responsive 16:9 player with a purple-to-lime theme border. When disabled or empty, remove the entire public block without leaving blank space. Validate the YouTube URL before saving.

Makes the landscape hero video optional and administrator-controlled.

Verify:

Manage up to six featured Shorts

Paste into Lovable

Add a Featured Shorts collection editor to /admin/homepage. Administrators must be able to add, edit, preview, activate, hide, reorder, and delete Shorts. Each Short needs a title, YouTube Shorts URL, optional caption, position, and active state. Allow no more than six active Shorts and explain the limit near the Add Short action. Validate duplicate and malformed URLs, require confirmation before deletion, and persist the displayed order.

Replaces the single Short control with a manageable ordered collection.

Verify:

Fill the hero with a responsive Shorts shelf

Paste into Lovable

Remove the old single Featured Short block from the public hero. Beneath the standard video, render all active featured Shorts in a responsive shelf that uses the full available hero width. Keep each player vertical at 9:16 with lime and orange borders and restrained glow. On wide screens, fit as many columns as the space supports up to six total; on medium screens use fewer columns; on mobile use a horizontal snap-scrolling row or a clean single-column layout. Keep the shelf inside the thick purple hero border, align its top and edges cleanly, and prevent excess empty height when only one or two Shorts exist.

Uses the marked hero area efficiently while retaining themed media borders.

Verify:

Part 7 — Polish, test, and publish

Standardize public layouts and responsive behavior

Paste into Lovable

Audit every customer-facing route: Home, Tutorials, tutorial detail, Safety Rules, and About. Make all pages use the same shared wide container and consistent responsive gutters as the homepage. Confirm the Home navigation item is present on every public route and clearly indicates the active page. Remove accidental narrow wrappers, horizontal overflow, oversized cover images, and inconsistent section spacing. Preserve the intentionally narrower reading width of long paragraphs inside the wider page container.

Unifies the public site without making prose difficult to read.

Verify:

Complete accessibility and resilience

Paste into Lovable

Perform an accessibility and resilience pass without changing the established design. Use semantic landmarks and heading order, visible focus styles, descriptive labels, alt text validation, sufficient contrast, keyboard-operable controls, reduced-motion support, and accessible dialog focus behavior. Add or confirm loading, empty, offline-style failure, validation, and not-found states. Ensure interactive card effects never hide focus. Lazy-load below-the-fold images and video embeds, avoid layout shifts by reserving media aspect ratios, and prevent unsafe raw HTML rendering.

Improves keyboard access, performance, and failure recovery.

Verify:

Run the final end-to-end test

Test as both a signed-out visitor and an authenticated administrator.

Final verification:

Success

Prank Lab is now a complete consent-first tutorial platform: visitors can discover and follow safe prank guides, while administrators can manage tutorials and homepage media without editing source code.