title: Structure basic data in Firebase (Product, brands and categories)
body: <p>I'm learning Firebase (Firestore) and React. Previously, i've worked with PostgreSQL and Rails, so everything looks different to me. I've read a lot about how to use it, and i am able to get data, store simple data etc. but i'm pretty much totally losted on how to structure my data and work with it correctly. I understand there is not &quot;one way only&quot; to do it, but could someone explain me, as if you're talking to a real beginner, how to structure the following data for example ?</p>
  <p>I have products. Each product have a name, a price, a brand and somme sellers (online shops that sells the product).
  Each brand can have a name, a website and many products associated.
  Each seller can have a name, a website and many products associated.</p>
  <p>From what i've read, it looks like i should structure it like this : a Products collection, a Brands collection and a Sellers collection. Here is what it looks like in my Firestore console :</p>
  <p>Products collection
  <a href="https://i.stack.imgur.com/Y84cq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y84cq.png" alt="products collection" /></a></p>
  <p>Brands collection
  <a href="https://i.stack.imgur.com/ZN4sx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZN4sx.png" alt="brands collection" /></a></p>
  <p>Brands - products subcollection
  <a href="https://i.stack.imgur.com/t2LT1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t2LT1.png" alt="Brands - products subcollection" /></a></p>
  <p>Sellers collection
  <a href="https://i.stack.imgur.com/yawpE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yawpE.png" alt="sellers collection" /></a></p>
  <p>The seller subcollection looks like the brands - products subcollection.</p>
  <p>First question : <strong>Does this structure makes sense ?</strong>
  Second question : <strong>As i've used references in my data, how can i access for example 'brand' or 'sellers' from each product ?</strong></p>
  <p>Right now, i've created the following function in my react component to get all my products :</p>
  <pre><code>getAllProducts() {
      productsCollection
        .orderBy('releaseDate', 'desc')
        .get()
        .then((snapshot) =&gt; {
          snapshot.forEach((doc) =&gt; {
            const products = firebaseLooper(snapshot);
            const brand = '';
            const sellers = [];
  
            console.log(doc.data());
  
            this.setState({
              products,
            });
          });
        })
        .catch((e) =&gt; {
          console.log(e);
        });
    }
  </code></pre>
  <p>When i <code>console.log(doc.data());</code>, i can see all my data correctly. But how do i access the brand values and sellers values in a readable format ? Right now, it looks like this :</p>
  <p><a href="https://i.stack.imgur.com/uWshF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uWshF.png" alt="console.log(doc.data())" /></a></p>
  <p>So i can't use <code>doc.data().brand</code> for example.</p>
  <p>What i'm trying to achieve is a simple app where you have a form to add a new product. You add a name, a price, select a brand and sellers. In the product page, you can see the name, the price, the brand and the seller(s) associated with the product.</p>
  <p>EDIT : Here is what the firebaseLooper function looks like :</p>
  <pre><code>export const firebaseLooper = (snapshot) =&gt; {
    let data = [];
  
    snapshot.forEach((doc) =&gt; {
      data.push({
        ...doc.data(),
        id: doc.id,
      });
    });
  
    return data;
  };
  </code></pre>