I'm trying to host/display images for users using firebase firestore and firebase storage.

My goal is to have one page of the site display every image from firebase storage

And another page for logged in users that only displays the images they have favorited.

So I have a user collection that contains an attribute array which has elements of that correspond to the ImageID in my Image collection below

The image collection just has some data about the image along with the ImageLink attribute which has the actual source of the image in firebase storage

Here's the firebase storage:

So theoretically- for the page that displays every image, I should just be able to iterate through Images collection and display every image in ImageLink, and for when users are logged in, it can go use the "favorites" attribute filled with ImageIDs to go to the Images collection -> ImageID ->ImageLink to display all images in their favorites list?

Does that make sense, or is there a better way to implement this?

> Users > Wzvironnq4wo... odyssey-f90f0 Users Wzvironnq4WORNLYiaGJ7hRX91 + Start collection + Add document + Start collection Images > WzV1r0nnq4woReNLYiaeGJ7hRXg1 dtP6e9Sb4eMv6fOzaW2FdnzbYP33 + Add field Users > AdminCheck: "1" Email: "testUser123@gmail.com" FName: "Steve" LName: "Roberts" favorites O "Rgm100d51V9RU2inX1uk" 1 "112zdBBdd48A7OUN6NcL" Odyssey-f90f0 Images =; 112zdBBdd48A7OUNONCL + Start collection + Add document + Start collection Images 112zdBBdd48A7QUN6NcL > + Add field Users Rgm100d51V9RU2inX1uk Description: "Horse" FavoriteCount: 1 ImageLInk: "gs://odyssey-f90f0.appspot.com/Pegasus.png" Title: "Pegasus" Uploader: "Steve" Name Size Type Last modified Pegasus.png Boat.png 2.94 MB image/png Feb 22, 2021 Pegasus.png 4.5 MB image/png Feb 22, 2021 Name Pegasus.png Size 4,723,780 bytes Type image/png Created Feb 22, 2021, 4:17:51 PM Updated Feb 22, 2021, 4:17:51 PM File location Storage location gs://odyssey- f90f0.appspot.com/Pegasus.png