An auction system in Bubble uses Data Types for Auction Items and Bids, with workflows that validate each bid exceeds the current highest, update the item's current price in real time, and schedule a backend workflow to close the auction and notify the winner. This tutorial covers the full auction lifecycle from listing to winner determination.
Overview: Building an Auction System in Bubble
This tutorial guides you through creating a complete auction system. You will build the data model for items and bids, create listing and bidding interfaces, implement bid validation logic, display real-time price updates, and automate auction closing with winner notification.
Prerequisites
- A Bubble app with user authentication set up
- Understanding of Data Types, workflows, and backend workflows
- Familiarity with Repeating Groups and conditional logic
Step-by-step guide
Create the auction Data Types
Create the auction Data Types
In the Data tab, create 'AuctionItem' with fields: 'title' (text), 'description' (text), 'images' (list of images), 'starting_price' (number), 'current_price' (number), 'min_increment' (number, default 1), 'end_time' (date), 'seller' (User), 'status' (text: active/closed/cancelled), 'winner' (User). Create 'Bid' with fields: 'auction_item' (AuctionItem), 'bidder' (User), 'amount' (number), 'timestamp' (date).
Expected result: Data Types for AuctionItem and Bid are created with all necessary fields for the auction lifecycle.
Build the auction listing page
Build the auction listing page
Create a page called 'create-auction'. Add input fields for title, description, starting price, minimum bid increment, and end date/time (date picker). Add a File Uploader for images. Create a 'List Item' button with a workflow that creates a new AuctionItem: set all fields from inputs, current_price equals starting_price, seller equals Current User, and status equals 'active'. Also schedule a backend workflow 'close_auction' to run at the end_time with the new item's unique ID as a parameter.
Pro tip: Set a minimum auction duration (e.g., 1 hour) by validating that end_time is at least 1 hour from Current date/time before creating the item.
Expected result: Sellers can create auction listings with details, images, and an end time, with automatic closing scheduled.
Create the bidding interface
Create the bidding interface
Create a page called 'auction' that receives an AuctionItem via URL parameter. Display the item details, images, and current price prominently. Add a number input for the bid amount and a 'Place Bid' button. Show a Repeating Group below with the bid history sorted by timestamp descending, showing bidder name, amount, and time. The current price should update live thanks to Bubble's auto-updating searches.
Expected result: An auction detail page shows item info, current price, a bid input, and a live-updating bid history.
Implement bid validation and placement workflow
Implement bid validation and placement workflow
On the 'Place Bid' button click, create a workflow with conditions. Step 1: Only when bid amount is greater than or equal to current_price plus min_increment AND status is 'active' AND Current User is not the seller AND end_time is greater than Current date/time. Step 2: Create a new Bid with auction_item, bidder = Current User, amount = input value, timestamp = Current date/time. Step 3: Make changes to the AuctionItem — set current_price to the bid amount. Step 4: Clear the input. Add error workflows for each invalid condition showing appropriate messages.
Expected result: Valid bids are accepted and update the current price; invalid bids show specific error messages.
Build the auction closing backend workflow
Build the auction closing backend workflow
In the backend workflows editor, create 'close_auction' with parameter 'item_id' (text). Find the AuctionItem by unique_id. Set status to 'closed'. Find the highest bid (Search Bids where auction_item = this item, sorted by amount descending, first item). Set the AuctionItem's winner to the highest bid's bidder. Send a notification email to the winner congratulating them, and another to the seller with the winner's details and final price.
Expected result: When the auction end time arrives, the backend workflow closes the auction, determines the winner, and sends notification emails.
Add a countdown timer to the auction page
Add a countdown timer to the auction page
On the auction page, add text elements for days, hours, minutes, and seconds remaining. Use dynamic expressions: hours = (AuctionItem's end_time minus Current date/time):extract hours, minutes = extract minutes, etc. To make it tick in real time, add a 'Do every 1 second' workflow that refreshes the display by toggling a custom state (this forces Bubble to recalculate the dynamic expressions). When the countdown reaches zero, hide the bid input and show 'Auction Ended'.
Expected result: A live countdown timer shows the exact time remaining, and the bidding interface disables when the auction ends.
Complete working example
1AUCTION SYSTEM — WORKFLOW SUMMARY2====================================34DATA TYPES:5 AuctionItem:6 title, description, images (list), starting_price,7 current_price, min_increment, end_time,8 seller (User), status (text), winner (User)9 Bid:10 auction_item (AuctionItem), bidder (User),11 amount (number), timestamp (date)1213CREATE AUCTION WORKFLOW:14 Step 1: Create AuctionItem from inputs15 current_price = starting_price, status = 'active'16 Step 2: Schedule 'close_auction' at end_time1718PLACE BID WORKFLOW:19 Conditions: amount >= current_price + min_increment20 AND status = 'active'21 AND bidder != seller22 AND end_time > Current date/time23 Step 1: Create Bid24 Step 2: Update AuctionItem current_price25 Step 3: Clear input2627BACKEND: close_auction (param: item_id)28 Step 1: Set AuctionItem status = 'closed'29 Step 2: Find highest bid → set winner30 Step 3: Email winner (congratulations)31 Step 4: Email seller (winner details + final price)3233COUNTDOWN:34 Display: end_time - Current date/time35 Refresh: Do every 1 second → toggle state36 When expired: hide bid input, show 'Ended'Common mistakes when building an Auction System in Bubble
Why it's a problem: Not checking that bids exceed current_price plus min_increment
How to avoid: Validate that bid amount >= current_price + min_increment in the workflow condition
Why it's a problem: Allowing the seller to bid on their own auction
How to avoid: Add condition 'Only when Current User is not AuctionItem's seller' on the bid workflow
Why it's a problem: Not scheduling the close_auction backend workflow at creation time
How to avoid: Schedule the close_auction backend workflow in the same workflow that creates the AuctionItem
Best practices
- Store current_price on the AuctionItem for fast display instead of calculating from bids each time
- Schedule the auction closing as a backend workflow so it runs regardless of whether anyone is viewing
- Add email notifications for outbid alerts to keep bidders engaged
- Implement a 'snipe protection' extension — add 2 minutes to end_time when a bid arrives in the last minute
- Set minimum auction durations and minimum starting prices to prevent spam listings
- Use Privacy Rules to hide bid amounts from other bidders if running a sealed-bid auction format
- Add a 'watching' feature where users can follow auctions and receive notifications
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building an auction platform in Bubble.io where sellers list items with a starting price and end time. Buyers place bids in real time. The highest bidder wins when time runs out. What Data Types and workflows do I need?
Build an auction system for my marketplace app. Create data types for items and bids. Let sellers create listings with starting price and end time. Validate that each bid exceeds the current price. Automatically close auctions and email the winner when time expires.
Frequently asked questions
How do I handle bid sniping (last-second bids)?
Implement a snipe protection rule: when a bid is placed within the last 2 minutes, extend the end_time by 2 minutes. This gives other bidders a chance to respond.
Can I support reserve prices (minimum acceptable price)?
Yes. Add a 'reserve_price' field to AuctionItem. In the close_auction workflow, only set a winner if current_price >= reserve_price. Otherwise, mark the auction as 'reserve not met'.
How do I handle payment after an auction ends?
In the close_auction workflow, after determining the winner, send them to a payment page with the final amount. Use Stripe Checkout or the Bubble Stripe plugin to collect payment within a deadline.
Can multiple bids arrive at the same time and conflict?
Bubble processes workflows sequentially per user. For high-traffic auctions, use a backend workflow to validate and place bids so they are queued server-side, reducing race conditions.
Can RapidDev help build a professional auction platform in Bubble?
Yes. RapidDev can build complete auction platforms with real-time bidding, payment processing, user verification, and admin tools in Bubble.
Should I use a real-time plugin instead of Bubble's native live data?
For most auction apps, Bubble's native live data (auto-updating searches) provides 1-5 second update latency, which is sufficient. For extremely high-frequency bidding, consider a WebSocket plugin.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation