Welcome to the world of online auctions! Whether you’re an aspiring entrepreneur or just looking to host a charity event, this guide will help you set up your very own auction website using GitHub Pages and Firebase for authentication and data management. Let’s take a journey through the steps needed to build this platform!

Table of Contents

• Features
• Setup
  • Environment
  • Items
  • Firebase
    • Creating a Project
    • Authentication
    • Firestore Database
  • Creating an Admin Account
  • Initialising the Auction

Features

• Realtime bidding using event listeners (no need to refresh the page).
• Built with Bootstrap for responsive design.
• Device-based login requiring only a username.
• Item details accessible via popups.
• Admin page for monitoring the auction and tracking winners.

Setup

To begin your auction site development, follow the steps outlined below to setup your environment and connect it to Firebase.

Environment

To develop and deploy your custom auction website, you’ll need to install Node.js v21. Follow the instructions here to install Node.js.

After installation, install the required packages by running:

npm install

To start the development server, execute:

npm run dev

For a production build, use:

npm run buildnpm run preview

Your website will automatically deploy using the .github/workflows/pages.yml file.

Items

First, set demo = false in src/App.jsx to prevent timers from resetting. Then, populate public/items.yml with the items you wish to auction. Here are the required fields:

• id (Number): ID of the item.
• primaryImage (String): URL of the primary image.
• title (String): Item title.
• subtitle (String): Item subtitle.
• detail (String): Item detail text.
• secondaryImage (String): URL of the secondary image.
• currency (String): Currency symbol.
• amount (Number): Starting price of the item.
• endTime (string): End time in ISO 8601 format.

Firebase

Next, let’s integrate Firebase into our project.

Creating a Project

To create a project on Firebase, follow these steps:

1. Visit the Firebase console and click on “Add project.”
2. Give your project a name and enable or disable Google Analytics as desired.
3. Add a web app to your project by clicking on “Add app” and selecting the web icon.
4. Copy the firebaseConfig code snippet into the variable in src/firebase/config.jsx.

Authentication

In the Firebase console, go to “Authentication” on the left menu, then enable the “Anonymous sign-in” provider. Remember, anonymous accounts are tied to users’ browsers, so different browsers or cleared data will result in new accounts.

You can learn more about anonymous authentication in the documentation.

Firestore Database

To set up Firestore, refer to the Firestore quickstart documentation. After that, apply the following security rules in the Rules tab:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Function to ensure new data does not overwrite existing bids
    function isFieldOverWrite() {
      let editedKeys = request.resource.data.diff(resource.data);
      return editedKeys.changedKeys().union(editedKeys.removedKeys()).size() > 0;
    }
    // Validates user identity
    function isLoggedIn() {
      return request.auth != null && exists(/databases/$(database)/documents/users/$(request.auth.uid));
    }
    
    function isAdmin() {
      return isLoggedIn() && 
              get(/databases/$(database)/documents/users/$(request.auth.uid)).data.admin == 'your_long_random_secret_string';
    }

    match /users/{userId} {
      allow read, update, delete: if isAdmin() && request.auth != null && request.auth.uid == userId;
      allow create: if request.auth != null && request.auth.uid == userId;
    }
    
    match /auction/items {
      allow get, list: if true;
      allow update: if isAdmin() && isLoggedIn() && !isFieldOverWrite();
      allow create, delete: if isAdmin();
    }
  }
}```

Creating an Admin Account

Now, create an admin account by hosting your website locally or on GitHub Pages. Sign up to create the users collection in Firestore. Navigate to the Firestore section and open the user document created. Set a strong password in the admin field, and update the Firestore rules accordingly.

Initialising the Auction

To initialize the auction, use the same browser where you created your admin account. Navigate to your website, click on the Admin button, and hit the “Update all items” button. This will sync your auction items with public/items.yml.

Troubleshooting

If you run into issues during setup or with your auction site, consider the following troubleshooting ideas:

• Double-check your Firebase configurations and ensure all necessary APIs are enabled.
• Verify that your public/items.yml is correctly populated and structured as described.
• Make sure all necessary npm packages are installed by running npm install.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.