Do this one?
Yeah, I would definitely re-watch part of the video.
Sure.
So we'll call that like, first video
will be part of the kind of authentication
and just sort of a general tour.
And then let me walk through this.
So we kind of keep going through the user flow here.
So let's say now they're authenticated,
so they're in their app.
And now they're looking at my groups.
And this is exactly the same as being on this page,
obviously signed in.
So these, my groups, is the same concept here.
It's showing my groups here.
And this looks like it's almost finished building,
so we'll go ahead and run it here.
So perfect, so let's just watch this for fun.
I'm going to log in here as a user.
It's checking that.
And then it does this.
And we sign in.
And it accesses Wisdom.
And it redirects the page.
So it's very quick.
But there was 12 actions it had to run through.
But it does it very, very quick.
And it just helps us prevent, for example,
you don't want to send people directly into this
without that redirect page.
Because sometimes it doesn't know the data here.
And then it doesn't know to go get the groups again.
So it's kind of like it gets into a weird cached state.
And it doesn't know.
So what we do is we send it to that redirect page.
It just verifies, are they signed in?
Do they have all their credentials they need?
And then go ahead and get the group list
and add it to the local state.
And that way, when we load this page, it's already loaded.
We don't land on this page after the little scrolly wheel.
And then it starts scrolling and looking for the query.
Once we show it to the user, we want it to be functional.
Yeah, so this is a very boring page.
It just sort of lists out the groups that a user is in.
So I'm going to go ahead and just click on this one,
because it's the busiest.
And let me pause this for just a second.
OK, so this now takes you into this group page.
We've got today.
We've got replays listed out.
They have a community board where we can post things here.
And people can like different things.
And they can click into the comments.
And then you can also go to the leaderboard,
where it tracks everybody's points for them
completing different tasks.
So some of this doesn't exist anywhere in the tribe API.
And it only exists on the Firebase side.
And so it lets us prototype things over here on Firebase.
First, before we go and rebuild the tribe API
to add a bunch of features just for this one app,
we can prototype a version of it just with Firebase,
see how it works, get it to where we like it.
And then we potentially can move that over into the main tribe
if we feel like that's something everybody should have.
But right now, it's just limited to that.
So group lists, and then this is the only app
with the leaderboard and with that working the same way.
So if I click into the template, sorry, it starts with this one,
this group home, and we just named it.
This is sort of the challenge look, is we've got the group.
And this group, again, is just the same
as if I go to the tribe site here.
It's like I went into one of these groups here.
So it's the same page, technically,
with the image and the feed.
It's all the same concepts, just sort of moved
into a different sort of layout.
It's just a little bit more mobile-friendly.
So community, in theory, is basically
the same as this discussion feed.
The replays down here is just like all the videos
that are on the left there.
So let's jump back here.
And so these are the two videos that people can watch.
And if they click into a video, now we load that video,
and we can hit Play.
And then here, we've got the chat happening.
So you can see this person just commented
with less than a minute to go, six minutes to go,
13 minutes to go.
And if you keep going down, there's just tons of comments.
I mean, there's about 4,000 members in this particular.
If you go back.
and hit the home page, see, there's 4,019 members.
So they're very active, basically.
Oh, yeah, that's a lot.
And so all the comments and stuff right now
are just being hosted by Firebase,
because it's just a lot easier to get it in and out.
And then we actually aren't using any of the front end
app for this group.
So if you go in here, and I'm looking at,
this is the tribe web app that you're familiar with.
If I click on Kingdom Seekers, it essentially
redirects you to members.wisdomly,
which is the Flutter flow app.
So when I change something now in the template,
it updates it on the web, and it updates it
on the phone apps in the same update.
So that was kind of a big breakthrough
for this particular client, because in every other version,
we would go add something in Flutter flow,
and then Lucian would have to add it to the web app
simultaneously.
So by us moving to Flutter flow, doing the front end
app on the web, and the front end of the mobile apps
on Android and iOS, that let us everything be in sync.
So now when we change the logic for login, for example,
it pushes it immediately to the web app as well,
and we've got it on the mobile app in the same update.
So that was definitely a huge upgrade to our own thinking
and process to simplify that tremendously.
So yeah, and then in here, this is the challenge,
the collection.
The name is probably going to throw you off,
since it's actually named incorrectly.
We should probably rename it, because this is actually
a piece of content.
It would be actually called like a tribe content,
but it got mislabeled.
And so now it's just left there as being wrong.
So yeah, video.
And you can kind of break down this as well.
We have a thing called a content stack, which
stacks all these different components vertically
and like a z-index.
And so we first, on the very bottom layer,
we show the image, like the featured image.
And then if it's a YouTube video,
we show the YouTube player.
If it's just a video, like an MP4, we show this.
And we have this, see the little eye icon there?
If I hover over it, it even says content type equals video.
And if I go hover over here, it says content type
equals video embed.
If I go over here, it says content type is live streaming.
So you can actually see that.
And the way you would change it is you would go into this.
And you see it says conditional visibility at the top here.
And then you can choose this.
So you can say like content type equal to this value
is a specific.
And we just wrote the words live streaming in there.
This should line up in your brain now to content, right?
The type right in here, that's what that is right there.
It's just getting that piece right there.
This is where it's going to be a huge help that you
are familiar with in some ways, like the tribe API.
Because this is exactly how we, if you go to the content page,
we have a bunch of conditionals, right?
It's like, is this a YouTube video?
Like use this page.
Is this, this isn't, you know.
I'm working on this one today, actually.
Yeah.
On this page.
And you can see like how that works.
And now we don't account for all of those versions.
Like, for example, we don't have an article type built
into this page right now.
OK, why?
Just you don't need it?
So yeah, we just we didn't have needed it yet.
So it's not full.
So if you see something like that, like, well,
there's obviously more than three types here.
Basically, what would happen is if it was just an image
and it was set to article, it would, this would fail,
this would fail, this would fail.
And then it would just end up with the image being shown.
So you would have an image at the top,
and then you would have the chat below would be how that works.
So OK, cool.
And there's a lot in here, like.
I'm not going to get into this, because what I want to fix
is actually for raising royalty on the next kind of section
here.
But this just gets into when you see the little orange kind
of data.
the database icon, that's where it's actually querying
the Firebase database.
And it can also, you can also run that as an API
request back to tribe.
So in this case, like it's getting comments.
If I clicked on here, sorry, I didn't even click on it.
I click on here, and you can see there's a query
and it's going and getting the collection,
which is called chat messages.
And it's bringing back 100 as the first scroll
and then it filters it and says, okay,
make sure that the content ID is equal
to the current content ID, and make sure that
the status of the message is not set to deleted.
This is identical to how chat messages work in here,
get chat, you know, we have deleted is false, true.
There's an ID, there's a content ID here.
I'm sorry, there, content ID.
I actually don't know, there's an ID there,
there's an ID there.
Oh, user, sorry, that's user.
It's just the formatting is wrong.
I think if you, there you go.
If you hit refresh a second time, it pulls the,
it's just the formatting is off.
Invent, it's actually the user ID of the comment.
Whoever wrote the author of the comment is there.
The content ID, and then is deleted.
So we've basically filtered for those two things.
The differences here is we're actually writing this
to a thing called chat messages, which has, you know,
likes, replies, is it deleted?
Here's the message.
What was the user that wrote it?
So we actually make zero calls back to the tribe API
for this particular one.
It won't always be this way, but that's how it's working.
In here, and the reason we do it through Firebase
is one very simple reason, speed.
Oh, okay, really, is that, is that it?
Firebase is a streamed data source.
So it streams content in dynamically to everybody's screen.
So when you post a comment,
let's say there's a thousand people watching.
If you post a comment, the database has to basically
be queried a thousand times and repopulated
on every single person's device.
You know, every single time a message comes in.
And if there's, you know, hundreds of messages
coming in every minute,
that can get very, very complicated
to keep refreshing this query.
Be like, is there new messages?
Display messages.
Is there new messages?
Display that.
So Firebase is like a streamed data source
so that it just instantly shows it on everybody's screen
within half a second.
It's just like instantly shows up.
So when I write the message and I hit post,
it just immediately shows up.
And everybody who is on this page would see my new message.
It's just really smart.
But it handles all of the UI
and the complexities of the refreshing,
all that for you.
Now you have to set it up a very specific way.
So maybe in a different video or something,
I'll go through and explain exactly how this is set up.
But it has to be done at a certain level.
It has to be a certain,
you have to use this list view, for example.
If you use the wrong components here,
it won't work at all.
Like it won't refresh instantly this way.
So you have to kind of line it up exactly right
in Flutter flow, and then it will work.
And that actually took us,
or took me a few weeks to figure out
because I built it the wrong way.
All the time.
Okay, good to know.
Yeah, so, and it's just simple,
because what you do is when you create a query,
it creates children of everything below it.
So for example, I was using a column here to say like,
hey, just take this container or take this column
and just repeat it over and over again for everyone.
But if you don't use this list view component,
and then one other little trick that Robert showed us,
so Robert's on the team,
he's like an outside consultant.
He's like a Flutter flow expert.
And he's been doing development for 15 years plus.
He's basically a coder that's also knows Flutter flow.
So he's basically showed us how this actually should work.
And there's no documentation on Flutter flow
that I've seen anywhere that tells you
this is the way to do it,
other than what he told us.
Wow.
So what you do is you make the query on a container.
So it's querying in this container,
and then below it is where you actually grab the children
and you link this back into.
to that query.
So you get the results of it,
and then it will duplicate whatever is below.
So in this case, it's a thing called comment,
and it will just duplicate that over and over again
with every comment that comes in
and then all the replies as well.
So this thing to get this right,
like probably took us at least a week or two
to get this dialed in.
Like we don't need to rebuild it, right?
So like this is where I would come in here,
we'd copy this entire page in one click.
I'd right click on this, hit copy, right?
Go over to my other project and hit paste.
There we go, wow, okay.
So now, and then when you do that,
you're gonna get like a million errors
because you gotta reconnect a bunch of stuff,
but it is, you know, you can kind of do it
with like in under 30 minutes or so,
you could reconnect it and do that.
So I'm gonna go ahead and stop it again here,
and then we'll jump into,
I think we'll do just some basic like error stuff
and then maybe changing some local state updates here.