Loading Seller Dashboard Data

This weekend I continued to work on my e-commerce all-in-one platform that essentially allows users to do all the things that a reseller does, with some additional features and services. Here are some things that I have completed over the past weekend: Loaded overview data to front end Created schema for trades, products, and product drafts Loaded products and product detail data from backend to front end using Firebase functions Loading the Overview Data After finishing up on the payment information tab function for the user's profile, I started working on connecting the backend schema data for the overview tab to the Firebase database which holds all my user information. I had the UI set up pretty much how I wanted; I just needed to connect the backend. I started by accessing the user's data, which gets loaded when the user is logged in, from the checkUserStatus function that's located in the auth.js file. That holds all the authentication checking methods. Once this was done, I console.log'd the data which showed the user information. Once this was done, all I needed to do was access each object which contained the information that I needed. You can access information from an object similar to how you do in JavaScript by using the dot notation. So to access the seller overview information we would use userData.sellerOverview, which would give us access to the overview data. Afterwards I stored the data into a variable called data, then updated the UI with the corresponding data pulled from the backend (Firebase's Database). async function loadOverviewTabInfo(userData) { if (!userData) return null; // create reference const data = userData.sellerOverview; // update UI display document.getElementById("total-revenue-value").textContent = data.totalRevenue; document.getElementById("active-listing-value").textContent = data.activeListing; document.getElementById("product-sold-value").textContent = data.productsSold; document.getElementById("active-listing-value").textContent = data.activeListing; document.getElementById("product-sold-value").textContent = data.productsSold; document.getElementById("selling-rate-value").textContent = userData.sellerOverview.sellerRating; loadProducts(userData); } Creating the Trades, Products, and ProductDrafts Schema in Firebase Database After loading the overview data, we needed to load the products to each of the corresponding tables in the UI. Each table corresponds to the following headers: all, active, for trade, pending trades, etc. The following is the structure of each collection in the Firebase database. A collection of data is just a collection of data fields that correspond to the current documents. In this context, it corresponds to the product ID, which is the ID of each product. Since trades, products, and productDrafts are documents that hold a collection of data, the following describes the fields needed for each document. Trades lastUpdated: when the item was last updated requestItems: what items the user requested for the trade to happen (stored in an array) requestingUserId: ID of the user requesting the trade status: current status of the item for the trade (pending, reserved, expired, under review, etc.) storeCredit: amount of store credit that can be given for the trade submitted: date the trade was submitted or requested tradeBalance: current balance the user has after every trade tradingItems: items that the current user is trying to trade for the requesting items tradingUserId: ID of the owner who initiated the trade Products analytics: analytical data corresponding to views, conversion rate, timestamps, etc. basicInfo: item's general information demand: level of priority of this item, percentage change, and whether the item is trending images: images for the items, alt tag, src of the item inventory: detailed information used for authentication and tracking product quantity pricing: all information about cost of the product, retail price, etc. sellBack: information about the item's worth if sold back to us seo: information used for search parameters to help identify through keywords shipping: all shipping information for the product and associated fees specifications: dimensions used for shipping and to determine object size supplier: vendor which originally provided the item before resale variants: different colors and styles of the product waitlist: number of people waiting for item restock or reservation status: whether the item is currently available, pending, out-of-stock, etc. ProductDrafts basicInfo: all basic information for the item (same as products) completedSections: completed parts of the draft so far completionProgress: percentage amount of the product information completed createdAt: timestamp when the item was created and drafted draftId: unique ID of the draft item for easy identification images: images for the d

Apr 5, 2025 - 01:12

This weekend I continued to work on my e-commerce all-in-one platform that essentially allows users to do all the things that a reseller does, with some additional features and services. Here are some things that I have completed over the past weekend:

Loaded overview data to front end
Created schema for trades, products, and product drafts
Loaded products and product detail data from backend to front end using Firebase functions

Loading the Overview Data

After finishing up on the payment information tab function for the user's profile, I started working on connecting the backend schema data for the overview tab to the Firebase database which holds all my user information. I had the UI set up pretty much how I wanted; I just needed to connect the backend.

I started by accessing the user's data, which gets loaded when the user is logged in, from the checkUserStatus function that's located in the auth.js file. That holds all the authentication checking methods. Once this was done, I console.log'd the data which showed the user information.

Once this was done, all I needed to do was access each object which contained the information that I needed. You can access information from an object similar to how you do in JavaScript by using the dot notation. So to access the seller overview information we would use userData.sellerOverview, which would give us access to the overview data. Afterwards I stored the data into a variable called data, then updated the UI with the corresponding data pulled from the backend (Firebase's Database).

async function loadOverviewTabInfo(userData) {
  if (!userData) return null;

  // create reference
  const data = userData.sellerOverview;

  // update UI display
  document.getElementById("total-revenue-value").textContent =
    data.totalRevenue;
  document.getElementById("active-listing-value").textContent =
    data.activeListing;
  document.getElementById("product-sold-value").textContent = data.productsSold;
  document.getElementById("active-listing-value").textContent =
    data.activeListing;
  document.getElementById("product-sold-value").textContent = data.productsSold;
  document.getElementById("selling-rate-value").textContent =
    userData.sellerOverview.sellerRating;

  loadProducts(userData);
}

Creating the Trades, Products, and ProductDrafts Schema in Firebase Database

After loading the overview data, we needed to load the products to each of the corresponding tables in the UI. Each table corresponds to the following headers: all, active, for trade, pending trades, etc.

The following is the structure of each collection in the Firebase database. A collection of data is just a collection of data fields that correspond to the current documents. In this context, it corresponds to the product ID, which is the ID of each product.

Since trades, products, and productDrafts are documents that hold a collection of data, the following describes the fields needed for each document.

Trades

lastUpdated: when the item was last updated
requestItems: what items the user requested for the trade to happen (stored in an array)
requestingUserId: ID of the user requesting the trade
status: current status of the item for the trade (pending, reserved, expired, under review, etc.)
storeCredit: amount of store credit that can be given for the trade
submitted: date the trade was submitted or requested
tradeBalance: current balance the user has after every trade
tradingItems: items that the current user is trying to trade for the requesting items
tradingUserId: ID of the owner who initiated the trade

Products

analytics: analytical data corresponding to views, conversion rate, timestamps, etc.
basicInfo: item's general information
demand: level of priority of this item, percentage change, and whether the item is trending
images: images for the items, alt tag, src of the item
inventory: detailed information used for authentication and tracking product quantity
pricing: all information about cost of the product, retail price, etc.
sellBack: information about the item's worth if sold back to us
seo: information used for search parameters to help identify through keywords
shipping: all shipping information for the product and associated fees
specifications: dimensions used for shipping and to determine object size
supplier: vendor which originally provided the item before resale
variants: different colors and styles of the product
waitlist: number of people waiting for item restock or reservation
status: whether the item is currently available, pending, out-of-stock, etc.

ProductDrafts

basicInfo: all basic information for the item (same as products)
completedSections: completed parts of the draft so far
completionProgress: percentage amount of the product information completed
createdAt: timestamp when the item was created and drafted
draftId: unique ID of the draft item for easy identification
images: images for the draft item
isCompleted: whether the draft is completed
lastEdited: timestamp when user last edited the draft
missingInfo: missing information needed to complete the listing
originalProductId: ID of the original product
price: price of the draft item
publishBlockers: items or sections required for listing
requiredSections: sections needed to be completed for listing
status: status of the item
userId: ID of the owner making the current changes

Summary

These are the changes and adjustments that I have made so far on the journey of building an all-in-one e-commerce platform. I have learned a lot, like data indexing, querying data, connecting backend data with the front-end structure, and displaying information to the client. Please stay tuned next week as I continue working on completing the profile implementation and front-end/backend construction.