DEV Community

Abdi Abyan
Abdi Abyan

Posted on

How to developing a eBay auction app with NoSQL and flutter

Developing an eBay-style auction app with Flutter and a NoSQL backend like Firebase Firestorm involves setting up the UI, the backend database schema, real-time logic for bidding, and essential features like authentication and payment.

Here is a quick step-by-step guide: Prerequisites

  • Flutter installed on your development machine.
  • Firebase account set up and a new project created in the console.
  • Basic knowledge of Flutter widgets and Dart programming.

Step 1: Set up the Flutter Project and Firebase

Create a new Flutter project:

bash
flutter create auction_app
cd auction_app

2: Add Firebase packages: Open your pubspec.yaml file and add the required dependencies for core functionality and Firestore.

yaml
dependencies:
flutter:
sdk: flutter
firebase_core: ^[latest_version]
cloud_firestore: ^[latest_version]
firebase_auth: ^[latest_version]

3: Connect Flutter to Firebase: Follow the official Firebase documentation to connect your Flutter project (for iOS and Android) to your Firebase console project and enable Firestore and Authentication in the Firebase console.

Step 2: Design the NoSQL Database Schema (Firestore)
NoSQL databases use collections and documents. You'll need at least three main collections: users, auctions, and bids.

users Collection:
userId (Document ID)
email
name
photoUrl
watchedItems (List of auction IDs)

auctions Collection:
auctionId (Document ID)
title
description
imageUrl
sellerId
startDate
endDate
startPrice
currentHighestBid
highestBidderId
status (e.g., "active", "closed")

bids Collection (as a subcollection under each auction document):
bidId (Document ID)
auctionId
bidderId
amount
timestamp

Step 3: Implement User Authentication

Use firebase_auth to create login and registration pages. This will allow users to create accounts and manage their profiles. Ensure the user ID from Firebase Auth matches the document ID in the users collection.

Step 4: Build the Auction Listings UI

  1. Create the Home Page: Use a ListView or GridView widget to display current auction items.

  2. Fetch Data: Use Firestore data queries to retrieve a list of "active" auctions. Utilize StreamBuilder widgets to get real-time updates when a new bid is placed or an auction status changes.

  3. Design Item Cards: Each card should show the item name, image, current bid amount, and a countdown timer showing the time remaining.

Step 5: Implement Bidding Logic

  1. Auction Detail Page: Create a detailed view for each auction item, showing full details, bid history (from the bids subcollection), and a "Place Bid" button.

  2. Place Bid Functionality:
    a. When a user places a bid, validate that the new bid amount is higher than the currentHighestBid and meets any minimum increment rules.
    b. Write a custom function (or a Firebase Cloud Function for security/atomicity) to update the currentHighestBid, highestBidderId, and add a new document to the bids subcollection.

Step 6: Handle Auction Closure (Crucial Step)

The most important part of an auction app is determining the winner when the time runs out.

~Implement a Timer: While the UI can display a countdown timer, the actual closing logic should be handled on the backend using Firebase Cloud Functions. This prevents users from manipulating their local device's clock.

~Cloud Function Trigger: Set a Cloud Function to trigger when the auction's endDate is reached. This function will check the highest bid, update the auction status to "closed", notify the winner, and facilitate the transaction process.

Step 7: Testing and Deployment

~Test: Rigorously test all features: user registration, listing items, bidding against others, and auction closure scenarios.

~Deploy: Launch your app on the Google Play Store and Apple App Store.

Top comments (0)