All language subtitles for Build and Deploy a Full Stack Social Media App React JS, Appwrite, Tailwind CSS, React Query

this is not your typical Instagram clone

this is not your typical Instagram clone
we're<00:00:03.679> bringing<00:00:04.040> you<00:00:04.279> a<00:00:04.560> modern<00:00:05.040> social<00:00:05.520> app

we're bringing you a modern social app

we're bringing you a modern social app
with<00:00:06.120> stunning<00:00:06.560> UI<00:00:07.240> with<00:00:07.399> a<00:00:07.600> native<00:00:08.040> mobile

with stunning UI with a native mobile

with stunning UI with a native mobile
feel<00:00:09.280> a<00:00:09.559> special<00:00:09.920> text<00:00:10.280> stack<00:00:11.000> an<00:00:11.200> infinite

feel a special text stack an infinite

feel a special text stack an infinite
scroll<00:00:11.960> feature<00:00:12.880> and<00:00:13.280> amazing<00:00:13.960> performance

scroll feature and amazing performance

scroll feature and amazing performance
have<00:00:15.080> you<00:00:15.200> ever<00:00:15.440> struggled<00:00:16.039> with<00:00:16.320> complicated

have you ever struggled with complicated

have you ever struggled with complicated
server<00:00:17.240> setups<00:00:18.000> worrying<00:00:18.480> about<00:00:18.840> security

server setups worrying about security

server setups worrying about security
handling<00:00:20.000> user<00:00:20.359> off<00:00:20.960> scaling<00:00:21.960> managing<00:00:22.400> and

handling user off scaling managing and

handling user off scaling managing and
storing<00:00:22.880> files<00:00:23.279> securely<00:00:23.920> and<00:00:24.240> optimizing

storing files securely and optimizing

storing files securely and optimizing
API<00:00:25.400> performance<00:00:26.359> without<00:00:26.760> losing<00:00:27.359> countless

API performance without losing countless

API performance without losing countless
development<00:00:28.359> hours<00:00:29.279> if<00:00:29.480> that<00:00:29.599> is<00:00:29.720> the<00:00:29.800> case

development hours if that is the case

development hours if that is the case
Cas<00:00:30.480> you're<00:00:30.720> not<00:00:30.960> alone<00:00:31.640> and<00:00:31.920> I've<00:00:32.160> got

Cas you're not alone and I've got

Cas you're not alone and I've got
something<00:00:32.759> that<00:00:32.920> can<00:00:33.120> help<00:00:33.760> whether<00:00:33.960> you're<00:00:34.160> a

something that can help whether you're a

something that can help whether you're a
new<00:00:34.760> or<00:00:35.000> a<00:00:35.160> season<00:00:35.680> developer<00:00:36.399> thinking<00:00:36.719> of

new or a season developer thinking of

new or a season developer thinking of
starting<00:00:37.280> a<00:00:37.440> fresh<00:00:37.840> side<00:00:38.160> project<00:00:38.960> doing<00:00:39.440> all

starting a fresh side project doing all

starting a fresh side project doing all
these<00:00:40.039> things<00:00:40.280> on<00:00:40.440> your<00:00:40.600> own<00:00:40.960> can<00:00:41.160> be<00:00:41.520> quite<00:00:41.800> a

these things on your own can be quite a

these things on your own can be quite a
hassle<00:00:43.079> so<00:00:43.600> hi<00:00:43.840> there<00:00:44.360> and<00:00:44.680> welcome<00:00:45.000> to<00:00:45.200> a<00:00:45.360> new

hassle so hi there and welcome to a new

hassle so hi there and welcome to a new
project<00:00:46.079> video<00:00:46.600> where<00:00:46.760> you'll<00:00:47.079> build<00:00:47.640> and

project video where you'll build and

project video where you'll build and
deploy<00:00:48.760> an<00:00:49.039> amazing<00:00:49.600> social<00:00:50.000> site<00:00:50.640> with<00:00:50.840> a

deploy an amazing social site with a

deploy an amazing social site with a
hassle-free<00:00:51.680> backend<00:00:52.680> thanks<00:00:52.920> to<00:00:53.199> aight

hassle-free backend thanks to aight

hassle-free backend thanks to aight
Cloud<00:00:54.600> it<00:00:54.760> allows<00:00:55.039> you<00:00:55.199> to<00:00:55.359> create<00:00:55.719> a<00:00:55.920> backend

Cloud it allows you to create a backend

Cloud it allows you to create a backend
faster<00:00:57.079> than<00:00:57.280> Thanos<00:00:57.760> snaps<00:00:58.079> his<00:00:58.280> fingers<00:00:58.960> and

faster than Thanos snaps his fingers and

faster than Thanos snaps his fingers and
at<00:00:59.280> a<00:00:59.399> much<00:00:59.600> lower<00:01:00.160> cost<00:01:00.559> than<00:01:00.760> scary<00:01:01.239> Firebase

at a much lower cost than scary Firebase

at a much lower cost than scary Firebase
for<00:01:02.039> pro<00:01:02.359> plans<00:01:03.039> you'll<00:01:03.399> get<00:01:03.840> what<00:01:04.000> you<00:01:04.080> would

for pro plans you'll get what you would

for pro plans you'll get what you would
otherwise<00:01:04.799> have<00:01:04.960> to<00:01:05.119> pay<00:01:05.320> in<00:01:05.479> Firebase<00:01:06.400> for

otherwise have to pay in Firebase for

otherwise have to pay in Firebase for
free<00:01:07.240> with<00:01:07.479> aite<00:01:08.479> but<00:01:08.840> what<00:01:09.000> are<00:01:09.119> we<00:01:09.280> building

free with aite but what are we building

free with aite but what are we building
the<00:01:10.119> app<00:01:10.439> you'll<00:01:10.640> build<00:01:11.240> contains<00:01:11.759> a<00:01:12.040> robust

the app you'll build contains a robust

the app you'll build contains a robust
and<00:01:12.920> stunning<00:01:13.520> authentication<00:01:14.320> system<00:01:15.080> a

and stunning authentication system a

and stunning authentication system a
homepage<00:01:15.880> for<00:01:16.240> exploring<00:01:16.840> posts<00:01:17.240> shared<00:01:17.640> by

homepage for exploring posts shared by

homepage for exploring posts shared by
others<00:01:18.439> with<00:01:18.640> top<00:01:18.960> creators<00:01:19.560> featured<00:01:19.960> on<00:01:20.079> the

others with top creators featured on the

others with top creators featured on the
right<00:01:20.880> the<00:01:21.040> ability<00:01:21.479> to<00:01:21.840> like<00:01:22.280> and<00:01:22.479> save<00:01:22.920> posts

right the ability to like and save posts

right the ability to like and save posts
accessible<00:01:24.200> through<00:01:24.439> a<00:01:24.680> separate<00:01:25.119> dedicated

accessible through a separate dedicated

accessible through a separate dedicated
page<00:01:26.520> and<00:01:26.880> you<00:01:27.040> might<00:01:27.280> think<00:01:27.920> here<00:01:28.079> we<00:01:28.240> go

page and you might think here we go

page and you might think here we go
again<00:01:29.119> another<00:01:29.880> Instagram<00:01:30.240> clone<00:01:30.920> but<00:01:31.159> trust

again another Instagram clone but trust

again another Instagram clone but trust
me<00:01:32.119> this<00:01:32.399> is<00:01:32.680> not<00:01:33.040> your<00:01:33.280> typical<00:01:33.759> app<00:01:34.280> sure

me this is not your typical app sure

me this is not your typical app sure
you've<00:01:35.119> probably<00:01:35.560> mastered<00:01:36.240> the<00:01:36.399> basics<00:01:36.720> of

you've probably mastered the basics of

you've probably mastered the basics of
crowd<00:01:37.439> operations<00:01:38.439> but<00:01:38.759> have<00:01:38.920> you<00:01:39.079> ever<00:01:39.360> had<00:01:39.520> a

crowd operations but have you ever had a

crowd operations but have you ever had a
chance<00:01:40.119> to<00:01:40.399> implement<00:01:40.960> that<00:01:41.280> one<00:01:41.680> incredible

chance to implement that one incredible

chance to implement that one incredible
feature<00:01:43.040> that's<00:01:43.280> had<00:01:43.439> us<00:01:43.720> all<00:01:44.079> hooked<00:01:44.439> for

feature that's had us all hooked for

feature that's had us all hooked for
decades<00:01:46.040> yes<00:01:46.560> the<00:01:46.759> infinite<00:01:47.119> scroll<00:01:47.759> we'll

decades yes the infinite scroll we'll

decades yes the infinite scroll we'll
implement<00:01:48.439> it<00:01:48.719> inside<00:01:49.200> the<00:01:49.360> explore<00:01:49.880> page

implement it inside the explore page

implement it inside the explore page
integrate<00:01:50.960> it<00:01:51.240> together<00:01:51.560> with<00:01:51.680> the<00:01:51.799> sech

integrate it together with the sech

integrate it together with the sech
functionality<00:01:53.320> and<00:01:53.560> I<00:01:53.640> will<00:01:53.920> teach<00:01:54.200> you<00:01:54.600> how

functionality and I will teach you how

functionality and I will teach you how
to<00:01:54.880> do<00:01:55.040> the<00:01:55.240> same<00:01:55.680> for<00:01:56.039> all<00:01:56.439> other<00:01:56.880> Pages<00:01:57.399> too

to do the same for all other Pages too

to do the same for all other Pages too
and<00:01:58.439> moving<00:01:58.759> to<00:01:59.079> other<00:01:59.320> phenomenal<00:01:59.880> features

and moving to other phenomenal features

and moving to other phenomenal features
will<00:02:00.840> develop<00:02:01.399> a<00:02:01.640> detailed<00:02:02.280> post<00:02:02.640> page<00:02:03.240> that

will develop a detailed post page that

will develop a detailed post page that
also<00:02:03.920> displays<00:02:04.600> related<00:02:05.159> posts<00:02:05.960> a<00:02:06.240> profile

also displays related posts a profile

also displays related posts a profile
page<00:02:07.039> showcasing<00:02:07.799> your<00:02:08.000> liked<00:02:08.360> posts<00:02:09.000> and<00:02:09.200> the

page showcasing your liked posts and the

page showcasing your liked posts and the
ability<00:02:09.759> to<00:02:10.000> edit<00:02:10.280> your<00:02:10.560> profile<00:02:11.440> similarly

ability to edit your profile similarly

ability to edit your profile similarly
browsing<00:02:12.800> other<00:02:13.080> users<00:02:13.599> and<00:02:13.879> their<00:02:14.160> profiles

browsing other users and their profiles

browsing other users and their profiles
a<00:02:15.200> create<00:02:15.599> post<00:02:16.000> page<00:02:16.239> for<00:02:16.440> sharing<00:02:17.080> all<00:02:17.360> kinds

a create post page for sharing all kinds

a create post page for sharing all kinds
of<00:02:17.760> memories<00:02:18.200> you<00:02:18.319> would<00:02:18.480> like<00:02:18.599> to<00:02:18.760> share<00:02:19.280> with

of memories you would like to share with

of memories you would like to share with
effortless<00:02:20.160> file<00:02:20.440> management<00:02:21.160> and<00:02:21.440> storage

effortless file management and storage

effortless file management and storage
and<00:02:22.560> a<00:02:22.800> drag<00:02:23.160> and<00:02:23.400> drop<00:02:23.800> feature<00:02:24.680> an<00:02:24.959> edit<00:02:25.319> post

and a drag and drop feature an edit post

and a drag and drop feature an edit post
page<00:02:26.000> to<00:02:26.239> edit<00:02:26.480> the<00:02:26.680> contents<00:02:27.080> of<00:02:27.239> your<00:02:27.440> post

page to edit the contents of your post

page to edit the contents of your post
anytime<00:02:28.920> and<00:02:29.239> so<00:02:29.480> much<00:02:29.920> more<00:02:30.400> with<00:02:30.560> an<00:02:30.800> amazing

anytime and so much more with an amazing

anytime and so much more with an amazing
responsive<00:02:32.120> UI<00:02:32.840> with<00:02:33.000> the<00:02:33.200> Bottom<00:02:33.560> bar<00:02:34.040> that

responsive UI with the Bottom bar that

responsive UI with the Bottom bar that
surely<00:02:34.640> gives<00:02:34.920> the<00:02:35.040> feel<00:02:35.440> of<00:02:35.560> a<00:02:35.800> native<00:02:36.239> mobile

surely gives the feel of a native mobile

surely gives the feel of a native mobile
app<00:02:37.160> does<00:02:37.360> it<00:02:37.480> sound<00:02:37.920> exciting<00:02:38.440> as<00:02:38.560> it<00:02:38.680> does<00:02:38.879> to

app does it sound exciting as it does to

app does it sound exciting as it does to
me<00:02:39.519> we'll<00:02:39.760> develop<00:02:40.280> all<00:02:40.480> of<00:02:40.720> these<00:02:41.200> all<00:02:41.599> well

me we'll develop all of these all well

me we'll develop all of these all well
learning<00:02:42.519> react<00:02:43.480> react<00:02:44.080> context<00:02:44.800> API<00:02:45.800> complex

learning react react context API complex

learning react react context API complex
react<00:02:46.680> routing<00:02:47.280> with<00:02:47.560> outlet<00:02:48.319> and

react routing with outlet and

react routing with outlet and
conditional<00:02:49.159> rendering<00:02:50.120> we'll<00:02:50.440> use<00:02:50.959> the

conditional rendering we'll use the

conditional rendering we'll use the
latest<00:02:51.680> version<00:02:52.560> 5.0<00:02:53.560> of<00:02:53.840> the<00:02:54.080> backand

latest version 5.0 of the backand

latest version 5.0 of the backand
agnostic<00:02:55.280> data<00:02:55.599> fetching<00:02:56.000> Library<00:02:56.840> famously

agnostic data fetching Library famously

agnostic data fetching Library famously
known<00:02:57.720> as<00:02:57.920> react<00:02:58.360> query<00:02:59.040> now<00:02:59.319> t<00:02:59.760> stack<00:03:00.000> query

known as react query now t stack query

known as react query now t stack query
that<00:03:00.920> will<00:03:01.239> allow<00:03:01.560> us<00:03:01.720> to<00:03:01.959> implement<00:03:02.760> autoc

that will allow us to implement autoc

that will allow us to implement autoc
caching<00:03:04.200> ref<00:03:04.560> fetching<00:03:05.400> parallel<00:03:05.879> queries<00:03:06.840> a

caching ref fetching parallel queries a

caching ref fetching parallel queries a
first<00:03:07.519> class<00:03:07.879> mutations<00:03:08.879> loading<00:03:09.599> State

first class mutations loading State

first class mutations loading State
Management<00:03:10.799> and<00:03:11.120> more<00:03:11.840> then<00:03:12.280> you'll<00:03:12.599> also

Management and more then you'll also

Management and more then you'll also
learn<00:03:13.200> Tailwind<00:03:14.280> shaten<00:03:15.280> ight<00:03:15.840> Cloud<00:03:16.239> as<00:03:16.360> a

learn Tailwind shaten ight Cloud as a

learn Tailwind shaten ight Cloud as a
backend<00:03:17.000> as<00:03:17.120> a<00:03:17.280> service<00:03:17.640> tool<00:03:18.519> and<00:03:18.840> everyone's

backend as a service tool and everyone's

backend as a service tool and everyone's
favorite<00:03:20.280> typescript<00:03:21.280> there<00:03:21.599> is<00:03:21.760> a<00:03:22.000> lot<00:03:22.200> to

favorite typescript there is a lot to

favorite typescript there is a lot to
learn<00:03:23.080> so<00:03:23.400> I<00:03:23.560> hope<00:03:23.840> you're<00:03:24.080> pumped<00:03:24.400> to<00:03:24.560> learn

learn so I hope you're pumped to learn

learn so I hope you're pumped to learn
these<00:03:25.080> exciting<00:03:25.480> features<00:03:26.120> and<00:03:26.360> master<00:03:26.840> the

these exciting features and master the

these exciting features and master the
Most<00:03:27.360> Wanted<00:03:27.760> skills<00:03:28.360> to<00:03:28.560> impress<00:03:29.000> potential

Most Wanted skills to impress potential

Most Wanted skills to impress potential
employees<00:03:29.720> ERS<00:03:30.360> and<00:03:30.799> clients<00:03:31.799> with<00:03:32.000> that<00:03:32.280> said

employees ERS and clients with that said

employees ERS and clients with that said
before<00:03:33.280> we<00:03:33.519> dive<00:03:33.799> into<00:03:34.000> the<00:03:34.120> development<00:03:34.640> of

before we dive into the development of

before we dive into the development of
this<00:03:35.080> app<00:03:35.640> there's<00:03:36.040> one<00:03:36.280> more<00:03:36.560> thing<00:03:36.840> that<00:03:37.000> we

this app there's one more thing that we

this app there's one more thing that we
must<00:03:37.519> do<00:03:38.280> and<00:03:38.519> that<00:03:38.680> is<00:03:39.040> set<00:03:39.280> up<00:03:39.439> an<00:03:39.640> account<00:03:40.040> on

must do and that is set up an account on

must do and that is set up an account on
aight<00:03:40.879> Cloud<00:03:41.480> so<00:03:41.840> right<00:03:42.040> now<00:03:42.599> click<00:03:42.879> the

aight Cloud so right now click the

aight Cloud so right now click the
special<00:03:43.599> link<00:03:43.840> in<00:03:44.000> the<00:03:44.159> description<00:03:44.879> that's

special link in the description that's

special link in the description that's
going<00:03:45.239> to<00:03:45.400> allow<00:03:45.640> you<00:03:45.799> to<00:03:45.959> follow<00:03:46.319> along<00:03:46.640> with

going to allow you to follow along with

going to allow you to follow along with
this<00:03:47.040> video<00:03:47.640> and<00:03:47.840> create<00:03:48.200> a<00:03:48.480> phenomenal

this video and create a phenomenal

this video and create a phenomenal
backend<00:03:49.760> with<00:03:49.920> an<00:03:50.120> aight<00:03:50.640> Cloud<00:03:51.239> once<00:03:51.400> you

backend with an aight Cloud once you

backend with an aight Cloud once you
click<00:03:51.840> it<00:03:52.159> their<00:03:52.400> homepage<00:03:52.799> is<00:03:52.879> going<00:03:53.040> to<00:03:53.280> open

click it their homepage is going to open

click it their homepage is going to open
and<00:03:54.120> then<00:03:54.360> you<00:03:54.439> can<00:03:54.640> go<00:03:54.799> to<00:03:55.079> sign<00:03:55.400> up<00:03:56.040> once

and then you can go to sign up once

and then you can go to sign up once
you're<00:03:56.400> in<00:03:56.799> you<00:03:56.920> can<00:03:57.159> sign<00:03:57.439> in<00:03:57.720> or<00:03:58.040> sign<00:03:58.319> up<00:03:58.799> the

you're in you can sign in or sign up the

you're in you can sign in or sign up the
simplest<00:03:59.280> way<00:03:59.400> to<00:03:59.480> do<00:03:59.799> it<00:04:00.040> is<00:04:00.200> using<00:04:00.560> GitHub

simplest way to do it is using GitHub

simplest way to do it is using GitHub
once<00:04:01.560> you're<00:04:01.760> in<00:04:02.159> you'll<00:04:02.360> have<00:04:02.480> to<00:04:02.599> create

once you're in you'll have to create

once you're in you'll have to create
your<00:04:03.079> first<00:04:03.519> project<00:04:04.200> use<00:04:04.560> JSM<00:04:05.040> to<00:04:05.239> start<00:04:05.560> with

your first project use JSM to start with

your first project use JSM to start with
and<00:04:06.239> then<00:04:06.439> add<00:04:06.599> an<00:04:06.760> underscore<00:04:07.439> and<00:04:07.720> add<00:04:07.920> your

and then add an underscore and add your

and then add an underscore and add your
app<00:04:08.439> name<00:04:08.959> I'm<00:04:09.040> going<00:04:09.159> to<00:04:09.319> choose<00:04:09.799> snapgram

app name I'm going to choose snapgram

app name I'm going to choose snapgram
but<00:04:11.000> you<00:04:11.120> can<00:04:11.280> choose<00:04:11.680> anything<00:04:12.040> else<00:04:12.720> maybe

but you can choose anything else maybe

but you can choose anything else maybe
something<00:04:13.760> with<00:04:13.959> just<00:04:14.120> a<00:04:14.280> bit<00:04:14.439> more

something with just a bit more

something with just a bit more
imagination<00:04:15.480> and<00:04:15.680> then<00:04:15.840> click<00:04:16.199> create

imagination and then click create

imagination and then click create
project<00:04:17.600> and<00:04:17.959> we<00:04:18.120> are<00:04:18.440> in<00:04:19.079> operate<00:04:19.600> cloud<00:04:20.000> is

project and we are in operate cloud is

project and we are in operate cloud is
going<00:04:20.320> to<00:04:20.560> allow<00:04:20.840> us<00:04:21.000> to<00:04:21.239> create<00:04:21.799> robust

going to allow us to create robust

going to allow us to create robust
secure<00:04:23.320> and<00:04:23.639> scalable<00:04:24.199> backend<00:04:24.840> applications

secure and scalable backend applications

secure and scalable backend applications
it<00:04:26.040> provides<00:04:26.479> sdks<00:04:27.400> and<00:04:27.600> server<00:04:28.040> functions

it provides sdks and server functions

it provides sdks and server functions
that<00:04:28.639> you<00:04:28.720> can<00:04:28.880> integrate<00:04:29.440> with<00:04:29.639> with<00:04:29.800> any

that you can integrate with with any

that you can integrate with with any
kind<00:04:30.160> of<00:04:30.280> framework<00:04:31.120> some<00:04:31.280> of<00:04:31.440> the<00:04:31.639> best

kind of framework some of the best

kind of framework some of the best
features<00:04:32.199> they<00:04:32.440> offer<00:04:33.039> and<00:04:33.280> at<00:04:33.400> the<00:04:33.560> same<00:04:33.840> time

features they offer and at the same time

features they offer and at the same time
the<00:04:34.320> features<00:04:34.759> we'll<00:04:35.080> use<00:04:35.600> to<00:04:35.800> create<00:04:36.160> this

the features we'll use to create this

the features we'll use to create this
project<00:04:37.000> are<00:04:37.639> o<00:04:38.360> where<00:04:38.639> you'll<00:04:38.880> be<00:04:39.000> able<00:04:39.199> to

project are o where you'll be able to

project are o where you'll be able to
add<00:04:39.919> specific<00:04:40.720> team-based<00:04:41.320> and

add specific team-based and

add specific team-based and
permission-based<00:04:42.840> security<00:04:43.840> they<00:04:44.080> offer<00:04:44.479> o

permission-based security they offer o

permission-based security they offer o
options<00:04:45.240> from<00:04:45.600> email<00:04:45.880> and<00:04:46.160> password<00:04:46.720> to<00:04:47.000> Magic

options from email and password to Magic

options from email and password to Magic
URLs<00:04:48.160> and<00:04:48.360> more<00:04:48.600> than<00:04:48.840> 30<00:04:49.639> social<00:04:50.360> sign-ins

URLs and more than 30 social sign-ins

URLs and more than 30 social sign-ins
the<00:04:51.400> next<00:04:51.600> thing<00:04:51.759> we'll<00:04:51.919> use<00:04:52.120> in<00:04:52.240> our<00:04:52.479> project

the next thing we'll use in our project

the next thing we'll use in our project
are<00:04:52.960> going<00:04:53.080> to<00:04:53.199> be<00:04:53.600> databases<00:04:54.600> you<00:04:54.720> can<00:04:54.960> add

are going to be databases you can add

are going to be databases you can add
more<00:04:55.520> than<00:04:55.680> one<00:04:55.960> database<00:04:56.560> for<00:04:56.880> a<00:04:57.080> specific

more than one database for a specific

more than one database for a specific
project<00:04:58.320> in<00:04:58.479> the<00:04:58.639> process<00:04:58.919> of<00:04:59.080> creating<00:04:59.400> it<00:04:59.919> is

project in the process of creating it is

project in the process of creating it is
super<00:05:00.479> simple<00:05:01.360> then<00:05:01.680> you<00:05:01.800> can<00:05:01.960> of<00:05:02.080> course<00:05:02.400> add

super simple then you can of course add

super simple then you can of course add
many<00:05:02.960> different<00:05:03.440> Collections<00:05:04.440> and<00:05:04.680> the<00:05:04.840> best

many different Collections and the best

many different Collections and the best
thing<00:05:05.320> is<00:05:05.880> each<00:05:06.160> collection<00:05:07.039> has<00:05:07.280> its<00:05:07.520> own

thing is each collection has its own

thing is each collection has its own
attributes<00:05:08.600> which<00:05:08.759> can<00:05:08.880> be<00:05:09.080> of<00:05:09.240> a<00:05:09.400> lot<00:05:09.560> of

attributes which can be of a lot of

attributes which can be of a lot of
different<00:05:10.039> types<00:05:10.759> and<00:05:11.080> you<00:05:11.280> have<00:05:11.680> advanced

different types and you have advanced

different types and you have advanced
permissions<00:05:13.240> on<00:05:13.520> a<00:05:13.759> collection<00:05:14.280> level<00:05:15.240> the

permissions on a collection level the

permissions on a collection level the
next<00:05:15.759> feature<00:05:16.240> I'll<00:05:16.440> also<00:05:16.720> teach<00:05:16.919> you<00:05:17.080> how<00:05:17.199> to

next feature I'll also teach you how to

next feature I'll also teach you how to
use<00:05:17.960> is<00:05:18.280> storage<00:05:19.160> it<00:05:19.319> allows<00:05:19.600> us<00:05:19.759> to<00:05:19.960> quickly

use is storage it allows us to quickly

use is storage it allows us to quickly
create<00:05:20.680> buckets<00:05:21.360> of<00:05:21.639> different<00:05:22.000> files<00:05:22.600> where

create buckets of different files where

create buckets of different files where
we<00:05:22.800> can<00:05:22.960> store<00:05:23.520> any<00:05:23.720> kind<00:05:23.840> of<00:05:24.039> images<00:05:25.000> and<00:05:25.199> even

we can store any kind of images and even

we can store any kind of images and even
export<00:05:26.000> them<00:05:26.199> and<00:05:26.360> transform<00:05:26.960> them<00:05:27.160> to<00:05:27.400> reduce

export them and transform them to reduce

export them and transform them to reduce
file<00:05:28.160> sizes<00:05:29.120> and<00:05:29.560> finally<00:05:29.960> there<00:05:30.120> are

file sizes and finally there are

file sizes and finally there are
cloud-based<00:05:31.240> serverless<00:05:32.039> functions<00:05:33.039> and<00:05:33.240> the

cloud-based serverless functions and the

cloud-based serverless functions and the
best<00:05:33.560> thing<00:05:33.720> about<00:05:34.000> aite<00:05:34.720> is<00:05:34.919> that<00:05:35.080> it<00:05:35.280> offers

best thing about aite is that it offers

best thing about aite is that it offers
all<00:05:35.919> of<00:05:36.160> these<00:05:36.360> features<00:05:36.919> for<00:05:37.240> free<00:05:37.960> setting

all of these features for free setting

all of these features for free setting
it<00:05:38.479> apart<00:05:38.919> from<00:05:39.160> traditional<00:05:39.880> backend

it apart from traditional backend

it apart from traditional backend
diservice<00:05:40.880> Tools<00:05:41.680> in<00:05:41.800> terms<00:05:42.039> of<00:05:42.280> pricing<00:05:42.759> and

diservice Tools in terms of pricing and

diservice Tools in terms of pricing and
value<00:05:43.639> and<00:05:43.800> because<00:05:44.039> of<00:05:44.240> that<00:05:44.600> it's<00:05:44.759> no

value and because of that it's no

value and because of that it's no
surprise<00:05:45.560> that<00:05:45.759> aide<00:05:46.440> has<00:05:46.600> become<00:05:47.039> a<00:05:47.240> trending

surprise that aide has become a trending

surprise that aide has become a trending
project<00:05:48.199> on<00:05:48.440> GitHub<00:05:49.120> so<00:05:49.560> now<00:05:49.759> that<00:05:49.880> you're<00:05:50.039> set

project on GitHub so now that you're set

project on GitHub so now that you're set
up<00:05:50.440> with<00:05:50.600> aide<00:05:51.280> and<00:05:51.520> hopefully<00:05:52.199> excited<00:05:52.800> for

up with aide and hopefully excited for

up with aide and hopefully excited for
what<00:05:53.199> we're<00:05:53.319> are<00:05:53.479> about<00:05:53.720> to<00:05:53.880> build<00:05:54.319> together

what we're are about to build together

what we're are about to build together
let's<00:05:55.199> Dive<00:05:55.520> Right<00:05:55.680> In<00:05:56.319> to<00:05:56.639> get<00:05:56.880> started<00:05:57.440> with

let's Dive Right In to get started with

let's Dive Right In to get started with
developing<00:05:58.240> our<00:05:58.560> phenomenal<00:05:59.240> in<00:05:59.479> Instagram

developing our phenomenal in Instagram

developing our phenomenal in Instagram
clone<00:06:00.360> application<00:06:01.319> we<00:06:01.440> can<00:06:01.639> start<00:06:02.000> by

clone application we can start by

clone application we can start by
creating<00:06:02.560> a<00:06:02.759> new<00:06:03.120> empty<00:06:03.560> folder<00:06:03.960> on<00:06:04.080> our

creating a new empty folder on our

creating a new empty folder on our
desktop<00:06:05.240> and<00:06:05.440> let's<00:06:05.680> call<00:06:05.880> it

desktop and let's call it

desktop and let's call it
snapgram<00:06:07.759> once<00:06:07.919> you<00:06:08.120> created<00:06:08.479> it<00:06:08.759> you<00:06:08.880> can

snapgram once you created it you can

snapgram once you created it you can
simply<00:06:09.440> drag<00:06:09.720> and<00:06:09.880> drop<00:06:10.160> it<00:06:10.400> into<00:06:10.639> your<00:06:10.840> code

simply drag and drop it into your code

simply drag and drop it into your code
editor<00:06:11.479> of<00:06:11.639> choice<00:06:12.240> in<00:06:12.440> this<00:06:12.639> case<00:06:13.080> Visual

editor of choice in this case Visual

editor of choice in this case Visual
Studio

Studio

Studio
code<00:06:15.639> once<00:06:15.840> you're<00:06:16.120> there<00:06:16.560> you<00:06:16.680> can<00:06:16.840> go<00:06:16.960> to<00:06:17.160> the

code once you're there you can go to the

code once you're there you can go to the
top<00:06:18.000> go<00:06:18.199> to<00:06:18.440> view<00:06:19.319> and<00:06:19.479> then

top go to view and then

top go to view and then
terminal<00:06:21.720> this<00:06:22.000> is<00:06:22.160> going<00:06:22.319> to<00:06:22.560> open<00:06:22.840> up<00:06:23.120> a

terminal this is going to open up a

terminal this is going to open up a
built-in<00:06:24.000> integrated<00:06:24.840> Visual<00:06:25.160> Studio<00:06:25.560> code

built-in integrated Visual Studio code

built-in integrated Visual Studio code
terminal<00:06:27.599> lately<00:06:28.080> we've<00:06:28.280> been<00:06:28.400> doing<00:06:28.599> a<00:06:28.720> lot

terminal lately we've been doing a lot

terminal lately we've been doing a lot
of<00:06:28.960> next<00:06:29.199> year<00:06:29.560> yes<00:06:30.000> so<00:06:30.360> I'm<00:06:30.560> quite<00:06:30.759> excited<00:06:31.120> to

of next year yes so I'm quite excited to

of next year yes so I'm quite excited to
get<00:06:31.479> back<00:06:31.639> to<00:06:31.840> react<00:06:32.240> a<00:06:32.440> bit<00:06:32.840> we're<00:06:33.039> going<00:06:33.120> to

get back to react a bit we're going to

get back to react a bit we're going to
use<00:06:33.639> vit<00:06:34.440> which<00:06:34.560> is<00:06:34.720> the<00:06:35.000> fastest<00:06:35.479> way<00:06:35.599> to<00:06:35.759> set

use vit which is the fastest way to set

use vit which is the fastest way to set
up<00:06:36.080> our<00:06:36.280> development<00:06:36.800> environment<00:06:37.479> for<00:06:37.759> react

up our development environment for react

up our development environment for react
so<00:06:39.080> head<00:06:39.199> to<00:06:39.440> VJs<00:06:40.240> dodev<00:06:40.919> and<00:06:41.120> click<00:06:41.400> get

so head to VJs dodev and click get

so head to VJs dodev and click get
started<00:06:43.520> once<00:06:43.680> you're<00:06:43.919> here<00:06:44.240> you<00:06:44.360> can<00:06:44.520> scroll

started once you're here you can scroll

started once you're here you can scroll
down<00:06:45.080> a<00:06:45.199> bit<00:06:45.680> and<00:06:45.840> you<00:06:45.919> can<00:06:46.080> see<00:06:46.400> that<00:06:46.520> you<00:06:46.599> can

down a bit and you can see that you can

down a bit and you can see that you can
initialize<00:06:47.319> your<00:06:47.479> V<00:06:47.800> application<00:06:48.479> by<00:06:48.599> running

initialize your V application by running

initialize your V application by running
mpm<00:06:49.599> create<00:06:50.280> V<00:06:50.759> at<00:06:51.120> latest<00:06:52.120> so<00:06:52.560> paste<00:06:52.880> that

mpm create V at latest so paste that

mpm create V at latest so paste that
Command<00:06:53.520> right<00:06:53.759> here<00:06:54.440> add<00:06:54.720> a<00:06:55.360> slash<00:06:55.759> to<00:06:55.919> create

Command right here add a slash to create

Command right here add a slash to create
it<00:06:56.319> in<00:06:56.440> the<00:06:56.560> current<00:06:56.919> snapgram<00:06:57.560> repository

it in the current snapgram repository

it in the current snapgram repository
we're<00:06:58.360> in<00:06:58.879> and<00:06:59.039> press

we're in and press

we're in and press
enter<00:07:00.919> this<00:07:01.039> is<00:07:01.199> going<00:07:01.360> to<00:07:01.560> ask<00:07:01.759> you<00:07:01.960> whether

enter this is going to ask you whether

enter this is going to ask you whether
you<00:07:02.240> want<00:07:02.400> to<00:07:02.560> install<00:07:02.919> the<00:07:03.080> create<00:07:03.400> feed

you want to install the create feed

you want to install the create feed
package<00:07:04.479> to<00:07:04.720> which<00:07:04.840> you're<00:07:04.960> going<00:07:05.080> to<00:07:05.240> say<00:07:05.680> why

package to which you're going to say why

package to which you're going to say why
or<00:07:06.400> yes<00:07:07.280> and<00:07:07.440> then<00:07:07.560> you<00:07:07.639> can<00:07:07.800> choose<00:07:08.280> which

or yes and then you can choose which

or yes and then you can choose which
type<00:07:08.720> of<00:07:08.879> application<00:07:09.280> you<00:07:09.400> want<00:07:09.520> to<00:07:09.680> run<00:07:10.280> in

type of application you want to run in

type of application you want to run in
this<00:07:10.639> case<00:07:10.840> we're<00:07:11.000> going<00:07:11.080> to<00:07:11.240> choose<00:07:11.960> react<00:07:12.960> we

this case we're going to choose react we

this case we're going to choose react we
will<00:07:13.360> use<00:07:13.639> typescript<00:07:14.280> so<00:07:14.400> you<00:07:14.479> can<00:07:14.680> press

will use typescript so you can press

will use typescript so you can press
enter<00:07:16.080> and<00:07:16.360> that's<00:07:16.560> it<00:07:17.039> you<00:07:17.160> can<00:07:17.319> run<00:07:17.560> mpm

enter and that's it you can run mpm

enter and that's it you can run mpm
install<00:07:18.599> to<00:07:18.840> install<00:07:19.240> all<00:07:19.400> the<00:07:19.599> necessary

install to install all the necessary

install to install all the necessary
dependencies<00:07:21.080> and<00:07:21.199> then<00:07:21.400> mpm<00:07:21.840> runev<00:07:22.520> to<00:07:22.720> see

dependencies and then mpm runev to see

dependencies and then mpm runev to see
it<00:07:23.199> in<00:07:23.360> our<00:07:23.960> browser<00:07:24.960> the<00:07:25.080> installation

it in our browser the installation

it in our browser the installation
usually<00:07:25.960> takes<00:07:26.240> just<00:07:26.360> a<00:07:26.520> couple<00:07:26.720> of<00:07:26.919> seconds

usually takes just a couple of seconds

usually takes just a couple of seconds
so<00:07:27.840> let's<00:07:28.080> wait<00:07:28.280> for<00:07:28.440> it<00:07:28.680> and<00:07:28.800> then<00:07:28.919> we'll<00:07:29.080> be

so let's wait for it and then we'll be

so let's wait for it and then we'll be
able<00:07:29.560> to<00:07:29.680> run<00:07:29.879> the<00:07:30.080> app<00:07:31.039> once<00:07:31.240> it<00:07:31.400> is<00:07:31.560> done

able to run the app once it is done

able to run the app once it is done
press<00:07:32.360> mpm<00:07:33.240> run<00:07:33.800> Dev<00:07:34.639> this<00:07:34.759> is<00:07:34.879> going<00:07:35.039> to<00:07:35.199> spin

press mpm run Dev this is going to spin

press mpm run Dev this is going to spin
up<00:07:35.560> our<00:07:35.759> application<00:07:36.400> on<00:07:36.639> Local<00:07:37.039> Host

up our application on Local Host

up our application on Local Host
5173<00:07:39.039> and<00:07:39.160> you<00:07:39.240> can<00:07:39.400> see<00:07:39.720> it<00:07:39.879> took<00:07:40.199> less<00:07:40.400> than<00:07:40.520> a

5173 and you can see it took less than a

5173 and you can see it took less than a
second<00:07:41.039> to<00:07:41.199> spin<00:07:41.440> it<00:07:41.599> up<00:07:42.400> so<00:07:42.639> hold<00:07:42.919> control<00:07:43.599> and

second to spin it up so hold control and

second to spin it up so hold control and
then<00:07:43.919> click<00:07:44.199> right<00:07:44.400> here<00:07:44.680> to<00:07:44.879> open<00:07:45.080> it<00:07:45.199> up<00:07:46.120> once

then click right here to open it up once

then click right here to open it up once
you<00:07:46.440> do<00:07:46.639> that<00:07:46.919> you'll<00:07:47.120> see<00:07:47.400> a<00:07:47.639> simple<00:07:48.240> V<00:07:48.680> and

you do that you'll see a simple V and

you do that you'll see a simple V and
react<00:07:49.960> starter<00:07:50.960> this<00:07:51.080> means<00:07:51.360> that<00:07:51.520> we<00:07:51.639> are

react starter this means that we are

react starter this means that we are
ready<00:07:52.199> to<00:07:52.400> get<00:07:52.560> started<00:07:52.960> with<00:07:53.120> creating<00:07:53.520> the

ready to get started with creating the

ready to get started with creating the
base<00:07:54.159> file<00:07:54.479> and<00:07:54.639> folder<00:07:55.039> structure<00:07:55.599> of<00:07:55.720> our

base file and folder structure of our

base file and folder structure of our
application<00:07:57.440> so<00:07:57.680> let's<00:07:57.840> start<00:07:58.080> from

application so let's start from

application so let's start from
beginning<00:07:59.479> here<00:07:59.800> we<00:08:00.000> have<00:08:00.240> our<00:08:00.520> source<00:08:01.240> inside

beginning here we have our source inside

beginning here we have our source inside
of<00:08:01.800> which<00:08:02.039> our<00:08:02.280> entire<00:08:02.720> application<00:08:03.240> will<00:08:03.440> be

of which our entire application will be

of which our entire application will be
here<00:08:04.360> we<00:08:04.520> have<00:08:04.800> assets<00:08:05.360> which<00:08:05.479> we<00:08:05.599> can<00:08:05.720> move<00:08:05.919> to

here we have assets which we can move to

here we have assets which we can move to
the<00:08:06.240> public<00:08:06.520> folder<00:08:07.039> just<00:08:07.280> to<00:08:07.440> clean<00:08:07.680> up<00:08:08.039> what

the public folder just to clean up what

the public folder just to clean up what
we<00:08:08.360> have<00:08:08.520> in<00:08:08.680> the<00:08:08.840> source<00:08:09.720> we're<00:08:09.879> going<00:08:10.000> to

we have in the source we're going to

we have in the source we're going to
have<00:08:10.400> a<00:08:10.599> couple<00:08:10.840> of<00:08:11.000> different<00:08:11.280> CSS<00:08:11.840> files<00:08:12.440> but

have a couple of different CSS files but

have a couple of different CSS files but
for<00:08:12.840> now<00:08:13.240> I<00:08:13.319> want<00:08:13.520> you<00:08:13.720> to<00:08:14.199> delete<00:08:14.919> everything

for now I want you to delete everything

for now I want you to delete everything
that's<00:08:15.680> inside<00:08:15.960> of<00:08:16.080> the<00:08:16.240> source<00:08:17.000> as<00:08:17.080> a<00:08:17.199> matter

that's inside of the source as a matter

that's inside of the source as a matter
of<00:08:17.520> fact<00:08:17.720> let's<00:08:17.919> delete<00:08:18.280> the<00:08:18.360> entire<00:08:18.720> Source

of fact let's delete the entire Source

of fact let's delete the entire Source
itself<00:08:20.400> because<00:08:20.639> we're<00:08:20.800> going<00:08:20.919> to<00:08:21.199> recreate

itself because we're going to recreate

itself because we're going to recreate
it<00:08:22.159> immediately<00:08:22.800> after<00:08:23.560> so<00:08:23.840> create<00:08:24.159> a<00:08:24.360> new

it immediately after so create a new

it immediately after so create a new
source<00:08:24.960> folder<00:08:25.560> so<00:08:25.759> we<00:08:25.840> can<00:08:26.039> start<00:08:26.520> from

source folder so we can start from

source folder so we can start from
scratch<00:08:28.080> and<00:08:28.280> the<00:08:28.400> main<00:08:28.639> point<00:08:28.840> of<00:08:29.000> cont<00:08:29.479> we

scratch and the main point of cont we

scratch and the main point of cont we
need<00:08:29.840> here<00:08:30.280> is<00:08:30.440> a<00:08:30.720> file<00:08:31.159> called<00:08:32.039> main.<00:08:33.279> TSX

need here is a file called main. TSX

need here is a file called main. TSX
this<00:08:34.399> is<00:08:34.560> the<00:08:34.719> starting<00:08:35.080> point<00:08:35.320> of<00:08:35.440> our

this is the starting point of our

this is the starting point of our
application<00:08:36.519> where<00:08:36.800> we<00:08:36.919> can<00:08:37.240> import<00:08:38.519> react

application where we can import react

application where we can import react
from<00:08:40.519> react<00:08:41.519> and<00:08:41.839> the<00:08:42.000> only<00:08:42.440> file<00:08:42.880> where<00:08:43.000> we're

from react and the only file where we're

from react and the only file where we're
going<00:08:43.200> to<00:08:43.399> import<00:08:43.880> react<00:08:44.320> Dom<00:08:44.839> from<00:08:45.080> react<00:08:45.519> Dom

going to import react Dom from react Dom

going to import react Dom from react Dom
as<00:08:45.959> well<00:08:46.839> once<00:08:47.040> you've<00:08:47.240> imported<00:08:47.680> it<00:08:48.080> you<00:08:48.200> can

as well once you've imported it you can

as well once you've imported it you can
say<00:08:48.720> react

say react

say react
dom.<00:08:50.839> create<00:08:51.560> root<00:08:52.360> this<00:08:52.480> is<00:08:52.600> the<00:08:52.760> root<00:08:53.040> or<00:08:53.240> the

dom. create root this is the root or the

dom. create root this is the root or the
starting<00:08:53.760> point<00:08:54.000> of<00:08:54.120> our<00:08:54.279> application<00:08:55.120> so<00:08:55.279> we

starting point of our application so we

starting point of our application so we
have<00:08:55.519> to<00:08:55.720> Target<00:08:56.080> our<00:08:56.279> root<00:08:56.800> by<00:08:56.920> saying

have to Target our root by saying

have to Target our root by saying
document.<00:08:58.279> getet<00:08:58.560> element

document. getet element

document. getet element
by<00:09:00.200> ID<00:09:01.000> and<00:09:01.160> we<00:09:01.399> pass<00:09:01.680> a<00:09:01.839> string<00:09:02.279> of<00:09:02.959> root<00:09:03.959> and

by ID and we pass a string of root and

by ID and we pass a string of root and
then<00:09:04.440> you<00:09:04.600> say.<00:09:05.600> render<00:09:06.600> and<00:09:06.800> inside<00:09:07.079> of<00:09:07.320> here

then you say. render and inside of here

then you say. render and inside of here
we<00:09:07.720> can<00:09:07.880> render<00:09:08.320> a<00:09:08.519> self-closing<00:09:09.519> app

we can render a self-closing app

we can render a self-closing app
component<00:09:10.920> of<00:09:11.079> course<00:09:11.440> this<00:09:11.720> app<00:09:12.079> has<00:09:12.200> to<00:09:12.399> be

component of course this app has to be

component of course this app has to be
created<00:09:13.120> and<00:09:13.320> imported<00:09:13.760> from<00:09:13.920> somewhere<00:09:14.480> so

created and imported from somewhere so

created and imported from somewhere so
let's<00:09:14.880> create<00:09:15.240> a<00:09:15.440> new<00:09:16.000> app.<00:09:16.640> TSX<00:09:18.040> page<00:09:19.040> this<00:09:19.160> is

let's create a new app. TSX page this is

let's create a new app. TSX page this is
going<00:09:19.480> to<00:09:19.600> be<00:09:19.760> our<00:09:20.040> primary<00:09:20.440> router<00:09:20.920> component

going to be our primary router component

going to be our primary router component
so<00:09:22.160> inside<00:09:22.519> of<00:09:22.720> there<00:09:23.160> run<00:09:23.600> ra

so inside of there run ra

so inside of there run ra
Ace<00:09:25.800> this<00:09:25.920> is<00:09:26.160> a<00:09:26.360> shortcut<00:09:26.880> to<00:09:27.079> create<00:09:27.399> a<00:09:27.600> react

Ace this is a shortcut to create a react

Ace this is a shortcut to create a react
Arrow<00:09:28.399> function<00:09:28.760> component

Arrow function component

Arrow function component
if<00:09:30.480> this<00:09:30.600> didn't<00:09:30.880> work<00:09:31.079> for<00:09:31.279> you<00:09:31.680> you<00:09:31.880> might

if this didn't work for you you might

if this didn't work for you you might
not<00:09:32.399> have<00:09:32.560> the<00:09:32.760> necessary<00:09:33.240> extension<00:09:33.640> to<00:09:33.800> do

not have the necessary extension to do

not have the necessary extension to do
so<00:09:34.399> so<00:09:34.600> head<00:09:34.760> to<00:09:34.959> extensions<00:09:35.720> and<00:09:35.920> type<00:09:36.320> es7

so so head to extensions and type es7

so so head to extensions and type es7
plus<00:09:38.120> react<00:09:38.760> Redux<00:09:39.399> react<00:09:39.800> native<00:09:40.120> Snippets

plus react Redux react native Snippets

plus react Redux react native Snippets
install<00:09:41.560> this<00:09:41.800> package<00:09:42.279> and<00:09:42.399> then<00:09:42.560> you'll<00:09:42.760> be

install this package and then you'll be

install this package and then you'll be
able<00:09:43.079> to<00:09:43.320> run<00:09:43.640> that<00:09:43.800> command<00:09:44.360> as<00:09:44.800> well<00:09:45.800> with

able to run that command as well with

able to run that command as well with
that<00:09:46.200> said<00:09:46.760> we<00:09:46.880> can<00:09:47.040> now<00:09:47.320> import<00:09:48.000> this<00:09:48.320> app

that said we can now import this app

that said we can now import this app
within<00:09:49.040> the<00:09:49.200> main<00:09:49.959> so<00:09:50.240> let's<00:09:50.440> simply

within the main so let's simply

within the main so let's simply
doubleclick<00:09:51.440> this<00:09:51.800> app<00:09:52.760> and<00:09:53.000> press<00:09:53.320> control

doubleclick this app and press control

doubleclick this app and press control
or<00:09:53.920> command<00:09:54.360> space<00:09:55.120> that's<00:09:55.320> going<00:09:55.440> to<00:09:55.680> open

or command space that's going to open

or command space that's going to open
this<00:09:56.240> up<00:09:56.560> which<00:09:56.680> is<00:09:56.800> going<00:09:56.959> to<00:09:57.200> allow<00:09:57.480> you<00:09:57.640> to

this up which is going to allow you to

this up which is going to allow you to
just<00:09:58.000> click<00:09:58.240> it<00:09:58.760> and<00:09:59.160> Auto<00:09:59.519> Import<00:10:00.040> we're

just click it and Auto Import we're

just click it and Auto Import we're
going<00:10:00.279> to<00:10:00.440> use<00:10:00.680> this<00:10:00.839> functionality<00:10:01.519> many

going to use this functionality many

going to use this functionality many
times<00:10:02.040> throughout<00:10:02.360> this<00:10:02.560> video<00:10:02.959> so<00:10:03.120> you'll

times throughout this video so you'll

times throughout this video so you'll
get<00:10:03.480> used<00:10:03.720> to<00:10:03.880> it<00:10:04.760> one<00:10:04.920> thing<00:10:05.079> that<00:10:05.200> I<00:10:05.320> noticed

get used to it one thing that I noticed

get used to it one thing that I noticed
is<00:10:06.040> that<00:10:06.240> create<00:10:06.600> root<00:10:06.920> doesn't<00:10:07.320> exist<00:10:07.640> in

is that create root doesn't exist in

is that create root doesn't exist in
react<00:10:08.240> Dom<00:10:08.720> and<00:10:08.839> that's<00:10:09.079> because<00:10:09.399> react<00:10:09.800> Dom

react Dom and that's because react Dom

react Dom and that's because react Dom
has<00:10:10.519> to<00:10:10.640> be<00:10:10.800> imported<00:10:11.320> from

has to be imported from

has to be imported from
react-dom<00:10:13.519> SL<00:10:14.200> client<00:10:15.200> and<00:10:15.320> then<00:10:15.560> here<00:10:15.959> this

react-dom SL client and then here this

react-dom SL client and then here this
is<00:10:16.279> potentially<00:10:16.720> null<00:10:17.200> so<00:10:17.320> we<00:10:17.480> have<00:10:17.600> to<00:10:17.800> also

is potentially null so we have to also

is potentially null so we have to also
add<00:10:18.399> an<00:10:18.560> exclamation<00:10:19.079> mark<00:10:19.399> at<00:10:19.519> the<00:10:19.640> end<00:10:20.040> so

add an exclamation mark at the end so

add an exclamation mark at the end so
typescript<00:10:20.760> doesn't<00:10:21.040> complain<00:10:21.839> and<00:10:22.040> no

typescript doesn't complain and no

typescript doesn't complain and no
longer<00:10:22.560> are<00:10:22.880> react<00:10:23.360> Imports<00:10:24.200> necessary<00:10:25.200> so

longer are react Imports necessary so

longer are react Imports necessary so
with<00:10:25.640> that<00:10:25.920> we<00:10:26.079> have<00:10:26.240> our<00:10:26.440> main<00:10:26.959> and<00:10:27.120> we<00:10:27.320> have

with that we have our main and we have

with that we have our main and we have
our<00:10:27.920> app<00:10:28.600> these<00:10:28.760> are<00:10:29.120> the<00:10:29.240> starting<00:10:29.560> points<00:10:29.880> of

our app these are the starting points of

our app these are the starting points of
our<00:10:30.399> application<00:10:31.399> if<00:10:31.480> you<00:10:31.680> go<00:10:31.959> back<00:10:32.440> and<00:10:32.680> zoom

our application if you go back and zoom

our application if you go back and zoom
in<00:10:33.200> really<00:10:33.440> closely<00:10:34.120> you<00:10:34.279> can<00:10:34.440> see<00:10:34.839> our<00:10:35.120> div

in really closely you can see our div

in really closely you can see our div
that<00:10:35.720> says<00:10:36.160> app<00:10:37.160> now<00:10:37.480> I<00:10:37.600> know<00:10:37.839> that<00:10:38.040> this<00:10:38.120> is<00:10:38.240> a

that says app now I know that this is a

that says app now I know that this is a
pretty<00:10:38.680> simple<00:10:39.040> start<00:10:39.800> and<00:10:39.959> you<00:10:40.120> might

pretty simple start and you might

pretty simple start and you might
already<00:10:40.600> know<00:10:40.880> how<00:10:40.959> to<00:10:41.120> set<00:10:41.360> all<00:10:41.480> of<00:10:41.600> this<00:10:41.920> up

already know how to set all of this up

already know how to set all of this up
but<00:10:43.240> let<00:10:43.360> me<00:10:43.560> just<00:10:43.760> remind<00:10:44.120> you<00:10:44.480> that<00:10:44.720> what

but let me just remind you that what

but let me just remind you that what
you're<00:10:45.120> about<00:10:45.360> to<00:10:45.519> build<00:10:45.839> today<00:10:46.519> is

you're about to build today is

you're about to build today is
extraordinary<00:10:48.240> it's<00:10:48.600> not<00:10:48.920> something<00:10:49.200> you've

extraordinary it's not something you've

extraordinary it's not something you've
built<00:10:49.639> so<00:10:49.839> far<00:10:50.320> we're<00:10:50.480> going<00:10:50.600> to<00:10:50.720> use<00:10:50.959> the<00:10:51.200> best

built so far we're going to use the best

built so far we're going to use the best
Technologies<00:10:52.079> today<00:10:52.760> to<00:10:53.079> create<00:10:53.399> a<00:10:53.639> complete

Technologies today to create a complete

Technologies today to create a complete
comprehensive<00:10:55.600> Instagram<00:10:56.360> clone<00:10:57.040> with

comprehensive Instagram clone with

comprehensive Instagram clone with
liking<00:10:58.000> saving<00:10:58.680> top<00:10:59.120> creators

liking saving top creators

liking saving top creators
functionalities<00:11:00.680> and<00:11:01.120> much<00:11:01.399> more<00:11:02.000> so<00:11:02.240> just

functionalities and much more so just

functionalities and much more so just
keep<00:11:02.800> watching<00:11:03.480> and<00:11:03.760> step<00:11:04.040> by<00:11:04.240> step<00:11:04.639> we'll<00:11:04.920> get

keep watching and step by step we'll get

keep watching and step by step we'll get
there<00:11:05.440> and<00:11:05.560> you'll<00:11:05.760> know<00:11:06.079> how<00:11:06.200> to<00:11:06.399> create<00:11:06.680> this

there and you'll know how to create this

there and you'll know how to create this
application<00:11:07.440> from

application from

application from
scratch<00:11:09.320> now<00:11:09.519> that<00:11:09.680> we<00:11:09.839> have<00:11:10.000> the<00:11:10.200> app<00:11:10.600> we<00:11:10.760> also

scratch now that we have the app we also

scratch now that we have the app we also
have<00:11:11.200> to<00:11:11.440> have<00:11:11.639> some<00:11:11.920> basic<00:11:12.279> styles<00:11:13.160> for<00:11:13.440> that

have to have some basic styles for that

have to have some basic styles for that
we're<00:11:13.800> going<00:11:13.920> to<00:11:14.040> create<00:11:14.320> a<00:11:14.480> new<00:11:14.720> file<00:11:15.160> called

we're going to create a new file called

we're going to create a new file called
global.<00:11:16.920> CSS<00:11:17.920> keep<00:11:18.079> in<00:11:18.240> mind<00:11:18.560> that<00:11:18.760> all<00:11:19.040> the

global. CSS keep in mind that all the

global. CSS keep in mind that all the
Tailwind<00:11:19.639> styling<00:11:20.040> that<00:11:20.160> we'll<00:11:20.320> be<00:11:20.440> doing

Tailwind styling that we'll be doing

Tailwind styling that we'll be doing
through<00:11:20.880> this<00:11:21.079> video<00:11:21.600> will<00:11:21.800> be<00:11:21.959> done<00:11:22.240> by<00:11:22.480> you

through this video will be done by you

through this video will be done by you
directly<00:11:23.519> within<00:11:24.000> components<00:11:25.000> but<00:11:25.279> we<00:11:25.440> have

directly within components but we have

directly within components but we have
to<00:11:25.760> have<00:11:25.920> some<00:11:26.120> helper<00:11:26.560> classes<00:11:27.000> here<00:11:27.279> to<00:11:27.440> make

to have some helper classes here to make

to have some helper classes here to make
her<00:11:27.839> life<00:11:28.000> a<00:11:28.120> bit<00:11:28.320> easier<00:11:29.240> so<00:11:29.519> in<00:11:29.680> the

her life a bit easier so in the

her life a bit easier so in the
description<00:11:30.279> down<00:11:30.480> below<00:11:30.920> you<00:11:31.040> can<00:11:31.240> find<00:11:31.519> a

description down below you can find a

description down below you can find a
GitHub<00:11:32.120> gist<00:11:32.600> that<00:11:32.760> contains<00:11:33.240> a<00:11:33.399> global<00:11:33.880> stat

GitHub gist that contains a global stat

GitHub gist that contains a global stat
CSS<00:11:34.680> file<00:11:35.560> copy<00:11:35.839> it<00:11:36.279> and<00:11:36.480> paste<00:11:36.720> it<00:11:36.880> here

CSS file copy it and paste it here

CSS file copy it and paste it here
you're<00:11:37.800> going<00:11:37.880> to<00:11:38.040> notice<00:11:38.440> that<00:11:38.720> here<00:11:39.120> we<00:11:39.320> have

you're going to notice that here we have

you're going to notice that here we have
some<00:11:39.760> helper<00:11:40.240> functions<00:11:40.800> for<00:11:41.040> the<00:11:41.240> top<00:11:41.519> bar

some helper functions for the top bar

some helper functions for the top bar
for<00:11:42.360> postcard<00:11:43.000> image<00:11:43.480> and<00:11:43.639> so<00:11:43.839> on<00:11:44.440> which<00:11:44.680> apply

for postcard image and so on which apply

for postcard image and so on which apply
multiple<00:11:45.680> Tailwind<00:11:46.120> CSS<00:11:46.639> classes<00:11:47.560> so<00:11:47.800> if<00:11:47.920> at

multiple Tailwind CSS classes so if at

multiple Tailwind CSS classes so if at
any<00:11:48.279> point<00:11:48.480> you<00:11:48.560> want<00:11:48.680> to<00:11:48.839> see<00:11:49.160> what<00:11:49.279> a<00:11:49.399> grid

any point you want to see what a grid

any point you want to see what a grid
container<00:11:50.160> is<00:11:50.920> it's<00:11:51.160> simply<00:11:51.560> a<00:11:51.760> set<00:11:51.920> of

container is it's simply a set of

container is it's simply a set of
utility<00:11:52.600> classes<00:11:53.320> to<00:11:53.680> make<00:11:53.920> that<00:11:54.120> grid

utility classes to make that grid

utility classes to make that grid
container<00:11:55.160> possible<00:11:56.160> so<00:11:56.560> with<00:11:56.760> that<00:11:56.959> said<00:11:57.279> we

container possible so with that said we

container possible so with that said we
can<00:11:57.639> import<00:11:58.160> the<00:11:58.279> global.<00:11:59.000> CSS<00:11:59.959> right<00:12:00.279> within

can import the global. CSS right within

can import the global. CSS right within
the<00:12:00.800> app<00:12:01.320> by<00:12:01.480> saying

the app by saying

the app by saying
import.<00:12:03.839> global.<00:12:04.839> CSS<00:12:05.839> but<00:12:06.079> hey<00:12:06.440> this<00:12:06.600> global.

import. global. CSS but hey this global.

import. global. CSS but hey this global.
CSS<00:12:07.760> file<00:12:08.120> is<00:12:08.279> using<00:12:08.600> Tailwind<00:12:09.480> so<00:12:09.760> let's<00:12:09.959> go

CSS file is using Tailwind so let's go

CSS file is using Tailwind so let's go
ahead<00:12:10.440> and<00:12:10.639> let's<00:12:10.800> set<00:12:11.000> up<00:12:11.320> tailwind<00:12:12.320> and<00:12:12.519> if

ahead and let's set up tailwind and if

ahead and let's set up tailwind and if
you<00:12:12.720> haven't<00:12:12.959> heard<00:12:13.160> of<00:12:13.279> Tailwind<00:12:14.040> Tailwind

you haven't heard of Tailwind Tailwind

you haven't heard of Tailwind Tailwind
is<00:12:14.720> a<00:12:15.000> phenomenal<00:12:15.920> utility<00:12:16.480> first<00:12:17.000> CSS

is a phenomenal utility first CSS

is a phenomenal utility first CSS
framework<00:12:18.360> pack<00:12:18.680> with<00:12:18.880> utility<00:12:19.360> classes<00:12:20.000> to

framework pack with utility classes to

framework pack with utility classes to
make<00:12:20.480> our<00:12:20.720> styling<00:12:21.279> simpler<00:12:22.199> it<00:12:22.360> doesn't

make our styling simpler it doesn't

make our styling simpler it doesn't
impose<00:12:23.240> rules<00:12:23.760> like<00:12:24.000> UI<00:12:24.320> libraries<00:12:24.839> do<00:12:25.480> but

impose rules like UI libraries do but

impose rules like UI libraries do but
rather<00:12:26.160> it<00:12:26.279> allows<00:12:26.600> you<00:12:26.720> to<00:12:26.920> create<00:12:27.399> custom

rather it allows you to create custom

rather it allows you to create custom
Styles<00:12:28.519> much<00:12:28.920> more<00:12:29.120> quickly<00:12:29.959> so<00:12:30.240> let's<00:12:30.480> click

Styles much more quickly so let's click

Styles much more quickly so let's click
get<00:12:31.040> started<00:12:32.040> and<00:12:32.199> let's<00:12:32.399> install<00:12:32.720> Tailwind

get started and let's install Tailwind

get started and let's install Tailwind
CSS<00:12:34.199> but<00:12:34.360> we<00:12:34.480> can<00:12:34.680> also<00:12:34.920> search<00:12:35.279> for<00:12:35.800> V<00:12:36.560> this<00:12:36.680> is

CSS but we can also search for V this is

CSS but we can also search for V this is
going<00:12:37.040> to<00:12:37.160> tell<00:12:37.360> us<00:12:37.639> how<00:12:37.760> to<00:12:37.920> install<00:12:38.279> Tailwind

going to tell us how to install Tailwind

going to tell us how to install Tailwind
with<00:12:39.320> vit<00:12:40.320> we<00:12:40.480> first<00:12:40.760> have<00:12:40.880> to<00:12:41.040> run<00:12:41.360> mpm

with vit we first have to run mpm

with vit we first have to run mpm
install<00:12:42.360> DD<00:12:43.040> Tailwind<00:12:43.519> CSS<00:12:44.040> post<00:12:44.360> CSS<00:12:44.880> and

install DD Tailwind CSS post CSS and

install DD Tailwind CSS post CSS and
auto<00:12:45.399> prefixer<00:12:46.160> so<00:12:46.440> back<00:12:46.600> in<00:12:46.720> our<00:12:47.000> app<00:12:47.399> you<00:12:47.480> can

auto prefixer so back in our app you can

auto prefixer so back in our app you can
go<00:12:47.760> to<00:12:47.959> terminal<00:12:48.639> and<00:12:48.760> let's<00:12:48.959> go<00:12:49.079> ahead<00:12:49.279> and

go to terminal and let's go ahead and

go to terminal and let's go ahead and
open<00:12:49.720> up<00:12:49.920> a<00:12:50.120> new<00:12:50.360> terminal<00:12:51.000> window<00:12:52.000> and<00:12:52.240> within

open up a new terminal window and within

open up a new terminal window and within
here<00:12:53.160> simply<00:12:53.800> paste<00:12:54.120> it<00:12:54.399> and<00:12:54.600> press<00:12:54.959> enter

here simply paste it and press enter

here simply paste it and press enter
this<00:12:56.000> is<00:12:56.120> going<00:12:56.240> to<00:12:56.399> install<00:12:56.800> the<00:12:56.959> necessary

this is going to install the necessary

this is going to install the necessary
packages<00:12:58.120> for<00:12:58.320> us<00:12:58.480> to<00:12:58.600> be<00:12:58.920> able<00:12:59.120> to<00:12:59.320> style

packages for us to be able to style

packages for us to be able to style
using<00:13:00.600> Tailwind<00:13:01.600> once<00:13:01.880> that<00:13:02.000> is<00:13:02.160> done<00:13:02.560> you<00:13:02.680> can

using Tailwind once that is done you can

using Tailwind once that is done you can
also<00:13:03.199> copy<00:13:03.480> and<00:13:03.680> paste<00:13:03.920> the<00:13:04.040> next

also copy and paste the next

also copy and paste the next
command<00:13:06.079> MPX<00:13:06.720> Tailwind<00:13:07.120> CSS<00:13:07.760> in<00:13:08.000> it-<00:13:09.079> P<00:13:10.079> this

command MPX Tailwind CSS in it- P this

command MPX Tailwind CSS in it- P this
is<00:13:10.320> going<00:13:10.480> to<00:13:10.680> initialize<00:13:11.279> and<00:13:11.480> create<00:13:11.839> the

is going to initialize and create the

is going to initialize and create the
necessary<00:13:12.560> projects<00:13:13.160> such<00:13:13.320> as<00:13:13.440> the<00:13:13.560> Tailwind

necessary projects such as the Tailwind

necessary projects such as the Tailwind
config<00:13:14.560> JS<00:13:15.560> next<00:13:15.920> you<00:13:16.079> have<00:13:16.199> to<00:13:16.360> configure

config JS next you have to configure

config JS next you have to configure
your<00:13:16.959> template<00:13:17.440> paths<00:13:18.120> so<00:13:18.320> simply<00:13:18.639> copy<00:13:18.920> the

your template paths so simply copy the

your template paths so simply copy the
content<00:13:19.480> from<00:13:19.720> here<00:13:20.199> and<00:13:20.360> go<00:13:20.519> to<00:13:20.720> Tailwind<00:13:21.199> doc

content from here and go to Tailwind doc

content from here and go to Tailwind doc
config.js<00:13:22.320> once<00:13:23.320> you're<00:13:23.600> there<00:13:24.160> simply

config.js once you're there simply

config.js once you're there simply
modify<00:13:25.000> this<00:13:25.199> content<00:13:25.880> to<00:13:26.440> what<00:13:26.720> we<00:13:26.920> copied

modify this content to what we copied

modify this content to what we copied
from<00:13:27.399> the<00:13:27.760> documentation<00:13:28.920> finally<00:13:29.519> add

from the documentation finally add

from the documentation finally add
tailing<00:13:30.240> directives<00:13:30.680> to<00:13:30.800> your

tailing directives to your

tailing directives to your
CSS<00:13:33.000> that's<00:13:33.199> going<00:13:33.360> to<00:13:33.480> be<00:13:33.639> within<00:13:33.920> the

CSS that's going to be within the

CSS that's going to be within the
globals<00:13:34.959> and<00:13:35.279> we<00:13:35.399> have<00:13:35.600> already<00:13:35.920> done<00:13:36.199> that

globals and we have already done that

globals and we have already done that
with<00:13:36.600> our<00:13:36.800> Global

with our Global

with our Global
CSS<00:13:38.800> finally<00:13:39.240> run<00:13:39.480> mpm<00:13:39.920> run<00:13:40.160> Dev<00:13:40.680> and<00:13:40.800> then<00:13:40.920> you

CSS finally run mpm run Dev and then you

CSS finally run mpm run Dev and then you
can<00:13:41.240> style<00:13:41.600> your<00:13:41.760> hello<00:13:42.120> world<00:13:42.920> with<00:13:43.160> a<00:13:43.320> couple

can style your hello world with a couple

can style your hello world with a couple
of<00:13:43.760> classes<00:13:44.320> to<00:13:44.480> see<00:13:44.800> if<00:13:44.959> it<00:13:45.600> works<00:13:46.600> so<00:13:46.920> back<00:13:47.079> in

of classes to see if it works so back in

of classes to see if it works so back in
our<00:13:47.519> app<00:13:47.880> we<00:13:48.000> can<00:13:48.120> now<00:13:48.320> modify<00:13:48.760> the<00:13:48.959> app<00:13:49.519> to<00:13:49.760> say

our app we can now modify the app to say

our app we can now modify the app to say
hello

hello

hello
snapgram<00:13:53.440> let's<00:13:53.680> save<00:13:54.120> it<00:13:55.120> and<00:13:55.399> back<00:13:55.560> in<00:13:55.680> our

snapgram let's save it and back in our

snapgram let's save it and back in our
app<00:13:56.320> we<00:13:56.440> can<00:13:56.600> see<00:13:56.800> that<00:13:56.959> this<00:13:57.079> is<00:13:57.199> now<00:13:57.360> on<00:13:57.519> H1

app we can see that this is now on H1

app we can see that this is now on H1
but<00:13:58.320> the<00:13:58.440> styles<00:13:58.959> don't<00:13:59.160> seem<00:13:59.360> to<00:13:59.480> be<00:13:59.680> applied

but the styles don't seem to be applied

but the styles don't seem to be applied
if<00:14:00.680> they<00:14:00.800> were<00:14:01.079> getting<00:14:01.360> applied<00:14:01.920> we<00:14:02.040> would<00:14:02.240> be

if they were getting applied we would be

if they were getting applied we would be
able<00:14:02.560> to<00:14:02.680> see<00:14:02.880> the

able to see the

able to see the
underline<00:14:04.720> so<00:14:04.959> to<00:14:05.160> make<00:14:05.279> it<00:14:05.480> work<00:14:05.800> there<00:14:05.880> are<00:14:06.000> a

underline so to make it work there are a

underline so to make it work there are a
couple<00:14:06.320> of<00:14:06.440> things<00:14:06.720> we<00:14:06.800> need<00:14:06.920> to<00:14:07.160> do<00:14:08.160> alongside

couple of things we need to do alongside

couple of things we need to do alongside
the<00:14:08.800> globals<00:14:09.480> we<00:14:09.639> also<00:14:09.880> have<00:14:10.000> to<00:14:10.199> modify<00:14:10.639> the

the globals we also have to modify the

the globals we also have to modify the
Tailwind<00:14:11.399> doc<00:14:11.680> config.js<00:14:12.440> to<00:14:13.040> include<00:14:13.399> some

Tailwind doc config.js to include some

Tailwind doc config.js to include some
additional<00:14:14.079> theming<00:14:14.560> options<00:14:15.120> for<00:14:15.360> our<00:14:15.560> great

additional theming options for our great

additional theming options for our great
application<00:14:17.279> so<00:14:17.600> in<00:14:17.720> the<00:14:17.880> description<00:14:18.320> down

application so in the description down

application so in the description down
below<00:14:19.040> you'll<00:14:19.240> be<00:14:19.360> able<00:14:19.560> to<00:14:19.720> find<00:14:20.040> a<00:14:20.240> modified

below you'll be able to find a modified

below you'll be able to find a modified
Tailwind<00:14:21.440> doc<00:14:21.680> config.js<00:14:22.360> file<00:14:23.160> which<00:14:23.279> you

Tailwind doc config.js file which you

Tailwind doc config.js file which you
can<00:14:23.600> simply<00:14:24.079> copy<00:14:24.680> and<00:14:24.839> then<00:14:25.120> paste<00:14:25.680> right

can simply copy and then paste right

can simply copy and then paste right
here<00:14:26.639> it's<00:14:26.839> going<00:14:27.000> to<00:14:27.160> include<00:14:27.519> some<00:14:27.720> font

here it's going to include some font

here it's going to include some font
families<00:14:28.800> can<00:14:28.959> use<00:14:29.759> widths<00:14:30.440> screen<00:14:30.880> sizes<00:14:31.600> but

families can use widths screen sizes but

families can use widths screen sizes but
more<00:14:32.040> importantly<00:14:32.800> colors<00:14:33.680> so<00:14:34.040> every<00:14:34.279> time<00:14:34.519> we

more importantly colors so every time we

more importantly colors so every time we
want<00:14:34.839> to<00:14:35.040> specify<00:14:35.519> this<00:14:35.680> dark<00:14:36.000> color<00:14:36.440> we<00:14:36.720> don't

want to specify this dark color we don't

want to specify this dark color we don't
have<00:14:37.040> to<00:14:37.160> say<00:14:37.639> 0909<00:14:38.639> 08<00:14:39.480> we<00:14:39.639> simply<00:14:39.959> say<00:14:40.240> dark<00:14:40.839> 2

have to say 0909 08 we simply say dark 2

have to say 0909 08 we simply say dark 2
and<00:14:42.040> the<00:14:42.160> second<00:14:42.440> thing<00:14:42.600> we<00:14:42.759> have<00:14:42.880> to<00:14:43.000> do<00:14:43.199> to

and the second thing we have to do to

and the second thing we have to do to
make<00:14:43.519> it<00:14:43.720> work<00:14:44.320> is<00:14:44.880> if<00:14:44.959> you<00:14:45.079> notice<00:14:45.440> here<00:14:45.639> we're

make it work is if you notice here we're

make it work is if you notice here we're
importing<00:14:46.360> something<00:14:46.680> known<00:14:47.000> as<00:14:47.240> Tailwind

importing something known as Tailwind

importing something known as Tailwind
CSS<00:14:48.440> animate<00:14:49.399> so<00:14:49.800> copy<00:14:50.199> that<00:14:50.839> go<00:14:51.040> to<00:14:51.199> your

CSS animate so copy that go to your

CSS animate so copy that go to your
terminal<00:14:52.360> and<00:14:52.519> then<00:14:52.720> you<00:14:52.880> have<00:14:52.959> to<00:14:53.079> run<00:14:53.360> mpm

terminal and then you have to run mpm

terminal and then you have to run mpm
install

install

install
dasd<00:14:56.560> and<00:14:56.720> then<00:14:57.000> Tailwind<00:14:57.480> CSS<00:14:58.199> animate<00:14:59.079> this

dasd and then Tailwind CSS animate this

dasd and then Tailwind CSS animate this
is<00:14:59.399> that<00:14:59.639> extra<00:15:00.040> plug-in<00:15:00.519> that's<00:15:00.680> going<00:15:00.839> to

is that extra plug-in that's going to

is that extra plug-in that's going to
allow<00:15:01.279> us<00:15:01.399> to<00:15:01.639> play<00:15:02.040> with<00:15:02.279> just<00:15:02.440> a<00:15:02.600> bit<00:15:02.800> more

allow us to play with just a bit more

allow us to play with just a bit more
animations<00:15:04.199> it<00:15:04.360> quickly<00:15:04.680> got<00:15:04.880> installed<00:15:05.880> you

animations it quickly got installed you

animations it quickly got installed you
can<00:15:06.199> go<00:15:06.399> back<00:15:06.600> to<00:15:06.720> your<00:15:06.880> application<00:15:07.759> press

can go back to your application press

can go back to your application press
contrl<00:15:08.360> C<00:15:08.639> to<00:15:08.800> stop<00:15:09.040> it<00:15:09.160> from<00:15:09.560> running<00:15:10.560> and

contrl C to stop it from running and

contrl C to stop it from running and
finally<00:15:11.240> rerun<00:15:11.680> the<00:15:11.839> application<00:15:12.480> by<00:15:12.639> running

finally rerun the application by running

finally rerun the application by running
mpm<00:15:13.720> run

mpm run

mpm run
Dev<00:15:15.759> and<00:15:16.120> quickly<00:15:16.680> our<00:15:16.959> application<00:15:17.560> is<00:15:17.880> up

Dev and quickly our application is up

Dev and quickly our application is up
and<00:15:18.199> running<00:15:18.680> on<00:15:18.959> Local<00:15:19.320> Host<00:15:19.920> 5173<00:15:20.920> and<00:15:21.079> we

and running on Local Host 5173 and we

and running on Local Host 5173 and we
can<00:15:21.279> see<00:15:21.480> that<00:15:21.639> this<00:15:21.800> H1<00:15:22.639> is<00:15:23.000> indeed

can see that this H1 is indeed

can see that this H1 is indeed
underlined<00:15:24.320> which<00:15:24.440> means<00:15:24.680> that<00:15:24.800> the<00:15:24.920> Tailwind

underlined which means that the Tailwind

underlined which means that the Tailwind
styles<00:15:25.759> are<00:15:25.959> getting<00:15:26.279> properly<00:15:26.720> installed

styles are getting properly installed

styles are getting properly installed
and<00:15:27.800> we<00:15:27.920> can<00:15:28.120> also<00:15:28.319> see<00:15:28.480> the<00:15:28.759> dark<00:15:29.040> background

and we can also see the dark background

and we can also see the dark background
which<00:15:29.839> means<00:15:30.079> that<00:15:30.199> our<00:15:30.440> base<00:15:30.920> styles<00:15:31.560> are

which means that our base styles are

which means that our base styles are
getting<00:15:32.160> properly<00:15:32.600> applied<00:15:33.480> and<00:15:33.680> in<00:15:33.800> a

getting properly applied and in a

getting properly applied and in a
nutshell<00:15:34.639> that<00:15:34.759> means<00:15:35.079> that<00:15:35.240> Tailwind<00:15:35.959> has

nutshell that means that Tailwind has

nutshell that means that Tailwind has
been<00:15:36.319> properly<00:15:36.800> set<00:15:37.000> up<00:15:37.560> so<00:15:37.880> what<00:15:38.000> should<00:15:38.199> we

been properly set up so what should we

been properly set up so what should we
do<00:15:38.519> next<00:15:39.360> well<00:15:39.639> let's<00:15:39.839> set<00:15:40.040> up<00:15:40.199> the<00:15:40.360> base

do next well let's set up the base

do next well let's set up the base
routing<00:15:41.199> of<00:15:41.319> our<00:15:41.519> application<00:15:42.399> by<00:15:42.600> creating<00:15:43.079> a

routing of our application by creating a

routing of our application by creating a
couple<00:15:43.519> of<00:15:43.680> routes<00:15:44.199> and<00:15:44.399> there<00:15:44.680> for<00:15:45.000> a<00:15:45.160> couple

couple of routes and there for a couple

couple of routes and there for a couple
of<00:15:45.600> pages<00:15:46.480> and<00:15:46.680> in<00:15:46.920> react<00:15:47.480> to<00:15:47.639> do<00:15:47.800> the<00:15:47.920> routing

of pages and in react to do the routing

of pages and in react to do the routing
you<00:15:48.600> have<00:15:48.720> to<00:15:48.880> install<00:15:49.240> an<00:15:49.440> additional

you have to install an additional

you have to install an additional
package<00:15:50.480> by<00:15:50.600> running<00:15:50.959> mpm<00:15:51.680> install<00:15:52.680> react

package by running mpm install react

package by running mpm install react
router<00:15:54.319> Dom<00:15:55.079> the<00:15:55.240> only<00:15:55.560> package<00:15:55.800> you<00:15:55.920> need<00:15:56.279> to

router Dom the only package you need to

router Dom the only package you need to
manage<00:15:56.800> the<00:15:56.959> routes<00:15:57.959> once<00:15:58.160> it<00:15:58.279> is<00:15:58.399> in

manage the routes once it is in

manage the routes once it is in
installed<00:15:59.519> we<00:15:59.600> can<00:15:59.839> head<00:16:00.079> to<00:16:00.240> the<00:16:00.440> main.<00:16:01.199> TSX

installed we can head to the main. TSX

installed we can head to the main. TSX
file<00:16:02.880> here<00:16:03.319> you<00:16:03.480> can<00:16:03.720> import<00:16:04.639> something<00:16:04.959> known

file here you can import something known

file here you can import something known
as<00:16:05.399> a<00:16:05.680> browser<00:16:06.399> router<00:16:07.319> coming<00:16:07.639> from

as a browser router coming from

as a browser router coming from
react-router-dom<00:16:10.000> and<00:16:10.880> then<00:16:11.160> we<00:16:11.319> can<00:16:11.519> wrap

react-router-dom and then we can wrap

react-router-dom and then we can wrap
our<00:16:12.199> application<00:16:13.199> in<00:16:13.680> a<00:16:14.000> browser<00:16:15.319> router<00:16:16.319> just

our application in a browser router just

our application in a browser router just
like

like

like
so<00:16:18.680> there<00:16:18.839> we<00:16:19.000> go<00:16:19.319> the<00:16:19.519> app<00:16:19.720> is<00:16:19.839> going<00:16:20.040> to<00:16:20.319> go

so there we go the app is going to go

so there we go the app is going to go
within<00:16:21.079> it<00:16:21.880> this<00:16:22.040> means<00:16:22.399> that<00:16:22.720> now<00:16:23.000> the

within it this means that now the

within it this means that now the
browser<00:16:23.519> router<00:16:23.959> is<00:16:24.079> going<00:16:24.279> to<00:16:24.480> control<00:16:25.120> the

browser router is going to control the

browser router is going to control the
routing<00:16:25.759> for<00:16:26.000> our<00:16:26.199> entire<00:16:26.800> application<00:16:27.800> which

routing for our entire application which

routing for our entire application which
may<00:16:28.519> makes<00:16:28.720> our<00:16:28.920> ab.<00:16:29.440> DSX<00:16:30.440> that<00:16:30.680> much<00:16:30.880> more

may makes our ab. DSX that much more

may makes our ab. DSX that much more
powerful<00:16:32.440> because<00:16:32.839> now<00:16:33.319> within<00:16:33.759> here<00:16:34.319> we<00:16:34.440> can

powerful because now within here we can

powerful because now within here we can
import<00:16:35.880> routes<00:16:36.839> as<00:16:37.000> well<00:16:37.240> as<00:16:37.399> a<00:16:37.680> route<00:16:38.600> from

import routes as well as a route from

import routes as well as a route from
react<00:16:40.120> router<00:16:41.079> Dom<00:16:42.079> once<00:16:42.279> you<00:16:42.440> do<00:16:42.680> that<00:16:43.120> you

react router Dom once you do that you

react router Dom once you do that you
can<00:16:43.519> wrap<00:16:44.040> everything<00:16:44.639> in<00:16:44.759> a<00:16:45.000> main<00:16:45.560> section

can wrap everything in a main section

can wrap everything in a main section
we'll<00:16:46.720> be<00:16:46.880> using<00:16:47.240> HTML<00:16:47.839> 5<00:16:48.160> semantic<00:16:48.720> tags<00:16:49.240> all

we'll be using HTML 5 semantic tags all

we'll be using HTML 5 semantic tags all
across<00:16:49.839> the<00:16:50.000> video<00:16:50.800> you<00:16:50.920> can<00:16:51.199> also<00:16:51.680> give<00:16:51.839> it<00:16:51.959> a

across the video you can also give it a

across the video you can also give it a
class<00:16:52.560> name<00:16:53.199> equal<00:16:53.519> to<00:16:54.519> flex<00:16:55.519> and<00:16:55.839> h-<00:16:56.480> Screen

class name equal to flex and h- Screen

class name equal to flex and h- Screen
meaning<00:16:57.560> it's<00:16:57.720> going<00:16:57.880> to<00:16:58.040> take<00:16:58.720> 100%<00:16:59.440> of<00:16:59.600> the

meaning it's going to take 100% of the

meaning it's going to take 100% of the
screen<00:17:00.839> now<00:17:01.079> you<00:17:01.199> can<00:17:01.319> see<00:17:01.560> how<00:17:01.720> I<00:17:01.839> quickly

screen now you can see how I quickly

screen now you can see how I quickly
hovered<00:17:02.560> over<00:17:02.800> it<00:17:03.079> and<00:17:03.199> I<00:17:03.279> can<00:17:03.440> see<00:17:03.920> exactly

hovered over it and I can see exactly

hovered over it and I can see exactly
what<00:17:04.640> CSS<00:17:05.199> properties<00:17:05.640> have<00:17:05.799> been<00:17:05.959> applied

what CSS properties have been applied

what CSS properties have been applied
this<00:17:06.959> is<00:17:07.079> a<00:17:07.280> pretty<00:17:07.480> cool<00:17:07.760> extension<00:17:08.120> for

this is a pretty cool extension for

this is a pretty cool extension for
Tailwind<00:17:09.000> so<00:17:09.160> if<00:17:09.240> you<00:17:09.360> don't<00:17:09.559> have<00:17:09.679> it<00:17:09.839> already

Tailwind so if you don't have it already

Tailwind so if you don't have it already
just<00:17:10.799> type<00:17:11.199> Tailwind<00:17:12.280> CSS<00:17:13.640> intellisense<00:17:14.640> the

just type Tailwind CSS intellisense the

just type Tailwind CSS intellisense the
first<00:17:15.079> extension<00:17:15.480> that<00:17:15.679> pops<00:17:15.959> up<00:17:16.640> install<00:17:17.079> it

first extension that pops up install it

first extension that pops up install it
and<00:17:17.880> if<00:17:18.000> you're<00:17:18.160> not<00:17:18.319> a<00:17:18.439> fan<00:17:18.600> of<00:17:18.720> Tailwind<00:17:19.400> you

and if you're not a fan of Tailwind you

and if you're not a fan of Tailwind you
can<00:17:19.679> still<00:17:19.880> follow<00:17:20.199> along<00:17:20.919> but<00:17:21.079> you'll<00:17:21.319> know

can still follow along but you'll know

can still follow along but you'll know
exactly<00:17:22.760> which<00:17:23.000> properties<00:17:23.559> are<00:17:23.760> getting

exactly which properties are getting

exactly which properties are getting
applied<00:17:25.000> for<00:17:25.160> the<00:17:25.280> ones<00:17:25.559> that<00:17:25.720> don't<00:17:26.079> get<00:17:26.280> this

applied for the ones that don't get this

applied for the ones that don't get this
hover<00:17:26.959> you<00:17:27.079> can<00:17:27.240> simply<00:17:27.520> search<00:17:27.919> them<00:17:28.240> here

hover you can simply search them here

hover you can simply search them here
here<00:17:29.320> and<00:17:29.440> then<00:17:29.559> you'll<00:17:29.760> be<00:17:29.880> able<00:17:30.080> to<00:17:30.240> find

here and then you'll be able to find

here and then you'll be able to find
them<00:17:30.799> within<00:17:31.080> global.<00:17:31.880> CSS<00:17:32.880> with<00:17:33.039> that<00:17:33.240> said

them within global. CSS with that said

them within global. CSS with that said
we<00:17:33.760> can<00:17:33.960> wrap<00:17:34.440> everything<00:17:35.160> in<00:17:35.440> a<00:17:35.720> routes

we can wrap everything in a routes

we can wrap everything in a routes
parent<00:17:37.640> within<00:17:37.880> the<00:17:38.039> routes<00:17:38.600> we'll<00:17:38.799> be<00:17:38.960> able

parent within the routes we'll be able

parent within the routes we'll be able
to<00:17:39.280> Define<00:17:39.720> two<00:17:40.039> types<00:17:40.280> of<00:17:40.480> routes<00:17:41.480> public

to Define two types of routes public

to Define two types of routes public
routes<00:17:43.000> and<00:17:43.360> also<00:17:44.200> private<00:17:45.280> routes<00:17:46.280> public

routes and also private routes public

routes and also private routes public
routes<00:17:46.960> are<00:17:47.160> the<00:17:47.360> routes<00:17:47.760> that<00:17:48.000> everybody

routes are the routes that everybody

routes are the routes that everybody
will<00:17:48.559> be<00:17:48.679> able<00:17:48.880> to<00:17:49.000> see<00:17:49.720> the<00:17:49.880> sign<00:17:50.120> up<00:17:50.480> and<00:17:50.640> the

will be able to see the sign up and the

will be able to see the sign up and the
sign<00:17:51.000> in<00:17:51.840> and<00:17:52.120> private<00:17:52.480> routes<00:17:52.840> are<00:17:53.000> the

sign in and private routes are the

sign in and private routes are the
routes<00:17:53.520> that<00:17:53.600> you'll<00:17:53.760> be<00:17:53.880> able<00:17:54.080> to<00:17:54.240> see<00:17:54.760> only

routes that you'll be able to see only

routes that you'll be able to see only
if<00:17:55.200> you're<00:17:55.400> signed<00:17:55.840> in<00:17:56.840> so<00:17:57.080> let's<00:17:57.280> create<00:17:57.520> our

if you're signed in so let's create our

if you're signed in so let's create our
two<00:17:57.960> first<00:17:58.440> routes<00:17:59.400> let's<00:17:59.640> do<00:18:00.120> a

two first routes let's do a

two first routes let's do a
route<00:18:02.760> which<00:18:02.880> is<00:18:03.000> going<00:18:03.159> to<00:18:03.240> be<00:18:03.360> a

route which is going to be a

route which is going to be a
self-closing

self-closing

self-closing
component<00:18:06.240> that's<00:18:06.480> going<00:18:06.640> to<00:18:06.760> have<00:18:06.880> a<00:18:07.159> pth<00:18:07.760> of

component that's going to have a pth of

component that's going to have a pth of
SL<00:18:08.880> sign

SL sign

SL sign
in<00:18:11.200> and<00:18:11.480> it's<00:18:11.640> going<00:18:11.760> to<00:18:11.880> render<00:18:12.240> an<00:18:12.440> element

in and it's going to render an element

in and it's going to render an element
of<00:18:14.360> sign<00:18:15.240> in<00:18:16.159> form<00:18:17.159> it's<00:18:17.320> going<00:18:17.480> to<00:18:17.559> be<00:18:17.679> a

of sign in form it's going to be a

of sign in form it's going to be a
self-closing

self-closing

self-closing
element<00:18:20.880> now<00:18:21.080> of<00:18:21.240> course<00:18:21.840> this<00:18:22.039> is<00:18:22.200> a<00:18:22.559> page<00:18:22.960> or

element now of course this is a page or

element now of course this is a page or
a<00:18:23.320> component<00:18:24.000> which<00:18:24.159> we<00:18:24.320> have<00:18:24.480> to<00:18:24.720> import

a component which we have to import

a component which we have to import
inside<00:18:25.679> of<00:18:25.880> here<00:18:26.720> and<00:18:26.919> we<00:18:27.039> can<00:18:27.200> also<00:18:27.480> repeat

inside of here and we can also repeat

inside of here and we can also repeat
this<00:18:28.120> with<00:18:28.440> our<00:18:28.600> first<00:18:28.919> private<00:18:29.240> route<00:18:29.799> so<00:18:29.960> we

this with our first private route so we

this with our first private route so we
can<00:18:30.200> say<00:18:30.559> route<00:18:31.559> self<00:18:32.000> close<00:18:32.240> it<00:18:33.240> give<00:18:33.400> it<00:18:33.559> an

can say route self close it give it an

can say route self close it give it an
index<00:18:34.919> this<00:18:35.080> means<00:18:35.360> that<00:18:35.520> this<00:18:35.600> is<00:18:35.760> the

index this means that this is the

index this means that this is the
starting<00:18:36.360> page<00:18:37.240> and<00:18:37.400> then<00:18:37.840> the<00:18:38.039> element<00:18:38.919> is

starting page and then the element is

starting page and then the element is
going<00:18:39.280> to<00:18:39.760> be<00:18:40.760> a<00:18:41.240> home<00:18:41.919> component<00:18:42.799> so<00:18:42.960> we<00:18:43.039> can

going to be a home component so we can

going to be a home component so we can
put<00:18:43.320> a<00:18:43.480> self-closing<00:18:44.400> home<00:18:44.760> component<00:18:45.280> right

put a self-closing home component right

put a self-closing home component right
here<00:18:46.520> now<00:18:46.679> of<00:18:46.840> course<00:18:47.039> we<00:18:47.200> have<00:18:47.280> to<00:18:47.480> import

here now of course we have to import

here now of course we have to import
these<00:18:48.120> components<00:18:48.600> from<00:18:48.799> somewhere<00:18:49.760> so<00:18:50.120> let's

these components from somewhere so let's

these components from somewhere so let's
create<00:18:50.720> the<00:18:50.880> structure<00:18:51.440> needed<00:18:51.760> to<00:18:51.919> do<00:18:52.080> so<00:18:53.080> in

create the structure needed to do so in

create the structure needed to do so in
the<00:18:53.360> source<00:18:53.679> folder<00:18:54.120> we're<00:18:54.280> going<00:18:54.360> to<00:18:54.520> create

the source folder we're going to create

the source folder we're going to create
two<00:18:55.320> new<00:18:55.679> folders<00:18:56.679> one<00:18:57.039> is<00:18:57.200> going<00:18:57.360> to<00:18:57.520> be

two new folders one is going to be

two new folders one is going to be
called<00:18:58.280> _<00:18:58.960> o<00:18:59.960> and<00:19:00.120> the<00:19:00.280> other<00:19:00.679> is<00:19:00.840> going<00:19:01.000> to<00:19:01.120> be

called _ o and the other is going to be

called _ o and the other is going to be
called<00:19:01.679> underscore<00:19:02.559> root<00:19:03.559> these<00:19:03.679> are<00:19:03.919> two

called underscore root these are two

called underscore root these are two
folders<00:19:04.760> that<00:19:04.880> are<00:19:05.000> going<00:19:05.159> to<00:19:05.360> make<00:19:05.480> it

folders that are going to make it

folders that are going to make it
simpler<00:19:06.320> for<00:19:06.480> us<00:19:06.640> to<00:19:06.840> know<00:19:07.360> what<00:19:07.520> is<00:19:07.760> public

simpler for us to know what is public

simpler for us to know what is public
and<00:19:08.440> what<00:19:08.600> is<00:19:08.760> not<00:19:09.360> within<00:19:09.760> oth<00:19:10.280> we're<00:19:10.440> going

and what is not within oth we're going

and what is not within oth we're going
to<00:19:10.760> create<00:19:11.120> a<00:19:11.280> new<00:19:11.720> folder<00:19:12.720> called<00:19:13.520> forms<00:19:14.520> and

to create a new folder called forms and

to create a new folder called forms and
within<00:19:15.080> forms<00:19:15.919> we're<00:19:16.080> going<00:19:16.159> to<00:19:16.440> have<00:19:16.840> our

within forms we're going to have our

within forms we're going to have our
signin<00:19:19.240> form.<00:19:20.600> TSX<00:19:21.600> where<00:19:21.880> we<00:19:22.000> can<00:19:22.159> run<00:19:22.880> rafc

signin form. TSX where we can run rafc

signin form. TSX where we can run rafc
this<00:19:24.000> is<00:19:24.120> going<00:19:24.280> to<00:19:24.480> create<00:19:24.880> a<00:19:25.039> simple<00:19:25.480> signin

this is going to create a simple signin

this is going to create a simple signin
form

form

form
component<00:19:27.840> Within<00:19:28.320> forms<00:19:28.760> we<00:19:28.880> can<00:19:29.000> also

component Within forms we can also

component Within forms we can also
create<00:19:29.559> another<00:19:29.880> one<00:19:30.240> which<00:19:30.360> is<00:19:30.480> going<00:19:30.640> to<00:19:30.799> be

create another one which is going to be

create another one which is going to be
signup<00:19:32.799> form.<00:19:33.799> TSX<00:19:34.760> we<00:19:34.919> can<00:19:35.159> also<00:19:35.440> run

signup form. TSX we can also run

signup form. TSX we can also run
RFC<00:19:37.400> and<00:19:37.760> outside<00:19:38.159> of<00:19:38.280> forms<00:19:38.919> but<00:19:39.200> inside<00:19:39.520> of

RFC and outside of forms but inside of

RFC and outside of forms but inside of
underscore<00:19:40.240> o<00:19:40.799> we<00:19:40.919> want<00:19:41.000> to<00:19:41.200> create<00:19:41.559> a

underscore o we want to create a

underscore o we want to create a
layout<00:19:43.280> o<00:19:44.039> layout.<00:19:45.320> TSX<00:19:46.320> and<00:19:46.520> there<00:19:46.679> we<00:19:46.799> can

layout o layout. TSX and there we can

layout o layout. TSX and there we can
run<00:19:47.200> our<00:19:47.520> efce<00:19:48.520> as<00:19:49.200> well<00:19:50.200> this<00:19:50.520> layout<00:19:51.080> is

run our efce as well this layout is

run our efce as well this layout is
going<00:19:51.480> to<00:19:51.760> wrap<00:19:52.440> both<00:19:52.640> of<00:19:52.799> our<00:19:53.159> signin<00:19:53.799> and

going to wrap both of our signin and

going to wrap both of our signin and
sign<00:19:54.280> up<00:19:54.679> forms<00:19:55.679> it's<00:19:55.880> going<00:19:56.039> to<00:19:56.240> have<00:19:56.440> things

sign up forms it's going to have things

sign up forms it's going to have things
like<00:19:56.880> the<00:19:57.039> logo<00:19:57.799> as<00:19:57.960> well<00:19:58.360> as<00:19:58.559> this<00:19:58.799> wonderful

like the logo as well as this wonderful

like the logo as well as this wonderful
image<00:19:59.640> gallery<00:20:00.080> that<00:20:00.240> appears<00:20:00.640> on<00:20:00.760> the<00:20:01.000> right

image gallery that appears on the right

image gallery that appears on the right
side<00:20:02.240> and<00:20:02.360> then<00:20:02.520> the<00:20:02.679> forms<00:20:03.280> will<00:20:03.559> change

side and then the forms will change

side and then the forms will change
depending<00:20:04.640> on<00:20:04.799> the<00:20:05.080> URL<00:20:06.080> how<00:20:06.360> cool<00:20:06.600> is<00:20:06.799> that

depending on the URL how cool is that

depending on the URL how cool is that
that's<00:20:07.440> why<00:20:07.600> we<00:20:07.760> have<00:20:07.919> this<00:20:08.120> generic<00:20:08.520> layout

that's why we have this generic layout

that's why we have this generic layout
but<00:20:09.320> then<00:20:09.600> components<00:20:10.200> are<00:20:10.360> going<00:20:10.440> to<00:20:10.559> be<00:20:10.679> the

but then components are going to be the

but then components are going to be the
ones<00:20:11.039> that<00:20:11.200> change<00:20:11.559> the<00:20:11.720> form<00:20:12.600> and<00:20:12.799> we're

ones that change the form and we're

ones that change the form and we're
going<00:20:13.000> to<00:20:13.159> have<00:20:13.280> a<00:20:13.480> similar<00:20:13.880> thing<00:20:14.240> for<00:20:14.480> our

going to have a similar thing for our

going to have a similar thing for our
root<00:20:15.600> within<00:20:15.880> the<00:20:16.000> root<00:20:16.440> we're<00:20:16.600> going<00:20:16.679> to<00:20:16.840> have

root within the root we're going to have

root within the root we're going to have
a<00:20:17.159> folder<00:20:17.760> called<00:20:18.320> Pages<00:20:19.320> within<00:20:19.720> Pages<00:20:20.200> we're

a folder called Pages within Pages we're

a folder called Pages within Pages we're
of<00:20:20.559> course<00:20:20.799> going<00:20:20.919> to<00:20:21.120> have<00:20:21.360> our<00:20:21.640> home.

of course going to have our home.

of course going to have our home.
DSX<00:20:24.240> where<00:20:24.400> we<00:20:24.520> can<00:20:24.640> run

DSX where we can run

DSX where we can run
rafc<00:20:26.400> but<00:20:26.640> outside<00:20:27.000> of<00:20:27.200> pages<00:20:27.679> we're<00:20:27.799> going<00:20:27.919> to

rafc but outside of pages we're going to

rafc but outside of pages we're going to
have<00:20:28.240> have<00:20:28.440> our<00:20:28.600> underscore<00:20:29.159> root<00:20:29.960> that's

have have our underscore root that's

have have our underscore root that's
going<00:20:30.320> to

going to

going to
contain<00:20:32.039> a<00:20:32.320> root<00:20:33.159> layout.<00:20:34.200> TSX<00:20:35.200> or<00:20:35.320> we<00:20:35.440> can

contain a root layout. TSX or we can

contain a root layout. TSX or we can
also<00:20:35.840> run<00:20:36.360> RFC<00:20:37.360> and<00:20:37.520> of<00:20:37.679> course<00:20:37.880> the<00:20:38.000> layout

also run RFC and of course the layout

also run RFC and of course the layout
for<00:20:38.400> the<00:20:38.520> homepages<00:20:39.159> is<00:20:39.280> going<00:20:39.440> to<00:20:39.600> contain

for the homepages is going to contain

for the homepages is going to contain
things<00:20:40.360> like<00:20:40.559> this<00:20:40.720> sidebar<00:20:41.159> on<00:20:41.240> the<00:20:41.400> left

things like this sidebar on the left

things like this sidebar on the left
sidebar<00:20:42.320> on<00:20:42.440> the<00:20:42.600> right<00:20:43.200> and<00:20:43.440> more<00:20:44.200> now<00:20:44.480> within

sidebar on the right and more now within

sidebar on the right and more now within
root<00:20:45.080> Pages<00:20:45.440> we're<00:20:45.600> going<00:20:45.720> to<00:20:45.840> have<00:20:46.120> many<00:20:46.400> many

root Pages we're going to have many many

root Pages we're going to have many many
different<00:20:47.000> pages<00:20:47.760> I<00:20:47.840> mean<00:20:48.240> tens<00:20:48.520> of<00:20:48.720> pages<00:20:49.200> by

different pages I mean tens of pages by

different pages I mean tens of pages by
when<00:20:49.520> we're<00:20:49.720> done<00:20:49.880> with<00:20:50.039> this<00:20:50.200> application<00:20:51.200> so

when we're done with this application so

when we're done with this application so
we<00:20:51.799> don't<00:20:52.000> want<00:20:52.200> to<00:20:52.360> Simply<00:20:52.760> import<00:20:53.240> each<00:20:53.440> one

we don't want to Simply import each one

we don't want to Simply import each one
in<00:20:53.760> a<00:20:53.919> new<00:20:54.159> line<00:20:54.760> so<00:20:54.919> we<00:20:55.000> can<00:20:55.159> create<00:20:55.480> a<00:20:55.679> new

in a new line so we can create a new

in a new line so we can create a new
index.ts<00:20:57.120> file<00:20:57.679> which<00:20:57.799> is<00:20:57.919> going<00:20:58.120> going<00:20:58.240> to

index.ts file which is going going to

index.ts file which is going going to
allow<00:20:58.600> us<00:20:58.720> to<00:20:58.919> import<00:20:59.280> them<00:20:59.480> in<00:20:59.600> a<00:20:59.720> cleaner<00:21:00.280> way

allow us to import them in a cleaner way

allow us to import them in a cleaner way
but<00:21:01.600> first<00:21:01.880> we<00:21:02.000> have<00:21:02.159> to<00:21:02.400> export<00:21:02.880> each

but first we have to export each

but first we have to export each
component<00:21:03.559> we<00:21:03.760> have<00:21:04.240> so<00:21:04.400> we<00:21:04.520> can<00:21:04.640> say<00:21:05.080> export

component we have so we can say export

component we have so we can say export
default<00:21:06.600> as<00:21:07.120> home<00:21:08.039> from

default as home from

default as home from
slome<00:21:11.080> and<00:21:11.320> now<00:21:11.760> we<00:21:11.880> can<00:21:12.240> close<00:21:12.679> all<00:21:12.840> of<00:21:13.039> these

slome and now we can close all of these

slome and now we can close all of these
new<00:21:13.440> open<00:21:13.760> files<00:21:14.760> go<00:21:15.000> back<00:21:15.159> to<00:21:15.320> the<00:21:15.559> app<00:21:16.360> we<00:21:16.440> can

new open files go back to the app we can

new open files go back to the app we can
automatically<00:21:17.640> import<00:21:18.200> signin<00:21:18.720> form

automatically import signin form

automatically import signin form
fromo<00:21:21.480> forms<00:21:22.080> signin<00:21:22.440> form<00:21:23.279> and<00:21:23.559> import<00:21:23.960> home

fromo forms signin form and import home

fromo forms signin form and import home
from<00:21:25.159> root<00:21:25.880> Pages<00:21:26.880> while<00:21:27.039> we're<00:21:27.320> here<00:21:27.679> we<00:21:27.799> can

from root Pages while we're here we can

from root Pages while we're here we can
duplicate<00:21:28.559> our<00:21:28.799> signin<00:21:29.279> routee<00:21:29.880> and<00:21:30.080> simply

duplicate our signin routee and simply

duplicate our signin routee and simply
exchange<00:21:30.760> it<00:21:30.960> for<00:21:31.360> sign<00:21:31.760> up<00:21:32.360> and<00:21:32.600> here<00:21:32.799> we<00:21:32.919> can

exchange it for sign up and here we can

exchange it for sign up and here we can
say<00:21:33.400> sign<00:21:33.799> up<00:21:34.080> form<00:21:34.760> which<00:21:34.880> we<00:21:35.000> can<00:21:35.240> also

say sign up form which we can also

say sign up form which we can also
import<00:21:36.200> from<00:21:36.480> o<00:21:37.159> forms<00:21:38.159> now<00:21:38.480> notice<00:21:39.279> how<00:21:39.559> for

import from o forms now notice how for

import from o forms now notice how for
the<00:21:40.279> O<00:21:40.840> forms<00:21:41.559> it<00:21:41.760> imported<00:21:42.240> them<00:21:42.520> as<00:21:42.799> default

the O forms it imported them as default

the O forms it imported them as default
Imports<00:21:44.600> whereas<00:21:45.000> for<00:21:45.200> the<00:21:45.360> home<00:21:45.919> it<00:21:46.120> imported

Imports whereas for the home it imported

Imports whereas for the home it imported
it<00:21:46.760> as<00:21:46.919> the<00:21:47.080> named<00:21:47.480> import<00:21:48.080> which<00:21:48.200> is<00:21:48.320> going<00:21:48.480> to

it as the named import which is going to

it as the named import which is going to
allow<00:21:48.919> us<00:21:49.039> to<00:21:49.240> later<00:21:49.520> on<00:21:50.039> import<00:21:50.480> page<00:21:50.760> one

allow us to later on import page one

allow us to later on import page one
page<00:21:51.799> two<00:21:52.440> and<00:21:52.600> all<00:21:52.840> the<00:21:52.960> other<00:21:53.200> Pages<00:21:53.760> within

page two and all the other Pages within

page two and all the other Pages within
a<00:21:54.279> single<00:21:54.679> line<00:21:55.120> to<00:21:55.320> keep<00:21:55.520> our<00:21:55.720> code<00:21:55.960> more<00:21:56.480> tidy

a single line to keep our code more tidy

a single line to keep our code more tidy
great<00:21:58.240> so<00:21:58.440> now<00:21:58.600> we<00:21:58.720> have<00:21:58.880> the<00:21:59.039> base<00:21:59.360> structure

great so now we have the base structure

great so now we have the base structure
and<00:22:00.400> you<00:22:00.559> know<00:22:00.840> how<00:22:01.000> the<00:22:01.159> routing<00:22:01.600> is<00:22:01.720> going<00:22:01.919> to

and you know how the routing is going to

and you know how the routing is going to
work<00:22:03.159> but<00:22:03.440> there's<00:22:03.799> one<00:22:04.080> missing<00:22:04.520> piece<00:22:05.320> we

work but there's one missing piece we

work but there's one missing piece we
haven't<00:22:05.760> utilized<00:22:06.440> our<00:22:06.679> layouts<00:22:07.480> and<00:22:07.760> the

haven't utilized our layouts and the

haven't utilized our layouts and the
react<00:22:08.159> router<00:22:08.520> Dom<00:22:09.039> allows<00:22:09.360> us<00:22:09.520> to<00:22:09.679> do<00:22:09.840> so

react router Dom allows us to do so

react router Dom allows us to do so
easily<00:22:11.039> you<00:22:11.159> can<00:22:11.360> create<00:22:11.679> a<00:22:11.840> new<00:22:12.120> route<00:22:13.120> just

easily you can create a new route just

easily you can create a new route just
like<00:22:13.480> the<00:22:13.600> routes<00:22:13.840> you<00:22:14.000> created<00:22:14.400> before<00:22:15.080> but

like the routes you created before but

like the routes you created before but
this<00:22:15.480> time<00:22:15.760> it's<00:22:15.919> not<00:22:16.120> going<00:22:16.279> to<00:22:16.400> be<00:22:16.520> self-

this time it's not going to be self-

this time it's not going to be self-
closing<00:22:18.360> it's<00:22:18.559> going<00:22:18.720> to<00:22:18.919> accept<00:22:19.240> an<00:22:19.640> element

closing it's going to accept an element

closing it's going to accept an element
which<00:22:20.799> is<00:22:20.919> going<00:22:21.080> to<00:22:21.240> be<00:22:21.520> the<00:22:21.760> O<00:22:22.279> layout<00:22:22.840> we

which is going to be the O layout we

which is going to be the O layout we
created<00:22:23.799> which<00:22:23.919> you<00:22:24.039> can<00:22:24.279> automatically

created which you can automatically

created which you can automatically
import<00:22:25.440> from<00:22:25.720> o<00:22:26.320> layout<00:22:27.320> and<00:22:27.480> then<00:22:27.640> with<00:22:28.120> in<00:22:28.200> it

import from o layout and then with in it

import from o layout and then with in it
we<00:22:28.559> can<00:22:28.799> place<00:22:29.200> additional<00:22:29.720> elements<00:22:30.640> or

we can place additional elements or

we can place additional elements or
pages<00:22:31.720> that<00:22:31.799> are<00:22:31.960> going<00:22:32.080> to<00:22:32.279> appear<00:22:32.640> there<00:22:33.440> how

pages that are going to appear there how

pages that are going to appear there how
clever<00:22:34.200> is<00:22:34.400> that<00:22:34.960> it<00:22:35.080> allows<00:22:35.360> you<00:22:35.480> to<00:22:35.640> use<00:22:36.000> the

clever is that it allows you to use the

clever is that it allows you to use the
layout<00:22:36.640> but<00:22:36.760> then<00:22:36.960> immediately<00:22:37.480> place<00:22:37.799> the

layout but then immediately place the

layout but then immediately place the
pages<00:22:38.600> using<00:22:38.919> that<00:22:39.120> layout<00:22:39.919> within<00:22:40.919> so<00:22:41.200> we<00:22:41.320> can

pages using that layout within so we can

pages using that layout within so we can
repeat<00:22:41.760> the<00:22:41.880> same<00:22:42.120> procedure<00:22:42.640> with<00:22:42.799> our

repeat the same procedure with our

repeat the same procedure with our
private<00:22:43.400> routes<00:22:43.799> as<00:22:44.159> well<00:22:44.919> where<00:22:45.080> we're<00:22:45.200> going

private routes as well where we're going

private routes as well where we're going
to<00:22:45.520> have<00:22:45.720> a

to have a

to have a
route<00:22:47.640> and<00:22:48.120> there<00:22:48.279> we're<00:22:48.440> going<00:22:48.520> to<00:22:48.679> have<00:22:48.799> an

route and there we're going to have an

route and there we're going to have an
element<00:22:49.919> of<00:22:50.919> root<00:22:51.960> layout<00:22:52.960> of<00:22:53.120> course<00:22:53.360> it<00:22:53.520> has

element of root layout of course it has

element of root layout of course it has
to<00:22:53.760> be<00:22:53.960> defined<00:22:54.400> as<00:22:54.520> a<00:22:54.679> self-closing

to be defined as a self-closing

to be defined as a self-closing
component<00:22:56.559> and<00:22:56.720> then<00:22:56.840> we<00:22:56.960> can<00:22:57.120> place<00:22:57.400> all<00:22:57.559> of

component and then we can place all of

component and then we can place all of
the<00:22:57.960> home<00:22:58.159> routes<00:22:59.120> right

the home routes right

the home routes right
here<00:23:02.120> great<00:23:02.880> so<00:23:03.120> now<00:23:03.320> you<00:23:03.400> can<00:23:03.520> see<00:23:03.720> we<00:23:03.880> have<00:23:04.120> a

here great so now you can see we have a

here great so now you can see we have a
lot<00:23:04.400> of<00:23:04.600> imports<00:23:05.279> already<00:23:06.279> but<00:23:06.600> we<00:23:06.720> have<00:23:06.880> done

lot of imports already but we have done

lot of imports already but we have done
a<00:23:07.240> great<00:23:07.600> job<00:23:07.919> in<00:23:08.120> setting<00:23:08.440> up<00:23:08.679> our<00:23:09.000> path<00:23:09.279> for

a great job in setting up our path for

a great job in setting up our path for
Success<00:23:10.440> so<00:23:10.640> now<00:23:10.880> going<00:23:11.200> back<00:23:11.400> to<00:23:11.600> Local<00:23:11.960> Host

Success so now going back to Local Host

Success so now going back to Local Host
5173<00:23:13.559> the<00:23:13.679> only<00:23:13.960> thing<00:23:14.120> we<00:23:14.200> can<00:23:14.360> see<00:23:14.679> is<00:23:14.840> the

5173 the only thing we can see is the

5173 the only thing we can see is the
root<00:23:15.240> layout<00:23:16.039> but<00:23:16.159> soon<00:23:16.440> enough<00:23:16.799> you'll<00:23:17.000> be

root layout but soon enough you'll be

root layout but soon enough you'll be
able<00:23:17.360> to<00:23:17.520> see<00:23:18.120> much<00:23:18.360> more<00:23:18.600> than<00:23:19.120> that<00:23:20.120> so<00:23:20.440> how

able to see much more than that so how

able to see much more than that so how
would<00:23:20.720> you<00:23:20.880> feel<00:23:21.320> if<00:23:21.440> I<00:23:21.559> told<00:23:21.799> you<00:23:21.919> we're<00:23:22.080> going

would you feel if I told you we're going

would you feel if I told you we're going
to<00:23:22.400> start<00:23:22.720> with<00:23:22.919> this<00:23:23.159> completely<00:23:23.799> custom<00:23:24.559> and

to start with this completely custom and

to start with this completely custom and
stunning<00:23:25.799> sign<00:23:26.120> up<00:23:26.600> and<00:23:27.000> sign<00:23:27.320> in<00:23:27.559> script

stunning sign up and sign in script

stunning sign up and sign in script
screen<00:23:28.799> after<00:23:29.080> all<00:23:29.559> for<00:23:29.840> our<00:23:30.080> social<00:23:30.400> media

screen after all for our social media

screen after all for our social media
app<00:23:31.000> to<00:23:31.200> work<00:23:31.760> we<00:23:31.960> first<00:23:32.279> have<00:23:32.400> to<00:23:32.600> onboard<00:23:33.200> our

app to work we first have to onboard our

app to work we first have to onboard our
users<00:23:34.279> that<00:23:34.440> are<00:23:34.640> later<00:23:34.919> on<00:23:35.240> going<00:23:35.400> to<00:23:35.640> upload

users that are later on going to upload

users that are later on going to upload
their<00:23:36.360> posts<00:23:37.320> most<00:23:37.600> likely<00:23:38.000> it's<00:23:38.159> going<00:23:38.320> to<00:23:38.440> be

their posts most likely it's going to be

their posts most likely it's going to be
cat<00:23:39.039> photos<00:23:39.559> as<00:23:39.679> it<00:23:39.840> usually<00:23:40.159> is<00:23:40.279> on<00:23:40.480> the

cat photos as it usually is on the

cat photos as it usually is on the
internet<00:23:41.360> but<00:23:41.679> that's<00:23:41.960> up<00:23:42.120> to<00:23:42.360> them<00:23:43.039> it's<00:23:43.240> up

internet but that's up to them it's up

internet but that's up to them it's up
to<00:23:43.640> us<00:23:44.039> to<00:23:44.240> allow<00:23:44.559> them<00:23:44.720> to<00:23:44.880> do<00:23:45.080> so<00:23:45.520> on<00:23:45.679> a

to us to allow them to do so on a

to us to allow them to do so on a
beautifully<00:23:46.360> designed<00:23:46.960> and<00:23:47.240> fast<00:23:47.919> platform

beautifully designed and fast platform

beautifully designed and fast platform
so<00:23:49.440> let's<00:23:49.720> jump<00:23:50.000> into<00:23:50.520> the<00:23:50.679> signup<00:23:51.159> form<00:23:52.039> the

so let's jump into the signup form the

so let's jump into the signup form the
first<00:23:52.600> thing<00:23:53.200> that<00:23:53.400> our<00:23:53.640> user<00:23:54.159> will<00:23:54.480> see<00:23:55.480> our

first thing that our user will see our

first thing that our user will see our
signup<00:23:56.200> form<00:23:56.679> will<00:23:56.880> be<00:23:57.120> just<00:23:57.440> that<00:23:58.080> a

signup form will be just that a

signup form will be just that a
form<00:24:00.200> and<00:24:00.480> in<00:24:00.720> this<00:24:00.960> application<00:24:01.720> we'll<00:24:01.919> be

form and in this application we'll be

form and in this application we'll be
using<00:24:02.760> Shad<00:24:03.400> CN<00:24:04.080> styling

using Shad CN styling

using Shad CN styling
Library<00:24:06.320> it<00:24:06.440> is<00:24:06.559> a<00:24:06.760> library<00:24:07.279> of<00:24:07.520> beautifully

Library it is a library of beautifully

Library it is a library of beautifully
designed<00:24:08.600> components<00:24:09.600> that<00:24:09.919> you<00:24:10.039> can

designed components that you can

designed components that you can
customize<00:24:11.240> using<00:24:12.080> Tailwind<00:24:13.080> everything<00:24:13.520> from

customize using Tailwind everything from

customize using Tailwind everything from
dashboards<00:24:14.960> cards<00:24:15.880> tasks<00:24:16.840> playgrounds<00:24:17.840> and

dashboards cards tasks playgrounds and

dashboards cards tasks playgrounds and
of<00:24:18.679> course<00:24:19.559> forms<00:24:20.559> you'll<00:24:20.799> be<00:24:20.960> able<00:24:21.120> to<00:24:21.279> create

of course forms you'll be able to create

of course forms you'll be able to create
wonderful<00:24:22.520> but<00:24:22.720> also<00:24:23.200> simple<00:24:23.720> and

wonderful but also simple and

wonderful but also simple and
minimalistic<00:24:25.120> forms<00:24:26.120> everything<00:24:26.480> you<00:24:26.600> need

minimalistic forms everything you need

minimalistic forms everything you need
is<00:24:27.520> there

is there

is there
so<00:24:28.720> to<00:24:28.919> get<00:24:29.080> started<00:24:29.480> with<00:24:29.640> chat<00:24:30.000> CN<00:24:30.480> we<00:24:30.559> can

so to get started with chat CN we can

so to get started with chat CN we can
head<00:24:30.880> through<00:24:31.039> their<00:24:31.399> documentation<00:24:32.399> and

head through their documentation and

head through their documentation and
then

then

then
installation<00:24:34.840> in<00:24:35.039> this<00:24:35.240> case<00:24:35.440> we're<00:24:35.640> using

installation in this case we're using

installation in this case we're using
vit<00:24:37.039> we<00:24:37.200> already<00:24:37.559> set<00:24:37.720> up<00:24:37.919> the<00:24:38.159> project<00:24:38.720> and<00:24:38.919> we

vit we already set up the project and we

vit we already set up the project and we
already<00:24:39.520> initialized<00:24:40.320> Tailwind<00:24:41.320> next<00:24:41.640> we

already initialized Tailwind next we

already initialized Tailwind next we
have<00:24:41.919> to<00:24:42.080> modify<00:24:42.520> our<00:24:42.799> TS<00:24:43.200> config.js<00:24:44.039> by

have to modify our TS config.js by

have to modify our TS config.js by
adding<00:24:45.440> this<00:24:45.679> thing<00:24:45.960> in<00:24:46.279> paths<00:24:47.200> so<00:24:47.559> we<00:24:47.640> can

adding this thing in paths so we can

adding this thing in paths so we can
open<00:24:48.039> up<00:24:48.240> our<00:24:48.440> file<00:24:48.799> explorer<00:24:49.640> and<00:24:49.840> then<00:24:50.000> go<00:24:50.159> to

open up our file explorer and then go to

open up our file explorer and then go to
TSC<00:24:50.799> config.js<00:24:51.880> so<00:24:52.880> press<00:24:53.200> copy<00:24:53.600> right<00:24:54.039> here

TSC config.js so press copy right here

TSC config.js so press copy right here
go<00:24:55.200> to<00:24:55.320> your<00:24:55.520> file<00:24:55.840> explorer<00:24:56.799> and<00:24:56.960> then<00:24:57.159> go<00:24:57.279> to

go to your file explorer and then go to

go to your file explorer and then go to
TS<00:24:57.880> config.js<00:24:58.720> right<00:24:59.720> here<00:25:00.159> below<00:25:00.480> linting

TS config.js right here below linting

TS config.js right here below linting
we're<00:25:01.480> going<00:25:01.640> to<00:25:01.919> add<00:25:02.360> a<00:25:02.720> Shad<00:25:03.399> CN<00:25:04.399> note<00:25:05.399> and<00:25:05.559> we

we're going to add a Shad CN note and we

we're going to add a Shad CN note and we
can<00:25:05.960> paste<00:25:06.399> the<00:25:06.559> base

can paste the base

can paste the base
URL<00:25:08.480> as<00:25:08.640> well<00:25:08.799> as<00:25:09.080> pads<00:25:09.840> but<00:25:10.000> don't<00:25:10.159> forget<00:25:10.440> to

URL as well as pads but don't forget to

URL as well as pads but don't forget to
add<00:25:10.880> a<00:25:11.080> comma<00:25:11.520> right<00:25:11.760> here<00:25:12.760> next<00:25:13.120> you<00:25:13.279> have<00:25:13.440> to

add a comma right here next you have to

add a comma right here next you have to
install<00:25:14.559> types

install types

install types
node<00:25:16.880> so<00:25:17.080> that<00:25:17.200> the<00:25:17.360> V<00:25:17.679> config<00:25:18.240> can<00:25:18.440> resolve

node so that the V config can resolve

node so that the V config can resolve
paths<00:25:19.360> without<00:25:19.760> errors<00:25:20.760> for<00:25:21.000> that<00:25:21.200> we<00:25:21.279> can

paths without errors for that we can

paths without errors for that we can
open<00:25:21.640> up<00:25:21.960> terminal<00:25:22.960> paste<00:25:23.279> it<00:25:23.679> and<00:25:23.880> press

open up terminal paste it and press

open up terminal paste it and press
enter<00:25:25.200> once<00:25:25.480> installed<00:25:26.159> we<00:25:26.279> can<00:25:26.520> also<00:25:27.080> copy

enter once installed we can also copy

enter once installed we can also copy
our

config.txt

config.txt
in<00:25:50.159> it<00:25:51.120> let's<00:25:51.360> press<00:25:51.720> y<00:25:52.000> to<00:25:52.159> install<00:25:52.520> it<00:25:53.240> and

in it let's press y to install it and

in it let's press y to install it and
then<00:25:53.520> we'll<00:25:53.679> have<00:25:53.799> to<00:25:54.000> answer<00:25:54.240> a<00:25:54.360> couple<00:25:54.600> of

then we'll have to answer a couple of

then we'll have to answer a couple of
questions<00:25:56.000> we<00:25:56.200> would<00:25:56.440> like<00:25:56.640> to<00:25:56.760> use

questions we would like to use

questions we would like to use
typescript<00:25:57.880> yes<00:25:58.600> we<00:25:58.720> would<00:25:58.880> like<00:25:59.080> a<00:25:59.240> default

typescript yes we would like a default

typescript yes we would like a default
style<00:26:00.399> yes<00:26:00.880> we're<00:26:01.039> going<00:26:01.120> to<00:26:01.279> use<00:26:01.600> the<00:26:01.799> Slate

style yes we're going to use the Slate

style yes we're going to use the Slate
Coler<00:26:03.440> our<00:26:03.760> Global<00:26:04.159> CSS<00:26:04.679> file<00:26:05.240> is<00:26:05.640> within

Coler our Global CSS file is within

Coler our Global CSS file is within
Source<00:26:07.559> SLG<00:26:08.440> global.<00:26:09.440> CSS<00:26:10.080> so<00:26:10.240> we<00:26:10.399> have<00:26:10.480> to

Source SLG global. CSS so we have to

Source SLG global. CSS so we have to
modify<00:26:11.559> that<00:26:12.559> we<00:26:12.720> do<00:26:12.960> want<00:26:13.120> to<00:26:13.240> use<00:26:13.480> CSS

modify that we do want to use CSS

modify that we do want to use CSS
variables<00:26:15.320> our<00:26:15.559> Tailwind<00:26:16.039> config<00:26:16.399> JS<00:26:16.799> file<00:26:17.279> is

variables our Tailwind config JS file is

variables our Tailwind config JS file is
located<00:26:18.480> right

located right

located right
here<00:26:20.320> so<00:26:20.480> we<00:26:20.600> can<00:26:20.720> simply<00:26:21.039> press<00:26:21.279> enter<00:26:22.159> and<00:26:22.360> we

here so we can simply press enter and we

here so we can simply press enter and we
can<00:26:22.640> press<00:26:22.840> enter<00:26:23.159> for<00:26:23.360> the<00:26:23.520> import<00:26:23.919> alas<00:26:24.559> as

can press enter for the import alas as

can press enter for the import alas as
well<00:26:25.320> for<00:26:25.559> utils<00:26:26.080> 2<00:26:26.799> and<00:26:26.960> we<00:26:27.080> do<00:26:27.240> want<00:26:27.320> to<00:26:27.440> use

well for utils 2 and we do want to use

well for utils 2 and we do want to use
use<00:26:27.840> react<00:26:28.120> server<00:26:28.440> components<00:26:29.279> and<00:26:29.440> we<00:26:29.559> can

use react server components and we can

use react server components and we can
write<00:26:30.039> a<00:26:30.240> configuration<00:26:30.880> so<00:26:31.080> simply<00:26:31.760> yes<00:26:32.039> yes

write a configuration so simply yes yes

write a configuration so simply yes yes
yes<00:26:32.760> enter<00:26:33.080> enter<00:26:33.360> enter<00:26:33.919> and<00:26:34.080> then<00:26:34.399> y<00:26:34.799> to

yes enter enter enter and then y to

yes enter enter enter and then y to
submit<00:26:35.440> it<00:26:36.279> this<00:26:36.399> is<00:26:36.520> going<00:26:36.679> to<00:26:36.840> install<00:26:37.159> the

submit it this is going to install the

submit it this is going to install the
necessary<00:26:37.799> dependencies<00:26:38.799> and<00:26:39.000> then<00:26:39.240> we'll<00:26:39.399> be

necessary dependencies and then we'll be

necessary dependencies and then we'll be
able<00:26:39.720> to<00:26:39.880> start<00:26:40.240> using<00:26:40.720> shaten<00:26:41.760> components

able to start using shaten components

able to start using shaten components
that's<00:26:43.159> it<00:26:43.559> this<00:26:43.720> was<00:26:43.880> the<00:26:44.039> last<00:26:44.240> step<00:26:44.559> right

that's it this was the last step right

that's it this was the last step right
here<00:26:45.320> now<00:26:45.480> a<00:26:45.679> big<00:26:45.960> difference<00:26:46.600> between<00:26:46.919> shaten

here now a big difference between shaten

here now a big difference between shaten
and<00:26:48.039> other<00:26:48.279> UI<00:26:48.640> libraries<00:26:49.600> is<00:26:49.720> that<00:26:49.880> shaten

and other UI libraries is that shaten

and other UI libraries is that shaten
with<00:26:50.799> this<00:26:51.000> config<00:26:51.760> didn't<00:26:52.200> add<00:26:52.640> absolutely

with this config didn't add absolutely

with this config didn't add absolutely
any<00:26:53.559> code<00:26:53.799> to<00:26:53.919> our<00:26:54.240> project<00:26:55.000> it<00:26:55.120> will<00:26:55.440> only<00:26:56.159> add

any code to our project it will only add

any code to our project it will only add
the<00:26:56.559> code<00:26:57.000> and<00:26:57.159> the<00:26:57.279> component<00:26:57.559> components

the code and the component components

the code and the component components
that<00:26:58.039> we<00:26:58.240> actually<00:26:58.600> need<00:26:59.200> so<00:26:59.360> we'll<00:26:59.559> have<00:26:59.679> to

that we actually need so we'll have to

that we actually need so we'll have to
manually<00:27:00.640> add<00:27:01.159> every<00:27:01.399> single<00:27:01.760> component<00:27:02.200> we

manually add every single component we

manually add every single component we
want<00:27:02.399> to<00:27:02.760> use<00:27:03.760> so<00:27:04.039> let's<00:27:04.200> use<00:27:04.399> their<00:27:04.640> button

want to use so let's use their button

want to use so let's use their button
example<00:27:05.320> to<00:27:05.559> start<00:27:05.880> with<00:27:06.600> copy<00:27:06.919> this<00:27:07.120> command

example to start with copy this command

example to start with copy this command
paste<00:27:08.399> it<00:27:08.559> in<00:27:08.679> the<00:27:08.799> terminal<00:27:09.640> and<00:27:09.840> press<00:27:10.640> enter

paste it in the terminal and press enter

paste it in the terminal and press enter
it's<00:27:11.760> going<00:27:11.919> to<00:27:12.039> say<00:27:12.320> installing<00:27:12.919> button<00:27:13.919> and

it's going to say installing button and

it's going to say installing button and
if<00:27:14.200> you<00:27:14.360> pay<00:27:14.559> close<00:27:14.880> attention<00:27:15.440> you'll<00:27:15.640> be

if you pay close attention you'll be

if you pay close attention you'll be
able<00:27:15.960> to<00:27:16.159> notice<00:27:16.559> that<00:27:16.720> it's<00:27:16.840> going<00:27:17.000> to<00:27:17.159> create

able to notice that it's going to create

able to notice that it's going to create
a<00:27:17.679> complete<00:27:18.240> new<00:27:18.520> folder<00:27:19.080> called<00:27:19.440> components

a complete new folder called components

a complete new folder called components
UI<00:27:21.360> and<00:27:21.559> there's<00:27:21.799> going<00:27:21.919> to<00:27:22.039> be<00:27:22.159> the<00:27:22.279> code<00:27:22.480> for

UI and there's going to be the code for

UI and there's going to be the code for
the<00:27:22.799> button<00:27:23.799> that's<00:27:24.120> why<00:27:24.279> shaten<00:27:24.919> is<00:27:25.000> so<00:27:25.240> cool

the button that's why shaten is so cool

the button that's why shaten is so cool
it<00:27:25.960> doesn't<00:27:26.360> add<00:27:26.640> any<00:27:26.840> code<00:27:27.080> you<00:27:27.159> don't<00:27:27.320> need

it doesn't add any code you don't need

it doesn't add any code you don't need
need<00:27:28.080> it<00:27:28.240> simply<00:27:28.720> adds<00:27:29.279> a<00:27:29.520> button<00:27:29.919> component

need it simply adds a button component

need it simply adds a button component
we<00:27:30.679> just<00:27:30.880> installed<00:27:31.880> and<00:27:32.080> you<00:27:32.200> can<00:27:32.399> modify<00:27:33.039> its

we just installed and you can modify its

we just installed and you can modify its
source<00:27:33.840> code<00:27:34.600> it's<00:27:34.760> not<00:27:34.960> like<00:27:35.080> we'll<00:27:35.240> need<00:27:35.440> to

source code it's not like we'll need to

source code it's not like we'll need to
do<00:27:35.840> that<00:27:36.279> but<00:27:36.559> you<00:27:36.760> can<00:27:37.080> if<00:27:37.200> you<00:27:37.360> want<00:27:37.559> to<00:27:38.399> so

do that but you can if you want to so

do that but you can if you want to so
with<00:27:38.960> that<00:27:39.159> said<00:27:39.640> now<00:27:39.840> we<00:27:40.000> have<00:27:40.320> everything

with that said now we have everything

with that said now we have everything
set<00:27:41.000> up<00:27:41.760> and<00:27:42.000> let's<00:27:42.200> try<00:27:42.399> to<00:27:42.600> use<00:27:42.960> that<00:27:43.159> button

set up and let's try to use that button

set up and let's try to use that button
within<00:27:43.880> our<00:27:44.080> signup<00:27:44.480> form<00:27:45.120> the<00:27:45.240> only<00:27:45.440> thing

within our signup form the only thing

within our signup form the only thing
you<00:27:45.640> need<00:27:45.799> to<00:27:45.919> do<00:27:46.200> to<00:27:46.360> do<00:27:46.600> that<00:27:47.080> is<00:27:47.440> import

you need to do to do that is import

you need to do to do that is import
button<00:27:48.200> from<00:27:48.480> component<00:27:48.960> UI<00:27:49.320> button<00:27:49.919> and<00:27:50.080> then

button from component UI button and then

button from component UI button and then
use<00:27:50.480> it<00:27:50.880> so<00:27:51.200> back<00:27:51.399> in<00:27:51.559> our<00:27:51.799> app<00:27:52.240> let's<00:27:52.440> do<00:27:52.720> just

use it so back in our app let's do just

use it so back in our app let's do just
that<00:27:53.519> import<00:27:53.960> button<00:27:54.399> we're<00:27:54.559> going<00:27:54.679> to<00:27:54.880> copy

that import button we're going to copy

that import button we're going to copy
this<00:27:55.559> button<00:27:56.559> and<00:27:56.799> just<00:27:56.960> use<00:27:57.120> it<00:27:57.279> right<00:27:57.640> here

this button and just use it right here

this button and just use it right here
within<00:27:58.279> this

within this

within this
div<00:28:00.399> let's<00:28:00.640> press<00:28:00.919> save<00:28:01.640> and<00:28:01.960> back<00:28:02.120> in<00:28:02.240> our

div let's press save and back in our

div let's press save and back in our
application<00:28:03.519> if<00:28:03.640> you<00:28:03.840> go<00:28:04.000> to<00:28:04.279> for<00:28:04.720> slash

application if you go to for slash

application if you go to for slash
sign-up<00:28:06.679> which<00:28:06.799> is<00:28:06.919> the<00:28:07.080> route<00:28:07.360> for<00:28:07.600> our

sign-up which is the route for our

sign-up which is the route for our
signup

signup

signup
page<00:28:09.799> you<00:28:09.880> can<00:28:10.039> see<00:28:10.240> the<00:28:10.440> O<00:28:10.960> layout<00:28:11.840> that's

page you can see the O layout that's

page you can see the O layout that's
correct<00:28:12.720> and<00:28:12.919> the<00:28:13.039> reason<00:28:13.240> for<00:28:13.519> that<00:28:13.880> is<00:28:14.120> that

correct and the reason for that is that

correct and the reason for that is that
our<00:28:14.880> o<00:28:15.360> layout<00:28:16.000> it's<00:28:16.240> not<00:28:16.440> returning<00:28:16.960> any

our o layout it's not returning any

our o layout it's not returning any
pages<00:28:17.679> that<00:28:17.799> are<00:28:18.000> within<00:28:18.279> it<00:28:18.960> so<00:28:19.240> to<00:28:19.360> be<00:28:19.519> able

pages that are within it so to be able

pages that are within it so to be able
to<00:28:19.799> see<00:28:20.120> this<00:28:20.279> button<00:28:20.919> let's<00:28:21.159> first<00:28:21.559> focus<00:28:22.000> on

to see this button let's first focus on

to see this button let's first focus on
implementing<00:28:22.840> the<00:28:23.039> O

implementing the O

implementing the O
layout<00:28:25.080> the<00:28:25.240> only<00:28:25.559> thing<00:28:25.720> we'll<00:28:25.960> need<00:28:26.240> in<00:28:26.480> here

layout the only thing we'll need in here

layout the only thing we'll need in here
are<00:28:27.480> two<00:28:27.840> special<00:28:28.240> components<00:28:28.799> from<00:28:29.000> react

are two special components from react

are two special components from react
router<00:28:29.840> Dom<00:28:30.840> so<00:28:31.080> let's<00:28:31.320> import<00:28:31.760> a<00:28:31.919> component

router Dom so let's import a component

router Dom so let's import a component
called<00:28:32.840> Outlet<00:28:33.840> interesting<00:28:34.279> name<00:28:34.640> I'm<00:28:34.760> going

called Outlet interesting name I'm going

called Outlet interesting name I'm going
to<00:28:35.000> soon<00:28:35.279> let<00:28:35.480> you<00:28:35.600> know<00:28:35.799> what<00:28:35.919> it<00:28:36.080> does<00:28:36.799> and

to soon let you know what it does and

to soon let you know what it does and
then<00:28:37.399> navigate<00:28:38.399> and<00:28:38.640> we<00:28:38.760> can<00:28:38.960> import<00:28:39.360> that

then navigate and we can import that

then navigate and we can import that
from<00:28:40.200> react<00:28:40.880> router

from react router

from react router
Dom<00:28:43.240> now<00:28:43.559> later<00:28:43.799> on<00:28:44.000> we'll<00:28:44.200> have<00:28:44.279> to<00:28:44.440> figure

Dom now later on we'll have to figure

Dom now later on we'll have to figure
out<00:28:44.960> if<00:28:45.080> a<00:28:45.240> user<00:28:45.640> is<00:28:46.080> authenticated<00:28:47.080> so<00:28:47.320> for

out if a user is authenticated so for

out if a user is authenticated so for
now<00:28:47.960> we<00:28:48.080> can<00:28:48.240> simply<00:28:48.559> say<00:28:48.960> is

now we can simply say is

now we can simply say is
authenticated<00:28:51.240> is<00:28:51.600> equal<00:28:51.919> to<00:28:52.519> let's<00:28:52.720> do<00:28:52.880> fals

authenticated is equal to let's do fals

authenticated is equal to let's do fals
for<00:28:53.519> now<00:28:54.240> later<00:28:54.519> on<00:28:55.039> this<00:28:55.159> is<00:28:55.320> going<00:28:55.480> to<00:28:55.640> be<00:28:55.840> a

for now later on this is going to be a

for now later on this is going to be a
dynamic<00:28:56.640> value<00:28:57.600> based<00:28:58.039> off<00:28:58.399> this<00:28:58.559> Boolean

dynamic value based off this Boolean

dynamic value based off this Boolean
variable<00:28:59.919> we<00:29:00.080> can<00:29:00.440> return<00:29:01.080> a<00:29:01.279> react

variable we can return a react

variable we can return a react
fragment<00:29:04.600> but<00:29:04.880> then<00:29:05.640> we<00:29:05.799> can<00:29:06.039> open<00:29:06.320> a<00:29:06.480> new

fragment but then we can open a new

fragment but then we can open a new
Dynamic<00:29:07.159> block<00:29:07.399> of<00:29:07.600> code<00:29:08.279> and<00:29:08.440> say<00:29:08.799> if<00:29:09.600> is

Dynamic block of code and say if is

Dynamic block of code and say if is
authenticated<00:29:11.799> in<00:29:12.080> that<00:29:12.320> case<00:29:12.720> if<00:29:12.880> we<00:29:13.039> are

authenticated in that case if we are

authenticated in that case if we are
authenticated<00:29:14.679> we<00:29:14.799> can<00:29:15.159> return<00:29:15.799> a<00:29:16.320> navigate

authenticated we can return a navigate

authenticated we can return a navigate
to<00:29:18.320> forward<00:29:18.840> slash<00:29:19.640> so<00:29:19.799> we<00:29:19.880> want<00:29:20.039> to<00:29:20.200> navigate

to forward slash so we want to navigate

to forward slash so we want to navigate
the<00:29:20.640> user<00:29:20.880> to<00:29:21.039> the<00:29:21.159> home<00:29:22.039> but<00:29:22.200> if<00:29:22.320> we're<00:29:22.600> not

the user to the home but if we're not

the user to the home but if we're not
authenticated<00:29:24.360> in<00:29:24.600> that<00:29:24.840> case<00:29:25.159> we<00:29:25.279> can

authenticated in that case we can

authenticated in that case we can
return<00:29:27.399> a<00:29:27.559> react

return a react

return a react
fragment<00:29:29.519> like<00:29:29.919> this<00:29:30.919> that's<00:29:31.120> going<00:29:31.320> to<00:29:31.559> have

fragment like this that's going to have

fragment like this that's going to have
a<00:29:32.120> section<00:29:32.720> within<00:29:33.399> it<00:29:34.399> and<00:29:34.720> that<00:29:34.960> section<00:29:35.440> is

a section within it and that section is

a section within it and that section is
going<00:29:35.720> to<00:29:35.840> render<00:29:36.240> the<00:29:36.440> outlet<00:29:37.440> meaning<00:29:38.159> what

going to render the outlet meaning what

going to render the outlet meaning what
has<00:29:38.559> to<00:29:38.760> be<00:29:39.000> on<00:29:39.159> the<00:29:39.360> page<00:29:39.559> we're<00:29:39.760> on<00:29:40.320> such<00:29:40.519> as

has to be on the page we're on such as

has to be on the page we're on such as
sign<00:29:41.159> up<00:29:41.600> or<00:29:41.840> sign<00:29:42.120> in<00:29:42.760> whatever<00:29:43.320> is<00:29:43.720> Within

sign up or sign in whatever is Within

sign up or sign in whatever is Within
These<00:29:44.720> pages<00:29:45.159> right<00:29:45.399> here<00:29:46.200> great<00:29:46.799> so<00:29:47.000> now

These pages right here great so now

These pages right here great so now
let's<00:29:47.440> save<00:29:47.760> this<00:29:48.480> go<00:29:48.720> back<00:29:48.880> to<00:29:49.039> our<00:29:49.279> app<00:29:50.120> and

let's save this go back to our app and

let's save this go back to our app and
you<00:29:50.440> can<00:29:50.600> see<00:29:50.880> a<00:29:51.039> wonderful<00:29:51.880> click<00:29:52.159> me<00:29:52.919> button

you can see a wonderful click me button

you can see a wonderful click me button
great<00:29:54.519> now<00:29:54.720> let's<00:29:54.919> go<00:29:55.120> back<00:29:55.279> to<00:29:55.399> the<00:29:55.559> normal

great now let's go back to the normal

great now let's go back to the normal
size<00:29:57.080> and<00:29:57.440> let's<00:29:57.720> actually<00:29:58.039> start

size and let's actually start

size and let's actually start
implementing<00:29:59.440> what<00:29:59.679> we<00:29:59.799> can<00:29:59.960> see<00:30:00.480> here<00:30:00.799> on<00:30:00.960> the

implementing what we can see here on the

implementing what we can see here on the
finished<00:30:01.480> website<00:30:02.440> a<00:30:02.679> complete<00:30:03.480> sign<00:30:03.760> up<00:30:04.159> and

finished website a complete sign up and

finished website a complete sign up and
sign-in<00:30:04.880> pages<00:30:05.519> with<00:30:05.720> the<00:30:05.919> design<00:30:06.720> and<00:30:07.080> the

sign-in pages with the design and the

sign-in pages with the design and the
forms<00:30:08.279> to<00:30:08.440> do<00:30:08.679> that<00:30:08.960> we<00:30:09.080> can<00:30:09.320> first<00:30:09.760> style<00:30:10.159> the

forms to do that we can first style the

forms to do that we can first style the
layout<00:30:10.679> a<00:30:11.120> bit<00:30:12.120> by<00:30:12.279> giving<00:30:12.559> this<00:30:12.760> section<00:30:13.279> A

layout a bit by giving this section A

layout a bit by giving this section A
Class<00:30:13.840> name<00:30:14.559> equal<00:30:14.880> to<00:30:15.640> flex<00:30:16.640> Flex

Class name equal to flex Flex

Class name equal to flex Flex
D1<00:30:19.159> justify<00:30:19.840> Dash

D1 justify Dash

D1 justify Dash
Center<00:30:21.919> so<00:30:22.080> we<00:30:22.200> need<00:30:22.320> to<00:30:22.440> ensure<00:30:22.720> that<00:30:22.880> the

Center so we need to ensure that the

Center so we need to ensure that the
form<00:30:23.440> is<00:30:23.679> centered<00:30:24.279> horizontally<00:30:25.279> as<00:30:25.440> well<00:30:25.679> as

form is centered horizontally as well as

form is centered horizontally as well as
items<00:30:26.760> Das<00:30:26.960> Center<00:30:27.600> which<00:30:27.720> is<00:30:27.840> going<00:30:28.000> to

items Das Center which is going to

items Das Center which is going to
center<00:30:28.399> it<00:30:28.880> vertically<00:30:29.880> it's<00:30:30.039> going<00:30:30.200> to<00:30:30.360> be

center it vertically it's going to be

center it vertically it's going to be
one<00:30:30.919> below<00:30:31.240> another<00:30:31.720> so<00:30:32.240> flex-all<00:30:33.240> and

one below another so flex-all and

one below another so flex-all and
padding<00:30:33.840> y<00:30:34.120> of<00:30:34.320> 10<00:30:34.760> meaning<00:30:35.120> padding<00:30:35.519> on<00:30:35.720> top

padding y of 10 meaning padding on top

padding y of 10 meaning padding on top
and<00:30:36.120> bottom<00:30:37.120> this<00:30:37.240> is<00:30:37.360> going<00:30:37.519> to<00:30:37.679> now<00:30:37.919> Center

and bottom this is going to now Center

and bottom this is going to now Center
it<00:30:38.760> but<00:30:38.919> on<00:30:39.080> the<00:30:39.279> right<00:30:39.519> side<00:30:39.640> of<00:30:39.760> the<00:30:39.880> screen

it but on the right side of the screen

it but on the right side of the screen
we<00:30:40.399> want<00:30:40.519> to<00:30:40.640> show<00:30:40.960> this<00:30:41.200> beautiful<00:30:41.720> image<00:30:42.600> so

we want to show this beautiful image so

we want to show this beautiful image so
to<00:30:42.960> do<00:30:43.159> that<00:30:43.480> we<00:30:43.600> can<00:30:43.720> render<00:30:44.080> a<00:30:44.440> self-closing

to do that we can render a self-closing

to do that we can render a self-closing
image<00:30:45.880> tag<00:30:46.880> that's<00:30:47.080> going<00:30:47.240> to<00:30:47.440> have<00:30:47.679> a<00:30:47.880> source

image tag that's going to have a source

image tag that's going to have a source
off<00:30:49.720> and<00:30:49.919> now<00:30:50.440> how<00:30:50.600> are<00:30:50.679> we<00:30:50.799> going<00:30:50.960> to<00:30:51.080> get

off and now how are we going to get

off and now how are we going to get
access<00:30:51.640> to<00:30:51.760> this<00:30:51.960> image<00:30:52.600> I<00:30:52.760> created<00:30:53.159> a<00:30:53.360> few

access to this image I created a few

access to this image I created a few
wonderful<00:30:54.200> assets<00:30:54.720> that<00:30:54.960> I<00:30:55.080> want<00:30:55.279> you<00:30:55.440> to<00:30:55.600> be

wonderful assets that I want you to be

wonderful assets that I want you to be
able<00:30:55.960> to<00:30:56.159> use<00:30:56.960> so<00:30:57.240> so<00:30:57.440> down<00:30:57.639> in<00:30:57.760> the

able to use so so down in the

able to use so so down in the
description<00:30:58.679> in<00:30:58.919> that<00:30:59.200> same<00:30:59.559> GitHub<00:30:59.919> gist

description in that same GitHub gist

description in that same GitHub gist
folder<00:31:00.720> where<00:31:00.880> the<00:31:01.039> code<00:31:01.320> is<00:31:01.679> you'll<00:31:01.880> be<00:31:02.000> able

folder where the code is you'll be able

folder where the code is you'll be able
to<00:31:02.360> find<00:31:02.679> a<00:31:02.880> link<00:31:03.279> to<00:31:03.480> a<00:31:03.679> zipped<00:31:04.200> public<00:31:04.519> folder

to find a link to a zipped public folder

to find a link to a zipped public folder
download<00:31:06.000> it<00:31:06.600> unzip<00:31:07.120> it<00:31:07.559> delete<00:31:08.120> the<00:31:08.320> existing

download it unzip it delete the existing

download it unzip it delete the existing
public<00:31:09.039> folder<00:31:10.000> and<00:31:10.200> then<00:31:10.519> simply<00:31:10.919> paste<00:31:11.240> the

public folder and then simply paste the

public folder and then simply paste the
new<00:31:11.600> one<00:31:12.320> right<00:31:13.240> here<00:31:14.240> not<00:31:14.559> within<00:31:14.799> the<00:31:14.919> source

new one right here not within the source

new one right here not within the source
like<00:31:15.519> I<00:31:15.720> did<00:31:16.120> it<00:31:16.320> happens<00:31:16.960> you<00:31:17.120> have<00:31:17.279> to<00:31:17.440> put<00:31:17.600> it

like I did it happens you have to put it

like I did it happens you have to put it
right<00:31:18.120> here<00:31:18.519> outside<00:31:19.240> of<00:31:19.480> everything<00:31:20.240> so<00:31:20.480> it

right here outside of everything so it

right here outside of everything so it
appears<00:31:21.120> on<00:31:21.519> top<00:31:21.880> of<00:31:22.039> the<00:31:22.159> source<00:31:22.720> folder<00:31:23.720> and

appears on top of the source folder and

appears on top of the source folder and
once<00:31:24.120> you<00:31:24.240> have<00:31:24.399> it<00:31:24.639> there<00:31:24.919> you'll<00:31:25.120> be<00:31:25.240> able<00:31:25.440> to

once you have it there you'll be able to

once you have it there you'll be able to
see<00:31:25.760> the<00:31:25.960> assets<00:31:26.519> that<00:31:26.679> contain<00:31:27.279> icons<00:31:28.000> and

see the assets that contain icons and

see the assets that contain icons and
images<00:31:29.840> which<00:31:30.000> means<00:31:30.559> that<00:31:30.720> we<00:31:30.840> can<00:31:31.080> Define

images which means that we can Define

images which means that we can Define
our<00:31:31.880> path<00:31:32.440> right<00:31:32.679> here<00:31:33.360> it's<00:31:33.519> going<00:31:33.679> to<00:31:33.799> be

our path right here it's going to be

our path right here it's going to be
for/<00:31:35.159> assets<00:31:36.159> slash<00:31:36.760> images

for/ assets slash images

for/ assets slash images
slide-img<00:31:40.519> do<00:31:41.120> SVG<00:31:42.120> the<00:31:42.279> alt<00:31:42.760> is<00:31:42.880> going<00:31:43.039> to<00:31:43.240> be

slide-img do SVG the alt is going to be

slide-img do SVG the alt is going to be
logo<00:31:44.360> and<00:31:44.679> class<00:31:45.080> name<00:31:45.519> is<00:31:45.720> going<00:31:45.880> to<00:31:46.080> be

logo and class name is going to be

logo and class name is going to be
hidden<00:31:47.519> so<00:31:47.760> usually<00:31:48.080> on<00:31:48.240> mobile<00:31:48.600> devices<00:31:49.080> it

hidden so usually on mobile devices it

hidden so usually on mobile devices it
will<00:31:49.320> be<00:31:49.519> hidden<00:31:50.399> but<00:31:50.559> on<00:31:50.760> extra<00:31:51.240> large

will be hidden but on extra large

will be hidden but on extra large
devices<00:31:52.240> it<00:31:52.360> will<00:31:52.519> be<00:31:52.679> showing<00:31:53.240> so<00:31:53.399> it's<00:31:53.480> a

devices it will be showing so it's a

devices it will be showing so it's a
block<00:31:54.840> we<00:31:54.960> wanted<00:31:55.279> to<00:31:55.440> take<00:31:55.639> the<00:31:55.799> full<00:31:56.240> height

block we wanted to take the full height

block we wanted to take the full height
of<00:31:56.639> the<00:31:56.760> screen<00:31:57.360> so<00:31:57.519> h-<00:31:58.080> screen<00:31:59.080> the<00:31:59.240> width<00:31:59.559> is

of the screen so h- screen the width is

of the screen so h- screen the width is
going<00:31:59.840> to<00:32:00.000> be<00:32:00.159> 1/2<00:32:00.880> so<00:32:01.120> 1/<00:32:01.639> two<00:32:02.600> it's<00:32:02.760> going<00:32:02.919> to

going to be 1/2 so 1/ two it's going to

going to be 1/2 so 1/ two it's going to
be<00:32:03.360> object<00:32:03.799> cover<00:32:04.679> and<00:32:05.159> BG<00:32:05.840> no<00:32:06.799> repeat<00:32:07.799> great

be object cover and BG no repeat great

be object cover and BG no repeat great
so<00:32:08.799> now<00:32:09.039> that<00:32:09.200> we<00:32:09.279> have<00:32:09.440> modified<00:32:10.000> our<00:32:10.200> o

so now that we have modified our o

so now that we have modified our o
layout<00:32:11.320> we<00:32:11.440> can<00:32:11.639> close<00:32:11.960> it<00:32:12.760> and<00:32:13.000> if<00:32:13.159> we<00:32:13.320> go<00:32:13.559> back

layout we can close it and if we go back

layout we can close it and if we go back
to<00:32:13.880> our<00:32:14.080> website<00:32:14.720> it's<00:32:14.919> going<00:32:15.080> to<00:32:15.320> look<00:32:15.639> like

to our website it's going to look like

to our website it's going to look like
this<00:32:16.639> pretty<00:32:16.919> cool<00:32:17.279> right<00:32:17.760> we<00:32:17.919> have<00:32:18.039> the<00:32:18.240> right

this pretty cool right we have the right

this pretty cool right we have the right
side<00:32:18.760> which<00:32:18.880> is<00:32:19.000> the<00:32:19.159> image<00:32:19.760> and<00:32:19.960> then<00:32:20.200> we<00:32:20.320> have

side which is the image and then we have

side which is the image and then we have
the<00:32:20.639> button<00:32:20.960> on<00:32:21.200> the<00:32:21.360> left<00:32:21.600> side<00:32:22.279> which<00:32:22.600> right

the button on the left side which right

the button on the left side which right
now<00:32:23.120> doesn't<00:32:23.440> do<00:32:23.799> absolutely<00:32:24.399> anything<00:32:25.279> but

now doesn't do absolutely anything but

now doesn't do absolutely anything but
soon<00:32:26.000> enough<00:32:26.480> it<00:32:26.639> will<00:32:27.519> that's<00:32:27.799> because<00:32:28.240> we'll

soon enough it will that's because we'll

soon enough it will that's because we'll
create<00:32:29.000> a<00:32:29.279> comprehensive<00:32:30.159> sign<00:32:30.440> up<00:32:30.799> and

create a comprehensive sign up and

create a comprehensive sign up and
sign-in<00:32:31.559> form<00:32:32.360> and<00:32:32.480> we'll<00:32:32.679> do<00:32:32.960> that<00:32:33.399> using

sign-in form and we'll do that using

sign-in form and we'll do that using
shaten<00:32:35.279> most<00:32:35.679> comprehensive<00:32:36.559> and<00:32:36.760> most

shaten most comprehensive and most

shaten most comprehensive and most
complex<00:32:37.760> component<00:32:38.760> and<00:32:39.000> that<00:32:39.200> is<00:32:39.840> the<00:32:40.000> form

complex component and that is the form

complex component and that is the form
so<00:32:41.120> go<00:32:41.360> here<00:32:41.720> and<00:32:41.919> search<00:32:42.240> for<00:32:42.440> the<00:32:42.559> form<00:32:43.519> it<00:32:43.600> is

so go here and search for the form it is

so go here and search for the form it is
the<00:32:43.919> most<00:32:44.200> comprehensive<00:32:44.840> one<00:32:45.399> because<00:32:46.039> forms

the most comprehensive one because forms

the most comprehensive one because forms
are<00:32:47.039> tricky<00:32:47.760> they're<00:32:48.000> one<00:32:48.120> of<00:32:48.240> the<00:32:48.440> most

are tricky they're one of the most

are tricky they're one of the most
common<00:32:49.080> things<00:32:49.279> you'll<00:32:49.480> build<00:32:49.720> in<00:32:49.880> web

common things you'll build in web

common things you'll build in web
applications<00:32:50.880> but<00:32:51.159> also<00:32:51.480> one<00:32:51.600> of<00:32:51.760> the<00:32:51.919> most

applications but also one of the most

applications but also one of the most
complex<00:32:53.480> so<00:32:54.039> that's<00:32:54.360> why<00:32:54.960> shaten

complex so that's why shaten

complex so that's why shaten
automatically<00:32:56.480> out<00:32:56.639> of<00:32:56.760> the<00:32:56.840> bot<00:32:57.440> uses<00:32:58.039> react

automatically out of the bot uses react

automatically out of the bot uses react
hook<00:32:58.880> form<00:32:59.480> which<00:32:59.600> is<00:32:59.720> a<00:32:59.919> great<00:33:00.200> library<00:33:00.600> for

hook form which is a great library for

hook form which is a great library for
managing<00:33:01.279> forms<00:33:01.720> and<00:33:01.960> states<00:33:02.840> and<00:33:03.000> then<00:33:03.200> Zod

managing forms and states and then Zod

managing forms and states and then Zod
which<00:33:03.880> is<00:33:04.080> great<00:33:04.320> for<00:33:04.519> form<00:33:05.200> validation<00:33:06.200> here

which is great for form validation here

which is great for form validation here
we<00:33:06.600> can<00:33:06.720> learn<00:33:07.000> a<00:33:07.120> bit<00:33:07.320> more<00:33:07.600> about<00:33:07.840> the

we can learn a bit more about the

we can learn a bit more about the
anatomy<00:33:08.600> of<00:33:08.720> a<00:33:08.880> form<00:33:09.440> so<00:33:09.600> you<00:33:09.720> have<00:33:09.880> a<00:33:09.960> form

anatomy of a form so you have a form

anatomy of a form so you have a form
component<00:33:10.880> and<00:33:11.000> then<00:33:11.120> you<00:33:11.279> have<00:33:11.480> form<00:33:11.840> Fields

component and then you have form Fields

component and then you have form Fields
within<00:33:12.720> it<00:33:13.440> each<00:33:13.679> form<00:33:14.000> field<00:33:14.399> has<00:33:14.519> a<00:33:14.720> control

within it each form field has a control

within it each form field has a control
a<00:33:15.760> name<00:33:16.399> and<00:33:16.519> then<00:33:16.639> you<00:33:16.760> can<00:33:16.960> choose<00:33:17.440> how<00:33:17.600> it's

a name and then you can choose how it's

a name and then you can choose how it's
going<00:33:17.960> to<00:33:18.120> look<00:33:18.399> like<00:33:19.120> it's<00:33:19.279> going<00:33:19.399> to<00:33:19.559> render

going to look like it's going to render

going to look like it's going to render
an<00:33:20.159> item<00:33:20.639> a<00:33:20.799> label<00:33:21.360> form<00:33:21.720> control<00:33:22.200> description

an item a label form control description

an item a label form control description
and<00:33:23.120> a<00:33:23.320> message<00:33:24.200> and<00:33:24.440> here<00:33:24.720> we<00:33:24.880> have<00:33:25.120> a

and a message and here we have a

and a message and here we have a
complete<00:33:25.880> form<00:33:26.360> example<00:33:27.279> so<00:33:27.440> let's<00:33:27.639> go<00:33:27.760> ahead

complete form example so let's go ahead

complete form example so let's go ahead
and<00:33:28.200> follow<00:33:28.559> the<00:33:28.720> steps<00:33:29.200> to<00:33:29.639> create<00:33:30.080> our<00:33:30.760> form

and follow the steps to create our form

and follow the steps to create our form
first<00:33:32.039> we<00:33:32.120> need<00:33:32.279> to<00:33:32.600> copy<00:33:33.600> the<00:33:33.760> command<00:33:34.080> to

first we need to copy the command to

first we need to copy the command to
install<00:33:34.639> it<00:33:35.159> so<00:33:35.320> we<00:33:35.399> can<00:33:35.600> go<00:33:35.840> back<00:33:36.799> go<00:33:36.919> to<00:33:37.080> our

install it so we can go back go to our

install it so we can go back go to our
second<00:33:37.519> terminal<00:33:38.320> and<00:33:38.559> paste<00:33:38.840> the<00:33:38.960> command<00:33:39.320> to

second terminal and paste the command to

second terminal and paste the command to
add<00:33:39.799> the<00:33:40.320> form<00:33:41.320> soon<00:33:41.639> enough<00:33:41.919> it<00:33:42.000> will<00:33:42.159> be<00:33:42.360> done

add the form soon enough it will be done

add the form soon enough it will be done
and<00:33:43.399> then<00:33:43.760> we<00:33:43.880> can<00:33:44.120> actually<00:33:44.480> use<00:33:44.720> it<00:33:45.519> so<00:33:45.919> first

and then we can actually use it so first

and then we can actually use it so first
we<00:33:46.440> have<00:33:46.559> to<00:33:46.760> define<00:33:47.279> the<00:33:47.519> shape<00:33:48.039> of<00:33:48.200> our<00:33:48.399> form

we have to define the shape of our form

we have to define the shape of our form
by<00:33:49.200> using<00:33:49.600> a<00:33:49.840> Zod<00:33:50.559> schema<00:33:51.559> of<00:33:51.720> course<00:33:51.880> you<00:33:52.000> can

by using a Zod schema of course you can

by using a Zod schema of course you can
learn<00:33:52.399> more<00:33:52.639> about<00:33:52.919> Zod<00:33:53.320> in<00:33:53.480> the<00:33:53.639> official<00:33:54.000> Zod

learn more about Zod in the official Zod

learn more about Zod in the official Zod
documentation<00:33:55.279> but<00:33:55.440> don't<00:33:55.639> worry<00:33:56.000> it's<00:33:56.120> a

documentation but don't worry it's a

documentation but don't worry it's a
pretty<00:33:56.519> simple<00:33:56.799> IDE<00:33:56.960> library<00:33:57.279> to<00:33:57.399> use<00:33:57.880> and<00:33:58.000> I'm

pretty simple IDE library to use and I'm

pretty simple IDE library to use and I'm
going<00:33:58.200> to<00:33:58.360> teach<00:33:58.519> you<00:33:58.720> how<00:33:58.840> to<00:33:59.039> use<00:33:59.200> it<00:34:00.080> so

going to teach you how to use it so

going to teach you how to use it so
let's<00:34:00.799> copy<00:34:01.399> import<00:34:01.880> everything<00:34:02.320> as<00:34:02.639> Z<00:34:03.120> from

let's copy import everything as Z from

let's copy import everything as Z from
Zod<00:34:04.039> and<00:34:04.200> then<00:34:04.600> const<00:34:05.039> form<00:34:05.559> schema<00:34:06.559> we<00:34:06.639> can

Zod and then const form schema we can

Zod and then const form schema we can
paste<00:34:07.159> that<00:34:07.440> right<00:34:07.639> here<00:34:07.880> at<00:34:08.040> the<00:34:08.639> top<00:34:09.639> we<00:34:09.760> can

paste that right here at the top we can

paste that right here at the top we can
put<00:34:10.119> this<00:34:10.320> import<00:34:10.720> on<00:34:11.000> top<00:34:11.520> as<00:34:11.679> it<00:34:11.839> is<00:34:12.119> external

put this import on top as it is external

put this import on top as it is external
import<00:34:13.480> and<00:34:13.599> we're<00:34:13.720> going<00:34:13.800> to<00:34:13.960> put<00:34:14.200> this<00:34:14.560> right

import and we're going to put this right

import and we're going to put this right
here<00:34:15.119> because<00:34:15.359> it<00:34:15.440> is<00:34:15.599> coming<00:34:15.960> right<00:34:16.119> here

here because it is coming right here

here because it is coming right here
from<00:34:16.440> our<00:34:16.919> code<00:34:17.919> and<00:34:18.159> this<00:34:18.320> form<00:34:18.639> schema<00:34:19.200> is

from our code and this form schema is

from our code and this form schema is
going<00:34:19.520> to<00:34:19.720> go<00:34:20.119> right<00:34:20.359> here<00:34:20.679> within<00:34:21.000> our

going to go right here within our

going to go right here within our
component<00:34:22.800> the<00:34:22.960> next<00:34:23.159> thing<00:34:23.320> they<00:34:23.440> say<00:34:23.679> we

component the next thing they say we

component the next thing they say we
have<00:34:23.919> to<00:34:24.119> do<00:34:24.560> is<00:34:24.919> Define<00:34:25.520> a<00:34:25.720> form<00:34:26.280> by<00:34:26.399> using<00:34:26.679> the

have to do is Define a form by using the

have to do is Define a form by using the
use<00:34:27.200> form<00:34:27.560> hook<00:34:27.919> coming<00:34:28.240> from<00:34:28.480> the<00:34:28.599> react<00:34:29.000> hook

use form hook coming from the react hook

use form hook coming from the react hook
form<00:34:29.480> Library<00:34:30.399> so<00:34:30.720> let's<00:34:30.960> go<00:34:31.079> ahead<00:34:31.440> and

form Library so let's go ahead and

form Library so let's go ahead and
import<00:34:32.399> import<00:34:32.800> Zod<00:34:33.240> resolver<00:34:34.240> as<00:34:34.359> well<00:34:34.520> as<00:34:34.679> Z

import import Zod resolver as well as Z

import import Zod resolver as well as Z
from<00:34:35.119> Zod<00:34:35.760> as<00:34:35.879> well<00:34:36.000> as<00:34:36.119> the<00:34:36.200> form

from Zod as well as the form

from Zod as well as the form
schema<00:34:38.399> which<00:34:38.560> in<00:34:38.720> this<00:34:38.879> case<00:34:39.159> can<00:34:39.399> be<00:34:39.639> placed

schema which in this case can be placed

schema which in this case can be placed
above<00:34:40.520> the<00:34:40.720> component<00:34:41.599> but<00:34:41.760> then<00:34:41.879> we'll<00:34:42.159> also

above the component but then we'll also

above the component but then we'll also
need<00:34:42.599> to<00:34:42.760> import<00:34:43.200> the<00:34:43.320> form<00:34:43.879> and<00:34:44.119> everything

need to import the form and everything

need to import the form and everything
else<00:34:44.720> that<00:34:44.839> is<00:34:45.000> in<00:34:45.280> here<00:34:45.919> so<00:34:46.200> instead<00:34:46.480> of

else that is in here so instead of

else that is in here so instead of
copying<00:34:47.079> everything<00:34:47.639> let's<00:34:47.919> copy<00:34:48.200> just<00:34:48.359> the

copying everything let's copy just the

copying everything let's copy just the
things<00:34:48.639> that<00:34:48.800> we<00:34:48.919> need<00:34:49.599> first<00:34:49.879> I'm<00:34:50.000> going<00:34:50.079> to

things that we need first I'm going to

things that we need first I'm going to
copy<00:34:50.520> the<00:34:50.679> Zod<00:34:51.040> resolver<00:34:51.679> paste<00:34:52.000> it<00:34:52.320> right

copy the Zod resolver paste it right

copy the Zod resolver paste it right
here<00:34:52.679> at<00:34:52.839> the<00:34:53.040> top<00:34:53.599> and<00:34:53.720> then<00:34:53.919> I'm<00:34:54.040> going<00:34:54.159> to

here at the top and then I'm going to

here at the top and then I'm going to
copy<00:34:54.800> the<00:34:55.040> entire<00:34:55.560> form<00:34:56.280> right<00:34:56.520> here<00:34:57.359> or

copy the entire form right here or

copy the entire form right here or
rather<00:34:57.880> just<00:34:58.040> the<00:34:58.240> definition<00:34:58.880> of<00:34:59.040> a<00:34:59.200> form<00:34:59.800> and

rather just the definition of a form and

rather just the definition of a form and
we<00:35:00.079> can<00:35:00.280> paste<00:35:00.480> it<00:35:00.720> right<00:35:00.920> here<00:35:01.119> on<00:35:01.800> top<00:35:02.800> and

we can paste it right here on top and

we can paste it right here on top and
the<00:35:03.040> form<00:35:03.280> schema<00:35:03.680> can<00:35:03.839> go<00:35:04.119> outside<00:35:04.960> right

the form schema can go outside right

the form schema can go outside right
here<00:35:06.280> so<00:35:06.480> now<00:35:06.599> we're<00:35:06.839> defining<00:35:07.280> our<00:35:07.480> form

here so now we're defining our form

here so now we're defining our form
we're<00:35:08.400> also<00:35:08.720> using<00:35:09.079> the<00:35:09.240> form<00:35:09.760> and<00:35:09.960> this<00:35:10.119> has

we're also using the form and this has

we're also using the form and this has
to<00:35:10.359> be<00:35:10.520> imported<00:35:11.400> from<00:35:11.960> react<00:35:12.440> hook<00:35:12.680> form<00:35:13.240> the

to be imported from react hook form the

to be imported from react hook form the
use<00:35:13.680> form<00:35:14.560> right<00:35:14.760> here<00:35:15.440> but<00:35:15.640> now<00:35:15.800> that<00:35:15.920> we<00:35:16.040> have

use form right here but now that we have

use form right here but now that we have
defined<00:35:16.599> it<00:35:16.839> we<00:35:16.960> can<00:35:17.200> actually<00:35:17.640> build<00:35:17.960> out<00:35:18.280> our

defined it we can actually build out our

defined it we can actually build out our
form<00:35:19.160> so<00:35:19.359> we<00:35:19.440> need<00:35:19.599> to<00:35:19.800> import<00:35:20.400> all<00:35:20.560> of<00:35:20.720> the

form so we need to import all of the

form so we need to import all of the
different<00:35:21.240> components<00:35:21.839> that<00:35:22.000> go<00:35:22.200> into

different components that go into

different components that go into
building<00:35:22.839> a<00:35:23.000> form<00:35:24.000> which<00:35:24.119> we<00:35:24.240> can<00:35:24.440> paste<00:35:24.760> right

building a form which we can paste right

building a form which we can paste right
here<00:35:25.200> on<00:35:25.800> top<00:35:26.880> and<00:35:27.040> you<00:35:27.119> can<00:35:27.280> notice<00:35:27.640> that<00:35:27.800> one

here on top and you can notice that one

here on top and you can notice that one
of<00:35:28.119> these<00:35:28.599> is<00:35:28.839> an<00:35:29.040> input<00:35:29.720> which<00:35:29.880> is<00:35:30.119> another

of these is an input which is another

of these is an input which is another
component<00:35:31.000> we<00:35:31.119> have<00:35:31.280> to<00:35:31.480> install<00:35:32.440> because<00:35:32.680> if

component we have to install because if

component we have to install because if
you<00:35:32.880> check<00:35:33.160> the<00:35:33.320> component<00:35:33.760> so<00:35:34.000> far<00:35:34.839> you<00:35:34.960> can

you check the component so far you can

you check the component so far you can
notice<00:35:35.520> the<00:35:35.680> form<00:35:36.079> label<00:35:36.400> and<00:35:36.640> button<00:35:37.359> but<00:35:37.599> no

notice the form label and button but no

notice the form label and button but no
input<00:35:38.800> so<00:35:39.040> to<00:35:39.240> install<00:35:39.560> the<00:35:39.720> input<00:35:40.119> you<00:35:40.240> know

input so to install the input you know

input so to install the input you know
what<00:35:40.520> we<00:35:40.640> need<00:35:40.760> to<00:35:40.920> do<00:35:41.440> just<00:35:41.560> say<00:35:41.839> MPX<00:35:42.400> CH<00:35:42.680> C<00:35:42.839> Nui

what we need to do just say MPX CH C Nui

what we need to do just say MPX CH C Nui
latest<00:35:44.000> add

latest add

latest add
input<00:35:46.079> it<00:35:46.200> is<00:35:46.480> as<00:35:46.680> simple<00:35:47.040> as<00:35:47.280> that<00:35:48.119> we<00:35:48.240> can

input it is as simple as that we can

input it is as simple as that we can
also<00:35:48.680> put<00:35:48.960> all<00:35:49.119> of<00:35:49.359> these<00:35:49.800> components<00:35:50.440> in<00:35:50.640> one

also put all of these components in one

also put all of these components in one
line<00:35:51.480> so<00:35:51.720> it's<00:35:52.000> easier<00:35:52.599> to<00:35:52.760> see<00:35:53.160> everything

line so it's easier to see everything

line so it's easier to see everything
just<00:35:54.040> like<00:35:54.240> so<00:35:55.240> and<00:35:55.480> then<00:35:55.880> we<00:35:56.000> can<00:35:56.240> actually

just like so and then we can actually

just like so and then we can actually
build<00:35:56.800> build<00:35:57.040> out<00:35:57.280> our<00:35:57.520> form<00:35:58.119> by<00:35:58.319> copying<00:35:58.720> the

build build out our form by copying the

build build out our form by copying the
form<00:35:59.520> right<00:35:59.920> here<00:36:00.800> and<00:36:01.119> let's<00:36:01.400> paste<00:36:01.680> it

form right here and let's paste it

form right here and let's paste it
instead<00:36:02.520> of<00:36:02.720> this

instead of this

instead of this
button<00:36:04.560> we<00:36:04.760> can<00:36:05.040> indent<00:36:05.400> it<00:36:05.920> properly<00:36:06.920> and

button we can indent it properly and

button we can indent it properly and
save<00:36:07.560> it<00:36:08.119> and<00:36:08.359> that's<00:36:08.599> it<00:36:08.920> you<00:36:09.040> now<00:36:09.319> have<00:36:09.520> a

save it and that's it you now have a

save it and that's it you now have a
fully<00:36:10.040> accessible<00:36:10.480> form<00:36:10.839> that<00:36:10.960> is<00:36:11.119> type<00:36:11.520> safe

fully accessible form that is type safe

fully accessible form that is type safe
with<00:36:12.319> client<00:36:12.800> side<00:36:13.079> validation<00:36:14.079> and<00:36:14.240> let's

with client side validation and let's

with client side validation and let's
see<00:36:14.560> if<00:36:14.680> it<00:36:14.880> actually<00:36:15.160> looks<00:36:15.480> like<00:36:15.680> this<00:36:16.599> and

see if it actually looks like this and

see if it actually looks like this and
would<00:36:16.960> you<00:36:17.079> look<00:36:17.240> at<00:36:17.440> that<00:36:17.880> it<00:36:18.000> looks<00:36:18.319> amazing

would you look at that it looks amazing

would you look at that it looks amazing
but<00:36:19.240> it's<00:36:19.400> only<00:36:19.720> one<00:36:19.960> input<00:36:20.359> and<00:36:20.520> one<00:36:20.839> button

but it's only one input and one button

but it's only one input and one button
but<00:36:21.920> the<00:36:22.079> validation<00:36:22.839> is<00:36:23.040> working

but the validation is working

but the validation is working
wonderfully<00:36:24.319> and<00:36:24.599> chatan<00:36:25.280> has<00:36:25.480> this

wonderfully and chatan has this

wonderfully and chatan has this
beautiful<00:36:26.319> button<00:36:26.720> minimalistic<00:36:27.920> UI<00:36:28.920> so<00:36:29.200> now

beautiful button minimalistic UI so now

beautiful button minimalistic UI so now
let's<00:36:29.800> convert<00:36:30.400> this<00:36:31.240> into<00:36:31.680> this<00:36:32.280> and<00:36:32.480> make<00:36:32.599> it

let's convert this into this and make it

let's convert this into this and make it
fully<00:36:33.200> functional<00:36:33.800> to<00:36:33.960> do<00:36:34.160> that<00:36:34.440> we<00:36:34.720> won't

fully functional to do that we won't

fully functional to do that we won't
simply<00:36:35.440> keep<00:36:35.760> everything<00:36:36.160> in<00:36:36.280> a<00:36:36.440> single<00:36:36.839> file

simply keep everything in a single file

simply keep everything in a single file
as<00:36:37.800> that<00:36:37.960> would<00:36:38.240> quickly<00:36:38.560> clutter<00:36:39.000> our<00:36:39.200> view

as that would quickly clutter our view

as that would quickly clutter our view
and<00:36:40.079> wouldn't<00:36:40.359> be<00:36:40.520> so<00:36:40.839> reusable<00:36:41.839> so<00:36:42.000> we're

and wouldn't be so reusable so we're

and wouldn't be so reusable so we're
going<00:36:42.240> to<00:36:42.359> use<00:36:42.720> many<00:36:43.000> reusable<00:36:43.640> practices<00:36:44.319> to

going to use many reusable practices to

going to use many reusable practices to
turn<00:36:44.760> this<00:36:44.960> into<00:36:45.160> a<00:36:45.319> component<00:36:45.960> that<00:36:46.079> we<00:36:46.200> can

turn this into a component that we can

turn this into a component that we can
then<00:36:46.520> reuse<00:36:47.400> and<00:36:47.760> manage<00:36:48.200> its<00:36:48.440> data<00:36:48.920> more

then reuse and manage its data more

then reuse and manage its data more
efficiently<00:36:50.400> and<00:36:50.560> the<00:36:50.760> first<00:36:51.040> step<00:36:51.240> we'll<00:36:51.440> do

efficiently and the first step we'll do

efficiently and the first step we'll do
to<00:36:51.920> achieve<00:36:52.319> that<00:36:52.720> is<00:36:52.920> we're<00:36:53.079> going<00:36:53.200> to

to achieve that is we're going to

to achieve that is we're going to
extract<00:36:54.119> this<00:36:54.280> form<00:36:54.680> schema<00:36:55.359> into<00:36:55.839> a<00:36:56.079> separate

extract this form schema into a separate

extract this form schema into a separate
vol<00:36:56.680> validations<00:36:57.359> file<00:36:58.240> so<00:36:58.599> let's<00:36:58.880> go<00:36:59.040> ahead

vol validations file so let's go ahead

vol validations file so let's go ahead
and<00:36:59.640> go<00:36:59.760> to<00:37:00.000> file<00:37:00.359> explorer<00:37:01.359> collapse

and go to file explorer collapse

and go to file explorer collapse
everything<00:37:03.079> and<00:37:03.359> go<00:37:03.599> within<00:37:03.960> Source<00:37:04.760> within

everything and go within Source within

everything and go within Source within
lib<00:37:05.880> and<00:37:06.040> then<00:37:06.319> right<00:37:06.560> here<00:37:06.920> create<00:37:07.200> a<00:37:07.400> new

lib and then right here create a new

lib and then right here create a new
folder<00:37:08.240> called

folder called

folder called
validation<00:37:10.560> within<00:37:10.880> it<00:37:11.119> we<00:37:11.240> can<00:37:11.440> create<00:37:11.760> a<00:37:11.960> new

validation within it we can create a new

validation within it we can create a new
index.ts<00:37:14.760> file<00:37:15.760> and<00:37:15.960> within<00:37:16.319> index<00:37:17.040> we<00:37:17.160> can<00:37:17.400> do

index.ts file and within index we can do

index.ts file and within index we can do
something<00:37:18.040> similar<00:37:18.480> to<00:37:18.680> what<00:37:18.839> we<00:37:18.960> have<00:37:19.119> done

something similar to what we have done

something similar to what we have done
in<00:37:19.480> the<00:37:19.680> signup<00:37:20.079> form<00:37:20.839> we<00:37:20.920> can<00:37:21.200> import

in the signup form we can import

in the signup form we can import
everything<00:37:22.440> as<00:37:22.800> Z<00:37:23.200> from

everything as Z from

everything as Z from
Zod<00:37:25.040> and<00:37:25.240> then<00:37:25.720> we<00:37:25.839> can<00:37:26.040> create<00:37:26.839> Define<00:37:27.520> a<00:37:27.680> form

Zod and then we can create Define a form

Zod and then we can create Define a form
schema<00:37:28.960> so<00:37:29.240> right<00:37:29.520> here<00:37:30.359> let's<00:37:30.640> define<00:37:31.000> it<00:37:31.800> but

schema so right here let's define it but

schema so right here let's define it but
in<00:37:32.240> this<00:37:32.480> file<00:37:32.760> we're<00:37:32.920> going<00:37:33.000> to<00:37:33.160> keep<00:37:33.480> many

in this file we're going to keep many

in this file we're going to keep many
different<00:37:34.040> form<00:37:34.359> schemas<00:37:34.960> so<00:37:35.119> we<00:37:35.240> have<00:37:35.359> to

different form schemas so we have to

different form schemas so we have to
Define<00:37:36.000> which<00:37:36.160> one<00:37:36.440> is<00:37:36.560> it<00:37:37.319> this<00:37:37.440> is<00:37:37.599> going<00:37:37.760> to

Define which one is it this is going to

Define which one is it this is going to
be<00:37:38.240> a<00:37:38.640> signup<00:37:39.920> validation<00:37:41.119> schema<00:37:42.119> and<00:37:42.440> we're

be a signup validation schema and we're

be a signup validation schema and we're
not<00:37:42.839> going<00:37:42.960> to<00:37:43.119> Define<00:37:43.359> it<00:37:43.480> in<00:37:43.680> this<00:37:43.880> file<00:37:44.119> and

not going to Define it in this file and

not going to Define it in this file and
then<00:37:44.480> not<00:37:44.760> use<00:37:44.960> it<00:37:45.400> we<00:37:45.520> have<00:37:45.640> to<00:37:45.839> say<00:37:46.760> export

then not use it we have to say export

then not use it we have to say export
const<00:37:48.359> sign<00:37:48.599> up<00:37:48.800> validation<00:37:49.599> to<00:37:49.760> be<00:37:49.920> able<00:37:50.119> to

const sign up validation to be able to

const sign up validation to be able to
use<00:37:50.480> it<00:37:51.240> so<00:37:51.520> now<00:37:52.000> we<00:37:52.079> can<00:37:52.280> go<00:37:52.520> back<00:37:52.640> to<00:37:52.800> our

use it so now we can go back to our

use it so now we can go back to our
signup<00:37:53.319> form<00:37:54.040> and<00:37:54.160> we<00:37:54.280> can<00:37:54.520> import<00:37:55.079> form

signup form and we can import form

signup form and we can import form
schema<00:37:56.280> or<00:37:56.760> rather<00:37:57.280> we<00:37:57.400> can<00:37:57.599> rename<00:37:58.000> it<00:37:58.200> to

schema or rather we can rename it to

schema or rather we can rename it to
signup<00:37:59.119> validation<00:38:00.119> coming<00:38:00.520> from

signup validation coming from

signup validation coming from
atli<00:38:03.200> SLV<00:38:03.599> validation<00:38:04.599> and<00:38:04.720> we<00:38:04.800> can<00:38:04.960> use<00:38:05.160> it<00:38:05.480> in

atli SLV validation and we can use it in

atli SLV validation and we can use it in
three<00:38:05.960> places<00:38:06.520> where<00:38:06.680> we<00:38:06.800> used<00:38:07.040> it<00:38:07.280> before<00:38:08.200> and

three places where we used it before and

three places where we used it before and
in<00:38:08.560> this<00:38:08.720> case<00:38:08.920> we<00:38:09.079> also<00:38:09.280> need<00:38:09.520> a<00:38:09.680> z<00:38:10.000> from<00:38:10.200> Zod

in this case we also need a z from Zod

in this case we also need a z from Zod
as<00:38:10.800> we're<00:38:11.040> referencing<00:38:11.560> it<00:38:11.920> right<00:38:12.079> here<00:38:12.319> as<00:38:12.440> a

as we're referencing it right here as a

as we're referencing it right here as a
type<00:38:13.640> great<00:38:14.079> so<00:38:14.280> now<00:38:14.480> we<00:38:14.599> have<00:38:14.760> just<00:38:15.000> extracted

type great so now we have just extracted

type great so now we have just extracted
one<00:38:15.880> thing<00:38:16.680> but<00:38:16.920> instead<00:38:17.160> of<00:38:17.319> Simply

one thing but instead of Simply

one thing but instead of Simply
extracting<00:38:18.400> That<00:38:18.680> Base<00:38:19.240> example<00:38:19.720> we<00:38:19.960> had

extracting That Base example we had

extracting That Base example we had
let's<00:38:20.920> actually<00:38:21.319> make<00:38:21.520> it<00:38:21.640> a<00:38:21.760> bit<00:38:21.920> more

let's actually make it a bit more

let's actually make it a bit more
meaningful<00:38:22.960> we're<00:38:23.160> not<00:38:23.400> just<00:38:23.560> going<00:38:23.680> to<00:38:23.800> have

meaningful we're not just going to have

meaningful we're not just going to have
a<00:38:24.079> username<00:38:24.839> we're<00:38:24.960> going<00:38:25.079> to<00:38:25.280> have<00:38:25.560> a<00:38:25.800> name<00:38:26.200> as

a username we're going to have a name as

a username we're going to have a name as
well<00:38:26.640> well<00:38:27.280> so<00:38:27.599> let's<00:38:27.880> define<00:38:28.200> it<00:38:28.960> at<00:38:29.079> the<00:38:29.319> top

well well so let's define it at the top

well well so let's define it at the top
let's<00:38:29.920> say<00:38:30.200> name<00:38:30.720> is<00:38:30.880> going<00:38:30.960> to<00:38:31.160> be<00:38:31.680> a<00:38:31.880> z.

let's say name is going to be a z.

let's say name is going to be a z.
string<00:38:35.119> with<00:38:35.319> a<00:38:35.520> minimum<00:38:36.079> of<00:38:36.280> two

string with a minimum of two

string with a minimum of two
characters<00:38:39.000> and<00:38:39.160> then<00:38:39.440> as<00:38:39.599> the<00:38:39.760> second

characters and then as the second

characters and then as the second
parameter<00:38:40.599> of<00:38:40.760> a<00:38:40.960> specific<00:38:41.440> option<00:38:42.040> you<00:38:42.160> can

parameter of a specific option you can

parameter of a specific option you can
provide<00:38:42.680> the<00:38:42.839> error<00:38:43.240> message<00:38:44.079> so<00:38:44.240> in<00:38:44.400> this

provide the error message so in this

provide the error message so in this
case<00:38:44.960> we<00:38:45.079> can<00:38:45.200> say<00:38:45.440> a<00:38:45.680> message<00:38:46.240> is<00:38:46.480> something

case we can say a message is something

case we can say a message is something
like<00:38:48.000> to

like to

like to
short<00:38:50.480> there<00:38:50.680> we<00:38:50.839> go<00:38:51.440> and<00:38:51.560> then<00:38:51.680> you<00:38:51.800> can

short there we go and then you can

short there we go and then you can
continue<00:38:52.359> doing<00:38:52.720> that<00:38:53.240> we<00:38:53.400> have<00:38:53.560> the<00:38:53.720> username

continue doing that we have the username

continue doing that we have the username
username<00:38:55.000> is<00:38:55.119> going<00:38:55.319> to<00:38:55.640> also<00:38:56.079> be<00:38:56.640> a<00:38:56.800> minimum

username is going to also be a minimum

username is going to also be a minimum
of<00:38:57.400> two<00:38:58.200> characters<00:38:59.200> we<00:38:59.319> don't<00:38:59.560> need<00:38:59.720> a

of two characters we don't need a

of two characters we don't need a
maximum<00:39:00.440> here<00:39:00.839> and<00:39:00.960> we<00:39:01.040> can<00:39:01.240> also<00:39:01.520> provide<00:39:01.920> a

maximum here and we can also provide a

maximum here and we can also provide a
message<00:39:02.720> of<00:39:02.920> something<00:39:03.280> like<00:39:03.640> too<00:39:04.280> short<00:39:05.280> then

message of something like too short then

message of something like too short then
we<00:39:05.640> can<00:39:05.800> have<00:39:05.920> an<00:39:06.079> email<00:39:06.599> which<00:39:06.720> is<00:39:06.839> going<00:39:07.040> to

we can have an email which is going to

we can have an email which is going to
be<00:39:07.359> a<00:39:07.560> z.

be a z.

be a z.
string.<00:39:09.680> email<00:39:10.599> like<00:39:10.880> so<00:39:11.880> and<00:39:12.040> then<00:39:12.200> we<00:39:12.319> can

string. email like so and then we can

string. email like so and then we can
have<00:39:12.680> a<00:39:12.880> password<00:39:13.640> which<00:39:13.760> is<00:39:13.920> going<00:39:14.079> to<00:39:14.200> be<00:39:14.400> z.

have a password which is going to be z.

have a password which is going to be z.
string<00:39:16.119> and<00:39:16.359> it's<00:39:16.520> going<00:39:16.680> to<00:39:16.800> be<00:39:16.960> a<00:39:17.119> men<00:39:17.560> of

string and it's going to be a men of

string and it's going to be a men of
eight<00:39:18.240> characters<00:39:19.200> and<00:39:19.319> we're<00:39:19.440> going<00:39:19.560> to<00:39:19.680> say

eight characters and we're going to say

eight characters and we're going to say
to<00:39:20.160> short<00:39:20.760> if<00:39:20.920> it's<00:39:21.160> less<00:39:21.400> than

to short if it's less than

to short if it's less than
eight<00:39:23.119> of<00:39:23.280> course<00:39:23.480> feel<00:39:23.720> free<00:39:23.960> to<00:39:24.280> provide

eight of course feel free to provide

eight of course feel free to provide
more<00:39:24.880> meaningful<00:39:25.400> error<00:39:25.760> messages<00:39:26.560> something

more meaningful error messages something

more meaningful error messages something
like<00:39:27.680> password<00:39:28.680> must<00:39:29.079> be<00:39:29.599> at<00:39:29.839> least<00:39:30.440> eight

like password must be at least eight

like password must be at least eight
characters<00:39:32.520> you<00:39:32.599> can<00:39:32.760> do<00:39:32.960> that<00:39:33.079> for<00:39:33.280> all<00:39:33.440> the

characters you can do that for all the

characters you can do that for all the
other<00:39:33.800> ones<00:39:34.640> now<00:39:34.839> we<00:39:35.000> have<00:39:35.200> our<00:39:35.440> proper<00:39:35.800> signup

other ones now we have our proper signup

other ones now we have our proper signup
validation<00:39:37.560> but<00:39:37.920> as<00:39:38.000> you<00:39:38.119> can<00:39:38.280> notice<00:39:38.720> we're

validation but as you can notice we're

validation but as you can notice we're
using<00:39:39.280> it<00:39:39.520> here<00:39:40.160> but<00:39:40.480> as<00:39:40.599> for<00:39:40.800> the<00:39:41.000> default

using it here but as for the default

using it here but as for the default
values<00:39:41.920> we're<00:39:42.160> simply<00:39:42.640> defining<00:39:43.160> the

values we're simply defining the

values we're simply defining the
username<00:39:44.440> so<00:39:44.800> let's<00:39:45.040> also<00:39:45.400> add<00:39:45.599> a<00:39:45.800> name<00:39:46.240> at<00:39:46.440> the

username so let's also add a name at the

username so let's also add a name at the
start<00:39:46.920> equal<00:39:47.240> to<00:39:47.400> an<00:39:47.520> empty

start equal to an empty

start equal to an empty
string<00:39:50.680> let's<00:39:50.880> also<00:39:51.119> do<00:39:51.240> a<00:39:51.800> username<00:39:52.800> after

string let's also do a username after

string let's also do a username after
that<00:39:53.280> we're<00:39:53.400> going<00:39:53.480> to<00:39:53.599> have<00:39:53.720> an

that we're going to have an

that we're going to have an
email<00:39:55.720> and<00:39:55.920> finally<00:39:56.480> we're<00:39:56.599> going<00:39:56.720> to<00:39:56.920> have<00:39:57.240> a

email and finally we're going to have a

email and finally we're going to have a
password<00:39:58.920> so<00:39:59.119> now<00:39:59.240> we're<00:39:59.440> starting<00:39:59.760> to<00:40:00.000> create

password so now we're starting to create

password so now we're starting to create
the<00:40:00.599> structure<00:40:01.359> for<00:40:01.760> what<00:40:01.960> our<00:40:02.160> form<00:40:02.599> is<00:40:02.839> yet

the structure for what our form is yet

the structure for what our form is yet
to<00:40:03.440> become<00:40:04.440> and<00:40:04.560> of<00:40:04.680> course<00:40:04.920> the<00:40:05.040> next<00:40:05.200> thing

to become and of course the next thing

to become and of course the next thing
we<00:40:05.520> have<00:40:05.640> to<00:40:05.760> do<00:40:06.240> is<00:40:06.520> actually<00:40:07.359> create<00:40:07.720> our

we have to do is actually create our

we have to do is actually create our
form<00:40:08.560> with<00:40:08.760> all<00:40:08.960> of<00:40:09.079> the<00:40:09.280> necessary<00:40:09.760> form

form with all of the necessary form

form with all of the necessary form
Fields<00:40:11.359> so<00:40:11.760> if<00:40:11.880> we<00:40:12.040> go<00:40:12.240> back<00:40:12.440> to<00:40:12.560> the<00:40:12.680> finished

Fields so if we go back to the finished

Fields so if we go back to the finished
site<00:40:14.200> right<00:40:14.359> now<00:40:14.640> we<00:40:14.800> still<00:40:15.079> have<00:40:15.319> just<00:40:15.480> the

site right now we still have just the

site right now we still have just the
input<00:40:16.480> but<00:40:16.680> let's<00:40:16.880> go<00:40:17.000> ahead<00:40:17.240> and<00:40:17.440> put<00:40:17.599> this

input but let's go ahead and put this

input but let's go ahead and put this
side<00:40:18.040> by<00:40:18.319> side<00:40:18.480> with<00:40:18.599> our<00:40:18.760> editor<00:40:19.280> so<00:40:19.480> we<00:40:19.560> can

side by side with our editor so we can

side by side with our editor so we can
see<00:40:19.880> the<00:40:20.000> changes<00:40:20.440> that<00:40:20.599> we<00:40:20.720> make<00:40:21.240> live<00:40:22.240> now<00:40:22.680> we

see the changes that we make live now we

see the changes that we make live now we
have<00:40:23.040> our<00:40:23.240> form<00:40:23.599> on<00:40:23.720> the<00:40:23.920> right<00:40:24.200> side<00:40:24.520> and<00:40:24.680> the

have our form on the right side and the

have our form on the right side and the
code<00:40:25.119> on<00:40:25.240> the<00:40:25.440> left<00:40:25.960> so<00:40:26.400> let's<00:40:26.560> go<00:40:26.680> ahead<00:40:26.960> and

code on the left so let's go ahead and

code on the left so let's go ahead and
turn<00:40:27.400> this<00:40:27.560> into<00:40:27.800> an<00:40:28.079> actual<00:40:28.760> final<00:40:29.240> form<00:40:29.880> to

turn this into an actual final form to

turn this into an actual final form to
look<00:40:30.520> exactly<00:40:31.280> like<00:40:31.520> this<00:40:31.680> one<00:40:31.920> does<00:40:32.800> to<00:40:32.960> be

look exactly like this one does to be

look exactly like this one does to be
able<00:40:33.359> to<00:40:33.480> do<00:40:33.720> that<00:40:34.079> we<00:40:34.200> can<00:40:34.440> start<00:40:34.760> with<00:40:34.880> the

able to do that we can start with the

able to do that we can start with the
outer<00:40:35.440> div<00:40:36.079> or<00:40:36.319> rather<00:40:36.560> with<00:40:36.720> the<00:40:36.839> form<00:40:37.400> we

outer div or rather with the form we

outer div or rather with the form we
don't<00:40:37.760> need<00:40:37.920> to<00:40:38.079> wrap<00:40:38.400> the<00:40:38.480> form<00:40:38.760> with

don't need to wrap the form with

don't need to wrap the form with
anything<00:40:39.640> as<00:40:39.800> the<00:40:39.920> form<00:40:40.319> is<00:40:40.440> going<00:40:40.640> to<00:40:40.760> be<00:40:40.960> the

anything as the form is going to be the

anything as the form is going to be the
most<00:40:41.520> outer<00:40:42.000> side<00:40:42.400> container<00:40:43.240> so<00:40:43.400> we<00:40:43.480> can

most outer side container so we can

most outer side container so we can
remove<00:40:44.079> this<00:40:44.359> outer<00:40:44.920> div<00:40:45.920> and<00:40:46.119> we<00:40:46.240> can<00:40:46.400> select

remove this outer div and we can select

remove this outer div and we can select
everything<00:40:47.599> within<00:40:47.880> the<00:40:48.000> form<00:40:48.800> just<00:40:49.119> like<00:40:49.400> so

everything within the form just like so

everything within the form just like so
and<00:40:50.560> indent<00:40:50.920> it<00:40:51.160> properly<00:40:52.160> I<00:40:52.319> always<00:40:52.640> try<00:40:52.880> to

and indent it properly I always try to

and indent it properly I always try to
keep<00:40:53.480> my<00:40:53.640> code

keep my code

keep my code
clean<00:40:55.640> now<00:40:55.920> within<00:40:56.160> the<00:40:56.359> this<00:40:56.480> form<00:40:56.960> we're

clean now within the this form we're

clean now within the this form we're
going<00:40:57.280> to<00:40:57.520> have<00:40:57.800> a<00:40:58.000> div<00:40:58.599> so<00:40:58.920> right<00:40:59.119> here<00:40:59.520> create

going to have a div so right here create

going to have a div so right here create
a<00:41:00.040> new

a new

a new
div<00:41:02.160> and<00:41:02.599> this<00:41:02.800> div<00:41:03.160> is<00:41:03.280> going<00:41:03.480> to<00:41:03.640> have<00:41:03.760> a

div and this div is going to have a

div and this div is going to have a
class<00:41:04.319> name<00:41:04.920> equal<00:41:05.280> to<00:41:05.960> on<00:41:06.160> small<00:41:06.520> devices

class name equal to on small devices

class name equal to on small devices
width<00:41:07.680> is<00:41:07.800> going<00:41:07.960> to<00:41:08.079> be

width is going to be

width is going to be
420<00:41:09.880> it's<00:41:10.040> going<00:41:10.200> to<00:41:10.359> be<00:41:10.599> Flex<00:41:11.720> Center<00:41:12.720> and

420 it's going to be Flex Center and

420 it's going to be Flex Center and
it's<00:41:13.040> going<00:41:13.200> to<00:41:13.280> be<00:41:13.440> Flex<00:41:13.839> C<00:41:14.200> so<00:41:14.359> the<00:41:14.440> elements

it's going to be Flex C so the elements

it's going to be Flex C so the elements
appear<00:41:15.440> one<00:41:15.640> below<00:41:16.119> another<00:41:17.119> next<00:41:17.440> we<00:41:17.599> have<00:41:17.720> to

appear one below another next we have to

appear one below another next we have to
create<00:41:18.200> this<00:41:18.400> logo<00:41:18.800> on<00:41:18.960> the<00:41:19.200> top<00:41:19.720> so<00:41:20.000> let's

create this logo on the top so let's

create this logo on the top so let's
immediately<00:41:20.760> do<00:41:21.079> that<00:41:21.880> here<00:41:22.160> we<00:41:22.280> can<00:41:22.400> render<00:41:22.720> a

immediately do that here we can render a

immediately do that here we can render a
self-closing<00:41:23.599> image<00:41:24.160> that's<00:41:24.359> going<00:41:24.520> to<00:41:24.640> have

self-closing image that's going to have

self-closing image that's going to have
a<00:41:24.960> source<00:41:25.720> of<00:41:26.280> /<00:41:27.040> assets<00:41:28.040> SL<00:41:28.520> images<00:41:29.520> SL

a source of / assets SL images SL

a source of / assets SL images SL
logo.svg<00:41:31.720> and<00:41:31.880> you<00:41:31.960> can<00:41:32.079> give<00:41:32.200> it<00:41:32.319> an<00:41:32.480> ALT<00:41:32.800> tag

logo.svg and you can give it an ALT tag

logo.svg and you can give it an ALT tag
of<00:41:33.359> logo<00:41:34.359> now<00:41:34.520> if<00:41:34.599> you<00:41:34.760> save<00:41:35.000> it<00:41:35.400> you<00:41:35.480> should<00:41:35.680> be

of logo now if you save it you should be

of logo now if you save it you should be
able<00:41:36.000> to<00:41:36.160> see<00:41:36.480> a<00:41:36.760> nice<00:41:37.079> looking<00:41:37.359> logo<00:41:37.800> appear

able to see a nice looking logo appear

able to see a nice looking logo appear
right<00:41:38.440> on<00:41:38.680> top<00:41:39.200> as<00:41:39.280> soon<00:41:39.440> as<00:41:39.560> you<00:41:39.960> reload<00:41:40.960> and

right on top as soon as you reload and

right on top as soon as you reload and
there<00:41:41.280> we<00:41:41.440> go<00:41:41.800> you<00:41:41.880> can<00:41:42.040> see<00:41:42.319> logo's<00:41:42.760> icon

there we go you can see logo's icon

there we go you can see logo's icon
actually<00:41:43.960> the<00:41:44.079> entire<00:41:44.440> logo<00:41:44.720> is<00:41:44.920> there<00:41:45.319> as<00:41:45.400> you

actually the entire logo is there as you

actually the entire logo is there as you
can<00:41:45.599> see<00:41:45.800> when<00:41:45.920> I<00:41:46.079> drag<00:41:46.319> and<00:41:46.480> drop<00:41:46.760> it<00:41:47.040> here<00:41:47.640> but

can see when I drag and drop it here but

can see when I drag and drop it here but
you<00:41:47.920> cannot<00:41:48.200> see<00:41:48.359> it<00:41:48.560> as<00:41:48.720> the<00:41:48.880> background<00:41:49.280> is

you cannot see it as the background is

you cannot see it as the background is
white<00:41:50.440> so<00:41:50.720> let's<00:41:50.960> go<00:41:51.119> ahead<00:41:51.520> and<00:41:51.800> figure<00:41:52.119> out

white so let's go ahead and figure out

white so let's go ahead and figure out
why<00:41:52.720> our<00:41:53.040> background<00:41:53.560> is<00:41:53.760> not<00:41:54.119> dark<00:41:54.599> as<00:41:54.720> it<00:41:54.880> was

why our background is not dark as it was

why our background is not dark as it was
dark<00:41:55.520> before<00:41:56.720> if<00:41:56.839> you<00:41:57.040> head<00:41:57.280> to<00:41:57.680> your<00:41:58.280> global.

dark before if you head to your global.

dark before if you head to your global.
CSS<00:41:59.720> file<00:42:00.359> you'll<00:42:00.640> notice<00:42:01.119> it<00:42:01.280> got

CSS file you'll notice it got

CSS file you'll notice it got
overwritten<00:42:02.400> by<00:42:03.000> shaten<00:42:04.000> and<00:42:04.520> it's<00:42:04.720> no<00:42:04.880> longer

overwritten by shaten and it's no longer

overwritten by shaten and it's no longer
applying<00:42:05.640> the<00:42:05.920> black<00:42:06.319> background<00:42:06.800> on<00:42:06.960> our

applying the black background on our

applying the black background on our
body<00:42:07.880> so<00:42:08.200> once<00:42:08.440> again<00:42:08.720> to<00:42:08.920> get<00:42:09.119> back<00:42:09.280> to<00:42:09.400> our

body so once again to get back to our

body so once again to get back to our
previous<00:42:09.960> globals<00:42:10.560> you'll<00:42:10.760> have<00:42:10.880> to<00:42:11.079> go<00:42:11.280> to

previous globals you'll have to go to

previous globals you'll have to go to
the<00:42:11.640> GitHub<00:42:12.000> jiz<00:42:12.280> down<00:42:12.480> below<00:42:13.240> copy<00:42:13.560> it<00:42:14.079> and

the GitHub jiz down below copy it and

the GitHub jiz down below copy it and
then<00:42:14.480> paste<00:42:14.760> it<00:42:15.240> right<00:42:15.520> over<00:42:16.119> here<00:42:17.119> once<00:42:17.319> you

then paste it right over here once you

then paste it right over here once you
do<00:42:17.640> that<00:42:17.800> you're<00:42:17.960> going<00:42:18.040> to<00:42:18.200> get<00:42:18.319> an<00:42:18.480> error

do that you're going to get an error

do that you're going to get an error
because<00:42:19.400> our<00:42:19.720> tail<00:42:20.040> wi.<00:42:20.640> config.js<00:42:21.480> also<00:42:22.319> got

because our tail wi. config.js also got

because our tail wi. config.js also got
overridden<00:42:23.640> so<00:42:23.960> copy<00:42:24.240> it<00:42:24.359> from<00:42:24.480> the<00:42:24.599> GitHub

overridden so copy it from the GitHub

overridden so copy it from the GitHub
gist<00:42:25.359> and<00:42:25.480> then<00:42:25.680> paste<00:42:25.920> it<00:42:26.319> right<00:42:26.520> here<00:42:27.359> that's

gist and then paste it right here that's

gist and then paste it right here that's
going<00:42:27.760> to<00:42:27.920> ensure<00:42:28.400> that<00:42:28.520> you<00:42:28.720> have<00:42:29.000> access<00:42:29.319> to

going to ensure that you have access to

going to ensure that you have access to
all<00:42:29.880> the<00:42:30.040> necessary<00:42:30.680> theme<00:42:31.319> colors<00:42:32.319> and

all the necessary theme colors and

all the necessary theme colors and
everything<00:42:33.000> is<00:42:33.119> going<00:42:33.319> to<00:42:33.480> work<00:42:33.839> as<00:42:33.960> it<00:42:34.200> should

everything is going to work as it should

everything is going to work as it should
now<00:42:35.319> with<00:42:35.520> the<00:42:35.640> dark<00:42:36.280> mode<00:42:37.280> so<00:42:37.720> below<00:42:38.119> this

now with the dark mode so below this

now with the dark mode so below this
image<00:42:38.839> let's<00:42:39.079> create<00:42:39.359> an<00:42:39.520> H2<00:42:40.400> that's<00:42:40.599> going<00:42:40.800> to

image let's create an H2 that's going to

image let's create an H2 that's going to
say<00:42:41.440> something<00:42:41.839> like<00:42:42.200> create<00:42:42.839> a<00:42:43.119> new

say something like create a new

say something like create a new
account<00:42:45.240> and<00:42:45.559> we<00:42:45.680> can<00:42:45.839> give<00:42:45.960> it<00:42:46.040> a<00:42:46.240> class<00:42:46.599> name

account and we can give it a class name

account and we can give it a class name
of<00:42:48.200> H3<00:42:49.200> bold<00:42:50.200> now<00:42:50.400> I<00:42:50.480> know<00:42:50.599> what<00:42:50.720> you're

of H3 bold now I know what you're

of H3 bold now I know what you're
thinking<00:42:51.520> why<00:42:51.760> H3<00:42:52.480> if<00:42:52.640> the<00:42:52.760> element<00:42:53.079> is<00:42:53.400> H2

thinking why H3 if the element is H2

thinking why H3 if the element is H2
well<00:42:54.640> that's<00:42:54.880> because<00:42:55.200> on<00:42:55.400> medium<00:42:55.760> devices<00:42:56.240> is

well that's because on medium devices is

well that's because on medium devices is
it's<00:42:56.760> going<00:42:56.920> to<00:42:57.040> be<00:42:57.280> H2<00:42:57.880> bold<00:42:58.319> so<00:42:58.440> we're<00:42:58.599> going

it's going to be H2 bold so we're going

it's going to be H2 bold so we're going
to<00:42:58.839> make<00:42:58.960> it<00:42:59.079> a<00:42:59.240> bit<00:42:59.480> smaller<00:43:00.240> there<00:43:01.200> we<00:43:01.280> can

to make it a bit smaller there we can

to make it a bit smaller there we can
also<00:43:01.720> give<00:43:01.839> it<00:43:01.920> a<00:43:02.079> padding<00:43:02.480> top<00:43:02.920> of<00:43:03.319> five<00:43:03.760> so<00:43:04.119> PT

also give it a padding top of five so PT

also give it a padding top of five so PT
of<00:43:04.760> five<00:43:05.400> and<00:43:05.559> then<00:43:05.760> small<00:43:06.040> devices<00:43:06.760> a<00:43:06.920> larger

of five and then small devices a larger

of five and then small devices a larger
PT<00:43:07.800> of<00:43:08.079> 12<00:43:08.599> to<00:43:08.760> create<00:43:09.040> some<00:43:09.599> spacing<00:43:10.599> below

PT of 12 to create some spacing below

PT of 12 to create some spacing below
the<00:43:11.119> H2<00:43:11.760> we<00:43:11.839> can<00:43:12.000> have<00:43:12.200> a<00:43:12.359> P<00:43:12.640> tag<00:43:13.160> and<00:43:13.359> this<00:43:13.559> P

the H2 we can have a P tag and this P

the H2 we can have a P tag and this P
tag<00:43:14.040> is<00:43:14.119> going<00:43:14.319> to<00:43:14.480> say<00:43:15.040> to<00:43:15.359> use

tag is going to say to use

tag is going to say to use
snapgram<00:43:18.839> enter<00:43:19.520> your<00:43:20.000> account

snapgram enter your account

snapgram enter your account
details<00:43:22.599> and<00:43:22.800> now<00:43:23.040> we<00:43:23.119> can<00:43:23.280> give<00:43:23.400> it<00:43:23.520> a<00:43:23.680> class

details and now we can give it a class

details and now we can give it a class
name<00:43:25.400> that's<00:43:25.599> going<00:43:25.720> to<00:43:25.839> say<00:43:26.359> text-

name that's going to say text-

name that's going to say text-
light-3<00:43:29.040> small-<00:43:29.920> medium<00:43:30.480> for<00:43:30.720> the<00:43:30.880> font<00:43:31.280> size

light-3 small- medium for the font size

light-3 small- medium for the font size
on<00:43:32.520> medium<00:43:33.000> devices<00:43:33.880> base<00:43:34.400> Dash<00:43:34.720> regular<00:43:35.680> and

on medium devices base Dash regular and

on medium devices base Dash regular and
a<00:43:36.040> margin<00:43:36.440> top<00:43:36.720> of<00:43:37.200> 12<00:43:38.200> and<00:43:38.400> we<00:43:38.520> don't

a margin top of 12 and we don't

a margin top of 12 and we don't
necessarily<00:43:39.160> have<00:43:39.280> to<00:43:39.359> say<00:43:39.680> count<00:43:40.200> just

necessarily have to say count just

necessarily have to say count just
details<00:43:41.119> to<00:43:41.319> use<00:43:41.480> a<00:43:41.599> bit<00:43:41.800> less<00:43:42.240> width<00:43:43.240> now<00:43:43.599> we

details to use a bit less width now we

details to use a bit less width now we
want<00:43:43.839> to<00:43:44.040> wrap<00:43:44.400> our<00:43:44.640> entire<00:43:45.079> form<00:43:45.760> within<00:43:46.079> this

want to wrap our entire form within this

want to wrap our entire form within this
div<00:43:46.760> so<00:43:46.960> let's<00:43:47.200> copy<00:43:47.480> the<00:43:47.599> ending<00:43:48.160> tag<00:43:49.160> and

div so let's copy the ending tag and

div so let's copy the ending tag and
paste<00:43:49.839> it<00:43:50.000> right<00:43:50.280> here<00:43:50.480> below<00:43:50.760> the<00:43:50.880> end<00:43:51.079> of<00:43:51.240> the

paste it right here below the end of the

paste it right here below the end of the
form<00:43:52.359> and<00:43:52.680> let's<00:43:52.960> expand<00:43:53.319> our<00:43:53.559> form<00:43:54.200> to<00:43:54.520> fit

form and let's expand our form to fit

form and let's expand our form to fit
nicely<00:43:55.400> right<00:43:55.599> here

nicely right here

nicely right here
there<00:43:56.839> we<00:43:57.040> go<00:43:57.839> now<00:43:58.079> our<00:43:58.280> form<00:43:58.800> is<00:43:58.960> going<00:43:59.119> to

there we go now our form is going to

there we go now our form is going to
have<00:43:59.720> a<00:44:00.000> class<00:44:00.400> name<00:44:01.119> of

have a class name of

have a class name of
flex

flex

flex
flex-all<00:44:05.680> gap<00:44:05.960> of<00:44:06.200> five<00:44:06.920> w-<00:44:07.640> full<00:44:08.440> and<00:44:08.559> then

flex-all gap of five w- full and then

flex-all gap of five w- full and then
margin<00:44:09.160> top<00:44:09.440> of<00:44:09.559> four<00:44:10.359> this<00:44:10.480> is<00:44:10.599> going<00:44:10.760> to<00:44:10.920> make

margin top of four this is going to make

margin top of four this is going to make
the<00:44:11.280> elements<00:44:11.720> extend<00:44:12.119> the<00:44:12.319> full<00:44:12.720> width<00:44:13.079> of

the elements extend the full width of

the elements extend the full width of
the<00:44:13.359> screen<00:44:14.240> or<00:44:14.520> rather<00:44:14.800> full<00:44:15.119> width<00:44:15.319> of<00:44:15.440> the

the screen or rather full width of the

the screen or rather full width of the
container<00:44:16.240> so<00:44:16.520> now<00:44:16.760> everything<00:44:17.079> looks

container so now everything looks

container so now everything looks
uniform<00:44:18.680> the<00:44:18.839> first<00:44:19.119> field<00:44:19.480> we<00:44:19.680> have<00:44:20.079> is<00:44:20.240> going

uniform the first field we have is going

uniform the first field we have is going
to<00:44:20.520> be<00:44:20.640> a<00:44:20.800> name<00:44:21.079> field<00:44:21.960> we<00:44:22.079> can<00:44:22.240> change<00:44:22.520> the

to be a name field we can change the

to be a name field we can change the
form<00:44:22.960> label<00:44:23.440> to<00:44:24.079> name<00:44:25.079> and<00:44:25.319> we<00:44:25.440> can<00:44:25.559> remove<00:44:25.839> the

form label to name and we can remove the

form label to name and we can remove the
placeholder<00:44:27.079> but<00:44:27.480> rather<00:44:27.960> we<00:44:28.079> can<00:44:28.200> give<00:44:28.319> it<00:44:28.480> a

placeholder but rather we can give it a

placeholder but rather we can give it a
type<00:44:29.160> is<00:44:29.359> equal<00:44:29.599> to

type is equal to

type is equal to
text<00:44:31.359> and<00:44:31.800> a<00:44:32.119> class<00:44:32.520> name<00:44:33.160> equal<00:44:33.480> to<00:44:34.000> Shad

text and a class name equal to Shad

text and a class name equal to Shad
input<00:44:35.839> if<00:44:35.960> we<00:44:36.119> save<00:44:36.480> this<00:44:36.720> it's<00:44:36.920> going<00:44:37.040> to<00:44:37.240> get

input if we save this it's going to get

input if we save this it's going to get
this<00:44:37.599> beautiful<00:44:38.040> view<00:44:38.720> and<00:44:38.920> we<00:44:39.040> don't<00:44:39.359> need<00:44:39.760> a

this beautiful view and we don't need a

this beautiful view and we don't need a
form<00:44:40.359> description<00:44:41.359> I<00:44:41.480> believe<00:44:41.760> a<00:44:42.000> title<00:44:42.559> or

form description I believe a title or

form description I believe a title or
rather<00:44:43.040> a<00:44:43.200> label<00:44:43.800> is<00:44:44.160> enough<00:44:45.160> so<00:44:45.319> now<00:44:45.480> we're

rather a label is enough so now we're

rather a label is enough so now we're
getting<00:44:45.960> closer<00:44:46.480> to<00:44:46.680> this<00:44:46.839> final<00:44:47.240> view<00:44:48.240> so

getting closer to this final view so

getting closer to this final view so
let's<00:44:48.760> go<00:44:48.880> ahead<00:44:49.200> and<00:44:49.440> duplicate<00:44:50.200> this<00:44:50.359> form

let's go ahead and duplicate this form

let's go ahead and duplicate this form
field<00:44:51.400> right<00:44:51.640> here<00:44:52.200> below<00:44:53.200> and<00:44:53.400> the<00:44:53.599> second

field right here below and the second

field right here below and the second
one<00:44:54.119> is<00:44:54.280> going<00:44:54.480> to<00:44:54.839> say<00:44:55.359> username

one is going to say username

one is going to say username
and<00:44:56.680> we<00:44:56.760> can<00:44:56.920> change<00:44:57.119> it<00:44:57.240> to<00:44:57.440> username<00:44:58.119> here<00:44:58.680> as

and we can change it to username here as

and we can change it to username here as
well<00:45:00.119> that's<00:45:00.400> great<00:45:01.040> two<00:45:01.319> done<00:45:01.760> two<00:45:01.960> more<00:45:02.200> to

well that's great two done two more to

well that's great two done two more to
go<00:45:03.079> let's<00:45:03.359> duplicate<00:45:03.760> it<00:45:03.960> two<00:45:04.160> more<00:45:04.480> times<00:45:05.440> the

go let's duplicate it two more times the

go let's duplicate it two more times the
next<00:45:05.920> one<00:45:06.359> is<00:45:06.520> going<00:45:06.720> to<00:45:07.000> say<00:45:08.119> email<00:45:09.119> and<00:45:09.319> we

next one is going to say email and we

next one is going to say email and we
can<00:45:09.599> say<00:45:09.880> email<00:45:10.359> here<00:45:11.359> as<00:45:11.480> well<00:45:11.640> as<00:45:11.760> change<00:45:12.119> the

can say email here as well as change the

can say email here as well as change the
type<00:45:12.520> of<00:45:12.599> the<00:45:12.720> field<00:45:13.240> to<00:45:13.720> email<00:45:14.720> there<00:45:14.880> we<00:45:15.079> go

type of the field to email there we go

type of the field to email there we go
and<00:45:15.920> the<00:45:16.119> last<00:45:16.359> one<00:45:16.640> is<00:45:16.760> going<00:45:16.960> to<00:45:17.200> of<00:45:17.359> course

and the last one is going to of course

and the last one is going to of course
be<00:45:17.880> the<00:45:18.119> password<00:45:18.880> so<00:45:19.040> let's<00:45:19.240> change<00:45:19.559> this<00:45:19.720> to

be the password so let's change this to

be the password so let's change this to
password<00:45:21.160> type<00:45:21.559> password<00:45:22.160> as<00:45:22.400> well<00:45:23.359> and<00:45:23.640> say

password type password as well and say

password type password as well and say
password<00:45:24.640> here<00:45:25.240> so<00:45:25.480> now<00:45:25.960> once<00:45:26.119> we<00:45:26.280> type<00:45:26.599> here

password here so now once we type here

password here so now once we type here
it's<00:45:27.280> actually<00:45:27.559> going<00:45:27.720> to<00:45:27.839> be<00:45:28.040> dots<00:45:28.680> meaning

it's actually going to be dots meaning

it's actually going to be dots meaning
it's<00:45:29.680> hidden<00:45:30.680> and<00:45:30.920> finally<00:45:31.240> we<00:45:31.359> need<00:45:31.559> a

it's hidden and finally we need a

it's hidden and finally we need a
beautiful<00:45:32.160> button<00:45:32.520> that's<00:45:32.680> going<00:45:32.839> to<00:45:32.960> allow

beautiful button that's going to allow

beautiful button that's going to allow
us<00:45:33.319> to<00:45:33.480> submit<00:45:33.839> the<00:45:34.000> form<00:45:34.640> so<00:45:35.079> let's<00:45:35.359> give<00:45:35.640> this

us to submit the form so let's give this

us to submit the form so let's give this
button<00:45:36.400> type<00:45:36.680> submit<00:45:37.440> a<00:45:37.760> class<00:45:38.160> name<00:45:39.040> equal<00:45:39.359> to

button type submit a class name equal to

button type submit a class name equal to
Shad<00:45:41.040> dasb<00:45:41.400> button<00:45:41.960> undor

Shad dasb button undor

Shad dasb button undor
primary<00:45:44.280> there<00:45:44.440> we<00:45:44.640> go<00:45:45.400> but<00:45:45.599> it's<00:45:45.760> not<00:45:45.960> always

primary there we go but it's not always

primary there we go but it's not always
going<00:45:46.400> to<00:45:46.520> say<00:45:46.800> submit<00:45:47.800> sometimes<00:45:48.119> it<00:45:48.319> has<00:45:48.440> to

going to say submit sometimes it has to

going to say submit sometimes it has to
load<00:45:49.280> meaning<00:45:49.720> we've<00:45:50.000> submitted<00:45:50.440> it<00:45:50.800> and<00:45:50.920> it's

load meaning we've submitted it and it's

load meaning we've submitted it and it's
doing<00:45:51.480> its<00:45:51.760> action<00:45:52.760> so<00:45:53.160> what<00:45:53.280> we<00:45:53.440> can<00:45:53.599> do<00:45:53.960> is

doing its action so what we can do is

doing its action so what we can do is
create<00:45:54.839> for<00:45:55.119> now<00:45:55.599> a<00:45:56.000> fake<00:45:56.319> field<00:45:57.040> called<00:45:57.480> is

create for now a fake field called is

create for now a fake field called is
loading<00:45:58.920> so<00:45:59.240> const<00:45:59.800> is<00:46:00.400> loading<00:46:01.400> is<00:46:01.680> at<00:46:01.800> the

loading so const is loading is at the

loading so const is loading is at the
start<00:46:02.359> going<00:46:02.520> to<00:46:02.680> be<00:46:02.800> set<00:46:03.079> to<00:46:03.359> true<00:46:04.200> and<00:46:04.400> now<00:46:04.640> if

start going to be set to true and now if

start going to be set to true and now if
we<00:46:04.920> go<00:46:05.200> back<00:46:05.720> we<00:46:05.800> can<00:46:06.040> use<00:46:06.400> that<00:46:06.640> property<00:46:07.559> to

we go back we can use that property to

we go back we can use that property to
make<00:46:08.040> some<00:46:08.280> Dynamic<00:46:08.920> changes<00:46:09.920> if<00:46:10.480> is<00:46:10.839> loading

make some Dynamic changes if is loading

make some Dynamic changes if is loading
in<00:46:12.079> that<00:46:12.319> case<00:46:12.720> we<00:46:12.839> can<00:46:13.200> return<00:46:13.760> a<00:46:14.000> div<00:46:14.920> that's

in that case we can return a div that's

in that case we can return a div that's
going<00:46:15.280> to<00:46:15.440> have<00:46:15.599> a<00:46:15.839> class<00:46:16.200> name<00:46:17.160> equal<00:46:17.480> to<00:46:17.720> flex

going to have a class name equal to flex

going to have a class name equal to flex
Center<00:46:19.400> and<00:46:19.559> a<00:46:19.839> gap<00:46:20.040> of<00:46:20.400> two<00:46:21.400> between<00:46:21.720> the

Center and a gap of two between the

Center and a gap of two between the
center<00:46:22.119> and<00:46:22.240> the<00:46:22.359> flex<00:46:22.640> you<00:46:22.760> need<00:46:22.880> to<00:46:23.000> have<00:46:23.160> a

center and the flex you need to have a

center and the flex you need to have a
dash<00:46:24.720> and<00:46:25.119> here<00:46:25.559> we<00:46:25.880> can<00:46:26.000> say<00:46:26.200> loading<00:46:26.720> dot<00:46:27.040> dot

dash and here we can say loading dot dot

dash and here we can say loading dot dot
dot<00:46:28.440> else<00:46:29.000> we're<00:46:29.200> going<00:46:29.359> to<00:46:29.480> render<00:46:30.000> something

dot else we're going to render something

dot else we're going to render something
else<00:46:30.920> which<00:46:31.040> is<00:46:31.200> simply<00:46:31.599> a<00:46:31.800> text<00:46:32.280> that's<00:46:32.480> going

else which is simply a text that's going

else which is simply a text that's going
to<00:46:32.839> say<00:46:33.480> sign<00:46:34.240> up<00:46:34.960> and<00:46:35.119> there<00:46:35.240> we<00:46:35.400> go<00:46:35.760> now<00:46:35.920> we

to say sign up and there we go now we

to say sign up and there we go now we
can<00:46:36.160> see<00:46:36.359> loading<00:46:37.160> but<00:46:37.280> to<00:46:37.400> make<00:46:37.559> this<00:46:37.720> loading

can see loading but to make this loading

can see loading but to make this loading
a<00:46:38.119> bit<00:46:38.280> more<00:46:38.480> interesting<00:46:39.400> let's<00:46:39.680> create<00:46:40.040> a

a bit more interesting let's create a

a bit more interesting let's create a
new<00:46:40.440> component<00:46:41.160> called<00:46:42.000> loader<00:46:43.000> so<00:46:43.400> we<00:46:43.520> can<00:46:43.760> go

new component called loader so we can go

new component called loader so we can go
to<00:46:44.160> our<00:46:44.400> components<00:46:45.240> and<00:46:45.400> create<00:46:45.680> a<00:46:45.839> new

to our components and create a new

to our components and create a new
folder<00:46:46.480> within<00:46:46.839> there<00:46:47.400> called<00:46:48.079> shared<00:46:49.079> these

folder within there called shared these

folder within there called shared these
are<00:46:49.440> components<00:46:49.920> that<00:46:49.960> are<00:46:50.079> shared<00:46:50.559> all

are components that are shared all

are components that are shared all
across<00:46:51.480> our<00:46:52.000> application<00:46:53.000> within<00:46:53.280> it<00:46:53.520> we<00:46:53.640> can

across our application within it we can

across our application within it we can
create<00:46:54.079> a<00:46:54.280> new<00:46:54.800> loader.<00:46:56.119> TSX<00:46:57.119> and<00:46:57.319> run

create a new loader. TSX and run

create a new loader. TSX and run
rafc<00:46:59.839> within<00:47:00.280> here<00:47:00.680> we<00:47:00.800> can<00:47:01.000> wrap<00:47:01.480> everything

rafc within here we can wrap everything

rafc within here we can wrap everything
in<00:47:02.040> a<00:47:02.520> div<00:47:03.520> that<00:47:03.880> div<00:47:04.160> is<00:47:04.280> going<00:47:04.440> to<00:47:04.599> have<00:47:04.720> a

in a div that div is going to have a

in a div that div is going to have a
class<00:47:05.319> name<00:47:05.920> equal<00:47:06.240> to<00:47:06.520> flex<00:47:07.200> Center<00:47:07.880> and

class name equal to flex Center and

class name equal to flex Center and
w-o<00:47:09.760> and<00:47:09.960> within<00:47:10.240> it<00:47:10.480> we<00:47:10.599> can<00:47:10.720> render<00:47:11.160> just<00:47:11.480> one

w-o and within it we can render just one

w-o and within it we can render just one
self-closing<00:47:13.079> image<00:47:13.960> with<00:47:14.160> a<00:47:14.400> source<00:47:15.200> equal

self-closing image with a source equal

self-closing image with a source equal
to<00:47:16.240> SL<00:47:16.839> assets<00:47:17.839> SL<00:47:18.400> ions<00:47:19.400> SL

to SL assets SL ions SL

to SL assets SL ions SL
loader.<00:47:21.960> SVG<00:47:22.960> we<00:47:23.079> can<00:47:23.240> have<00:47:23.359> an<00:47:23.520> ALT<00:47:23.839> tag<00:47:24.079> of

loader. SVG we can have an ALT tag of

loader. SVG we can have an ALT tag of
loader<00:47:25.359> we<00:47:25.480> can<00:47:25.599> have<00:47:25.839> have<00:47:25.920> a<00:47:26.119> width<00:47:26.440> of<00:47:26.599> about

loader we can have have a width of about

loader we can have have a width of about
24<00:47:27.640> and<00:47:27.839> a<00:47:28.079> height<00:47:28.440> of

24 and a height of

24 and a height of
24<00:47:30.160> now<00:47:30.440> if<00:47:30.559> we<00:47:30.720> go<00:47:31.000> back<00:47:31.160> to<00:47:31.319> our<00:47:31.480> signup<00:47:31.839> form

24 now if we go back to our signup form

24 now if we go back to our signup form
we<00:47:32.599> can<00:47:32.800> call<00:47:33.240> our<00:47:33.480> self<00:47:33.920> closing<00:47:34.680> loader

we can call our self closing loader

we can call our self closing loader
right<00:47:35.760> here<00:47:36.559> by<00:47:36.960> putting<00:47:37.240> it<00:47:37.480> here<00:47:38.079> and<00:47:38.240> then

right here by putting it here and then

right here by putting it here and then
double<00:47:38.760> clicking<00:47:39.359> and<00:47:39.559> pressing<00:47:39.880> control<00:47:40.240> or

double clicking and pressing control or

double clicking and pressing control or
command<00:47:40.839> space<00:47:41.480> to<00:47:41.839> import<00:47:42.160> it<00:47:42.359> from

command space to import it from

command space to import it from
components<00:47:44.000> if<00:47:44.079> you<00:47:44.240> save<00:47:44.480> it<00:47:44.800> you<00:47:44.920> can<00:47:45.079> see

components if you save it you can see

components if you save it you can see
this<00:47:45.440> loader<00:47:45.960> appear<00:47:46.400> right<00:47:46.640> here<00:47:47.160> which<00:47:47.319> is

this loader appear right here which is

this loader appear right here which is
amazing<00:47:48.760> now<00:47:49.040> of<00:47:49.200> course<00:47:49.440> we're<00:47:49.640> not

amazing now of course we're not

amazing now of course we're not
submitting<00:47:50.480> yet<00:47:50.839> so<00:47:51.040> what<00:47:51.160> we<00:47:51.280> can<00:47:51.440> do<00:47:51.960> is

submitting yet so what we can do is

submitting yet so what we can do is
bring<00:47:52.720> this<00:47:53.280> is<00:47:53.520> loading<00:47:54.119> to<00:47:54.400> false<00:47:55.119> because

bring this is loading to false because

bring this is loading to false because
we<00:47:55.480> haven't<00:47:55.680> haven't<00:47:55.920> yet<00:47:56.040> submitted<00:47:56.520> we<00:47:56.640> have

we haven't haven't yet submitted we have

we haven't haven't yet submitted we have
nothing<00:47:57.079> to<00:47:57.240> load<00:47:58.240> and<00:47:58.440> now<00:47:58.960> we<00:47:59.160> have<00:47:59.400> our

nothing to load and now we have our

nothing to load and now we have our
beautiful<00:48:00.240> form<00:48:00.800> that<00:48:00.920> you<00:48:01.000> can<00:48:01.160> see<00:48:01.520> right

beautiful form that you can see right

beautiful form that you can see right
here<00:48:02.400> it<00:48:02.520> is<00:48:02.680> a<00:48:02.839> bit<00:48:03.079> wider<00:48:03.640> and<00:48:03.839> that's

here it is a bit wider and that's

here it is a bit wider and that's
because<00:48:04.280> we<00:48:04.440> here<00:48:04.760> have<00:48:05.000> more<00:48:05.280> words<00:48:05.839> to<00:48:06.040> use

because we here have more words to use

because we here have more words to use
snapgram<00:48:06.960> please<00:48:07.240> enter<00:48:07.520> your<00:48:07.760> details<00:48:08.599> let's

snapgram please enter your details let's

snapgram please enter your details let's
see<00:48:08.960> what<00:48:09.119> do<00:48:09.240> we<00:48:09.440> have<00:48:09.800> here<00:48:10.680> to<00:48:10.880> use

see what do we have here to use

see what do we have here to use
snapgram<00:48:12.760> okay<00:48:13.079> let's<00:48:13.280> be<00:48:13.480> nice<00:48:13.760> and<00:48:13.920> say

snapgram okay let's be nice and say

snapgram okay let's be nice and say
please<00:48:14.680> enter<00:48:15.040> your<00:48:15.280> details<00:48:16.119> which<00:48:16.240> is<00:48:16.359> going

please enter your details which is going

please enter your details which is going
to<00:48:16.640> make<00:48:16.760> her<00:48:16.920> form<00:48:17.200> a<00:48:17.359> bit<00:48:17.559> wider<00:48:18.559> great<00:48:19.559> and

to make her form a bit wider great and

to make her form a bit wider great and
now<00:48:20.240> that<00:48:20.400> we<00:48:20.520> have<00:48:20.760> all<00:48:20.920> of<00:48:21.119> those<00:48:21.319> fields<00:48:21.920> we

now that we have all of those fields we

now that we have all of those fields we
have<00:48:22.200> to<00:48:22.400> figure<00:48:22.720> out<00:48:23.280> how<00:48:23.520> to<00:48:23.960> actually

have to figure out how to actually

have to figure out how to actually
submit<00:48:25.160> them<00:48:26.119> but<00:48:26.319> before<00:48:26.680> that<00:48:26.839> we're

submit them but before that we're

submit them but before that we're
missing<00:48:27.400> just<00:48:27.680> one<00:48:27.960> additional<00:48:28.400> piece<00:48:28.559> of

missing just one additional piece of

missing just one additional piece of
information<00:48:29.960> which<00:48:30.160> is<00:48:30.839> the<00:48:31.040> link<00:48:31.480> to<00:48:31.680> go<00:48:31.839> to

information which is the link to go to

information which is the link to go to
the<00:48:32.160> login<00:48:32.640> as<00:48:32.839> well<00:48:33.280> in<00:48:33.440> case<00:48:33.720> we<00:48:33.880> already

the login as well in case we already

the login as well in case we already
have<00:48:34.440> an<00:48:34.640> account<00:48:35.559> so<00:48:36.000> right<00:48:36.200> here<00:48:36.480> below<00:48:36.880> this

have an account so right here below this

have an account so right here below this
button<00:48:37.720> we<00:48:37.839> can<00:48:38.040> create<00:48:38.319> a<00:48:38.520> P<00:48:38.839> tag<00:48:39.839> that's

button we can create a P tag that's

button we can create a P tag that's
going<00:48:40.200> to<00:48:40.319> have<00:48:40.480> a<00:48:40.720> class<00:48:41.200> name<00:48:42.200> equal<00:48:42.559> to

going to have a class name equal to

going to have a class name equal to
text-<00:48:44.720> small-<00:48:45.760> regular<00:48:46.760> text-

text- small- regular text-

text- small- regular text-
light-2<00:48:50.400> and<00:48:50.680> text-<00:48:51.240> center<00:48:51.960> and<00:48:52.119> margin<00:48:52.559> top

light-2 and text- center and margin top

light-2 and text- center and margin top
of<00:48:52.960> two<00:48:53.480> so<00:48:53.640> that's<00:48:53.799> going<00:48:53.960> to<00:48:54.160> provide<00:48:54.440> this

of two so that's going to provide this

of two so that's going to provide this
nice<00:48:55.040> centered<00:48:55.640> text<00:48:56.480> we<00:48:56.599> can<00:48:56.760> say<00:48:57.079> already

nice centered text we can say already

nice centered text we can say already
have<00:48:58.319> an

have an

have an
account<00:49:00.400> and<00:49:00.599> if<00:49:00.799> that<00:49:00.920> is<00:49:01.079> the<00:49:01.240> case<00:49:01.599> we<00:49:01.720> can

account and if that is the case we can

account and if that is the case we can
render<00:49:02.400> a<00:49:02.640> link<00:49:03.520> component<00:49:04.520> this<00:49:04.720> link<00:49:05.280> has<00:49:05.440> to

render a link component this link has to

render a link component this link has to
be<00:49:05.760> imported<00:49:06.520> from<00:49:07.400> we<00:49:07.559> don't<00:49:07.799> have<00:49:07.960> it<00:49:08.240> here

be imported from we don't have it here

be imported from we don't have it here
but<00:49:09.119> it<00:49:09.240> should<00:49:09.440> be<00:49:09.599> coming<00:49:09.960> from<00:49:10.920> react

but it should be coming from react

but it should be coming from react
router<00:49:12.000> Dom<00:49:12.640> so<00:49:12.880> right<00:49:13.040> here<00:49:13.200> at<00:49:13.319> the<00:49:13.520> top<00:49:13.799> we

router Dom so right here at the top we

router Dom so right here at the top we
can<00:49:14.040> say<00:49:14.319> import<00:49:14.960> link<00:49:15.960> from<00:49:16.960> react<00:49:17.760> router

can say import link from react router

can say import link from react router
Dom<00:49:19.880> and<00:49:20.079> now<00:49:20.480> if<00:49:20.599> we<00:49:20.799> go<00:49:21.240> down<00:49:22.240> this<00:49:22.359> is

Dom and now if we go down this is

Dom and now if we go down this is
looking<00:49:22.920> good<00:49:23.599> and<00:49:23.760> what<00:49:23.880> is<00:49:24.000> this<00:49:24.119> link<00:49:24.400> going

looking good and what is this link going

looking good and what is this link going
to<00:49:24.760> say<00:49:25.359> well<00:49:25.599> well<00:49:25.760> it's<00:49:25.880> going<00:49:26.040> to<00:49:26.280> point<00:49:26.839> to

to say well well it's going to point to

to say well well it's going to point to
forward<00:49:27.599> SL<00:49:28.040> sign<00:49:28.480> in<00:49:29.480> it's<00:49:29.640> going<00:49:29.799> to<00:49:29.920> have<00:49:30.040> a

forward SL sign in it's going to have a

forward SL sign in it's going to have a
class<00:49:30.640> name<00:49:31.200> of<00:49:31.520> text-

class name of text-

class name of text-
primary<00:49:34.559> and<00:49:34.799> it's<00:49:34.960> going<00:49:35.160> to<00:49:35.359> say<00:49:35.880> log<00:49:36.480> in

primary and it's going to say log in

primary and it's going to say log in
there<00:49:37.640> we<00:49:37.799> go<00:49:38.160> let's<00:49:38.400> style<00:49:38.680> it<00:49:38.799> a<00:49:38.920> bit<00:49:39.119> further

there we go let's style it a bit further

there we go let's style it a bit further
by<00:49:39.960> giving<00:49:40.240> it<00:49:40.480> a<00:49:40.720> text<00:49:41.040> primary<00:49:41.559> 500<00:49:42.400> which<00:49:42.520> is

by giving it a text primary 500 which is

by giving it a text primary 500 which is
the<00:49:42.760> shade<00:49:43.040> of<00:49:43.160> the<00:49:43.319> color<00:49:44.319> text-<00:49:45.240> small-<00:49:46.240> semi

the shade of the color text- small- semi

the shade of the color text- small- semi
bold<00:49:47.920> and<00:49:48.160> finally<00:49:48.680> a<00:49:48.839> margin<00:49:49.280> left<00:49:49.799> of

bold and finally a margin left of

bold and finally a margin left of
one<00:49:52.040> so<00:49:52.280> now<00:49:52.559> it's<00:49:52.720> looking<00:49:53.119> great<00:49:53.720> and<00:49:53.839> it's

one so now it's looking great and it's

one so now it's looking great and it's
going<00:49:54.079> to<00:49:54.240> redirect<00:49:54.720> us<00:49:54.880> to<00:49:55.000> the<00:49:55.160> sign<00:49:55.359> in<00:49:55.559> in

going to redirect us to the sign in in

going to redirect us to the sign in in
form<00:49:56.559> which<00:49:56.799> doesn't<00:49:57.359> exist<00:49:57.880> yet<00:49:58.640> we're<00:49:58.839> going

form which doesn't exist yet we're going

form which doesn't exist yet we're going
to<00:49:59.240> create<00:49:59.559> it<00:50:00.040> as<00:50:00.319> soon<00:50:00.920> as<00:50:01.119> we<00:50:01.319> implement<00:50:01.880> the

to create it as soon as we implement the

to create it as soon as we implement the
functionality<00:50:02.960> to<00:50:03.280> actually<00:50:03.799> log<00:50:04.160> our<00:50:04.440> users

functionality to actually log our users

functionality to actually log our users
in<00:50:05.960> that's<00:50:06.200> definitely<00:50:06.640> the<00:50:06.760> first<00:50:06.960> thing<00:50:07.079> we

in that's definitely the first thing we

in that's definitely the first thing we
have<00:50:07.319> to<00:50:07.480> do<00:50:07.839> right<00:50:08.559> so<00:50:08.880> how<00:50:09.000> is<00:50:09.160> that<00:50:09.359> going<00:50:09.520> to

have to do right so how is that going to

have to do right so how is that going to
work<00:50:10.440> well<00:50:10.799> everything<00:50:11.119> starts<00:50:11.680> with<00:50:11.839> a

work well everything starts with a

work well everything starts with a
button<00:50:12.520> that<00:50:12.720> has<00:50:12.839> a<00:50:13.119> type<00:50:13.480> of<00:50:14.000> submit<00:50:15.000> and

button that has a type of submit and

button that has a type of submit and
once<00:50:15.480> we<00:50:15.680> submit<00:50:16.040> it<00:50:16.440> it's<00:50:16.599> going<00:50:16.760> to<00:50:17.000> submit

once we submit it it's going to submit

once we submit it it's going to submit
the<00:50:17.720> entire<00:50:18.200> form<00:50:19.160> right<00:50:19.960> here<00:50:20.960> that<00:50:21.160> form<00:50:21.559> is

the entire form right here that form is

the entire form right here that form is
going<00:50:21.880> to<00:50:22.079> call<00:50:22.599> the<00:50:22.799> handle<00:50:23.200> submit<00:50:23.640> function

going to call the handle submit function

going to call the handle submit function
which<00:50:24.440> we<00:50:24.599> have<00:50:24.920> here<00:50:25.880> and<00:50:26.040> then<00:50:26.240> the<00:50:26.359> only

which we have here and then the only

which we have here and then the only
question<00:50:27.119> is<00:50:27.799> what<00:50:27.960> do<00:50:28.079> we<00:50:28.200> want<00:50:28.280> to<00:50:28.440> do<00:50:28.760> on

question is what do we want to do on

question is what do we want to do on
submit<00:50:30.240> and<00:50:30.400> the<00:50:30.559> simple<00:50:30.920> answer<00:50:31.280> is<00:50:31.720> we<00:50:31.880> want

submit and the simple answer is we want

submit and the simple answer is we want
to<00:50:32.760> create<00:50:33.720> the<00:50:34.319> user<00:50:35.319> and<00:50:35.680> that<00:50:35.839> usually

to create the user and that usually

to create the user and that usually
looks<00:50:36.440> something<00:50:36.760> like<00:50:37.000> this<00:50:37.599> we<00:50:37.760> say<00:50:38.160> const

looks something like this we say const

looks something like this we say const
new<00:50:39.160> user<00:50:40.000> is<00:50:40.240> equal<00:50:40.559> to<00:50:41.200> a<00:50:41.559> wait<00:50:42.559> why<00:50:42.799> a<00:50:43.040> wait

new user is equal to a wait why a wait

new user is equal to a wait why a wait
because<00:50:43.960> usually<00:50:44.480> creating<00:50:44.839> a<00:50:44.960> user<00:50:45.480> takes

because usually creating a user takes

because usually creating a user takes
some<00:50:46.040> time<00:50:46.839> it<00:50:46.960> is<00:50:47.079> an<00:50:47.359> asynchronous<00:50:48.119> action

some time it is an asynchronous action

some time it is an asynchronous action
in<00:50:48.480> the<00:50:48.640> database<00:50:49.520> which<00:50:49.680> means<00:50:50.000> we<00:50:50.119> have<00:50:50.240> to

in the database which means we have to

in the database which means we have to
specify<00:50:50.960> this<00:50:51.280> as<00:50:51.359> an<00:50:51.559> async<00:50:52.160> function<00:50:53.160> and

specify this as an async function and

specify this as an async function and
then<00:50:53.480> usually<00:50:54.000> the<00:50:54.119> function<00:50:54.400> to<00:50:54.559> create<00:50:54.799> a

then usually the function to create a

then usually the function to create a
user<00:50:55.440> is<00:50:55.599> called<00:50:56.319> create<00:50:57.319> user<00:50:58.319> account<00:50:59.280> to

user is called create user account to

user is called create user account to
which<00:50:59.920> we<00:51:00.040> want<00:51:00.160> to<00:51:00.400> pass<00:51:00.760> the<00:51:01.280> values<00:51:02.280> but<00:51:02.680> as

which we want to pass the values but as

which we want to pass the values but as
you<00:51:02.880> can<00:51:03.000> see<00:51:03.280> we<00:51:03.480> don't<00:51:03.720> yet<00:51:04.000> have<00:51:04.240> the<00:51:04.400> create

you can see we don't yet have the create

you can see we don't yet have the create
user<00:51:05.040> account<00:51:05.359> function<00:51:05.880> so<00:51:06.040> let's<00:51:06.280> comment

user account function so let's comment

user account function so let's comment
this<00:51:06.799> out<00:51:07.559> and<00:51:07.720> we<00:51:07.839> have<00:51:08.079> no<00:51:08.319> idea<00:51:09.280> where<00:51:09.480> is

this out and we have no idea where is

this out and we have no idea where is
this<00:51:09.799> event<00:51:10.119> coming<00:51:10.440> from<00:51:11.119> how<00:51:11.480> are<00:51:11.599> we<00:51:11.720> going

this event coming from how are we going

this event coming from how are we going
to<00:51:12.079> create<00:51:12.480> our<00:51:12.720> user<00:51:13.720> and<00:51:13.960> thankfully<00:51:14.359> for<00:51:14.559> us

to create our user and thankfully for us

to create our user and thankfully for us
this<00:51:15.280> is<00:51:15.559> where<00:51:15.839> aight<00:51:16.400> comes<00:51:16.640> in<00:51:17.160> they're

this is where aight comes in they're

this is where aight comes in they're
going<00:51:17.559> to<00:51:17.720> help<00:51:18.000> us<00:51:18.400> with<00:51:18.720> databases

going to help us with databases

going to help us with databases
functions<00:51:20.440> storage<00:51:21.359> but<00:51:21.640> in<00:51:21.920> this<00:51:22.160> case<00:51:22.880> o<00:51:23.520> as

functions storage but in this case o as

functions storage but in this case o as
we<00:51:23.920> actually<00:51:24.240> have<00:51:24.400> to<00:51:24.559> create<00:51:24.839> our<00:51:24.960> users

we actually have to create our users

we actually have to create our users
and<00:51:26.480> as<00:51:26.599> I've<00:51:26.760> told<00:51:26.920> you<00:51:27.040> at<00:51:27.160> the<00:51:27.359> start<00:51:27.799> we'll

and as I've told you at the start we'll

and as I've told you at the start we'll
be<00:51:28.200> using<00:51:28.720> ID's<00:51:29.520> Cloud<00:51:30.160> platform<00:51:31.160> click<00:51:31.480> the

be using ID's Cloud platform click the

be using ID's Cloud platform click the
special<00:51:32.160> ight<00:51:32.640> Cloud<00:51:32.920> Link<00:51:33.119> in<00:51:33.200> the

special ight Cloud Link in the

special ight Cloud Link in the
description<00:51:34.040> that's<00:51:34.240> going<00:51:34.400> to<00:51:34.520> allow<00:51:34.760> you<00:51:34.880> to

description that's going to allow you to

description that's going to allow you to
sign<00:51:35.400> in<00:51:36.200> and<00:51:36.480> follow<00:51:36.839> along<00:51:37.200> with<00:51:37.359> this<00:51:37.599> video

sign in and follow along with this video

sign in and follow along with this video
seamlessly<00:51:39.200> and<00:51:39.400> then<00:51:39.839> sign<00:51:40.160> in<00:51:40.520> or<00:51:40.839> sign<00:51:41.119> up<00:51:41.680> I

seamlessly and then sign in or sign up I

seamlessly and then sign in or sign up I
recommend<00:51:42.359> with<00:51:42.760> GitHub<00:51:43.760> and<00:51:44.040> once<00:51:44.200> you're<00:51:44.400> in

recommend with GitHub and once you're in

recommend with GitHub and once you're in
you'll<00:51:45.079> be<00:51:45.240> able<00:51:45.440> to<00:51:45.640> create<00:51:46.040> your<00:51:46.319> first

you'll be able to create your first

you'll be able to create your first
project<00:51:48.079> let's<00:51:48.319> do<00:51:48.640> something<00:51:49.000> like

project let's do something like

project let's do something like
jmore

jmore

jmore
snapgram<00:51:52.319> of<00:51:52.480> course<00:51:52.760> this<00:51:52.880> is<00:51:53.000> now<00:51:53.240> going<00:51:53.400> to

snapgram of course this is now going to

snapgram of course this is now going to
be<00:51:53.720> taken<00:51:54.200> by<00:51:54.400> me<00:51:55.040> but<00:51:55.440> whatever<00:51:55.720> name<00:51:55.880> you

be taken by me but whatever name you

be taken by me but whatever name you
decide<00:51:56.359> to<00:51:56.520> take<00:51:57.119> definitely<00:51:57.640> append<00:51:58.040> JSM<00:51:58.680> in

decide to take definitely append JSM in

decide to take definitely append JSM in
front<00:51:59.040> of<00:51:59.400> it<00:52:00.400> and<00:52:00.559> then<00:52:00.799> click

front of it and then click

front of it and then click
create<00:52:03.920> there<00:52:04.079> we<00:52:04.280> go<00:52:04.680> our<00:52:04.880> JSM<00:52:05.319> snapgram<00:52:06.079> has

create there we go our JSM snapgram has

create there we go our JSM snapgram has
been<00:52:06.480> created<00:52:07.160> and<00:52:07.400> here<00:52:07.640> we<00:52:07.760> have<00:52:07.920> our

been created and here we have our

been created and here we have our
getting<00:52:08.440> started<00:52:09.119> guide<00:52:10.119> but<00:52:10.359> thankfully<00:52:10.880> you

getting started guide but thankfully you

getting started guide but thankfully you
won't<00:52:11.319> have<00:52:11.440> to<00:52:11.559> follow<00:52:11.920> it<00:52:12.280> because<00:52:12.520> you're

won't have to follow it because you're

won't have to follow it because you're
watching<00:52:13.319> this<00:52:13.520> video<00:52:13.960> and<00:52:14.079> I'm<00:52:14.200> going<00:52:14.280> to

watching this video and I'm going to

watching this video and I'm going to
teach<00:52:14.760> you<00:52:15.200> everything<00:52:16.000> step<00:52:16.359> by<00:52:16.640> step<00:52:17.079> to

teach you everything step by step to

teach you everything step by step to
utilize<00:52:17.839> all<00:52:18.280> of<00:52:18.440> the<00:52:18.640> primary<00:52:19.319> upright<00:52:19.760> Cloud

utilize all of the primary upright Cloud

utilize all of the primary upright Cloud
features<00:52:21.520> we'll<00:52:21.720> be<00:52:21.880> dealing<00:52:22.319> with<00:52:22.599> OD<00:52:23.240> really

features we'll be dealing with OD really

features we'll be dealing with OD really
soon<00:52:23.720> to<00:52:23.880> create<00:52:24.119> our<00:52:24.319> users<00:52:25.319> databases

soon to create our users databases

soon to create our users databases
functions<00:52:26.960> and<00:52:27.200> even<00:52:27.799> storage<00:52:28.799> so<00:52:29.000> for<00:52:29.240> now

functions and even storage so for now

functions and even storage so for now
the<00:52:29.680> only<00:52:29.920> thing<00:52:30.079> you<00:52:30.200> have<00:52:30.319> to<00:52:30.480> do<00:52:31.000> is<00:52:31.280> copy

the only thing you have to do is copy

the only thing you have to do is copy
this<00:52:31.839> ID<00:52:32.240> that<00:52:32.359> you've<00:52:32.520> been<00:52:32.720> given<00:52:33.040> for<00:52:33.319> your

this ID that you've been given for your

this ID that you've been given for your
project<00:52:34.480> once<00:52:34.680> you<00:52:34.799> do<00:52:35.079> that<00:52:35.359> we<00:52:35.480> can<00:52:35.640> go<00:52:35.839> back

project once you do that we can go back

project once you do that we can go back
to<00:52:36.119> our

to our

to our
application<00:52:37.960> and<00:52:38.160> then<00:52:38.480> we<00:52:38.599> can<00:52:38.760> go<00:52:38.880> to<00:52:39.040> our

application and then we can go to our

application and then we can go to our
Explorer<00:52:40.079> collapse<00:52:40.599> everything<00:52:40.880> so<00:52:41.040> it's

Explorer collapse everything so it's

Explorer collapse everything so it's
easier<00:52:41.520> to<00:52:41.680> see<00:52:42.440> as<00:52:42.559> a<00:52:42.680> matter<00:52:42.880> of<00:52:43.040> fact<00:52:43.240> we<00:52:43.319> can

easier to see as a matter of fact we can

easier to see as a matter of fact we can
close<00:52:44.000> all<00:52:44.240> the<00:52:44.400> files<00:52:44.680> at<00:52:44.839> the<00:52:45.079> moment<00:52:46.079> and

close all the files at the moment and

close all the files at the moment and
then<00:52:46.400> go<00:52:46.559> to<00:52:46.799> Source<00:52:47.760> lib<00:52:48.559> and<00:52:48.799> within<00:52:49.079> the<00:52:49.280> lib

then go to Source lib and within the lib

then go to Source lib and within the lib
we're<00:52:49.720> going<00:52:49.799> to<00:52:49.960> create<00:52:50.240> a<00:52:50.400> new<00:52:50.640> folder

we're going to create a new folder

we're going to create a new folder
called

called

called
aight<00:52:53.240> within<00:52:53.680> aight<00:52:54.200> we're<00:52:54.359> going<00:52:54.480> to<00:52:54.680> create

aight within aight we're going to create

aight within aight we're going to create
a<00:52:55.319> new<00:52:55.599> file<00:52:56.040> called

config.sys

config.sys
so<00:53:19.520> open<00:53:19.760> up<00:53:19.920> your<00:53:20.079> terminal<00:53:20.799> and<00:53:20.960> run<00:53:21.319> mpm

so open up your terminal and run mpm

so open up your terminal and run mpm
install<00:53:23.280> ight<00:53:24.280> and<00:53:24.480> that's<00:53:24.680> the<00:53:24.839> only

install ight and that's the only

install ight and that's the only
dependency<00:53:26.000> you<00:53:26.160> have<00:53:26.280> to<00:53:26.400> install<00:53:26.760> to<00:53:26.880> make

dependency you have to install to make

dependency you have to install to make
this<00:53:27.319> work<00:53:28.200> and<00:53:28.440> just<00:53:28.559> to<00:53:28.760> verify<00:53:29.319> in<00:53:29.559> my<00:53:29.839> case

this work and just to verify in my case

this work and just to verify in my case
I'm<00:53:30.400> on<00:53:30.640> version

13.0.0.0.0 able to define a couple of

13.0.0.0.0 able to define a couple of
things<00:53:57.319> first<00:53:57.520> of<00:53:57.720> all<00:53:58.160> your<00:53:58.599> project<00:53:59.200> ID<00:54:00.200> and

things first of all your project ID and

things first of all your project ID and
I<00:54:00.520> think<00:54:00.680> you<00:54:00.799> already<00:54:01.079> know<00:54:01.280> it<00:54:01.559> right<00:54:02.119> it's

I think you already know it right it's

I think you already know it right it's
the<00:54:02.480> ID<00:54:02.799> we<00:54:03.000> copied<00:54:03.520> from<00:54:03.839> aite<00:54:04.640> but<00:54:04.880> we<00:54:05.040> never

the ID we copied from aite but we never

the ID we copied from aite but we never
want<00:54:05.440> to<00:54:05.559> share<00:54:06.040> any<00:54:06.319> IDs<00:54:06.960> or<00:54:07.200> keys<00:54:07.599> or<00:54:07.839> Secrets

want to share any IDs or keys or Secrets

want to share any IDs or keys or Secrets
publicly<00:54:09.200> so<00:54:09.400> for<00:54:09.640> that<00:54:09.880> we're<00:54:10.040> going<00:54:10.119> to<00:54:10.280> use

publicly so for that we're going to use

publicly so for that we're going to use
environment<00:54:11.440> variables<00:54:12.440> so<00:54:12.880> let's<00:54:13.160> go<00:54:13.440> to<00:54:13.839> our

environment variables so let's go to our

environment variables so let's go to our
app<00:54:15.680> and<00:54:15.880> then<00:54:16.480> outside<00:54:16.960> of<00:54:17.079> the<00:54:17.240> source<00:54:17.799> we

app and then outside of the source we

app and then outside of the source we
can<00:54:18.079> create<00:54:18.440> a<00:54:18.960> new<00:54:20.359> env.<00:54:21.359> local<00:54:21.799> file<00:54:22.720> and

can create a new env. local file and

can create a new env. local file and
within<00:54:23.240> it<00:54:23.520> we<00:54:23.640> can<00:54:23.839> Define<00:54:24.200> the<00:54:24.480> V<00:54:25.160> uncore

within it we can Define the V uncore

within it we can Define the V uncore
aprite<00:54:26.720> uncore<00:54:27.559> projector<00:54:28.559> ID<00:54:29.400> is<00:54:29.640> equal<00:54:30.000> to

aprite uncore projector ID is equal to

aprite uncore projector ID is equal to
this<00:54:31.119> same<00:54:31.599> ID<00:54:32.200> that<00:54:32.359> we<00:54:32.799> copied<00:54:33.799> that<00:54:34.000> way

this same ID that we copied that way

this same ID that we copied that way
instead<00:54:34.720> of<00:54:34.880> just<00:54:35.040> simply<00:54:35.319> using<00:54:35.720> plain<00:54:36.040> text

instead of just simply using plain text

instead of just simply using plain text
here<00:54:36.799> we'll<00:54:36.960> be<00:54:37.079> able<00:54:37.280> to<00:54:37.440> say<00:54:37.880> import.<00:54:38.880> meta

here we'll be able to say import. meta

here we'll be able to say import. meta
env.<00:54:41.880> vorea<00:54:42.960> rightor<00:54:44.160> projector<00:54:45.280> ID<00:54:46.280> and<00:54:46.520> that

env. vorea rightor projector ID and that

env. vorea rightor projector ID and that
way<00:54:47.040> it's<00:54:47.240> going<00:54:47.400> to<00:54:47.559> be<00:54:48.240> safe<00:54:49.240> now<00:54:49.640> here<00:54:50.040> you

way it's going to be safe now here you

way it's going to be safe now here you
can<00:54:50.359> notice<00:54:50.799> that<00:54:51.040> our<00:54:51.280> typescript<00:54:51.839> is

can notice that our typescript is

can notice that our typescript is
complaining<00:54:52.400> a<00:54:52.520> bit<00:54:52.920> saying<00:54:53.240> that<00:54:53.440> EnV<00:54:53.960> does

complaining a bit saying that EnV does

complaining a bit saying that EnV does
not<00:54:54.440> exist<00:54:54.720> on<00:54:54.880> typ<00:54:55.079> type<00:54:55.319> import<00:54:55.680> meta<00:54:56.640> and<00:54:56.920> we

not exist on typ type import meta and we

not exist on typ type import meta and we
just<00:54:57.200> have<00:54:57.319> to<00:54:57.520> let<00:54:57.799> typescript<00:54:58.359> know<00:54:58.599> that

just have to let typescript know that

just have to let typescript know that
we're<00:54:58.920> using<00:54:59.280> V<00:54:59.920> and<00:55:00.160> that<00:55:00.599> this<00:55:00.720> is<00:55:00.880> actually

we're using V and that this is actually

we're using V and that this is actually
going<00:55:01.319> to<00:55:01.559> exist<00:55:02.480> and<00:55:02.640> the<00:55:02.799> way<00:55:02.960> you<00:55:03.160> do<00:55:03.400> that

going to exist and the way you do that

going to exist and the way you do that
is<00:55:03.839> in<00:55:04.000> the<00:55:04.200> source<00:55:04.760> you<00:55:04.880> can<00:55:05.119> add<00:55:05.359> a<00:55:05.559> new<00:55:06.280> v-

is in the source you can add a new v-

is in the source you can add a new v-
env.<00:55:08.599> D.S<00:55:09.599> file<00:55:10.119> and<00:55:10.400> there<00:55:10.720> you<00:55:10.839> can<00:55:11.119> type

env. D.S file and there you can type

env. D.S file and there you can type
reference<00:55:12.920> types<00:55:13.640> is<00:55:13.839> equal<00:55:14.160> to<00:55:14.559> v/<00:55:15.559> client

reference types is equal to v/ client

reference types is equal to v/ client
and<00:55:16.480> then<00:55:16.680> close<00:55:17.000> it<00:55:17.359> like<00:55:17.559> so<00:55:18.240> and<00:55:18.480> add<00:55:19.040> three

and then close it like so and add three

and then close it like so and add three
dashes<00:55:20.119> at<00:55:20.240> the<00:55:20.440> front<00:55:21.440> once<00:55:21.599> you<00:55:21.760> do<00:55:22.039> that<00:55:22.440> you

dashes at the front once you do that you

dashes at the front once you do that you
can<00:55:22.680> see<00:55:23.000> that<00:55:23.200> it's<00:55:23.400> no<00:55:23.640> longer<00:55:24.000> complaining

can see that it's no longer complaining

can see that it's no longer complaining
but<00:55:25.319> now<00:55:25.640> we<00:55:25.760> can<00:55:25.880> still<00:55:26.079> see<00:55:26.319> some<00:55:26.480> warnings

but now we can still see some warnings

but now we can still see some warnings
that<00:55:27.160> these<00:55:27.400> variables<00:55:27.920> are<00:55:28.160> not<00:55:28.440> utilized<00:55:29.359> so

that these variables are not utilized so

that these variables are not utilized so
how<00:55:29.799> do<00:55:29.960> we<00:55:30.119> utilize<00:55:30.720> all<00:55:30.880> of<00:55:31.079> these<00:55:31.319> great

how do we utilize all of these great

how do we utilize all of these great
appes

appes

appes
functionalities<00:55:33.720> well<00:55:34.039> we<00:55:34.160> can<00:55:34.319> say<00:55:35.039> export

functionalities well we can say export

functionalities well we can say export
const<00:55:36.640> client<00:55:37.119> for<00:55:37.319> example<00:55:38.160> is<00:55:38.359> equal<00:55:38.680> to<00:55:39.160> new

const client for example is equal to new

const client for example is equal to new
client<00:55:40.240> so<00:55:40.400> we<00:55:40.520> just<00:55:40.680> have<00:55:40.799> to<00:55:41.039> create<00:55:41.240> an

client so we just have to create an

client so we just have to create an
instance<00:55:42.240> of<00:55:42.559> this<00:55:42.799> client<00:55:43.640> and<00:55:43.799> we're<00:55:43.920> going

instance of this client and we're going

instance of this client and we're going
to<00:55:44.240> repeat<00:55:44.599> this<00:55:44.799> procedure<00:55:45.280> for<00:55:45.720> everything

to repeat this procedure for everything

to repeat this procedure for everything
else<00:55:46.799> so<00:55:47.119> here<00:55:47.440> we<00:55:47.559> can<00:55:47.760> say<00:55:48.559> account<00:55:49.559> is<00:55:49.720> going

else so here we can say account is going

else so here we can say account is going
to<00:55:50.039> be<00:55:50.200> equal<00:55:50.480> to

to be equal to

to be equal to
account<00:55:52.400> then<00:55:52.799> we<00:55:53.039> have<00:55:53.480> something<00:55:53.799> like

account then we have something like

account then we have something like
databases

databases

databases
is<00:55:56.200> equal<00:55:56.480> to<00:55:56.680> new

is equal to new

is equal to new
databases<00:55:59.200> then<00:55:59.599> we<00:55:59.799> have

databases then we have

databases then we have
storage<00:56:01.640> is<00:56:01.799> equal<00:56:02.039> to<00:56:02.240> new

storage is equal to new

storage is equal to new
storage<00:56:04.280> and<00:56:04.559> we<00:56:04.760> also<00:56:05.079> have<00:56:05.480> avatars<00:56:06.440> is

storage and we also have avatars is

storage and we also have avatars is
equal<00:56:06.920> to<00:56:07.319> new

equal to new

equal to new
avatars<00:56:10.119> you<00:56:10.240> can<00:56:10.359> see<00:56:10.520> that<00:56:10.640> it's

avatars you can see that it's

avatars you can see that it's
complaining<00:56:11.280> for<00:56:11.520> a<00:56:11.599> lot<00:56:11.760> of<00:56:11.960> these<00:56:12.640> saying

complaining for a lot of these saying

complaining for a lot of these saying
that<00:56:13.359> the<00:56:13.520> argument<00:56:14.079> client<00:56:14.520> was<00:56:14.680> not

that the argument client was not

that the argument client was not
provided<00:56:15.960> so<00:56:16.200> for<00:56:16.440> all<00:56:16.599> of<00:56:16.799> these<00:56:17.000> to<00:56:17.240> work<00:56:17.760> we

provided so for all of these to work we

provided so for all of these to work we
have<00:56:18.079> to<00:56:18.440> pass<00:56:18.720> in<00:56:19.000> the<00:56:19.240> client<00:56:19.799> within<00:56:20.160> them

have to pass in the client within them

have to pass in the client within them
right<00:56:20.880> here<00:56:21.359> so<00:56:21.599> they<00:56:21.799> know<00:56:22.079> what<00:56:22.200> they're

right here so they know what they're

right here so they know what they're
referring<00:56:22.880> to<00:56:23.640> and<00:56:23.839> with<00:56:24.000> that<00:56:24.160> said<00:56:24.359> we<00:56:24.520> no

referring to and with that said we no

referring to and with that said we no
longer<00:56:25.119> have<00:56:25.359> any

longer have any

longer have any
warnings<00:56:27.079> but<00:56:27.319> now<00:56:27.720> we<00:56:27.839> have<00:56:27.960> to<00:56:28.160> configure

warnings but now we have to configure

warnings but now we have to configure
our<00:56:28.920> client<00:56:29.720> and<00:56:29.839> we<00:56:29.960> can<00:56:30.119> do<00:56:30.359> that<00:56:30.599> by<00:56:30.799> saying

our client and we can do that by saying

our client and we can do that by saying
client<00:56:32.680> dot<00:56:33.559> set<00:56:34.160> project<00:56:35.079> it's<00:56:35.280> pretty

client dot set project it's pretty

client dot set project it's pretty
simple<00:56:36.000> right<00:56:36.480> it's<00:56:36.799> aight<00:56:37.280> config<00:56:38.079> do<00:56:38.440> pro<00:56:38.839> ID

simple right it's aight config do pro ID

simple right it's aight config do pro ID
we<00:56:39.680> already<00:56:40.079> have<00:56:40.319> that<00:56:41.119> but<00:56:41.359> there's<00:56:41.599> another

we already have that but there's another

we already have that but there's another
thing<00:56:42.079> we<00:56:42.200> have<00:56:42.319> to<00:56:42.480> do<00:56:43.039> and<00:56:43.240> that<00:56:43.400> is<00:56:43.799> set<00:56:44.039> up

thing we have to do and that is set up

thing we have to do and that is set up
the<00:56:44.839> endpoint<00:56:45.599> so<00:56:45.760> we<00:56:45.880> can<00:56:45.960> say<00:56:46.240> client.<00:56:47.160> set

the endpoint so we can say client. set

the endpoint so we can say client. set
endpoint<00:56:48.680> and<00:56:48.920> that's<00:56:49.160> going<00:56:49.319> to<00:56:49.520> be

endpoint and that's going to be

endpoint and that's going to be
aite<00:56:52.079> config<00:56:53.079> do<00:56:53.520> URL<00:56:54.520> but<00:56:55.000> hey<00:56:55.359> how<00:56:55.480> do<00:56:55.640> we<00:56:55.760> get

aite config do URL but hey how do we get

aite config do URL but hey how do we get
this<00:56:56.079> URL<00:56:57.000> it's<00:56:57.280> obvious<00:56:57.680> it<00:56:57.839> has<00:56:57.960> to<00:56:58.119> go<00:56:58.400> here

this URL it's obvious it has to go here

this URL it's obvious it has to go here
right<00:56:59.559> and<00:56:59.760> we<00:56:59.839> can<00:57:00.039> import<00:57:00.359> it<00:57:00.480> from<00:57:00.640> envs<00:57:01.359> by

right and we can import it from envs by

right and we can import it from envs by
saying<00:57:01.880> import.<00:57:02.760> meta

saying import. meta

saying import. meta
env.<00:57:05.760> Vore<00:57:06.839> aprite<00:57:07.839> URL<00:57:08.640> so<00:57:08.880> now<00:57:09.079> we<00:57:09.240> have<00:57:09.319> to

env. Vore aprite URL so now we have to

env. Vore aprite URL so now we have to
go<00:57:09.680> to<00:57:09.839> our<00:57:10.359> env.<00:57:11.079> local<00:57:11.680> and<00:57:11.799> we<00:57:11.920> have<00:57:12.000> to<00:57:12.200> add

go to our env. local and we have to add

go to our env. local and we have to add
the<00:57:13.000> Vore<00:57:14.119> aprite<00:57:15.119> URL<00:57:15.880> is<00:57:16.039> equal<00:57:16.319> to<00:57:16.559> a<00:57:16.839> string

the Vore aprite URL is equal to a string

the Vore aprite URL is equal to a string
but<00:57:18.160> hey<00:57:18.440> where<00:57:18.559> do<00:57:18.720> we<00:57:18.920> get<00:57:19.119> this<00:57:19.319> aight<00:57:19.760> URL

but hey where do we get this aight URL

but hey where do we get this aight URL
we<00:57:20.480> didn't<00:57:20.720> see<00:57:20.880> it<00:57:21.119> here<00:57:21.920> in<00:57:22.079> the<00:57:22.240> quick<00:57:22.599> start

we didn't see it here in the quick start

we didn't see it here in the quick start
docs<00:57:23.400> it's<00:57:23.559> going<00:57:23.720> to<00:57:23.920> say<00:57:24.359> right<00:57:24.520> here<00:57:25.039> that

docs it's going to say right here that

docs it's going to say right here that
we<00:57:25.280> can<00:57:25.400> set<00:57:25.599> up<00:57:25.799> endpoint<00:57:26.559> as<00:57:26.760> the<00:57:27.039> https

we can set up endpoint as the https

we can set up endpoint as the https
cloud.<00:57:29.160> aight.<00:57:30.160> V1<00:57:31.119> so<00:57:31.319> let's<00:57:31.599> copy<00:57:31.960> this<00:57:32.640> and

cloud. aight. V1 so let's copy this and

cloud. aight. V1 so let's copy this and
paste<00:57:33.359> it<00:57:33.720> right<00:57:33.960> here<00:57:34.520> so<00:57:34.720> one<00:57:34.880> more<00:57:35.119> time

paste it right here so one more time

paste it right here so one more time
that's<00:57:35.760> https

that's https

that's https
col<00:57:38.599> cloud.

col cloud.

col cloud.
aight.

aight.

aight.
slv1<00:57:42.640> and<00:57:42.799> now<00:57:43.079> we<00:57:43.200> are<00:57:43.400> properly<00:57:43.839> configuring

slv1 and now we are properly configuring

slv1 and now we are properly configuring
our<00:57:45.160> client<00:57:46.160> and<00:57:46.359> this<00:57:46.480> is<00:57:46.680> all<00:57:46.920> that<00:57:47.079> we<00:57:47.240> need

our client and this is all that we need

our client and this is all that we need
to<00:57:47.799> get<00:57:47.960> started<00:57:48.559> with<00:57:49.000> authentication<00:57:50.000> so

to get started with authentication so

to get started with authentication so
now<00:57:50.720> alongside<00:57:51.400> config<00:57:52.039> within<00:57:52.400> aite<00:57:52.960> we're

now alongside config within aite we're

now alongside config within aite we're
going<00:57:53.280> to<00:57:53.440> create<00:57:53.799> a<00:57:54.000> new<00:57:54.280> file<00:57:54.559> called<00:57:54.799> called

going to create a new file called called

going to create a new file called called
api.<00:57:56.359> TS<00:57:57.359> and<00:57:57.599> within<00:57:57.880> it<00:57:58.280> we<00:57:58.400> can<00:57:58.720> export

api. TS and within it we can export

api. TS and within it we can export
async<00:58:00.839> function

async function

async function
create<00:58:03.559> user<00:58:04.559> account<00:58:05.520> that's<00:58:05.720> going<00:58:05.880> to<00:58:06.119> get

create user account that's going to get

create user account that's going to get
in<00:58:06.520> the<00:58:06.680> user<00:58:07.520> that's<00:58:07.720> going<00:58:07.880> to<00:58:08.079> accept<00:58:08.359> the

in the user that's going to accept the

in the user that's going to accept the
user<00:58:08.760> as<00:58:08.880> a<00:58:09.079> parameter<00:58:10.079> and<00:58:10.280> then<00:58:10.480> it'll<00:58:10.880> try

user as a parameter and then it'll try

user as a parameter and then it'll try
to<00:58:11.240> do<00:58:11.480> something<00:58:12.440> do<00:58:12.559> you<00:58:12.720> get<00:58:12.880> where<00:58:13.000> we're

to do something do you get where we're

to do something do you get where we're
going<00:58:13.440> with<00:58:13.599> this<00:58:14.280> this<00:58:14.400> is<00:58:14.559> the<00:58:14.760> function

going with this this is the function

going with this this is the function
we're<00:58:15.400> about<00:58:15.599> to<00:58:15.760> call<00:58:16.160> from<00:58:16.400> within<00:58:16.640> our<00:58:16.839> form

we're about to call from within our form

we're about to call from within our form
so<00:58:17.720> now<00:58:17.960> we<00:58:18.079> can<00:58:18.240> connect<00:58:18.559> to<00:58:18.839> app<00:58:19.119> right

so now we can connect to app right

so now we can connect to app right
authentication<00:58:20.079> functionalities<00:58:21.079> to

authentication functionalities to

authentication functionalities to
actually<00:58:21.760> create<00:58:22.359> this<00:58:22.520> user<00:58:23.359> so<00:58:23.559> to<00:58:23.720> do<00:58:23.920> that

actually create this user so to do that

actually create this user so to do that
let's<00:58:24.359> first<00:58:24.799> follow<00:58:25.079> the<00:58:25.240> proper<00:58:25.640> tab<00:58:25.880> script

let's first follow the proper tab script

let's first follow the proper tab script
Rules<00:58:26.559> by<00:58:26.720> defining<00:58:27.160> the<00:58:27.359> interface<00:58:27.839> for<00:58:28.079> this

Rules by defining the interface for this

Rules by defining the interface for this
user<00:58:29.160> and<00:58:29.319> we<00:58:29.440> can<00:58:29.599> do<00:58:29.799> that<00:58:30.079> by<00:58:30.240> saying<00:58:30.680> that

user and we can do that by saying that

user and we can do that by saying that
the<00:58:31.079> user<00:58:31.720> is<00:58:31.960> of<00:58:32.160> a<00:58:32.400> type<00:58:32.960> or<00:58:33.160> rather<00:58:33.359> of<00:58:33.520> the

the user is of a type or rather of the

the user is of a type or rather of the
interface<00:58:34.599> I<00:58:35.079> as<00:58:35.200> an<00:58:35.480> interface<00:58:36.480> new<00:58:37.119> user<00:58:38.000> and

interface I as an interface new user and

interface I as an interface new user and
we<00:58:38.280> can<00:58:38.440> Define<00:58:38.880> that<00:58:39.319> within<00:58:39.960> a<00:58:40.160> new<00:58:40.359> folder

we can Define that within a new folder

we can Define that within a new folder
that's<00:58:41.160> in<00:58:41.280> the<00:58:41.480> source<00:58:41.799> folder<00:58:42.480> called<00:58:43.480> types

that's in the source folder called types

that's in the source folder called types
within<00:58:44.880> types<00:58:45.359> we<00:58:45.440> can<00:58:45.640> have<00:58:45.799> a<00:58:46.000> new

within types we can have a new

within types we can have a new
index.ts<00:58:48.839> and<00:58:49.039> in<00:58:49.160> the<00:58:49.280> GitHub<00:58:49.599> J<00:58:49.799> down<00:58:50.000> below

index.ts and in the GitHub J down below

index.ts and in the GitHub J down below
you'll<00:58:50.720> be<00:58:50.880> able<00:58:51.079> to<00:58:51.280> find<00:58:51.960> this<00:58:52.240> entire<00:58:52.720> file

you'll be able to find this entire file

you'll be able to find this entire file
that's<00:58:53.359> going<00:58:53.520> to<00:58:53.720> contain<00:58:54.240> a<00:58:54.359> couple<00:58:54.599> of<00:58:54.799> of

that's going to contain a couple of of

that's going to contain a couple of of
different<00:58:55.319> interfaces<00:58:56.319> we<00:58:56.440> can<00:58:56.599> go<00:58:56.760> through

different interfaces we can go through

different interfaces we can go through
each<00:58:57.200> one<00:58:57.359> of<00:58:57.559> these<00:58:57.839> as<00:58:57.960> we're<00:58:58.240> referencing

each one of these as we're referencing

each one of these as we're referencing
it<00:58:58.880> in<00:58:59.000> the<00:58:59.160> code<00:58:59.760> such<00:58:59.960> as<00:59:00.079> in<00:59:00.280> this<00:59:00.480> case

it in the code such as in this case

it in the code such as in this case
export<00:59:01.520> type<00:59:02.079> I<00:59:02.319> new<00:59:02.559> user<00:59:03.480> which<00:59:03.640> has<00:59:03.760> a<00:59:03.960> name

export type I new user which has a name

export type I new user which has a name
email<00:59:05.000> username<00:59:05.520> and<00:59:05.960> password<00:59:06.960> and<00:59:07.160> now<00:59:07.440> we

email username and password and now we

email username and password and now we
can<00:59:08.039> just<00:59:08.280> import<00:59:08.599> it<00:59:08.839> right<00:59:09.039> here<00:59:09.400> from<00:59:09.960> add/

can just import it right here from add/

can just import it right here from add/
types<00:59:11.920> and<00:59:12.039> now<00:59:12.200> we<00:59:12.319> know<00:59:12.640> exactly<00:59:13.319> what<00:59:13.520> this

types and now we know exactly what this

types and now we know exactly what this
user<00:59:14.160> is<00:59:14.319> all<00:59:14.599> about<00:59:15.319> once<00:59:15.520> we<00:59:15.680> know<00:59:15.960> that<00:59:16.280> we

user is all about once we know that we

user is all about once we know that we
can<00:59:16.599> open<00:59:16.839> up<00:59:17.039> a<00:59:17.240> new<00:59:17.559> try<00:59:17.880> and<00:59:18.160> catch<00:59:18.480> Block<00:59:19.359> in

can open up a new try and catch Block in

can open up a new try and catch Block in
the<00:59:19.680> error<00:59:20.119> we<00:59:20.240> can<00:59:20.440> simply<00:59:20.880> consol<00:59:21.520> log<00:59:22.520> the

the error we can simply consol log the

the error we can simply consol log the
error<00:59:24.160> and<00:59:24.319> we<00:59:24.440> might<00:59:24.839> as<00:59:25.000> well<00:59:25.440> return<00:59:25.640> it<00:59:25.960> so

error and we might as well return it so

error and we might as well return it so
return<00:59:27.240> error<00:59:28.119> but<00:59:28.240> the<00:59:28.400> better<00:59:28.720> question<00:59:29.079> is

return error but the better question is

return error but the better question is
what<00:59:29.839> are<00:59:30.000> we<00:59:30.160> going<00:59:30.319> to<00:59:30.559> do<00:59:31.160> within<00:59:31.400> the<00:59:31.559> tri

what are we going to do within the tri

what are we going to do within the tri
block<00:59:32.880> and<00:59:33.119> here<00:59:33.400> we<00:59:33.520> have<00:59:33.640> to<00:59:33.799> create<00:59:34.039> a<00:59:34.160> new

block and here we have to create a new

block and here we have to create a new
account<00:59:35.119> by<00:59:35.240> saying<00:59:35.599> con<00:59:36.079> new<00:59:36.480> account<00:59:37.480> is

account by saying con new account is

account by saying con new account is
equal<00:59:38.079> to<00:59:39.119> await<00:59:40.119> account.<00:59:41.000> create<00:59:42.000> and<00:59:42.160> we

equal to await account. create and we

equal to await account. create and we
need<00:59:42.400> to<00:59:42.599> pass<00:59:42.839> a<00:59:42.960> couple<00:59:43.160> of<00:59:43.359> attributes<00:59:44.359> the

need to pass a couple of attributes the

need to pass a couple of attributes the
first<00:59:44.760> one<00:59:44.920> is<00:59:45.079> the<00:59:45.280> ID<00:59:46.039> of<00:59:46.200> course<00:59:46.440> we<00:59:46.520> can

first one is the ID of course we can

first one is the ID of course we can
just<00:59:46.920> randomly<00:59:47.440> type<00:59:47.680> it<00:59:48.319> but<00:59:48.920> upright

just randomly type it but upright

just randomly type it but upright
provides<00:59:49.720> us<00:59:49.880> with<00:59:50.000> a<00:59:50.119> great<00:59:50.400> utility

provides us with a great utility

provides us with a great utility
function<00:59:51.480> called<00:59:51.880> ID<00:59:52.799> so<00:59:52.960> we<00:59:53.079> can<00:59:53.280> simply

function called ID so we can simply

function called ID so we can simply
import<00:59:55.000> ID<00:59:56.000> from<00:59:57.039> aight<00:59:58.039> and<00:59:58.240> then<00:59:58.720> what<00:59:58.880> you

import ID from aight and then what you

import ID from aight and then what you
can<00:59:59.160> do<00:59:59.839> is<01:00:00.000> just<01:00:00.200> call<01:00:00.480> it<01:00:01.000> and<01:00:01.160> say<01:00:01.440> id.

can do is just call it and say id.

can do is just call it and say id.
unique<01:00:03.280> and<01:00:03.480> that's<01:00:03.680> it<01:00:04.119> it's<01:00:04.280> always<01:00:04.520> going

unique and that's it it's always going

unique and that's it it's always going
to<01:00:04.880> provide<01:00:05.119> you<01:00:05.240> with<01:00:05.359> the<01:00:05.480> unique<01:00:05.880> ID<01:00:06.880> and

to provide you with the unique ID and

to provide you with the unique ID and
then<01:00:07.240> we<01:00:07.400> provide<01:00:07.680> the<01:00:07.799> user.<01:00:08.440> email<01:00:09.440> user.

then we provide the user. email user.

then we provide the user. email user.
password<01:00:11.200> and<01:00:11.599> user.name<01:00:12.680> and<01:00:13.680> for<01:00:13.920> now<01:00:14.319> we

password and user.name and for now we

password and user.name and for now we
can<01:00:14.799> return<01:00:15.200> the<01:00:15.400> new<01:00:16.319> account<01:00:17.319> so<01:00:17.559> now<01:00:17.839> you

can return the new account so now you

can return the new account so now you
can<01:00:18.119> also<01:00:18.319> notice<01:00:18.839> this<01:00:19.039> account<01:00:19.319> we're

can also notice this account we're

can also notice this account we're
calling<01:00:20.079> is<01:00:20.240> not<01:00:20.520> defined<01:00:21.200> so<01:00:21.400> let's<01:00:21.599> double

calling is not defined so let's double

calling is not defined so let's double
click<01:00:22.119> it<01:00:22.640> and<01:00:22.799> would<01:00:22.960> you<01:00:23.079> look<01:00:23.240> at<01:00:23.480> that<01:00:23.920> we

click it and would you look at that we

click it and would you look at that we
are<01:00:24.200> already<01:00:24.760> exporting<01:00:25.200> it<01:00:25.400> from<01:00:25.559> the<01:00:25.720> config

are already exporting it from the config

are already exporting it from the config
and<01:00:26.839> if<01:00:26.920> you<01:00:27.039> go<01:00:27.200> into<01:00:27.400> the<01:00:27.520> config<01:00:28.359> remember

and if you go into the config remember

and if you go into the config remember
that<01:00:29.400> this<01:00:29.520> is<01:00:29.680> the<01:00:29.839> account<01:00:30.119> utility<01:00:30.839> that<01:00:30.960> we

that this is the account utility that we

that this is the account utility that we
have<01:00:31.319> established<01:00:32.000> before<01:00:32.599> by<01:00:32.799> passing<01:00:33.119> the

have established before by passing the

have established before by passing the
client<01:00:33.720> into<01:00:33.960> it<01:00:34.400> and<01:00:34.559> referencing<01:00:35.200> the

client into it and referencing the

client into it and referencing the
account<01:00:35.920> from<01:00:36.200> aite<01:00:37.160> that's<01:00:37.319> going<01:00:37.480> to<01:00:37.640> allow

account from aite that's going to allow

account from aite that's going to allow
us<01:00:38.079> to<01:00:38.240> deal<01:00:38.559> with<01:00:38.680> the<01:00:38.880> O<01:00:39.440> functionalities<01:00:40.400> of

us to deal with the O functionalities of

us to deal with the O functionalities of
aight<01:00:41.160> Cloud<01:00:42.000> so<01:00:42.240> now<01:00:42.599> we<01:00:42.720> can<01:00:42.880> close<01:00:43.319> all<01:00:43.520> of

aight Cloud so now we can close all of

aight Cloud so now we can close all of
this<01:00:44.440> and<01:00:44.680> go<01:00:45.000> back<01:00:45.280> to<01:00:45.520> our<01:00:45.760> form<01:00:46.680> within<01:00:47.119> o

this and go back to our form within o

this and go back to our form within o
forms<01:00:49.039> sign<01:00:49.319> up<01:00:49.559> form<01:00:50.359> and<01:00:50.680> here<01:00:51.000> we're<01:00:51.240> back

forms sign up form and here we're back

forms sign up form and here we're back
to<01:00:51.599> calling<01:00:51.960> the<01:00:52.160> function<01:00:52.720> that's<01:00:52.920> going<01:00:53.079> to

to calling the function that's going to

to calling the function that's going to
create<01:00:53.799> a<01:00:53.960> new<01:00:54.160> user

create a new user

create a new user
so<01:00:55.880> let's<01:00:56.119> go<01:00:56.280> ahead<01:00:56.599> and

so let's go ahead and

so let's go ahead and
uncommented<01:00:58.400> double<01:00:58.760> click<01:00:59.039> and<01:00:59.160> then<01:00:59.400> press

uncommented double click and then press

uncommented double click and then press
control<01:01:00.079> space<01:01:00.680> and<01:01:00.920> import<01:01:01.280> it<01:01:01.520> from<01:01:01.760> lib

control space and import it from lib

control space and import it from lib
upright<01:01:03.520> API<01:01:04.520> and<01:01:04.720> we're<01:01:04.920> now<01:01:05.200> hoping<01:01:05.799> that

upright API and we're now hoping that

upright API and we're now hoping that
we're<01:01:06.039> going<01:01:06.160> to<01:01:06.359> get<01:01:06.640> a<01:01:06.839> new<01:01:07.119> user<01:01:07.839> right<01:01:08.079> here

we're going to get a new user right here

we're going to get a new user right here
or<01:01:08.520> at<01:01:08.640> least<01:01:08.799> a<01:01:08.960> new<01:01:09.200> account<01:01:10.000> back<01:01:10.680> after<01:01:10.960> the

or at least a new account back after the

or at least a new account back after the
creation<01:01:11.760> is<01:01:12.000> done<01:01:12.839> so<01:01:13.079> let's<01:01:13.280> go<01:01:13.400> ahead<01:01:13.680> and

creation is done so let's go ahead and

creation is done so let's go ahead and
conso<01:01:14.359> log<01:01:14.640> that<01:01:14.839> user<01:01:15.599> right<01:01:15.839> here<01:01:16.599> by<01:01:16.760> saying

conso log that user right here by saying

conso log that user right here by saying
consol<01:01:17.559> log<01:01:17.960> new<01:01:18.319> user<01:01:19.319> now<01:01:19.760> if<01:01:19.880> we<01:01:20.079> save<01:01:20.640> this

consol log new user now if we save this

consol log new user now if we save this
we<01:01:21.799> are<01:01:22.000> ready<01:01:22.319> to<01:01:22.880> submit<01:01:23.680> our<01:01:23.880> form<01:01:24.760> by

we are ready to submit our form by

we are ready to submit our form by
entering<01:01:25.480> a<01:01:25.720> name<01:01:26.400> let's<01:01:26.559> do<01:01:26.880> Adrien<01:01:27.880> we<01:01:28.000> can

entering a name let's do Adrien we can

entering a name let's do Adrien we can
do<01:01:28.520> JavaScript

do JavaScript

do JavaScript
Mastery<01:01:31.440> and<01:01:31.640> an<01:01:31.880> email<01:01:32.520> off<01:01:32.880> contact<01:01:33.680> JS

Mastery and an email off contact JS

Mastery and an email off contact JS
mastery.<01:01:34.880> proo<01:01:35.520> and<01:01:35.720> finally<01:01:36.319> a<01:01:36.599> password<01:01:37.559> so

mastery. proo and finally a password so

mastery. proo and finally a password so
let's<01:01:38.039> go<01:01:38.200> ahead<01:01:38.480> and<01:01:38.720> click<01:01:39.160> sign

let's go ahead and click sign

let's go ahead and click sign
up<01:01:41.319> and<01:01:41.640> we<01:01:41.799> have<01:01:42.079> really<01:01:42.319> good<01:01:42.520> validation

up and we have really good validation

up and we have really good validation
here<01:01:43.400> I'm<01:01:43.559> glad<01:01:43.839> we<01:01:44.000> were<01:01:44.200> able<01:01:44.400> to<01:01:44.559> see<01:01:44.799> it<01:01:45.720> we

here I'm glad we were able to see it we

here I'm glad we were able to see it we
need<01:01:46.079> eight<01:01:46.440> characters<01:01:47.200> so<01:01:47.400> I'm<01:01:47.520> going<01:01:47.599> to

need eight characters so I'm going to

need eight characters so I'm going to
enter<01:01:48.079> them<01:01:48.520> and<01:01:48.720> then<01:01:48.920> click<01:01:49.319> sign

enter them and then click sign

enter them and then click sign
up<01:01:51.520> now<01:01:51.799> it<01:01:51.960> seems<01:01:52.279> like<01:01:52.599> nothing<01:01:52.920> has

up now it seems like nothing has

up now it seems like nothing has
happened<01:01:53.839> but<01:01:54.039> let's<01:01:54.200> go<01:01:54.559> ahead<01:01:54.920> and<01:01:55.160> go<01:01:55.359> to

happened but let's go ahead and go to

happened but let's go ahead and go to
inspect<01:01:57.160> and<01:01:57.279> then<01:01:57.520> right<01:01:57.720> here<01:01:57.920> we<01:01:58.039> can<01:01:58.160> check

inspect and then right here we can check

inspect and then right here we can check
the<01:01:58.559> console<01:01:59.359> we<01:01:59.599> indeed<01:02:00.240> did<01:02:00.520> get<01:02:00.799> back<01:02:01.000> an

the console we indeed did get back an

the console we indeed did get back an
object<01:02:02.000> that<01:02:02.160> says<01:02:02.559> created<01:02:03.079> ad<01:02:03.640> updated<01:02:04.160> ad

object that says created ad updated ad

object that says created ad updated ad
email<01:02:05.720> name<01:02:06.440> password<01:02:06.960> update<01:02:07.520> and<01:02:07.760> all<01:02:08.119> this

email name password update and all this

email name password update and all this
good<01:02:08.680> stuff<01:02:09.359> which<01:02:09.520> means<01:02:09.799> that<01:02:09.960> this<01:02:10.079> is

good stuff which means that this is

good stuff which means that this is
coming<01:02:10.640> back<01:02:10.880> from<01:02:11.200> aite<01:02:12.160> which<01:02:12.359> then<01:02:12.559> means

coming back from aite which then means

coming back from aite which then means
that<01:02:13.079> our<01:02:13.279> user<01:02:13.920> was<01:02:14.160> indeed<01:02:14.599> created<01:02:15.520> it's

that our user was indeed created it's

that our user was indeed created it's
that<01:02:16.000> we<01:02:16.160> just<01:02:16.279> didn't<01:02:16.520> do<01:02:16.760> anything<01:02:17.119> with<01:02:17.319> it

that we just didn't do anything with it

that we just didn't do anything with it
which<01:02:17.839> is<01:02:17.960> going<01:02:18.039> to<01:02:18.160> be<01:02:18.279> our<01:02:18.520> next<01:02:18.799> goal<01:02:19.400> so

which is going to be our next goal so

which is going to be our next goal so
now<01:02:19.960> if<01:02:20.079> we<01:02:20.240> go<01:02:20.440> back<01:02:20.599> to<01:02:20.760> our<01:02:20.920> ight<01:02:21.520> project

now if we go back to our ight project

now if we go back to our ight project
and<01:02:22.359> reload<01:02:22.760> the<01:02:22.960> page<01:02:23.559> you<01:02:23.720> should<01:02:23.920> be<01:02:24.039> able

and reload the page you should be able

and reload the page you should be able
to<01:02:24.559> see<01:02:24.960> that<01:02:25.200> a<01:02:25.359> new<01:02:25.599> user<01:02:26.119> has<01:02:26.279> been

to see that a new user has been

to see that a new user has been
created<01:02:28.559> and<01:02:28.760> you<01:02:28.839> can<01:02:29.039> even<01:02:29.319> dive<01:02:29.599> into<01:02:29.880> it

created and you can even dive into it

created and you can even dive into it
see<01:02:30.520> more<01:02:30.760> information<01:02:31.279> about<01:02:31.559> it<01:02:32.079> verify<01:02:32.720> it

see more information about it verify it

see more information about it verify it
check<01:02:33.279> the<01:02:33.400> membership<01:02:34.119> or<01:02:34.359> do<01:02:34.920> a<01:02:35.119> lot<01:02:35.480> more

check the membership or do a lot more

check the membership or do a lot more
stuff<01:02:36.200> which<01:02:36.319> is<01:02:36.480> pretty<01:02:36.760> amazing<01:02:37.359> that<01:02:37.520> we're

stuff which is pretty amazing that we're

stuff which is pretty amazing that we're
able<01:02:37.920> to<01:02:38.119> set<01:02:38.319> up<01:02:38.599> authentication<01:02:39.599> this<01:02:39.799> early

able to set up authentication this early

able to set up authentication this early
in<01:02:40.279> the<01:02:40.920> project<01:02:41.920> but<01:02:42.200> it's<01:02:42.359> not<01:02:42.559> going<01:02:42.760> to<01:02:42.880> be

in the project but it's not going to be

in the project but it's not going to be
enough<01:02:43.480> just<01:02:43.599> to<01:02:43.760> create<01:02:44.039> our<01:02:44.200> users<01:02:44.920> we'll

enough just to create our users we'll

enough just to create our users we'll
also<01:02:45.680> have<01:02:45.839> to<01:02:46.000> set<01:02:46.200> up<01:02:46.400> our<01:02:46.720> databases<01:02:47.720> and

also have to set up our databases and

also have to set up our databases and
our<01:02:48.200> storage<01:02:48.720> buckets<01:02:49.279> for<01:02:49.520> all<01:02:49.680> of<01:02:49.839> this<01:02:49.960> to

our storage buckets for all of this to

our storage buckets for all of this to
work<01:02:50.839> because<01:02:51.119> our<01:02:51.359> users<01:02:51.799> will<01:02:52.079> create<01:02:52.480> posts

work because our users will create posts

work because our users will create posts
and<01:02:53.119> we<01:02:53.240> need<01:02:53.359> to<01:02:53.480> be<01:02:53.599> able<01:02:53.799> to<01:02:53.960> create

and we need to be able to create

and we need to be able to create
relations<01:02:55.160> between<01:02:55.520> users<01:02:56.440> posts<01:02:57.119> and<01:02:57.480> more

relations between users posts and more

relations between users posts and more
first<01:02:58.880> we're<01:02:59.039> going<01:02:59.200> to<01:02:59.359> create<01:02:59.720> a<01:02:59.880> new<01:03:00.160> bucket

first we're going to create a new bucket

first we're going to create a new bucket
for<01:03:01.039> our<01:03:01.319> media<01:03:02.160> this<01:03:02.359> is<01:03:02.480> where<01:03:02.599> we're<01:03:02.760> going

for our media this is where we're going

for our media this is where we're going
to<01:03:03.000> upload<01:03:03.359> our<01:03:03.559> images<01:03:04.359> so<01:03:04.520> let's<01:03:04.720> create<01:03:04.960> a

to upload our images so let's create a

to upload our images so let's create a
new<01:03:05.279> bucket<01:03:05.960> and<01:03:06.200> call<01:03:06.480> it

new bucket and call it

new bucket and call it
media<01:03:09.039> there<01:03:09.160> we<01:03:09.359> go<01:03:09.839> as<01:03:10.000> simple<01:03:10.319> as<01:03:10.440> it<01:03:10.599> gets

media there we go as simple as it gets

media there we go as simple as it gets
immediately<01:03:11.960> we're<01:03:12.160> given<01:03:12.400> the<01:03:12.520> media<01:03:12.880> ID<01:03:13.440> so

immediately we're given the media ID so

immediately we're given the media ID so
let's<01:03:13.799> go<01:03:13.920> ahead<01:03:14.119> and<01:03:14.319> copy<01:03:14.599> it<01:03:15.279> and<01:03:15.640> back

let's go ahead and copy it and back

let's go ahead and copy it and back
within<01:03:16.079> our<01:03:16.359> app<01:03:16.720> we<01:03:16.839> can<01:03:17.000> go<01:03:17.160> to<01:03:17.319> our<01:03:17.799> EnV<01:03:18.319> file

within our app we can go to our EnV file

within our app we can go to our EnV file
and<01:03:19.400> then<01:03:19.559> we<01:03:19.640> can<01:03:19.880> paste<01:03:20.119> it<01:03:20.359> right<01:03:20.599> here<01:03:21.079> but

and then we can paste it right here but

and then we can paste it right here but
before<01:03:21.799> say<01:03:22.760> Vore<01:03:23.760> upright

before say Vore upright

before say Vore upright
underscore<01:03:25.839> storage<01:03:26.640> uncore<01:03:27.240> ID<01:03:28.039> and<01:03:28.160> then

underscore storage uncore ID and then

underscore storage uncore ID and then
set<01:03:28.599> this<01:03:28.760> equal<01:03:29.039> to<01:03:29.200> this<01:03:29.400> string<01:03:29.839> that<01:03:30.000> we

set this equal to this string that we

set this equal to this string that we
got<01:03:30.359> from<01:03:30.599> here<01:03:31.319> this<01:03:31.559> is<01:03:31.720> our<01:03:31.920> storage<01:03:32.400> bucket

got from here this is our storage bucket

got from here this is our storage bucket
now<01:03:33.640> while<01:03:33.799> we're<01:03:34.079> here<01:03:34.480> let's<01:03:34.680> go<01:03:34.799> ahead<01:03:35.000> and

now while we're here let's go ahead and

now while we're here let's go ahead and
set<01:03:35.319> up<01:03:35.440> our<01:03:35.640> databases<01:03:36.319> as<01:03:36.480> well<01:03:37.240> so<01:03:37.559> click

set up our databases as well so click

set up our databases as well so click
create<01:03:38.559> database<01:03:39.559> and<01:03:39.839> enter<01:03:40.119> the<01:03:40.240> new

create database and enter the new

create database and enter the new
database<01:03:40.960> name<01:03:41.440> called<01:03:42.279> snapcam<01:03:43.279> you<01:03:43.440> don't

database name called snapcam you don't

database name called snapcam you don't
have<01:03:43.760> to<01:03:43.920> enter<01:03:44.319> database<01:03:44.799> ID<01:03:45.359> because<01:03:45.640> it

have to enter database ID because it

have to enter database ID because it
will<01:03:45.920> be<01:03:46.079> generated<01:03:46.640> automatically<01:03:47.520> so<01:03:47.720> just

will be generated automatically so just

will be generated automatically so just
click<01:03:48.520> create<01:03:49.520> now<01:03:49.720> that<01:03:49.880> we<01:03:50.000> have<01:03:50.119> our

click create now that we have our

click create now that we have our
database<01:03:50.920> we<01:03:51.000> can<01:03:51.160> go<01:03:51.240> ahead<01:03:51.440> and<01:03:51.640> copy<01:03:51.920> its<01:03:52.200> ID

database we can go ahead and copy its ID

database we can go ahead and copy its ID
so<01:03:53.480> go<01:03:53.760> back<01:03:54.119> and<01:03:54.279> and<01:03:54.480> this<01:03:54.680> time<01:03:54.960> say<01:03:55.760> Vore

so go back and and this time say Vore

so go back and and this time say Vore
aite<01:03:57.559> _<01:03:58.119> database<01:03:58.960> _<01:03:59.480> ID<01:04:00.160> and<01:04:00.279> we<01:04:00.359> can<01:04:00.599> paste<01:04:00.880> it

aite _ database _ ID and we can paste it

aite _ database _ ID and we can paste it
right<01:04:01.480> here<01:04:02.039> so<01:04:02.319> now<01:04:02.480> we<01:04:02.640> have<01:04:02.799> the<01:04:02.920> aight<01:04:03.400> URL

right here so now we have the aight URL

right here so now we have the aight URL
and<01:04:04.279> then<01:04:04.480> three<01:04:04.760> different<01:04:05.119> IDs<01:04:05.880> from<01:04:06.119> three

and then three different IDs from three

and then three different IDs from three
different<01:04:06.680> services<01:04:07.440> that<01:04:07.640> aight<01:04:08.119> Cloud

different services that aight Cloud

different services that aight Cloud
offers<01:04:09.520> now<01:04:09.799> while<01:04:09.960> we're<01:04:10.160> here<01:04:10.599> we<01:04:10.760> also<01:04:11.000> need

offers now while we're here we also need

offers now while we're here we also need
to<01:04:11.440> Define<01:04:12.240> how<01:04:12.440> our<01:04:12.720> database<01:04:13.160> is<01:04:13.279> going<01:04:13.440> to

to Define how our database is going to

to Define how our database is going to
look<01:04:13.920> like<01:04:14.400> so<01:04:14.720> the<01:04:14.960> entire<01:04:15.480> database

look like so the entire database

look like so the entire database
structure<01:04:16.880> so<01:04:17.160> bear<01:04:17.480> with<01:04:17.680> me<01:04:18.359> let's<01:04:18.640> define

structure so bear with me let's define

structure so bear with me let's define
all<01:04:19.680> of<01:04:19.799> the<01:04:20.000> collections<01:04:20.880> and<01:04:21.240> relations

all of the collections and relations

all of the collections and relations
between<01:04:22.160> them<01:04:22.520> that<01:04:22.599> we're<01:04:22.760> going<01:04:22.839> to<01:04:23.039> have<01:04:23.200> in

between them that we're going to have in

between them that we're going to have in
our<01:04:23.599> app<01:04:24.279> it's<01:04:24.440> going<01:04:24.599> to<01:04:24.760> take<01:04:24.920> some<01:04:25.119> time<01:04:25.240> to

our app it's going to take some time to

our app it's going to take some time to
Define<01:04:25.920> them<01:04:26.359> but<01:04:26.640> after<01:04:27.039> that<01:04:27.359> we'll<01:04:27.599> be<01:04:27.839> good

Define them but after that we'll be good

Define them but after that we'll be good
to<01:04:28.200> go<01:04:28.720> for<01:04:29.000> the<01:04:29.240> entirety<01:04:29.960> of<01:04:30.119> this

to go for the entirety of this

to go for the entirety of this
phenomenal<01:04:30.920> build<01:04:31.720> so<01:04:32.000> let's<01:04:32.279> just<01:04:32.480> click

phenomenal build so let's just click

phenomenal build so let's just click
create<01:04:33.200> collection<01:04:34.039> let's<01:04:34.279> enter<01:04:34.599> our<01:04:34.880> first

create collection let's enter our first

create collection let's enter our first
collection<01:04:35.799> name<01:04:36.319> which<01:04:36.440> is<01:04:36.559> going<01:04:36.760> to<01:04:36.920> be

collection name which is going to be

collection name which is going to be
posts<01:04:39.359> and<01:04:39.680> click<01:04:40.240> create<01:04:41.240> then<01:04:41.480> you<01:04:41.599> need<01:04:41.760> to

posts and click create then you need to

posts and click create then you need to
go<01:04:42.079> to<01:04:42.359> settings<01:04:43.359> you<01:04:43.480> need<01:04:43.640> to<01:04:43.880> head<01:04:44.119> down<01:04:44.400> to

go to settings you need to head down to

go to settings you need to head down to
permissions<01:04:46.359> and<01:04:46.599> you<01:04:46.680> can<01:04:46.920> allow<01:04:47.400> access

permissions and you can allow access

permissions and you can allow access
from<01:04:48.200> anywhere<01:04:48.799> by<01:04:48.960> clicking<01:04:49.640> any<01:04:50.640> then<01:04:50.960> check

from anywhere by clicking any then check

from anywhere by clicking any then check
all<01:04:51.480> the<01:04:52.000> texts<01:04:53.000> and<01:04:53.319> click<01:04:53.680> update

all the texts and click update

all the texts and click update
so<01:04:55.680> it's<01:04:55.920> pretty<01:04:56.200> cool<01:04:56.559> how<01:04:56.720> we<01:04:56.880> have<01:04:57.079> a<01:04:57.319> robust

so it's pretty cool how we have a robust

so it's pretty cool how we have a robust
permissions<01:04:58.799> SL<01:04:59.359> roll<01:04:59.799> system<01:05:00.480> built<01:05:00.839> into

permissions SL roll system built into

permissions SL roll system built into
aight<01:05:01.720> Cloud<01:05:02.720> next<01:05:03.039> we<01:05:03.119> can<01:05:03.319> repeat<01:05:03.599> the<01:05:03.760> same

aight Cloud next we can repeat the same

aight Cloud next we can repeat the same
process<01:05:04.680> for<01:05:04.960> our<01:05:05.200> users<01:05:05.680> collection<01:05:06.359> so

process for our users collection so

process for our users collection so
let's<01:05:06.799> create<01:05:07.039> a<01:05:07.160> new<01:05:07.359> collection<01:05:08.079> called

let's create a new collection called

let's create a new collection called
users<01:05:10.279> click

users click

users click
create<01:05:12.119> go<01:05:12.279> to

create go to

create go to
settings<01:05:14.319> same<01:05:14.599> thing<01:05:14.880> here<01:05:15.160> we<01:05:15.279> need<01:05:15.440> to<01:05:15.599> add

settings same thing here we need to add

settings same thing here we need to add
permissions<01:05:17.400> click<01:05:17.720> any<01:05:18.640> and<01:05:18.799> then<01:05:18.960> take<01:05:19.279> all

permissions click any and then take all

permissions click any and then take all
the<01:05:19.920> boxes<01:05:20.920> and<01:05:21.119> click<01:05:21.640> update<01:05:22.640> and<01:05:22.880> now

the boxes and click update and now

the boxes and click update and now
there's<01:05:23.319> going<01:05:23.480> to<01:05:23.559> be<01:05:23.680> a<01:05:23.760> third<01:05:24.200> one<01:05:24.640> which<01:05:24.760> is

there's going to be a third one which is

there's going to be a third one which is
going<01:05:25.039> to<01:05:25.200> be<01:05:25.359> called<01:05:26.079> saves<01:05:27.079> and<01:05:27.319> this<01:05:27.440> is

going to be called saves and this is

going to be called saves and this is
going<01:05:27.760> to<01:05:27.880> be<01:05:28.039> for<01:05:28.359> all<01:05:28.640> the<01:05:28.880> saved

going to be for all the saved

going to be for all the saved
posts<01:05:31.279> within<01:05:31.720> here<01:05:32.119> we<01:05:32.240> can<01:05:32.400> also<01:05:32.640> go<01:05:32.799> to

posts within here we can also go to

posts within here we can also go to
settings<01:05:34.480> go<01:05:34.640> to

settings go to

settings go to
permissions<01:05:36.520> add<01:05:36.920> any<01:05:37.680> and<01:05:37.839> then<01:05:38.079> select<01:05:38.480> all

permissions add any and then select all

permissions add any and then select all
the<01:05:38.960> boxes<01:05:39.960> and<01:05:40.200> click<01:05:40.520> update<01:05:41.400> and<01:05:41.599> now<01:05:41.880> we

the boxes and click update and now we

the boxes and click update and now we
have<01:05:42.119> to<01:05:42.279> start<01:05:42.559> creating<01:05:43.119> relations<01:05:44.119> so

have to start creating relations so

have to start creating relations so
let's<01:05:44.640> go<01:05:44.799> to<01:05:44.960> the<01:05:45.200> posts<01:05:45.839> collection<01:05:46.799> and

let's go to the posts collection and

let's go to the posts collection and
again<01:05:47.400> make<01:05:47.599> sure<01:05:47.839> to<01:05:48.119> follow<01:05:48.839> exactly<01:05:49.480> what<01:05:49.599> I

again make sure to follow exactly what I

again make sure to follow exactly what I
do<01:05:50.039> here<01:05:50.440> because<01:05:50.640> our<01:05:50.920> app<01:05:51.160> is<01:05:51.279> not<01:05:51.480> going<01:05:51.640> to

do here because our app is not going to

do here because our app is not going to
work<01:05:52.200> if<01:05:52.319> we<01:05:52.440> don't<01:05:52.720> properly<01:05:53.079> set<01:05:53.240> up<01:05:53.359> our

work if we don't properly set up our

work if we don't properly set up our
relations

relations

relations
it's<01:05:55.119> important<01:05:55.520> that<01:05:55.680> we<01:05:55.799> create<01:05:56.079> relations

it's important that we create relations

it's important that we create relations
immediately<01:05:57.440> so<01:05:57.799> everything<01:05:58.200> works<01:05:58.599> later<01:05:58.920> on

immediately so everything works later on

immediately so everything works later on
so<01:06:00.319> go<01:06:00.520> to

so go to

so go to
attributes<01:06:02.520> and<01:06:02.640> then<01:06:02.880> click<01:06:03.240> create

attributes and then click create

attributes and then click create
attribute<01:06:05.400> in<01:06:05.599> this<01:06:05.839> case<01:06:06.039> we're<01:06:06.240> immediately

attribute in this case we're immediately

attribute in this case we're immediately
diving<01:06:07.119> to<01:06:07.359> a<01:06:07.559> complex<01:06:08.039> attribute<01:06:08.839> of<01:06:09.000> a<01:06:09.200> type

diving to a complex attribute of a type

diving to a complex attribute of a type
relationship<01:06:10.680> in<01:06:10.880> this<01:06:11.119> case<01:06:11.359> we<01:06:11.480> want<01:06:11.599> to

relationship in this case we want to

relationship in this case we want to
create<01:06:12.279> a<01:06:12.559> two-way<01:06:13.559> relationship<01:06:14.559> and<01:06:14.839> this

create a two-way relationship and this

create a two-way relationship and this
is<01:06:15.119> going<01:06:15.279> to<01:06:15.400> be<01:06:15.520> a<01:06:15.680> relationship<01:06:16.400> between<01:06:16.799> a

is going to be a relationship between a

is going to be a relationship between a
post<01:06:17.720> and<01:06:17.920> a<01:06:18.400> user<01:06:19.400> so<01:06:19.599> we<01:06:19.680> can<01:06:19.799> say<01:06:20.039> users

post and a user so we can say users

post and a user so we can say users
attribute<01:06:21.279> key<01:06:21.799> is<01:06:21.960> going<01:06:22.119> to<01:06:22.319> be<01:06:23.000> creator<01:06:24.079> and

attribute key is going to be creator and

attribute key is going to be creator and
then<01:06:24.359> the<01:06:24.559> attribute<01:06:25.039> key<01:06:25.279> in<01:06:25.400> the<01:06:25.599> related

then the attribute key in the related

then the attribute key in the related
collection<01:06:26.680> is<01:06:26.799> going<01:06:27.000> to<01:06:27.119> be

collection is going to be

collection is going to be
posts<01:06:29.119> and<01:06:29.319> a<01:06:29.559> relation<01:06:30.079> is<01:06:30.240> going<01:06:30.400> to<01:06:30.559> be<01:06:31.000> many

posts and a relation is going to be many

posts and a relation is going to be many
to

to

to
one<01:06:33.319> so<01:06:33.599> this<01:06:33.720> is<01:06:33.880> how<01:06:34.039> it's<01:06:34.160> going<01:06:34.319> to<01:06:34.520> look

one so this is how it's going to look

one so this is how it's going to look
like<01:06:36.440> one<01:06:36.760> Creator<01:06:37.480> can<01:06:37.680> have<01:06:37.920> multiple<01:06:38.440> posts

like one Creator can have multiple posts

like one Creator can have multiple posts
and<01:06:39.559> while<01:06:39.720> we're<01:06:40.039> here<01:06:40.480> it<01:06:40.640> wouldn't<01:06:40.920> be<01:06:41.119> such

and while we're here it wouldn't be such

and while we're here it wouldn't be such
a<01:06:41.520> bad<01:06:41.760> idea<01:06:42.279> to<01:06:42.520> start<01:06:42.839> sketching<01:06:43.319> things<01:06:43.559> out

a bad idea to start sketching things out

a bad idea to start sketching things out
right<01:06:44.839> in<01:06:45.000> our<01:06:45.240> ultimate<01:06:45.680> nextjs<01:06:46.319> 13<01:06:46.839> course

right in our ultimate nextjs 13 course

right in our ultimate nextjs 13 course
we<01:06:47.599> were<01:06:47.760> doing<01:06:48.200> a<01:06:48.400> lot<01:06:48.599> of<01:06:48.799> sketching<01:06:49.480> because

we were doing a lot of sketching because

we were doing a lot of sketching because
we<01:06:49.839> covered<01:06:50.160> a<01:06:50.400> tough<01:06:50.760> project<01:06:51.200> where<01:06:51.319> we<01:06:51.480> have

we covered a tough project where we have

we covered a tough project where we have
to<01:06:51.839> deeply<01:06:52.359> explain<01:06:53.119> all<01:06:53.319> of<01:06:53.440> the<01:06:53.599> concept

to deeply explain all of the concept

to deeply explain all of the concept
covered<01:06:55.079> and<01:06:55.440> this<01:06:55.720> often<01:06:56.039> includes<01:06:56.640> a<01:06:56.760> lot<01:06:56.920> of

covered and this often includes a lot of

covered and this often includes a lot of
sketching<01:06:58.000> so<01:06:58.440> in<01:06:58.680> this<01:06:58.920> video<01:06:59.559> I<01:06:59.640> want<01:06:59.760> to

sketching so in this video I want to

sketching so in this video I want to
also<01:07:00.359> do<01:07:00.640> the<01:07:00.839> same<01:07:01.480> I<01:07:01.559> want<01:07:01.680> to<01:07:01.839> give<01:07:02.039> you<01:07:02.200> a

also do the same I want to give you a

also do the same I want to give you a
bit<01:07:02.480> of<01:07:02.680> behind<01:07:03.039> the<01:07:03.200> scenes<01:07:03.880> of<01:07:04.039> the<01:07:04.240> level<01:07:04.520> of

bit of behind the scenes of the level of

bit of behind the scenes of the level of
complexity<01:07:05.480> we<01:07:05.680> go<01:07:06.160> in<01:07:06.359> our<01:07:06.640> Pro<01:07:07.000> courses<01:07:07.920> so

complexity we go in our Pro courses so

complexity we go in our Pro courses so
if<01:07:08.359> you<01:07:08.480> haven't<01:07:08.720> checked<01:07:09.000> them<01:07:09.119> out<01:07:09.359> yet

if you haven't checked them out yet

if you haven't checked them out yet
that's<01:07:10.039> great<01:07:10.680> this<01:07:10.880> video<01:07:11.160> is<01:07:11.359> about<01:07:11.760> react

that's great this video is about react

that's great this video is about react
but<01:07:13.240> after<01:07:13.520> you<01:07:13.720> watch<01:07:13.960> this<01:07:14.079> free<01:07:14.359> video<01:07:14.599> on

but after you watch this free video on

but after you watch this free video on
YouTube<01:07:15.480> you<01:07:15.760> might<01:07:16.000> want<01:07:16.119> to<01:07:16.279> learn<01:07:16.559> nextjs

YouTube you might want to learn nextjs

YouTube you might want to learn nextjs
server<01:07:18.079> actions<01:07:18.720> and<01:07:18.960> all<01:07:19.160> of<01:07:19.319> the<01:07:19.480> great

server actions and all of the great

server actions and all of the great
stuff<01:07:20.200> that<01:07:20.319> it<01:07:20.680> offers<01:07:21.680> so<01:07:22.440> add<01:07:22.680> yourself<01:07:23.000> a

stuff that it offers so add yourself a

stuff that it offers so add yourself a
to-do<01:07:24.000> after<01:07:24.200> you're<01:07:24.359> done<01:07:24.559> with<01:07:24.720> this<01:07:24.920> video

to-do after you're done with this video

to-do after you're done with this video
check<01:07:25.839> out<01:07:26.079> JS<01:07:26.440> Mastery<01:07:27.000> Pro<01:07:28.000> but<01:07:28.400> with<01:07:28.559> that

check out JS Mastery Pro but with that

check out JS Mastery Pro but with that
said<01:07:29.400> let's<01:07:29.599> start<01:07:29.839> sketching<01:07:30.520> the<01:07:30.760> complex

said let's start sketching the complex

said let's start sketching the complex
architecture<01:07:32.079> of<01:07:32.240> our<01:07:32.440> snapgram<01:07:33.160> application

architecture of our snapgram application

architecture of our snapgram application
we<01:07:34.440> obviously<01:07:35.000> have<01:07:35.359> posts<01:07:36.119> saves<01:07:36.799> and<01:07:37.039> users

we obviously have posts saves and users

we obviously have posts saves and users
so<01:07:38.440> let's<01:07:38.640> go<01:07:38.760> ahead<01:07:39.039> and<01:07:39.319> create<01:07:39.640> all<01:07:39.880> of<01:07:40.119> that

so let's go ahead and create all of that

so let's go ahead and create all of that
as<01:07:40.799> simple<01:07:41.520> rectangles<01:07:42.520> here<01:07:42.760> we're<01:07:42.920> going<01:07:43.039> to

as simple rectangles here we're going to

as simple rectangles here we're going to
have<01:07:43.319> our<01:07:43.960> users<01:07:44.960> we're<01:07:45.240> also<01:07:45.520> going<01:07:45.640> to<01:07:45.880> have

have our users we're also going to have

have our users we're also going to have
our<01:07:46.799> posts<01:07:47.799> and<01:07:48.119> finally<01:07:48.480> we're<01:07:48.640> going<01:07:48.720> to

our posts and finally we're going to

our posts and finally we're going to
have<01:07:49.160> our<01:07:49.440> saves<01:07:50.200> which<01:07:50.319> are<01:07:50.559> three<01:07:50.799> different

have our saves which are three different

have our saves which are three different
collections<01:07:52.480> now<01:07:52.720> it's<01:07:52.960> obvious<01:07:53.279> that<01:07:53.400> we're

collections now it's obvious that we're

collections now it's obvious that we're
creating<01:07:54.079> a<01:07:54.240> many<01:07:54.559> toone<01:07:55.039> relationship

creating a many toone relationship

creating a many toone relationship
between<01:07:56.279> our<01:07:56.559> user<01:07:57.520> called<01:07:57.880> a<01:07:58.119> Creator<01:07:59.000> and

between our user called a Creator and

between our user called a Creator and
our<01:07:59.480> posts<01:08:00.359> so<01:08:00.680> this<01:08:00.839> means<01:08:01.200> that<01:08:01.400> one<01:08:01.599> user

our posts so this means that one user

our posts so this means that one user
can<01:08:02.440> have<01:08:02.640> multiple<01:08:03.160> posts<01:08:03.799> so<01:08:04.000> let's<01:08:04.240> just

can have multiple posts so let's just

can have multiple posts so let's just
create<01:08:04.799> this<01:08:05.240> relationship<01:08:06.240> that's<01:08:06.480> from

create this relationship that's from

create this relationship that's from
both

both

both
sides<01:08:09.119> and<01:08:09.400> we<01:08:09.520> can<01:08:09.680> do<01:08:10.160> something<01:08:10.520> like<01:08:10.760> this

sides and we can do something like this

sides and we can do something like this
where<01:08:11.160> we're<01:08:11.279> going<01:08:11.400> to<01:08:11.559> Simply<01:08:11.960> duplicate

where we're going to Simply duplicate

where we're going to Simply duplicate
this<01:08:12.799> right<01:08:13.000> here<01:08:13.640> indicating<01:08:14.400> that<01:08:14.599> one<01:08:14.839> user

this right here indicating that one user

this right here indicating that one user
can<01:08:16.120> have<01:08:16.560> or<01:08:16.799> can<01:08:17.040> create<01:08:17.920> two<01:08:18.520> different

can have or can create two different

can have or can create two different
posts<01:08:19.880> so<01:08:20.120> that's<01:08:20.319> going<01:08:20.480> to<01:08:20.679> work<01:08:21.239> like<01:08:21.480> this

posts so that's going to work like this

posts so that's going to work like this
and<01:08:22.279> then<01:08:22.400> an<01:08:22.600> important<01:08:23.040> thing<01:08:23.319> here<01:08:23.640> is<01:08:23.880> is

and then an important thing here is is

and then an important thing here is is
on<01:08:24.239> deleting<01:08:24.719> a<01:08:24.960> document<01:08:25.920> we<01:08:26.199> must<01:08:26.799> set<01:08:27.120> null

on deleting a document we must set null

on deleting a document we must set null
as<01:08:28.000> this<01:08:28.120> is<01:08:28.279> going<01:08:28.520> to<01:08:28.880> set<01:08:29.120> the<01:08:29.359> document<01:08:29.759> ID

as this is going to set the document ID

as this is going to set the document ID
as<01:08:30.480> null<01:08:30.880> in<01:08:31.040> all<01:08:31.359> related<01:08:31.839> documents<01:08:32.520> meaning

as null in all related documents meaning

as null in all related documents meaning
it<01:08:33.159> doesn't<01:08:33.600> exist<01:08:34.279> so<01:08:34.520> let's<01:08:34.719> click

it doesn't exist so let's click

it doesn't exist so let's click
create<01:08:36.759> and<01:08:37.040> it's<01:08:37.359> possible<01:08:37.759> that<01:08:37.920> something

create and it's possible that something

create and it's possible that something
like<01:08:38.400> this<01:08:38.600> happens<01:08:39.279> but<01:08:39.400> don't<01:08:39.600> worry<01:08:40.080> just

like this happens but don't worry just

like this happens but don't worry just
go<01:08:40.400> to

go to

go to
databases<01:08:42.120> select<01:08:42.600> your<01:08:43.239> database<01:08:44.239> and<01:08:44.359> then

databases select your database and then

databases select your database and then
you<01:08:44.560> can<01:08:44.679> see<01:08:44.920> your<01:08:45.159> collections<01:08:45.759> here

you can see your collections here

you can see your collections here
specifically<01:08:47.000> we're<01:08:47.239> working<01:08:47.640> with<01:08:48.279> users

specifically we're working with users

specifically we're working with users
and<01:08:49.440> then<01:08:49.719> attributes<01:08:50.480> and<01:08:50.600> you<01:08:50.679> can<01:08:50.839> see<01:08:51.080> here

and then attributes and you can see here

and then attributes and you can see here
that<01:08:51.600> now<01:08:51.759> we<01:08:51.880> have<01:08:52.000> a<01:08:52.159> relationship<01:08:52.920> with

that now we have a relationship with

that now we have a relationship with
posts

posts

posts
and<01:08:55.400> also<01:08:56.040> that<01:08:56.279> same<01:08:57.040> attribute<01:08:57.679> should<01:08:57.960> be

and also that same attribute should be

and also that same attribute should be
within<01:08:58.799> post<01:08:59.279> as<01:08:59.440> well<01:08:59.880> because<01:09:00.159> that's<01:09:00.400> the

within post as well because that's the

within post as well because that's the
relationship<01:09:01.799> so<01:09:02.000> now<01:09:02.199> let's<01:09:02.400> create<01:09:02.640> a

relationship so now let's create a

relationship so now let's create a
second<01:09:03.199> attribute<01:09:03.799> under<01:09:04.239> posts<01:09:04.920> which<01:09:05.080> is

second attribute under posts which is

second attribute under posts which is
also<01:09:05.520> going<01:09:05.679> to<01:09:05.839> be<01:09:06.040> a<01:09:06.199> relationship

also going to be a relationship

also going to be a relationship
attribute<01:09:08.640> it's<01:09:08.799> going<01:09:08.920> to<01:09:09.040> be<01:09:09.159> a<01:09:09.319> two-way

attribute it's going to be a two-way

attribute it's going to be a two-way
relationship<01:09:10.719> related<01:09:11.319> to<01:09:11.600> users<01:09:12.279> one<01:09:12.440> more

relationship related to users one more

relationship related to users one more
time<01:09:13.400> but<01:09:13.640> this<01:09:13.839> time<01:09:14.159> not<01:09:14.400> who<01:09:14.640> created<01:09:15.040> it

time but this time not who created it

time but this time not who created it
rather<01:09:16.000> who<01:09:16.239> liked<01:09:16.560> it<01:09:16.960> so<01:09:17.080> we're<01:09:17.199> going<01:09:17.279> to

rather who liked it so we're going to

rather who liked it so we're going to
say<01:09:17.759> likes<01:09:18.560> so<01:09:18.719> it's<01:09:18.839> going<01:09:19.000> to<01:09:19.120> be<01:09:19.359> likes<01:09:20.319> here

say likes so it's going to be likes here

say likes so it's going to be likes here
we're<01:09:20.679> going<01:09:20.759> to<01:09:20.920> say<01:09:21.199> liked<01:09:21.799> so<01:09:22.000> who<01:09:22.199> liked<01:09:22.520> it

we're going to say liked so who liked it

we're going to say liked so who liked it
and<01:09:23.359> then<01:09:23.839> relation<01:09:24.319> is<01:09:24.440> going<01:09:24.600> to<01:09:24.719> be<01:09:24.920> many<01:09:25.159> to

and then relation is going to be many to

and then relation is going to be many to
many<01:09:25.920> because<01:09:26.239> many<01:09:26.480> users<01:09:27.120> can<01:09:27.319> like<01:09:27.719> many

many because many users can like many

many because many users can like many
different<01:09:28.319> posts<01:09:29.239> and<01:09:29.400> then<01:09:29.560> on<01:09:29.799> deletion<01:09:30.560> we

different posts and then on deletion we

different posts and then on deletion we
also<01:09:31.000> want<01:09:31.120> to<01:09:31.279> set<01:09:31.480> the<01:09:31.600> same<01:09:32.159> set<01:09:32.480> n<01:09:33.080> and

also want to set the same set n and

also want to set the same set n and
click<01:09:34.120> create<01:09:35.120> there<01:09:35.279> we<01:09:35.520> go<01:09:36.520> and<01:09:36.719> now<01:09:36.960> we<01:09:37.040> can

click create there we go and now we can

click create there we go and now we can
slowly<01:09:37.560> start<01:09:37.920> thinking<01:09:38.400> about<01:09:38.719> which

slowly start thinking about which

slowly start thinking about which
attributes<01:09:39.560> are<01:09:39.839> posts<01:09:40.120> are<01:09:40.279> going<01:09:40.480> to<01:09:40.719> have

attributes are posts are going to have

attributes are posts are going to have
so<01:09:41.600> right<01:09:41.839> here<01:09:42.159> we<01:09:42.239> can<01:09:42.440> make<01:09:42.600> this<01:09:42.759> a<01:09:42.880> bit

so right here we can make this a bit

so right here we can make this a bit
smaller<01:09:44.199> and<01:09:44.440> make<01:09:44.600> it<01:09:44.719> a<01:09:44.839> bit<01:09:44.960> simpler<01:09:45.319> to

smaller and make it a bit simpler to

smaller and make it a bit simpler to
read<01:09:46.239> let's<01:09:46.480> do<01:09:46.880> something<01:09:47.440> like<01:09:47.759> an

read let's do something like an

read let's do something like an
attribute<01:09:49.239> which<01:09:49.400> is<01:09:49.520> going<01:09:49.679> to<01:09:49.839> be<01:09:50.239> Creator

attribute which is going to be Creator

attribute which is going to be Creator
we<01:09:51.400> know<01:09:51.759> that<01:09:52.359> each<01:09:52.759> Post<01:09:53.159> in<01:09:53.319> this<01:09:53.520> case<01:09:53.960> has

we know that each Post in this case has

we know that each Post in this case has
to<01:09:54.239> have<01:09:54.360> a<01:09:54.520> Creator<01:09:55.480> and<01:09:55.679> we<01:09:55.840> know<01:09:56.199> that<01:09:56.320> a

to have a Creator and we know that a

to have a Creator and we know that a
user<01:09:56.960> is<01:09:57.120> going<01:09:57.280> to<01:09:57.560> have<01:09:57.840> a<01:09:58.280> post<01:09:59.280> attribute

user is going to have a post attribute

user is going to have a post attribute
so<01:10:00.400> let's<01:10:00.600> do<01:10:00.840> something<01:10:01.159> like<01:10:01.400> this

so let's do something like this

so let's do something like this
attributes<01:10:03.920> this<01:10:04.040> is<01:10:04.199> going<01:10:04.320> to<01:10:04.480> help<01:10:04.679> us<01:10:04.800> when

attributes this is going to help us when

attributes this is going to help us when
creating<01:10:05.280> a<01:10:05.480> database<01:10:06.040> or<01:10:06.280> rather<01:10:06.640> not

creating a database or rather not

creating a database or rather not
because<01:10:07.920> this<01:10:08.040> is<01:10:08.199> going<01:10:08.320> to<01:10:08.520> help<01:10:08.719> us

because this is going to help us

because this is going to help us
understand<01:10:09.719> our<01:10:09.960> database

understand our database

understand our database
structure<01:10:11.960> usually<01:10:12.440> you<01:10:12.560> would<01:10:12.760> have<01:10:12.880> to

structure usually you would have to

structure usually you would have to
create<01:10:13.400> all<01:10:13.600> of<01:10:13.760> this<01:10:13.960> within<01:10:14.159> your

create all of this within your

create all of this within your
application<01:10:15.199> but<01:10:15.400> now<01:10:15.719> aight<01:10:16.600> actually

application but now aight actually

application but now aight actually
creates<01:10:17.239> the<01:10:17.360> relationships<01:10:18.239> for<01:10:18.520> us<01:10:18.920> which

creates the relationships for us which

creates the relationships for us which
is<01:10:19.239> super<01:10:19.600> handy<01:10:20.360> and<01:10:20.520> the<01:10:20.719> second<01:10:21.000> attribute

is super handy and the second attribute

is super handy and the second attribute
we<01:10:21.560> have<01:10:21.719> added<01:10:22.440> is<01:10:22.600> going<01:10:22.760> to<01:10:22.920> be<01:10:23.199> likes<01:10:24.000> so

we have added is going to be likes so

we have added is going to be likes so
the<01:10:24.360> post<01:10:24.679> is<01:10:24.840> going<01:10:25.000> to<01:10:25.159> have<01:10:25.400> likes<01:10:26.159> and<01:10:26.360> then

the post is going to have likes and then

the post is going to have likes and then
users<01:10:27.480> are<01:10:27.640> going<01:10:27.760> to<01:10:28.000> have<01:10:28.480> liked<01:10:29.080> so<01:10:29.360> which

users are going to have liked so which

users are going to have liked so which
posts<01:10:30.199> have<01:10:30.400> they<01:10:30.560> liked<01:10:31.280> let's<01:10:31.480> move<01:10:31.800> forward

posts have they liked let's move forward

posts have they liked let's move forward
let's<01:10:32.640> create<01:10:32.960> a<01:10:33.159> next<01:10:33.520> attribute<01:10:34.040> for<01:10:34.280> our

let's create a next attribute for our

let's create a next attribute for our
post<01:10:35.199> and<01:10:35.360> that's<01:10:35.520> going<01:10:35.679> to<01:10:35.800> be<01:10:35.920> a<01:10:36.040> string

post and that's going to be a string

post and that's going to be a string
this<01:10:36.760> time<01:10:37.560> the<01:10:37.760> attribute<01:10:38.239> key<01:10:38.560> is<01:10:38.719> going<01:10:38.880> to

this time the attribute key is going to

this time the attribute key is going to
be<01:10:39.159> a<01:10:39.520> caption<01:10:40.520> the<01:10:40.760> size<01:10:41.040> is<01:10:41.199> going<01:10:41.360> to<01:10:41.560> be

be a caption the size is going to be

be a caption the size is going to be
2200<01:10:43.480> this<01:10:43.679> was<01:10:43.920> a<01:10:44.159> default<01:10:44.640> size<01:10:44.920> for<01:10:45.120> an

2200 this was a default size for an

2200 this was a default size for an
Instagram<01:10:45.880> post<01:10:46.400> so<01:10:46.640> that's<01:10:46.800> where<01:10:47.000> we<01:10:47.120> took

Instagram post so that's where we took

Instagram post so that's where we took
it<01:10:47.840> 2,200<01:10:49.080> characters<01:10:50.080> default<01:10:50.520> is<01:10:50.640> not<01:10:50.840> going

it 2,200 characters default is not going

it 2,200 characters default is not going
to<01:10:51.120> be<01:10:51.480> anything<01:10:52.480> and<01:10:52.679> you<01:10:52.800> can<01:10:52.960> click<01:10:53.239> create

to be anything and you can click create

to be anything and you can click create
we're<01:10:55.679> going<01:10:55.800> to<01:10:56.000> also<01:10:56.239> need<01:10:56.679> tags<01:10:57.199> attribute

we're going to also need tags attribute

we're going to also need tags attribute
so<01:10:58.080> let's<01:10:58.280> go<01:10:58.400> ahead<01:10:58.600> and<01:10:58.760> create<01:10:59.000> a<01:10:59.159> new<01:10:59.360> one

so let's go ahead and create a new one

so let's go ahead and create a new one
of<01:11:00.000> a<01:11:00.199> type<01:11:00.480> string<01:11:01.239> that's<01:11:01.440> going<01:11:01.600> to<01:11:01.719> be

of a type string that's going to be

of a type string that's going to be
called<01:11:02.239> Tags<01:11:03.239> it's<01:11:03.400> going<01:11:03.560> to<01:11:03.640> be<01:11:03.840> 2200<01:11:04.840> as

called Tags it's going to be 2200 as

called Tags it's going to be 2200 as
well<01:11:05.880> and<01:11:06.040> it's<01:11:06.199> going<01:11:06.360> to<01:11:06.480> be<01:11:06.679> an<01:11:06.880> array<01:11:07.600> of

well and it's going to be an array of

well and it's going to be an array of
tags<01:11:08.480> pretty

tags pretty

tags pretty
interesting<01:11:10.520> then<01:11:10.760> we're<01:11:10.920> going<01:11:11.000> to<01:11:11.159> need<01:11:11.440> an

interesting then we're going to need an

interesting then we're going to need an
image<01:11:11.960> URL<01:11:12.600> so<01:11:12.760> let's<01:11:13.000> create<01:11:13.360> a<01:11:13.560> new<01:11:14.080> URL<01:11:14.679> type

image URL so let's create a new URL type

image URL so let's create a new URL type
yeah<01:11:15.560> there's<01:11:15.760> a<01:11:15.960> special<01:11:16.400> type<01:11:16.679> for<01:11:16.880> the<01:11:17.040> URL

yeah there's a special type for the URL

yeah there's a special type for the URL
which<01:11:18.199> is<01:11:18.320> going<01:11:18.480> to<01:11:18.600> be<01:11:18.800> called<01:11:19.199> image<01:11:20.520> URL

which is going to be called image URL

which is going to be called image URL
and<01:11:21.640> then<01:11:21.800> it's<01:11:21.960> going<01:11:22.080> to<01:11:22.239> be<01:11:22.560> required<01:11:23.640> and

and then it's going to be required and

and then it's going to be required and
click<01:11:24.360> create<01:11:25.360> we're<01:11:25.520> going<01:11:25.600> to<01:11:25.800> also<01:11:26.080> need<01:11:26.320> an

click create we're going to also need an

click create we're going to also need an
image<01:11:26.960> ID<01:11:27.480> attribute<01:11:28.280> which<01:11:28.400> is<01:11:28.520> going<01:11:28.679> to<01:11:28.840> be

image ID attribute which is going to be

image ID attribute which is going to be
of<01:11:29.120> a<01:11:29.320> type<01:11:29.679> string<01:11:30.679> this<01:11:30.800> is<01:11:30.960> needed<01:11:31.320> if

of a type string this is needed if

of a type string this is needed if
somebody<01:11:31.840> wants<01:11:32.040> to<01:11:32.239> delete<01:11:32.760> a<01:11:33.000> post<01:11:33.560> so<01:11:33.719> we

somebody wants to delete a post so we

somebody wants to delete a post so we
can<01:11:33.960> say<01:11:34.239> image

can say image

can say image
ID<01:11:36.600> of<01:11:36.800> a<01:11:37.000> size<01:11:37.480> 2200<01:11:38.480> again<01:11:38.679> feel<01:11:38.880> free<01:11:39.120> to

ID of a size 2200 again feel free to

ID of a size 2200 again feel free to
choose<01:11:39.440> whatever<01:11:39.800> you<01:11:39.920> want<01:11:40.239> here<01:11:40.920> and<01:11:41.080> it's

choose whatever you want here and it's

choose whatever you want here and it's
going<01:11:41.400> to<01:11:41.560> be

going to be

going to be
required<01:11:44.360> we<01:11:44.480> need<01:11:44.800> a<01:11:45.040> location<01:11:45.760> attribute<01:11:46.360> as

required we need a location attribute as

required we need a location attribute as
well<01:11:47.000> of<01:11:47.120> a<01:11:47.320> type<01:11:47.639> string<01:11:48.199> so<01:11:48.400> let's<01:11:48.600> say

well of a type string so let's say

well of a type string so let's say
location<01:11:50.239> size<01:11:50.639> is<01:11:50.800> going<01:11:50.960> to<01:11:51.080> be

location size is going to be

location size is going to be
2200

2200

2200
and<01:11:55.679> this<01:11:55.800> is<01:11:55.920> more<01:11:56.080> or<01:11:56.239> less<01:11:56.480> it<01:11:57.040> these<01:11:57.199> are

and this is more or less it these are

and this is more or less it these are
all<01:11:58.120> the<01:11:58.320> attributes<01:11:59.080> that<01:11:59.239> we<01:11:59.400> need<01:11:59.800> for<01:12:00.080> our

all the attributes that we need for our

all the attributes that we need for our
post<01:12:01.280> so<01:12:01.679> what<01:12:01.800> we<01:12:01.880> can<01:12:02.080> do<01:12:02.639> is<01:12:02.880> instead<01:12:03.159> of

post so what we can do is instead of

post so what we can do is instead of
just<01:12:03.440> typing<01:12:03.760> them<01:12:03.920> out<01:12:04.440> we<01:12:04.520> can<01:12:04.679> go<01:12:04.800> ahead<01:12:05.040> and

just typing them out we can go ahead and

just typing them out we can go ahead and
screenshot<01:12:06.040> what<01:12:06.199> we<01:12:06.360> have<01:12:06.639> here<01:12:07.560> on<01:12:07.880> Windows

screenshot what we have here on Windows

screenshot what we have here on Windows
I<01:12:08.560> usually<01:12:08.920> use<01:12:09.199> command<01:12:09.679> shift<01:12:10.080> s<01:12:10.960> and<01:12:11.080> then

I usually use command shift s and then

I usually use command shift s and then
you<01:12:11.320> can<01:12:11.520> simply<01:12:12.440> select<01:12:12.760> it<01:12:13.000> like<01:12:13.199> this

you can simply select it like this

you can simply select it like this
there's<01:12:13.840> a<01:12:14.000> similar<01:12:14.360> shortcut<01:12:15.000> on<01:12:15.159> Mac<01:12:15.440> OS<01:12:15.840> as

there's a similar shortcut on Mac OS as

there's a similar shortcut on Mac OS as
well<01:12:16.520> so<01:12:16.679> let's<01:12:16.920> take<01:12:17.159> it<01:12:17.719> and<01:12:17.840> let's<01:12:18.080> put<01:12:18.199> it

well so let's take it and let's put it

well so let's take it and let's put it
right<01:12:18.719> here<01:12:19.239> within<01:12:19.480> our<01:12:19.639> fig<01:12:19.920> Jam<01:12:20.560> so<01:12:20.760> it's

right here within our fig Jam so it's

right here within our fig Jam so it's
really<01:12:21.280> easy<01:12:21.560> to<01:12:22.080> understand<01:12:22.679> what

really easy to understand what

really easy to understand what
properties<01:12:23.760> each<01:12:23.960> one<01:12:24.120> of<01:12:24.239> our<01:12:24.400> posts<01:12:25.280> has

properties each one of our posts has

properties each one of our posts has
there<01:12:26.440> we<01:12:26.600> go<01:12:27.040> now<01:12:27.239> we<01:12:27.360> even<01:12:27.520> know<01:12:27.760> the<01:12:27.960> type

there we go now we even know the type

there we go now we even know the type
this<01:12:29.120> is<01:12:29.280> going<01:12:29.440> to<01:12:29.560> be<01:12:29.719> helpful<01:12:30.120> later<01:12:30.400> on

this is going to be helpful later on

this is going to be helpful later on
once<01:12:31.239> we<01:12:31.480> dive<01:12:31.760> into<01:12:31.960> the<01:12:32.080> further

once we dive into the further

once we dive into the further
architecture<01:12:33.239> of<01:12:33.360> our<01:12:34.000> application<01:12:35.000> now<01:12:35.199> that

architecture of our application now that

architecture of our application now that
we<01:12:35.520> have<01:12:35.679> all<01:12:35.840> the<01:12:36.000> attributes<01:12:36.840> we<01:12:36.920> can<01:12:37.080> go<01:12:37.239> to

we have all the attributes we can go to

we have all the attributes we can go to
the<01:12:37.520> indexes<01:12:38.120> tab<01:12:38.440> of<01:12:38.560> our<01:12:38.800> posts<01:12:39.800> and<01:12:40.120> this<01:12:40.520> is

the indexes tab of our posts and this is

the indexes tab of our posts and this is
where<01:12:40.920> aite<01:12:41.560> allows<01:12:41.880> you<01:12:42.000> to<01:12:42.120> do<01:12:42.360> automatic

where aite allows you to do automatic

where aite allows you to do automatic
searching<01:12:43.880> of<01:12:44.239> your<01:12:44.520> collections<01:12:45.480> so<01:12:45.679> click

searching of your collections so click

searching of your collections so click
create<01:12:46.440> index<01:12:47.239> you<01:12:47.360> can<01:12:47.600> call<01:12:47.760> it<01:12:48.040> caption<01:12:49.040> the

create index you can call it caption the

create index you can call it caption the
index<01:12:49.639> type<01:12:50.000> is<01:12:50.159> going<01:12:50.280> to<01:12:50.400> be<01:12:50.560> full<01:12:50.960> text<01:12:51.920> the

index type is going to be full text the

index type is going to be full text the
attribute<01:12:52.719> is<01:12:52.880> going<01:12:53.000> to<01:12:53.120> be<01:12:53.480> caption<01:12:54.320> and<01:12:54.480> the

attribute is going to be caption and the

attribute is going to be caption and the
order<01:12:54.960> is<01:12:55.080> going<01:12:55.239> to<01:12:55.360> be<01:12:55.920> descending<01:12:56.920> this<01:12:57.199> is

order is going to be descending this is

order is going to be descending this is
phenomenal<01:12:58.719> essentially<01:12:59.320> you<01:12:59.480> have<01:12:59.760> built-in

phenomenal essentially you have built-in

phenomenal essentially you have built-in
search<01:13:00.520> and<01:13:00.880> filtering<01:13:01.880> this<01:13:02.120> is<01:13:02.239> going<01:13:02.440> to

search and filtering this is going to

search and filtering this is going to
allow<01:13:03.000> us<01:13:03.159> to<01:13:03.360> automatically<01:13:03.920> search<01:13:04.239> for

allow us to automatically search for

allow us to automatically search for
different<01:13:04.800> posts<01:13:05.600> based<01:13:06.080> off<01:13:06.280> of<01:13:06.520> caption<01:13:07.280> so

different posts based off of caption so

different posts based off of caption so
let's<01:13:07.679> click

let's click

let's click
create<01:13:09.600> now<01:13:09.840> we<01:13:09.960> want<01:13:10.080> to<01:13:10.280> go<01:13:10.400> to<01:13:10.560> the<01:13:10.679> users

create now we want to go to the users

create now we want to go to the users
collection<01:13:11.800> and<01:13:12.000> also<01:13:12.320> start<01:13:12.679> creating<01:13:13.360> new

collection and also start creating new

collection and also start creating new
attributes<01:13:14.560> so<01:13:14.800> go<01:13:14.960> to<01:13:15.520> attributes<01:13:16.520> you<01:13:16.639> can

attributes so go to attributes you can

attributes so go to attributes you can
see<01:13:16.960> that<01:13:17.080> we<01:13:17.199> already<01:13:17.520> have<01:13:17.719> liked<01:13:18.080> and<01:13:18.320> posts

see that we already have liked and posts

see that we already have liked and posts
let's<01:13:19.480> create<01:13:19.719> a<01:13:19.880> new<01:13:20.080> one<01:13:20.440> of<01:13:20.600> a<01:13:20.800> type<01:13:21.080> string

let's create a new one of a type string

let's create a new one of a type string
that's<01:13:22.040> going<01:13:22.199> to<01:13:22.360> be<01:13:22.840> name

that's going to be name

that's going to be name
we<01:13:24.679> can<01:13:24.840> enter<01:13:25.199> the<01:13:25.360> same<01:13:25.679> size<01:13:26.120> as<01:13:26.760> before<01:13:27.760> and

we can enter the same size as before and

we can enter the same size as before and
click

click

click
create<01:13:30.320> we're<01:13:30.480> going<01:13:30.560> to<01:13:30.760> also<01:13:30.960> need<01:13:31.199> a

create we're going to also need a

create we're going to also need a
username<01:13:32.080> for<01:13:32.280> our<01:13:32.480> user<01:13:33.120> so<01:13:33.360> let's<01:13:33.600> say

username for our user so let's say

username for our user so let's say
attribute<01:13:34.679> is<01:13:34.840> going<01:13:34.960> to<01:13:35.080> be<01:13:35.400> username<01:13:36.400> it's

attribute is going to be username it's

attribute is going to be username it's
going<01:13:36.719> to<01:13:36.840> be<01:13:37.560> 2200<01:13:38.560> and<01:13:38.760> we<01:13:38.880> can<01:13:39.040> click

going to be 2200 and we can click

going to be 2200 and we can click
create<01:13:40.960> we<01:13:41.159> also<01:13:41.400> need<01:13:41.639> an<01:13:41.840> account<01:13:42.199> ID<01:13:42.760> so

create we also need an account ID so

create we also need an account ID so
let's<01:13:43.120> create<01:13:43.320> a<01:13:43.480> new<01:13:43.679> string<01:13:44.440> of<01:13:44.880> account<01:13:46.199> ID

let's create a new string of account ID

let's create a new string of account ID
of

of

of
2200<01:13:49.080> let's<01:13:49.280> make<01:13:49.400> it<01:13:49.600> required<01:13:50.360> and<01:13:50.520> let's

2200 let's make it required and let's

2200 let's make it required and let's
click

click

click
create<01:13:52.560> our<01:13:52.800> user<01:13:53.199> is<01:13:53.360> is<01:13:53.480> also<01:13:53.719> going<01:13:53.840> to<01:13:54.000> have

create our user is is also going to have

create our user is is also going to have
an<01:13:54.320> email<01:13:54.880> so<01:13:55.080> let's<01:13:55.280> select<01:13:55.600> an<01:13:55.840> email<01:13:56.239> type

an email so let's select an email type

an email so let's select an email type
call<01:13:57.440> it<01:13:57.679> an

call it an

call it an
email<01:13:59.440> make<01:13:59.639> it<01:13:59.840> required<01:14:00.560> and<01:14:00.800> click<01:14:01.199> create

email make it required and click create

email make it required and click create
our<01:14:02.400> user<01:14:02.840> can<01:14:03.040> also<01:14:03.360> add<01:14:03.560> a<01:14:03.679> bit<01:14:03.840> of<01:14:04.000> info

our user can also add a bit of info

our user can also add a bit of info
about<01:14:04.760> themselves<01:14:05.280> so<01:14:05.480> let's<01:14:05.679> create<01:14:05.880> a<01:14:06.000> new

about themselves so let's create a new

about themselves so let's create a new
string<01:14:06.520> property<01:14:07.199> called<01:14:07.679> bio<01:14:08.679> and<01:14:08.920> here<01:14:09.440> they

string property called bio and here they

string property called bio and here they
can<01:14:09.760> add<01:14:10.400> their<01:14:10.760> biography<01:14:11.760> let's<01:14:12.000> click

can add their biography let's click

can add their biography let's click
create<01:14:13.679> finally<01:14:14.120> we<01:14:14.239> need<01:14:14.400> to<01:14:14.520> create<01:14:14.800> an

create finally we need to create an

create finally we need to create an
image<01:14:15.560> ID<01:14:16.360> attribute<01:14:17.040> of<01:14:17.440> type<01:14:17.639> string<01:14:18.280> so

image ID attribute of type string so

image ID attribute of type string so
that's<01:14:18.639> going<01:14:18.800> to<01:14:18.960> be<01:14:19.239> image<01:14:20.120> ID<01:14:21.120> of<01:14:21.320> the<01:14:21.480> same

that's going to be image ID of the same

that's going to be image ID of the same
size<01:14:22.840> and<01:14:23.000> this<01:14:23.080> is<01:14:23.400> needed<01:14:23.679> for<01:14:23.880> deleting<01:14:24.320> the

size and this is needed for deleting the

size and this is needed for deleting the
profile<01:14:24.880> images<01:14:25.639> when<01:14:25.840> changing<01:14:26.360> the<01:14:26.560> profile

profile images when changing the profile

profile images when changing the profile
image<01:14:27.719> let's<01:14:27.960> click

image let's click

image let's click
create<01:14:30.320> we<01:14:30.520> also<01:14:30.760> need<01:14:30.960> the<01:14:31.199> image<01:14:31.520> URL

create we also need the image URL

create we also need the image URL
attribute<01:14:32.880> this<01:14:33.000> is<01:14:33.120> going<01:14:33.280> to<01:14:33.440> be<01:14:33.639> of<01:14:33.800> a<01:14:33.960> type

attribute this is going to be of a type

attribute this is going to be of a type
URL<01:14:35.480> so<01:14:35.719> let's<01:14:35.920> say<01:14:36.320> image<01:14:37.320> URL

URL so let's say image URL

URL so let's say image URL
required<01:14:40.159> and

required and

required and
create<01:14:42.360> and<01:14:42.560> this<01:14:42.679> is<01:14:42.840> it<01:14:43.560> we<01:14:43.760> immediately

create and this is it we immediately

create and this is it we immediately
have<01:14:44.639> all<01:14:44.800> of<01:14:44.960> the<01:14:45.159> attributes<01:14:45.880> that<01:14:46.040> belong

have all of the attributes that belong

have all of the attributes that belong
to<01:14:46.520> our<01:14:46.679> user<01:14:47.560> what<01:14:47.719> we<01:14:47.840> can<01:14:48.000> do<01:14:48.520> is<01:14:48.719> also

to our user what we can do is also

to our user what we can do is also
screenshot

screenshot

screenshot
it<01:14:52.159> and<01:14:52.520> add<01:14:52.719> it<01:14:52.840> to<01:14:53.000> our<01:14:53.320> fig<01:14:53.520> Jam<01:14:54.520> there<01:14:54.679> we<01:14:54.880> go

it and add it to our fig Jam there we go

it and add it to our fig Jam there we go
I'm<01:14:55.320> just<01:14:55.440> going<01:14:55.600> to<01:14:55.800> make<01:14:55.920> it<01:14:56.120> the<01:14:56.280> same

size and we can put it right here below

size and we can put it right here below
users

users

users
collection<01:15:04.960> there<01:15:05.080> we<01:15:05.280> go<01:15:05.760> it's<01:15:05.960> pretty<01:15:06.239> handy

collection there we go it's pretty handy

collection there we go it's pretty handy
to<01:15:06.679> know<01:15:07.040> the<01:15:07.159> full<01:15:07.480> structure<01:15:08.199> especially<01:15:08.639> as

to know the full structure especially as

to know the full structure especially as
the<01:15:08.920> app<01:15:09.239> grows<01:15:10.239> and<01:15:10.480> finally<01:15:11.040> the<01:15:11.239> saves

the app grows and finally the saves

the app grows and finally the saves
collection<01:15:12.000> is<01:15:12.320> remaining<01:15:12.960> so<01:15:13.159> let's<01:15:13.440> go<01:15:13.840> back

collection is remaining so let's go back

collection is remaining so let's go back
to<01:15:14.159> our<01:15:14.360> upright<01:15:15.280> go<01:15:15.480> to<01:15:15.880> saves

to our upright go to saves

to our upright go to saves
attributes<01:15:18.440> and<01:15:18.639> we<01:15:18.719> need<01:15:18.880> to<01:15:19.040> create<01:15:19.400> a<01:15:19.639> user

attributes and we need to create a user

attributes and we need to create a user
attribute<01:15:20.920> which<01:15:21.040> is<01:15:21.159> going<01:15:21.320> to<01:15:21.480> be<01:15:21.639> of<01:15:21.800> a<01:15:22.000> type

attribute which is going to be of a type

attribute which is going to be of a type
relationship

relationship

relationship
so<01:15:24.800> it's<01:15:24.960> going<01:15:25.120> to<01:15:25.239> be<01:15:25.360> a<01:15:25.480> two-way

so it's going to be a two-way

so it's going to be a two-way
relationship<01:15:26.800> between<01:15:27.760> users<01:15:28.760> where<01:15:29.000> it's

relationship between users where it's

relationship between users where it's
going<01:15:29.280> to<01:15:29.440> say<01:15:30.000> user<01:15:31.000> and<01:15:31.400> it's<01:15:31.560> going<01:15:31.719> to<01:15:31.920> say

going to say user and it's going to say

going to say user and it's going to say
save<01:15:33.239> so<01:15:33.400> we<01:15:33.480> need<01:15:33.600> to<01:15:33.719> know<01:15:34.040> which<01:15:34.199> user<01:15:34.760> saved

save so we need to know which user saved

save so we need to know which user saved
which<01:15:35.679> post<01:15:36.639> it's<01:15:36.840> going<01:15:37.000> to<01:15:37.120> be<01:15:37.320> a<01:15:37.520> many<01:15:37.880> toone

which post it's going to be a many toone

which post it's going to be a many toone
relationship<01:15:39.239> because<01:15:39.600> one<01:15:39.800> user<01:15:40.159> can<01:15:40.320> save

relationship because one user can save

relationship because one user can save
many

many

many
posts<01:15:42.760> and<01:15:43.040> on<01:15:43.320> delete<01:15:43.920> we<01:15:44.040> have<01:15:44.159> to<01:15:44.360> select

posts and on delete we have to select

posts and on delete we have to select
set<01:15:45.639> now<01:15:46.400> and<01:15:46.520> let's<01:15:46.760> click

set now and let's click

set now and let's click
create<01:15:49.840> and<01:15:50.120> also<01:15:50.440> we<01:15:50.560> need<01:15:50.679> to<01:15:50.880> create<01:15:51.239> a<01:15:51.520> post

create and also we need to create a post

create and also we need to create a post
attribute<01:15:53.199> so<01:15:53.360> we<01:15:53.480> know<01:15:53.719> which<01:15:53.920> post<01:15:54.199> was

attribute so we know which post was

attribute so we know which post was
saved<01:15:55.679> so<01:15:56.000> we<01:15:56.080> can<01:15:56.280> create<01:15:56.560> a<01:15:56.679> new

saved so we can create a new

saved so we can create a new
relationship<01:15:59.239> and<01:15:59.440> we<01:15:59.560> can<01:15:59.719> create<01:16:00.080> a<01:16:00.280> two-way

relationship and we can create a two-way

relationship and we can create a two-way
relationship<01:16:01.639> between

relationship between

relationship between
posts<01:16:03.760> we<01:16:03.880> can<01:16:04.040> call<01:16:04.239> it<01:16:04.520> post<01:16:05.159> and<01:16:05.800> save<01:16:06.800> make

posts we can call it post and save make

posts we can call it post and save make
sure<01:16:07.159> you<01:16:07.320> call<01:16:07.679> these<01:16:07.880> attributes<01:16:08.600> exactly

sure you call these attributes exactly

sure you call these attributes exactly
the<01:16:09.440> same<01:16:09.800> as<01:16:10.000> I'm<01:16:10.199> calling<01:16:10.520> them<01:16:10.800> here<01:16:11.280> that's

the same as I'm calling them here that's

the same as I'm calling them here that's
necessary<01:16:12.000> for<01:16:12.199> the<01:16:12.360> application<01:16:12.840> to<01:16:13.040> work

necessary for the application to work

necessary for the application to work
and<01:16:14.000> then<01:16:14.120> we<01:16:14.239> can<01:16:14.400> do<01:16:14.639> a<01:16:14.880> many<01:16:15.239> to

and then we can do a many to

and then we can do a many to
one<01:16:17.560> and<01:16:17.880> set<01:16:18.239> now<01:16:19.040> and<01:16:19.199> click

one and set now and click

one and set now and click
create<01:16:22.400> so<01:16:22.679> now<01:16:23.199> we<01:16:23.320> can<01:16:23.520> copy<01:16:23.880> these<01:16:24.159> one<01:16:24.360> more

create so now we can copy these one more

create so now we can copy these one more
time<01:16:26.000> and<01:16:26.199> we<01:16:26.280> can<01:16:26.520> add<01:16:26.719> them<01:16:27.000> right<01:16:27.239> here

time and we can add them right here

time and we can add them right here
below<01:16:28.000> the

below the

below the
saves<01:16:30.800> and<01:16:30.960> there<01:16:31.120> we<01:16:31.280> go<01:16:31.400> so<01:16:31.639> now<01:16:31.800> we<01:16:31.920> can<01:16:32.120> see

saves and there we go so now we can see

saves and there we go so now we can see
that<01:16:32.880> saves<01:16:33.760> actually<01:16:34.120> kind<01:16:34.239> of<01:16:34.400> comes<01:16:34.840> in

that saves actually kind of comes in

that saves actually kind of comes in
between<01:16:36.040> of<01:16:36.400> some<01:16:36.639> of<01:16:36.800> the<01:16:36.960> posts<01:16:37.840> so<01:16:38.199> here<01:16:38.440> we

between of some of the posts so here we

between of some of the posts so here we
can<01:16:38.639> make<01:16:38.840> this<01:16:38.960> a<01:16:39.120> bit

can make this a bit

can make this a bit
smaller<01:16:41.360> and<01:16:41.800> we<01:16:41.920> can<01:16:42.159> Define<01:16:42.719> that<01:16:42.880> a<01:16:43.080> user

smaller and we can Define that a user

smaller and we can Define that a user
can<01:16:43.880> save<01:16:44.360> a<01:16:44.560> specific<01:16:45.040> post<01:16:45.639> so<01:16:45.800> it's<01:16:45.920> going

can save a specific post so it's going

can save a specific post so it's going
to<01:16:46.239> go<01:16:46.440> something<01:16:46.760> like<01:16:46.960> this<01:16:48.120> saves<01:16:49.120> and<01:16:49.320> then

to go something like this saves and then

to go something like this saves and then
we<01:16:49.719> can<01:16:49.920> go<01:16:50.199> to<01:16:50.360> a<01:16:50.560> specific

we can go to a specific

we can go to a specific
post<01:16:53.120> users<01:16:53.520> can<01:16:53.800> create<01:16:54.320> posts<01:16:54.960> but<01:16:55.120> users

post users can create posts but users

post users can create posts but users
can<01:16:55.639> also<01:16:55.960> save<01:16:56.520> the<01:16:56.679> posts<01:16:57.080> that<01:16:57.239> they<01:16:57.400> like

can also save the posts that they like

can also save the posts that they like
pretty<01:16:58.480> cool<01:16:58.840> right<01:16:59.480> and<01:16:59.639> then<01:16:59.800> these<01:16:59.920> are<01:17:00.080> the

pretty cool right and then these are the

pretty cool right and then these are the
attribute<01:17:00.719> of<01:17:00.840> the<01:17:01.400> save<01:17:02.400> so<01:17:02.920> this<01:17:03.120> is<01:17:03.239> our

attribute of the save so this is our

attribute of the save so this is our
current<01:17:03.760> structure<01:17:04.360> we'll<01:17:04.560> be<01:17:04.719> returning

current structure we'll be returning

current structure we'll be returning
back<01:17:05.360> to<01:17:05.520> this<01:17:05.679> fig<01:17:05.960> jam<01:17:06.600> and<01:17:06.760> whenever<01:17:07.080> we

back to this fig jam and whenever we

back to this fig jam and whenever we
need<01:17:07.320> to<01:17:07.520> explain<01:17:07.960> something<01:17:08.239> in<01:17:08.400> more<01:17:08.639> detail

need to explain something in more detail

need to explain something in more detail
that's<01:17:09.639> exactly<01:17:10.120> what<01:17:10.239> I'm<01:17:10.360> going<01:17:10.440> to<01:17:10.600> do<01:17:11.080> in<01:17:11.199> a

that's exactly what I'm going to do in a

that's exactly what I'm going to do in a
visual<01:17:11.840> manner<01:17:12.639> if<01:17:12.760> you'd<01:17:12.920> like<01:17:13.080> me<01:17:13.159> to<01:17:13.320> add

visual manner if you'd like me to add

visual manner if you'd like me to add
more<01:17:13.880> visuals<01:17:14.320> to<01:17:14.480> our<01:17:14.679> videos<01:17:15.239> just<01:17:15.440> let<01:17:15.600> me

more visuals to our videos just let me

more visuals to our videos just let me
know<01:17:16.520> for<01:17:16.760> now<01:17:17.199> I've<01:17:17.360> been<01:17:17.520> only<01:17:17.760> doing<01:17:18.080> this

know for now I've been only doing this

know for now I've been only doing this
in<01:17:18.320> our<01:17:18.520> Pro<01:17:18.800> courses<01:17:19.400> because<01:17:19.679> we<01:17:19.840> have<01:17:20.080> so

in our Pro courses because we have so

in our Pro courses because we have so
much<01:17:20.480> more<01:17:20.800> time<01:17:21.040> to<01:17:21.280> cover<01:17:21.600> things<01:17:21.840> in<01:17:22.040> depth

much more time to cover things in depth

much more time to cover things in depth
in<01:17:23.120> videos<01:17:23.639> the<01:17:23.800> time<01:17:24.000> is<01:17:24.199> limited<01:17:25.000> but<01:17:25.239> still

in videos the time is limited but still

in videos the time is limited but still
I'll<01:17:25.840> try<01:17:26.120> to<01:17:26.320> make<01:17:26.560> them<01:17:26.880> as<01:17:27.080> detailed<01:17:27.840> as

I'll try to make them as detailed as

I'll try to make them as detailed as
possible<01:17:29.360> finally<01:17:30.000> now<01:17:30.199> that<01:17:30.320> we've<01:17:30.520> created

possible finally now that we've created

possible finally now that we've created
our<01:17:31.080> collections<01:17:31.800> our<01:17:32.040> database<01:17:32.719> is<01:17:33.320> ready

our collections our database is ready

our collections our database is ready
this<01:17:34.560> took<01:17:34.800> some<01:17:35.080> time<01:17:35.679> but<01:17:36.080> I<01:17:36.159> mean<01:17:36.600> it's

this took some time but I mean it's

this took some time but I mean it's
pretty<01:17:37.320> crazy<01:17:38.320> really<01:17:38.639> soon<01:17:39.400> we<01:17:39.560> now<01:17:39.840> have<01:17:40.000> a

pretty crazy really soon we now have a

pretty crazy really soon we now have a
complete<01:17:40.679> authentication<01:17:41.520> system<01:17:42.040> where<01:17:42.159> we

complete authentication system where we

complete authentication system where we
can<01:17:42.480> add<01:17:42.719> users<01:17:43.719> not<01:17:43.960> only<01:17:44.520> that<01:17:44.960> but<01:17:45.159> now<01:17:45.360> we

can add users not only that but now we

can add users not only that but now we
can<01:17:45.679> add<01:17:45.880> them<01:17:46.040> to<01:17:46.159> our<01:17:46.400> database<01:17:47.239> as<01:17:47.440> well<01:17:48.199> in

can add them to our database as well in

can add them to our database as well in
the<01:17:48.560> database<01:17:49.280> we<01:17:49.480> have<01:17:49.639> our<01:17:49.880> collections

the database we have our collections

the database we have our collections
with<01:17:51.080> complete<01:17:51.600> attributes<01:17:52.440> so<01:17:52.639> we<01:17:52.760> know<01:17:53.159> the

with complete attributes so we know the

with complete attributes so we know the
structure<01:17:53.960> of<01:17:54.159> each<01:17:54.360> one<01:17:54.480> of<01:17:54.600> our<01:17:54.800> Elements

structure of each one of our Elements

structure of each one of our Elements
which<01:17:55.600> we<01:17:55.679> can<01:17:55.840> see<01:17:56.199> right<01:17:56.760> here<01:17:57.760> and<01:17:58.000> then<01:17:58.800> we

which we can see right here and then we

which we can see right here and then we
also<01:17:59.360> have<01:17:59.639> relationships<01:18:00.560> between<01:18:01.000> them<01:18:01.600> and

also have relationships between them and

also have relationships between them and
we<01:18:01.880> also<01:18:02.120> have<01:18:02.400> storage<01:18:03.159> so<01:18:03.320> we<01:18:03.440> can<01:18:03.639> upload

we also have storage so we can upload

we also have storage so we can upload
images<01:18:04.639> to<01:18:04.800> our<01:18:05.000> application<01:18:06.000> I<01:18:06.080> mean<01:18:06.560> ight

images to our application I mean ight

images to our application I mean ight
Cloud<01:18:07.840> really<01:18:08.120> does<01:18:08.639> everything<01:18:09.120> you<01:18:09.239> wanted

Cloud really does everything you wanted

Cloud really does everything you wanted
to<01:18:09.639> do<01:18:09.840> in<01:18:10.000> this<01:18:10.320> case<01:18:11.320> now<01:18:11.520> the<01:18:11.719> last<01:18:11.880> thing<01:18:12.040> we

to do in this case now the last thing we

to do in this case now the last thing we
need<01:18:12.280> to<01:18:12.400> do<01:18:12.719> is<01:18:12.880> go<01:18:13.040> to<01:18:13.280> database<01:18:14.280> and<01:18:14.440> then

need to do is go to database and then

need to do is go to database and then
copy<01:18:15.000> the<01:18:15.159> IDS<01:18:15.719> right<01:18:15.920> here<01:18:16.400> of<01:18:16.600> these

copy the IDS right here of these

copy the IDS right here of these
collections<01:18:17.880> so<01:18:18.040> let's<01:18:18.280> copy<01:18:18.520> the

collections so let's copy the

collections so let's copy the
saves<01:18:20.960> go<01:18:21.239> back<01:18:21.520> here<01:18:22.159> and<01:18:22.280> we<01:18:22.400> can<01:18:22.520> say

saves go back here and we can say

saves go back here and we can say
something<01:18:23.400> like<01:18:24.199> vorea<01:18:25.199> right

something like vorea right

something like vorea right
uncore<01:18:28.239> saves<01:18:29.239> uncore<01:18:29.840> collection<01:18:30.800> uncore<01:18:31.800> ID

uncore saves uncore collection uncore ID

uncore saves uncore collection uncore ID
it's<01:18:32.880> a<01:18:33.040> long<01:18:33.320> name<01:18:33.639> I<01:18:33.760> know<01:18:34.199> but<01:18:34.360> it's<01:18:34.520> better

it's a long name I know but it's better

it's a long name I know but it's better
to<01:18:34.880> be<01:18:35.040> safe<01:18:35.360> than<01:18:35.880> sorry<01:18:36.880> and<01:18:37.120> finally<01:18:37.560> we<01:18:37.679> can

to be safe than sorry and finally we can

to be safe than sorry and finally we can
duplicate<01:18:38.320> this<01:18:38.480> two<01:18:38.639> more<01:18:38.960> times<01:18:39.520> we're

duplicate this two more times we're

duplicate this two more times we're
going<01:18:39.800> to<01:18:39.920> save<01:18:40.199> saves<01:18:40.679> collection<01:18:41.080> ID<01:18:41.639> we're

going to save saves collection ID we're

going to save saves collection ID we're
going<01:18:41.880> to<01:18:42.040> have<01:18:42.480> post<01:18:43.239> collection<01:18:43.679> ID<01:18:44.520> and

going to have post collection ID and

going to have post collection ID and
we're<01:18:44.760> going<01:18:44.840> to<01:18:45.080> have<01:18:45.400> a<01:18:45.639> user<01:18:46.360> collection<01:18:46.800> ID

we're going to have a user collection ID

we're going to have a user collection ID
as

well so for the Post we can copy it

well so for the Post we can copy it
right<01:18:54.080> here<01:18:54.679> don't<01:18:55.239> mistakenly<01:18:55.800> do<01:18:56.000> the<01:18:56.159> wrong

right here don't mistakenly do the wrong

right here don't mistakenly do the wrong
one<01:18:58.120> and<01:18:58.360> finally<01:18:58.880> we<01:18:59.000> can<01:18:59.120> do<01:18:59.280> the

one and finally we can do the

one and finally we can do the
users<01:19:01.719> there<01:19:01.880> we<01:19:02.120> go<01:19:02.960> so<01:19:03.280> now<01:19:03.480> we<01:19:03.600> have<01:19:03.760> the

users there we go so now we have the

users there we go so now we have the
ight<01:19:04.320> URL<01:19:05.000> the<01:19:05.199> project<01:19:05.560> ID<01:19:06.320> the<01:19:06.520> database<01:19:07.440> ID

ight URL the project ID the database ID

ight URL the project ID the database ID
storage<01:19:08.800> ID<01:19:09.719> user<01:19:10.120> collection<01:19:10.760> ID<01:19:11.760> post

storage ID user collection ID post

storage ID user collection ID post
collection<01:19:12.560> ID<01:19:13.320> and<01:19:13.480> the<01:19:13.639> saves<01:19:14.000> ID<01:19:14.840> in<01:19:15.000> case

collection ID and the saves ID in case

collection ID and the saves ID in case
you<01:19:15.280> didn't<01:19:15.560> copy<01:19:15.840> the<01:19:16.000> project<01:19:16.320> ID<01:19:16.600> before

you didn't copy the project ID before

you didn't copy the project ID before
it's<01:19:17.679> right<01:19:17.920> here<01:19:18.239> within<01:19:18.480> the<01:19:18.760> overview

it's right here within the overview

it's right here within the overview
database<01:19:20.480> is<01:19:20.800> right<01:19:21.080> here<01:19:21.679> storage<01:19:22.360> is<01:19:22.560> right

database is right here storage is right

database is right here storage is right
here<01:19:22.960> here<01:19:23.440> everything<01:19:23.800> is<01:19:24.000> so<01:19:24.320> easy<01:19:24.639> to

here here everything is so easy to

here here everything is so easy to
find<01:19:26.480> now<01:19:26.880> we<01:19:27.000> can<01:19:27.199> make<01:19:27.480> use<01:19:27.719> of<01:19:28.000> these

find now we can make use of these

find now we can make use of these
variables<01:19:29.159> by<01:19:29.320> going<01:19:29.719> back<01:19:30.000> not<01:19:30.199> to<01:19:30.360> our

variables by going back not to our

variables by going back not to our
signup<01:19:30.960> form<01:19:31.520> but<01:19:31.800> rather<01:19:32.040> to<01:19:32.199> our<01:19:32.440> config

signup form but rather to our config

signup form but rather to our config
right<01:19:33.520> here<01:19:34.159> we're<01:19:34.520> initializing<01:19:35.199> all<01:19:35.360> of

right here we're initializing all of

right here we're initializing all of
these<01:19:35.639> Services<01:19:36.199> here<01:19:36.840> but<01:19:37.040> we're<01:19:37.280> not<01:19:37.520> yet

these Services here but we're not yet

these Services here but we're not yet
properly<01:19:38.080> setting<01:19:38.400> them<01:19:38.600> up<01:19:39.360> and<01:19:39.520> we<01:19:39.639> can<01:19:39.760> do

properly setting them up and we can do

properly setting them up and we can do
that<01:19:40.520> by<01:19:40.760> having<01:19:41.040> the<01:19:41.239> URL<01:19:42.239> the<01:19:42.440> project<01:19:42.800> ID<01:19:43.639> we

that by having the URL the project ID we

that by having the URL the project ID we
also<01:19:44.080> need<01:19:44.360> a<01:19:44.600> database<01:19:45.600> ID<01:19:46.600> which<01:19:46.719> is<01:19:46.960> going

also need a database ID which is going

also need a database ID which is going
to<01:19:47.280> be

to be

to be
import.<01:19:49.320> meta<01:19:50.400> env.<01:19:51.840> vorea<01:19:52.920> _<01:19:53.920> database<01:19:55.000> ID<01:19:56.000> we

import. meta env. vorea _ database ID we

import. meta env. vorea _ database ID we
also<01:19:56.400> need<01:19:56.560> to<01:19:56.719> get<01:19:56.960> a<01:19:57.199> storage<01:19:57.880> ID<01:19:58.600> which<01:19:58.719> is

also need to get a storage ID which is

also need to get a storage ID which is
going<01:19:59.000> to<01:19:59.159> be<01:19:59.400> import.<01:20:00.400> meta<01:20:01.480> env.

going to be import. meta env.

going to be import. meta env.
vorea<01:20:04.080> rightor

vorea rightor

vorea rightor
storage

storage

storage
ID<01:20:08.480> we<01:20:08.639> also<01:20:09.080> have<01:20:09.199> to<01:20:09.360> have<01:20:09.520> all<01:20:09.719> the

ID we also have to have all the

ID we also have to have all the
collections<01:20:10.600> so<01:20:10.760> we<01:20:10.840> can<01:20:10.960> say<01:20:11.239> user

collections so we can say user

collections so we can say user
collection<01:20:13.120> ID<01:20:14.000> is<01:20:14.280> import.<01:20:15.280> meta

collection ID is import. meta

collection ID is import. meta
do.<01:20:18.320> vorea<01:20:19.360> rightor<01:20:20.480> user<01:20:21.760> collection<01:20:23.080> ID

do. vorea rightor user collection ID

do. vorea rightor user collection ID
post<01:20:24.719> collection<01:20:25.600> ID<01:20:26.400> is<01:20:26.560> going<01:20:26.719> to<01:20:26.920> be

post collection ID is going to be

post collection ID is going to be
import.<01:20:28.560> meta<01:20:29.880> env.<01:20:30.880> Vore<01:20:31.800> aight<01:20:32.440> _<01:20:33.080> postore

import. meta env. Vore aight _ postore

import. meta env. Vore aight _ postore
collection<01:20:35.000> _<01:20:35.639> ID<01:20:36.639> and<01:20:36.960> finally<01:20:37.880> saves

collection _ ID and finally saves

collection _ ID and finally saves
collection<01:20:40.280> ID<01:20:41.280> which<01:20:41.400> is<01:20:41.520> going<01:20:41.679> to<01:20:41.840> be

collection ID which is going to be

collection ID which is going to be
importa<01:20:44.400> env.<01:20:45.400> Vore<01:20:46.320> aprite<01:20:46.920> uncore<01:20:47.520> saves

importa env. Vore aprite uncore saves

importa env. Vore aprite uncore saves
uncore

uncore

uncore
collection<01:20:50.159> uncore<01:20:51.120> ID<01:20:52.120> and<01:20:52.360> with<01:20:52.520> that<01:20:53.000> we

collection uncore ID and with that we

collection uncore ID and with that we
have<01:20:53.400> everything<01:20:53.760> we<01:20:53.880> need<01:20:54.280> to<01:20:54.480> start

have everything we need to start

have everything we need to start
utilizing<01:20:55.719> these<01:20:55.960> services<01:20:56.880> that<01:20:57.120> aright

utilizing these services that aright

utilizing these services that aright
provides<01:20:58.120> out<01:20:58.239> of<01:20:58.400> the<01:20:58.840> box<01:20:59.840> so<01:21:00.280> back<01:21:00.480> in<01:21:00.679> our

provides out of the box so back in our

provides out of the box so back in our
code<01:21:01.440> we<01:21:01.560> can<01:21:01.880> exit<01:21:02.239> our<01:21:02.480> EnV<01:21:03.000> local<01:21:03.679> we<01:21:03.760> can

code we can exit our EnV local we can

code we can exit our EnV local we can
exit<01:21:04.440> our<01:21:04.679> config<01:21:05.239> as<01:21:05.440> well<01:21:06.120> and<01:21:06.520> before<01:21:07.080> we<01:21:07.239> go

exit our config as well and before we go

exit our config as well and before we go
into<01:21:07.800> our<01:21:07.960> signup<01:21:08.360> form<01:21:08.960> and<01:21:09.199> finalize<01:21:09.840> what

into our signup form and finalize what

into our signup form and finalize what
this<01:21:10.159> function<01:21:10.480> does<01:21:10.639> on<01:21:10.800> the<01:21:10.920> front<01:21:11.159> end

this function does on the front end

this function does on the front end
let's<01:21:12.040> go<01:21:12.199> ahead<01:21:12.520> and<01:21:12.719> implement<01:21:13.199> it<01:21:13.440> on<01:21:13.600> the

let's go ahead and implement it on the

let's go ahead and implement it on the
back<01:21:14.000> end<01:21:14.520> or<01:21:14.840> rather<01:21:15.440> let's<01:21:15.719> utilize<01:21:16.320> all<01:21:16.520> of

back end or rather let's utilize all of

back end or rather let's utilize all of
these<01:21:16.920> services<01:21:17.639> that<01:21:17.800> aite<01:21:18.600> provides<01:21:19.600> so<01:21:19.760> I'm

these services that aite provides so I'm

these services that aite provides so I'm
going<01:21:20.040> to<01:21:20.280> add<01:21:20.520> aight<01:21:21.080> right<01:21:21.239> here<01:21:21.400> to<01:21:21.560> the<01:21:21.760> top

going to add aight right here to the top

going to add aight right here to the top
and<01:21:22.760> and<01:21:22.920> I'm<01:21:23.080> going<01:21:23.280> to<01:21:23.639> pin<01:21:23.880> it<01:21:24.400> this<01:21:24.480> is<01:21:24.600> a

and and I'm going to pin it this is a

and and I'm going to pin it this is a
cool<01:21:25.000> Chrome<01:21:25.360> feature<01:21:25.880> you<01:21:25.960> can<01:21:26.199> have

cool Chrome feature you can have

cool Chrome feature you can have
something<01:21:26.800> pinned<01:21:27.520> now<01:21:27.840> with<01:21:28.040> that<01:21:28.239> done

something pinned now with that done

something pinned now with that done
let's<01:21:28.920> go<01:21:29.040> ahead<01:21:29.400> and<01:21:29.600> go<01:21:29.840> into<01:21:30.120> the<01:21:30.320> aite<01:21:31.159> API

let's go ahead and go into the aite API

let's go ahead and go into the aite API
and<01:21:32.560> so<01:21:32.880> far<01:21:33.480> we<01:21:33.639> have<01:21:33.920> only<01:21:34.360> created<01:21:34.960> an

and so far we have only created an

and so far we have only created an
account<01:21:35.960> which<01:21:36.159> then<01:21:36.400> added<01:21:36.760> it<01:21:37.360> right<01:21:37.600> here

account which then added it right here

account which then added it right here
to<01:21:38.239> our<01:21:38.560> a<01:21:39.520> but<01:21:39.880> that's<01:21:40.120> not<01:21:40.360> enough<01:21:41.040> our<01:21:41.280> user

to our a but that's not enough our user

to our a but that's not enough our user
has<01:21:41.840> to<01:21:42.000> have<01:21:42.159> relations<01:21:42.639> to<01:21:42.840> the<01:21:43.000> post<01:21:43.320> it

has to have relations to the post it

has to have relations to the post it
creates<01:21:44.360> which<01:21:44.560> means<01:21:45.040> that<01:21:45.199> we<01:21:45.280> need<01:21:45.440> to<01:21:45.600> have

creates which means that we need to have

creates which means that we need to have
it<01:21:46.040> in<01:21:46.239> our<01:21:46.600> database<01:21:47.600> so<01:21:48.199> right<01:21:48.400> now<01:21:48.639> within

it in our database so right now within

it in our database so right now within
our<01:21:49.080> database<01:21:49.800> we<01:21:50.040> don't<01:21:50.360> yet<01:21:50.719> have<01:21:51.040> a<01:21:51.280> user<01:21:52.040> so

our database we don't yet have a user so

our database we don't yet have a user so
that's<01:21:52.679> going<01:21:52.800> to<01:21:52.880> be<01:21:53.000> our<01:21:53.159> next<01:21:53.440> goal<01:21:54.000> to<01:21:54.280> add

that's going to be our next goal to add

that's going to be our next goal to add
a<01:21:54.600> user<01:21:54.880> to<01:21:55.040> our<01:21:55.280> off<01:21:55.840> but<01:21:56.040> also<01:21:56.280> to<01:21:56.480> create<01:21:56.960> the

a user to our off but also to create the

a user to our off but also to create the
user's<01:21:57.600> document<01:21:58.199> in<01:21:58.320> the<01:21:58.760> database<01:21:59.760> so<01:22:00.159> how

user's document in the database so how

user's document in the database so how
are<01:22:00.440> we<01:22:00.600> going<01:22:00.760> to<01:22:00.920> do<01:22:01.080> it<01:22:01.719> well<01:22:02.080> let<01:22:02.199> me<01:22:02.360> show

are we going to do it well let me show

are we going to do it well let me show
you<01:22:03.400> we<01:22:03.520> can<01:22:03.719> go<01:22:04.000> right<01:22:04.199> here<01:22:04.440> below<01:22:04.800> create

you we can go right here below create

you we can go right here below create
account<01:22:05.880> and<01:22:06.040> we<01:22:06.120> can<01:22:06.320> check<01:22:06.920> if<01:22:07.120> we<01:22:07.320> get

account and we can check if we get

account and we can check if we get
anything<01:22:07.960> back<01:22:08.159> from<01:22:08.360> it<01:22:08.960> and<01:22:09.239> if<01:22:09.400> we<01:22:09.600> don't<01:22:10.040> so

anything back from it and if we don't so

anything back from it and if we don't so
if<01:22:10.360> there's<01:22:10.679> no<01:22:11.239> new<01:22:11.679> account<01:22:12.600> in<01:22:12.840> that<01:22:13.080> case

if there's no new account in that case

if there's no new account in that case
we<01:22:13.520> want<01:22:13.679> to<01:22:13.840> throw<01:22:14.360> a<01:22:14.560> new<01:22:14.880> error<01:22:15.719> we<01:22:15.800> can<01:22:15.960> do

we want to throw a new error we can do

we want to throw a new error we can do
it<01:22:16.360> just<01:22:16.760> like<01:22:16.960> so<01:22:17.600> throw<01:22:18.800> error<01:22:19.800> then<01:22:20.199> moving

it just like so throw error then moving

it just like so throw error then moving
down<01:22:21.040> we<01:22:21.120> can<01:22:21.320> create<01:22:21.639> a<01:22:21.840> new<01:22:22.199> Avatar<01:22:22.800> URL<01:22:23.440> by

down we can create a new Avatar URL by

down we can create a new Avatar URL by
saying<01:22:23.960> const<01:22:24.679> Avatar<01:22:25.280> URL<01:22:26.159> is<01:22:26.400> equal<01:22:26.719> to

saying const Avatar URL is equal to

saying const Avatar URL is equal to
avatars<01:22:28.600> do<01:22:29.239> get

avatars do get

avatars do get
initials<01:22:31.360> now<01:22:31.639> where<01:22:31.800> are<01:22:31.920> we<01:22:32.080> getting<01:22:32.400> these

initials now where are we getting these

initials now where are we getting these
avatars<01:22:33.280> from<01:22:34.159> well<01:22:34.560> that's<01:22:34.800> something<01:22:35.120> we

avatars from well that's something we

avatars from well that's something we
have<01:22:35.360> to<01:22:35.560> import<01:22:35.960> from<01:22:36.239> aight<01:22:36.920> so<01:22:37.080> you<01:22:37.159> can

have to import from aight so you can

have to import from aight so you can
double<01:22:37.679> click<01:22:37.880> it<01:22:38.199> press<01:22:38.440> control<01:22:38.920> space<01:22:39.360> and

double click it press control space and

double click it press control space and
then<01:22:39.760> import<01:22:40.120> from<01:22:40.440> that/<01:22:41.199> config<01:22:42.120> if<01:22:42.239> you

then import from that/ config if you

then import from that/ config if you
remember<01:22:43.159> this<01:22:43.280> is<01:22:43.400> going<01:22:43.560> to<01:22:43.679> be<01:22:43.880> one<01:22:44.040> of

remember this is going to be one of

remember this is going to be one of
these<01:22:44.440> services<01:22:45.239> that<01:22:45.600> aight<01:22:46.120> provides

these services that aight provides

these services that aight provides
account<01:22:47.800> databases<01:22:48.760> storage<01:22:49.560> avatars<01:22:50.440> and

account databases storage avatars and

account databases storage avatars and
client<01:22:52.040> so<01:22:52.239> now<01:22:52.360> we're<01:22:52.560> we're<01:22:52.679> using<01:22:53.120> avatar.

client so now we're we're using avatar.

client so now we're we're using avatar.
get<01:22:54.400> initials<01:22:55.199> and<01:22:55.320> we<01:22:55.440> want<01:22:55.520> to<01:22:55.679> get<01:22:55.840> the

get initials and we want to get the

get initials and we want to get the
initials<01:22:56.440> from<01:22:56.679> user.name<01:22:58.040> once<01:22:59.040> we<01:22:59.199> have<01:22:59.360> the

initials from user.name once we have the

initials from user.name once we have the
Avatar<01:22:59.960> URL<01:23:00.840> we<01:23:00.920> can<01:23:01.120> create<01:23:01.560> a<01:23:01.760> new<01:23:02.000> user<01:23:02.920> but

Avatar URL we can create a new user but

Avatar URL we can create a new user but
this<01:23:03.320> time<01:23:03.600> not<01:23:03.800> a<01:23:03.960> new<01:23:04.199> account<01:23:04.880> rather<01:23:05.239> a

this time not a new account rather a

this time not a new account rather a
complete<01:23:06.000> new<01:23:06.280> user<01:23:06.719> in<01:23:06.880> the<01:23:07.080> database<01:23:07.840> by

complete new user in the database by

complete new user in the database by
saying<01:23:08.360> a<01:23:09.000> wait<01:23:10.000> save<01:23:10.840> user<01:23:11.600> to<01:23:12.400> DB<01:23:13.400> just<01:23:13.800> like

saying a wait save user to DB just like

saying a wait save user to DB just like
so<01:23:14.800> but<01:23:14.960> the<01:23:15.080> main<01:23:15.400> question<01:23:15.719> is<01:23:16.199> where<01:23:16.679> is

so but the main question is where is

so but the main question is where is
this<01:23:17.199> function<01:23:17.600> coming<01:23:18.360> from<01:23:19.360> and<01:23:19.520> the<01:23:19.719> answer

this function coming from and the answer

this function coming from and the answer
is<01:23:20.800> it's<01:23:20.960> a<01:23:21.159> function<01:23:21.760> that<01:23:21.880> we<01:23:21.960> are<01:23:22.080> going<01:23:22.199> to

is it's a function that we are going to

is it's a function that we are going to
Define<01:23:23.000> our<01:23:23.239> cells<01:23:24.239> so<01:23:24.600> right<01:23:24.840> below<01:23:25.520> this

Define our cells so right below this

Define our cells so right below this
function<01:23:26.159> create<01:23:26.480> new<01:23:26.679> user<01:23:27.239> we<01:23:27.320> can<01:23:27.480> create<01:23:27.800> a

function create new user we can create a

function create new user we can create a
new<01:23:28.480> function<01:23:29.480> export<01:23:30.600> async<01:23:31.960> function<01:23:32.960> save

new function export async function save

new function export async function save
user<01:23:34.560> to<01:23:35.400> DB<01:23:36.400> this<01:23:36.600> function<01:23:37.080> is<01:23:37.199> going<01:23:37.400> to

user to DB this function is going to

user to DB this function is going to
accept<01:23:37.920> the<01:23:38.080> user<01:23:38.800> as<01:23:38.920> a<01:23:39.120> parameter<01:23:40.080> and<01:23:40.239> we

accept the user as a parameter and we

accept the user as a parameter and we
can<01:23:40.520> immediately<01:23:41.040> destructure<01:23:42.000> some<01:23:42.159> of<01:23:42.280> the

can immediately destructure some of the

can immediately destructure some of the
values<01:23:43.000> from<01:23:43.199> that<01:23:43.440> user<01:23:44.320> and<01:23:44.480> then<01:23:44.679> open<01:23:44.920> up<01:23:45.080> a

values from that user and then open up a

values from that user and then open up a
new<01:23:45.440> function<01:23:46.000> block<01:23:47.000> we<01:23:47.120> can<01:23:47.320> destructure

new function block we can destructure

new function block we can destructure
the<01:23:48.280> account

the account

the account
ID<01:23:50.400> which<01:23:50.520> is<01:23:50.639> going<01:23:50.800> to<01:23:50.920> be<01:23:51.040> of<01:23:51.199> a<01:23:51.400> type<01:23:51.639> string

ID which is going to be of a type string

ID which is going to be of a type string
we<01:23:52.719> can<01:23:52.880> destructure<01:23:53.560> the<01:23:53.760> email<01:23:54.639> which<01:23:54.800> is

we can destructure the email which is

we can destructure the email which is
going<01:23:55.040> to<01:23:55.159> be<01:23:55.280> of<01:23:55.360> a<01:23:55.520> type<01:23:55.719> string<01:23:56.040> as<01:23:56.199> well<01:23:56.760> we

going to be of a type string as well we

going to be of a type string as well we
can<01:23:57.040> destructure<01:23:57.639> the<01:23:57.800> name<01:23:58.120> of<01:23:58.280> a<01:23:58.480> type

can destructure the name of a type

can destructure the name of a type
string<01:23:59.440> we<01:23:59.520> can<01:23:59.719> destructure<01:24:00.440> the<01:24:00.600> image<01:24:00.880> URL

string we can destructure the image URL

string we can destructure the image URL
of<01:24:01.800> a<01:24:01.960> type<01:24:02.199> URL<01:24:03.080> and<01:24:03.159> we<01:24:03.280> can<01:24:03.440> destructure<01:24:04.120> the

of a type URL and we can destructure the

of a type URL and we can destructure the
username<01:24:05.239> which<01:24:05.360> is<01:24:05.520> going<01:24:05.679> to<01:24:05.840> be<01:24:06.239> optional

username which is going to be optional

username which is going to be optional
and<01:24:07.360> it's<01:24:07.520> going<01:24:07.639> to<01:24:07.760> be<01:24:07.880> of<01:24:08.040> a<01:24:08.199> type<01:24:08.400> string<01:24:09.040> as

and it's going to be of a type string as

and it's going to be of a type string as
well<01:24:10.000> and<01:24:10.159> how<01:24:10.280> do<01:24:10.400> we<01:24:10.520> know<01:24:10.679> we're<01:24:10.880> getting

well and how do we know we're getting

well and how do we know we're getting
this<01:24:11.920> well<01:24:12.199> we<01:24:12.320> can<01:24:12.600> pass<01:24:12.800> it<01:24:13.280> right<01:24:13.480> here<01:24:13.760> when

this well we can pass it right here when

this well we can pass it right here when
we<01:24:14.040> call<01:24:14.400> that<01:24:14.600> function<01:24:15.560> we<01:24:15.679> can<01:24:15.880> pass<01:24:16.040> an

we call that function we can pass an

we call that function we can pass an
object<01:24:16.960> that's<01:24:17.199> going<01:24:17.360> to<01:24:17.600> have<01:24:17.920> all<01:24:18.080> of<01:24:18.280> these

object that's going to have all of these

object that's going to have all of these
properties<01:24:19.560> an<01:24:19.760> account<01:24:20.120> ID<01:24:20.840> equal<01:24:21.199> to<01:24:21.760> new

properties an account ID equal to new

properties an account ID equal to new
account

and then dot dollar sign ID that's how

and then dot dollar sign ID that's how
app<01:24:27.960> write<01:24:28.120> stores<01:24:28.520> IDs<01:24:29.400> we<01:24:29.520> can<01:24:29.719> pass<01:24:29.880> a<01:24:30.080> name

app write stores IDs we can pass a name

app write stores IDs we can pass a name
equal<01:24:30.920> to<01:24:31.239> new

equal to new

equal to new
account.<01:24:33.639> name<01:24:34.440> we<01:24:34.560> can<01:24:34.760> pass<01:24:34.960> an<01:24:35.159> email<01:24:35.800> equal

account. name we can pass an email equal

account. name we can pass an email equal
to<01:24:36.280> new<01:24:37.040> account.<01:24:38.040> email<01:24:38.840> we<01:24:38.960> can<01:24:39.199> pass<01:24:39.360> a

to new account. email we can pass a

to new account. email we can pass a
username<01:24:40.719> equal<01:24:41.040> to<01:24:41.239> new<01:24:41.679> account.<01:24:42.920> username

username equal to new account. username

username equal to new account. username
or<01:24:44.280> rather<01:24:44.800> this<01:24:44.960> username<01:24:45.440> is<01:24:45.600> not<01:24:45.800> going<01:24:45.960> to

or rather this username is not going to

or rather this username is not going to
be<01:24:46.400> within<01:24:46.639> a<01:24:46.800> new<01:24:47.040> account<01:24:47.920> because<01:24:48.119> we're

be within a new account because we're

be within a new account because we're
not<01:24:48.560> passing<01:24:48.880> it<01:24:49.040> initially<01:24:49.840> but<01:24:50.040> we<01:24:50.159> are

not passing it initially but we are

not passing it initially but we are
passing<01:24:50.760> it<01:24:51.000> right<01:24:51.199> here<01:24:51.600> when<01:24:51.840> saving<01:24:52.159> the

passing it right here when saving the

passing it right here when saving the
user<01:24:52.560> in<01:24:52.639> the<01:24:52.840> database<01:24:53.840> and<01:24:54.000> that's<01:24:54.239> coming

user in the database and that's coming

user in the database and that's coming
from<01:24:54.880> our<01:24:55.080> form<01:24:55.679> we<01:24:55.880> have<01:24:56.040> a<01:24:56.159> field<01:24:56.760> here

from our form we have a field here

from our form we have a field here
called<01:24:57.520> username<01:24:58.520> so<01:24:58.960> instead<01:24:59.880> we're<01:25:00.040> going

called username so instead we're going

called username so instead we're going
to<01:25:00.360> say

to say

to say
user.

user.

user.
username<01:25:05.840> and<01:25:06.080> finally<01:25:06.440> we<01:25:06.560> need<01:25:06.679> to<01:25:06.880> pass<01:25:07.119> the

username and finally we need to pass the

username and finally we need to pass the
image<01:25:07.560> URL<01:25:08.360> of<01:25:08.560> a<01:25:08.760> type<01:25:09.159> Avatar<01:25:09.760> URL<01:25:10.560> which

image URL of a type Avatar URL which

image URL of a type Avatar URL which
we're<01:25:10.920> also<01:25:11.320> passing<01:25:12.239> above<01:25:13.239> now<01:25:13.400> we<01:25:13.560> have

we're also passing above now we have

we're also passing above now we have
this<01:25:13.960> new<01:25:14.400> user<01:25:15.400> which<01:25:15.560> is<01:25:15.760> equal<01:25:16.040> to<01:25:16.480> the

this new user which is equal to the

this new user which is equal to the
function<01:25:16.960> call<01:25:17.360> of<01:25:17.520> our<01:25:17.719> save<01:25:18.000> user<01:25:18.280> to<01:25:18.440> DB<01:25:19.280> and

function call of our save user to DB and

function call of our save user to DB and
then<01:25:19.679> instead<01:25:19.920> of<01:25:20.040> returning<01:25:20.400> a<01:25:20.560> new<01:25:20.800> account

then instead of returning a new account

then instead of returning a new account
we<01:25:21.600> can<01:25:21.920> return<01:25:22.360> a<01:25:22.560> new<01:25:23.080> user<01:25:24.080> which<01:25:24.239> means

we can return a new user which means

we can return a new user which means
that<01:25:25.119> our<01:25:25.440> create<01:25:26.000> user<01:25:26.400> account<01:25:26.760> function<01:25:27.280> is

that our create user account function is

that our create user account function is
now<01:25:27.760> done<01:25:28.560> but<01:25:28.760> of<01:25:28.920> course<01:25:29.400> it's<01:25:29.679> dependent<01:25:30.440> on

now done but of course it's dependent on

now done but of course it's dependent on
the<01:25:30.880> save<01:25:31.360> user<01:25:31.760> to<01:25:32.000> DB<01:25:32.520> function<01:25:33.320> so<01:25:33.520> let's

the save user to DB function so let's

the save user to DB function so let's
collapse<01:25:34.280> this<01:25:34.679> and<01:25:34.880> let's<01:25:35.119> focus<01:25:35.560> on<01:25:35.760> the

collapse this and let's focus on the

collapse this and let's focus on the
save<01:25:36.280> user<01:25:36.560> to<01:25:36.920> DB<01:25:37.920> remember<01:25:38.679> above<01:25:39.159> we're

save user to DB remember above we're

save user to DB remember above we're
only<01:25:39.840> using<01:25:40.239> the<01:25:40.440> O<01:25:41.000> functionalities<01:25:41.920> where

only using the O functionalities where

only using the O functionalities where
we're<01:25:42.239> doing<01:25:42.520> authentication<01:25:43.520> but<01:25:43.719> now<01:25:44.040> we

we're doing authentication but now we

we're doing authentication but now we
want<01:25:44.280> to<01:25:44.440> save<01:25:44.679> it<01:25:45.280> so<01:25:45.480> for<01:25:45.679> the<01:25:45.840> first<01:25:46.080> time<01:25:46.239> in

want to save it so for the first time in

want to save it so for the first time in
this<01:25:46.679> app<01:25:46.960> we're<01:25:47.119> going<01:25:47.280> to<01:25:47.520> save<01:25:47.920> a<01:25:48.199> document

this app we're going to save a document

this app we're going to save a document
to<01:25:49.360> app<01:25:49.679> right<01:25:50.080> database<01:25:51.080> let's<01:25:51.320> open<01:25:51.560> up<01:25:51.760> a

to app right database let's open up a

to app right database let's open up a
new<01:25:52.360> try<01:25:52.639> and<01:25:52.960> catch<01:25:53.280> Block<01:25:54.280> in<01:25:54.400> the<01:25:54.560> error<01:25:55.040> we

new try and catch Block in the error we

new try and catch Block in the error we
can<01:25:55.320> simply<01:25:55.880> console.log<01:25:56.880> the

can simply console.log the

can simply console.log the
error<01:25:59.400> in<01:25:59.560> the<01:25:59.719> try<01:26:00.400> we<01:26:00.480> can<01:26:00.639> say<01:26:00.920> const<01:26:01.880> new

error in the try we can say const new

error in the try we can say const new
user<01:26:03.159> is<01:26:03.440> equal<01:26:03.760> to<01:26:04.440> await

user is equal to await

user is equal to await
databases.<01:26:07.400> create<01:26:08.440> document<01:26:09.440> one<01:26:09.600> more<01:26:09.880> time

databases. create document one more time

databases. create document one more time
where<01:26:10.719> is<01:26:11.000> databases<01:26:11.639> coming<01:26:11.960> from<01:26:12.440> try<01:26:12.679> to

where is databases coming from try to

where is databases coming from try to
think<01:26:13.119> about<01:26:13.320> it<01:26:14.040> it's<01:26:14.280> coming<01:26:14.560> fromc<01:26:15.560> config

think about it it's coming fromc config

think about it it's coming fromc config
because<01:26:16.520> we're<01:26:16.760> utilizing<01:26:17.639> what<01:26:17.800> we

because we're utilizing what we

because we're utilizing what we
configured<01:26:18.639> not<01:26:18.960> that<01:26:19.199> long<01:26:19.600> ago<01:26:20.600> and<01:26:20.800> now<01:26:21.040> we

configured not that long ago and now we

configured not that long ago and now we
have<01:26:21.280> to<01:26:21.560> pass<01:26:21.960> what<01:26:22.360> want<01:26:22.440> to<01:26:22.639> create<01:26:23.520> so

have to pass what want to create so

have to pass what want to create so
we're<01:26:23.880> going<01:26:23.960> to<01:26:24.159> pass<01:26:24.440> the<01:26:24.639> ight<01:26:25.440> config<01:26:26.440> do

we're going to pass the ight config do

we're going to pass the ight config do
database<01:26:27.560> ID<01:26:28.520> we<01:26:28.639> need<01:26:28.760> to<01:26:28.880> know<01:26:29.159> which

database ID we need to know which

database ID we need to know which
database<01:26:29.960> are<01:26:30.159> we<01:26:30.760> modifying<01:26:31.760> then<01:26:32.000> we<01:26:32.119> need

database are we modifying then we need

database are we modifying then we need
to<01:26:32.480> pass<01:26:32.760> the<01:26:32.960> upright

to pass the upright

to pass the upright
config<01:26:35.400> do<01:26:35.920> user<01:26:36.639> collection<01:26:37.080> ID<01:26:37.639> to<01:26:37.840> know

config do user collection ID to know

config do user collection ID to know
which<01:26:38.360> collection<01:26:38.840> are<01:26:39.000> we<01:26:39.320> modifying<01:26:40.320> we

which collection are we modifying we

which collection are we modifying we
need<01:26:40.560> to<01:26:40.800> pass<01:26:41.119> the<01:26:41.440> id.<01:26:42.920> unique<01:26:43.920> and<01:26:44.119> we<01:26:44.199> need

need to pass the id. unique and we need

need to pass the id. unique and we need
to<01:26:44.520> pass<01:26:44.760> the<01:26:44.960> actual<01:26:45.280> user<01:26:46.040> object<01:26:47.040> now

to pass the actual user object now

to pass the actual user object now
you're<01:26:47.440> going<01:26:47.560> to<01:26:47.679> notice<01:26:47.960> it's<01:26:48.119> going<01:26:48.239> to

you're going to notice it's going to

you're going to notice it's going to
start<01:26:48.639> complaining<01:26:49.239> about<01:26:49.480> the<01:26:49.679> app<01:26:49.960> right

start complaining about the app right

start complaining about the app right
config<01:26:50.920> which<01:26:51.040> we<01:26:51.199> have<01:26:51.320> to<01:26:51.520> import<01:26:51.840> from

config which we have to import from

config which we have to import from
config<01:26:52.960> that's<01:26:53.199> exactly<01:26:53.639> why<01:26:53.800> we're

config that's exactly why we're

config that's exactly why we're
exporting<01:26:54.480> it<01:26:54.679> in<01:26:54.800> the<01:26:54.960> first<01:26:55.360> place<01:26:56.360> and<01:26:56.520> then

exporting it in the first place and then

exporting it in the first place and then
we<01:26:57.000> simply<01:26:57.360> can<01:26:57.960> return<01:26:58.600> this<01:26:58.840> new<01:26:59.760> user<01:27:00.760> and

we simply can return this new user and

we simply can return this new user and
now<01:27:01.520> not<01:27:01.800> only<01:27:02.320> are<01:27:02.520> we<01:27:02.719> creating<01:27:03.280> the<01:27:03.400> user<01:27:03.679> in

now not only are we creating the user in

now not only are we creating the user in
the<01:27:03.920> authentication<01:27:04.600> part<01:27:05.239> which<01:27:05.400> is<01:27:06.000> right

the authentication part which is right

the authentication part which is right
here<01:27:08.960> but<01:27:09.159> we're<01:27:09.480> also<01:27:09.800> creating<01:27:10.159> it<01:27:10.360> in<01:27:10.440> the

here but we're also creating it in the

here but we're also creating it in the
database<01:27:12.400> so<01:27:12.800> let's<01:27:13.040> collapse<01:27:13.480> it<01:27:13.960> and<01:27:14.159> would

database so let's collapse it and would

database so let's collapse it and would
you<01:27:14.400> look<01:27:14.520> at<01:27:14.719> that<01:27:15.119> with<01:27:15.280> two<01:27:15.520> simple

you look at that with two simple

you look at that with two simple
functions<01:27:16.920> we<01:27:17.239> actually<01:27:17.560> have<01:27:17.719> a<01:27:17.840> connection

functions we actually have a connection

functions we actually have a connection
to<01:27:18.360> the<01:27:18.800> database<01:27:19.800> so<01:27:20.159> what's<01:27:20.560> remaining<01:27:21.159> is

to the database so what's remaining is

to the database so what's remaining is
to<01:27:21.560> actually<01:27:21.840> try<01:27:22.520> to<01:27:22.719> create<01:27:23.000> our<01:27:23.199> user<01:27:24.040> so

to actually try to create our user so

to actually try to create our user so
let's<01:27:24.600> go<01:27:24.800> back<01:27:24.920> to<01:27:25.080> our<01:27:25.239> signup<01:27:25.440> up<01:27:25.600> form

let's go back to our signup up form

let's go back to our signup up form
we're<01:27:26.600> calling<01:27:26.960> the<01:27:27.119> create<01:27:27.400> user<01:27:27.760> account

we're calling the create user account

we're calling the create user account
and<01:27:28.679> let's<01:27:28.880> figure<01:27:29.159> out<01:27:29.520> what<01:27:29.679> we<01:27:29.800> want<01:27:29.960> to

and let's figure out what we want to

and let's figure out what we want to
happen<01:27:31.000> after<01:27:31.280> the<01:27:31.440> account<01:27:31.760> gets<01:27:32.000> created<01:27:32.719> we

happen after the account gets created we

happen after the account gets created we
surely<01:27:33.239> don't<01:27:33.480> simply<01:27:33.719> want<01:27:33.880> to<01:27:34.040> consel<01:27:34.520> lock

surely don't simply want to consel lock

surely don't simply want to consel lock
the<01:27:34.840> newly<01:27:35.159> created<01:27:35.560> user<01:27:36.560> after<01:27:36.840> the<01:27:36.960> user<01:27:37.239> is

the newly created user after the user is

the newly created user after the user is
created<01:27:38.159> we<01:27:38.280> want<01:27:38.440> to<01:27:38.679> check<01:27:39.520> if<01:27:40.239> there<01:27:40.520> is<01:27:40.960> no

created we want to check if there is no

created we want to check if there is no
new<01:27:41.840> user<01:27:42.480> means<01:27:42.920> something<01:27:43.239> went<01:27:43.520> wrong<01:27:44.320> in

new user means something went wrong in

new user means something went wrong in
that<01:27:44.760> case<01:27:45.239> we<01:27:45.400> can<01:27:45.600> simply<01:27:46.520> return<01:27:47.080> meaning

that case we can simply return meaning

that case we can simply return meaning
exit<01:27:48.159> out<01:27:48.320> of<01:27:48.440> the<01:27:48.760> function<01:27:49.760> but<01:27:50.080> we<01:27:50.280> also

exit out of the function but we also

exit out of the function but we also
want<01:27:50.639> to<01:27:50.840> play<01:27:51.119> with<01:27:51.280> some<01:27:51.480> additional

want to play with some additional

want to play with some additional
function<01:27:52.080> functionality<01:27:53.040> which<01:27:53.159> is<01:27:53.320> going<01:27:53.480> to

function functionality which is going to

function functionality which is going to
be<01:27:53.880> a<01:27:54.119> small<01:27:54.639> toast<01:27:55.280> that<01:27:55.440> appears<01:27:56.360> or<01:27:56.679> at

be a small toast that appears or at

be a small toast that appears or at
least<01:27:57.080> we<01:27:57.199> call<01:27:57.400> it<01:27:57.600> that<01:27:57.800> way<01:27:58.639> a<01:27:58.840> toast<01:27:59.360> that

least we call it that way a toast that

least we call it that way a toast that
we<01:27:59.560> can<01:27:59.719> check<01:28:00.199> by<01:28:00.400> going<01:28:00.600> to<01:28:00.800> our<01:28:01.040> Shaden

we can check by going to our Shaden

we can check by going to our Shaden
documentation<01:28:03.159> and<01:28:03.320> then<01:28:03.520> checking<01:28:03.960> the

documentation and then checking the

documentation and then checking the
toast<01:28:05.400> functionality<01:28:06.400> a<01:28:06.600> toast<01:28:06.960> is<01:28:07.080> a<01:28:07.239> little

toast functionality a toast is a little

toast functionality a toast is a little
popup<01:28:08.119> that<01:28:08.239> you<01:28:08.440> click<01:28:09.080> and<01:28:09.280> then<01:28:09.480> it<01:28:09.639> jumps

popup that you click and then it jumps

popup that you click and then it jumps
out<01:28:10.560> it<01:28:10.679> can<01:28:10.840> be<01:28:11.080> dark<01:28:11.480> like<01:28:11.639> it<01:28:11.760> is<01:28:12.040> here<01:28:12.760> but

out it can be dark like it is here but

out it can be dark like it is here but
you<01:28:13.080> can<01:28:13.239> also<01:28:13.480> have<01:28:13.679> different<01:28:14.040> examples

you can also have different examples

you can also have different examples
where<01:28:15.119> it<01:28:15.280> can<01:28:15.440> be<01:28:15.880> light<01:28:16.480> meaning<01:28:16.920> something

where it can be light meaning something

where it can be light meaning something
was<01:28:17.560> good<01:28:18.040> or<01:28:18.480> a<01:28:18.679> red<01:28:18.880> one<01:28:19.199> meaning<01:28:19.560> something

was good or a red one meaning something

was good or a red one meaning something
was<01:28:20.159> really<01:28:20.480> really<01:28:20.760> bad<01:28:21.520> so<01:28:21.840> let's<01:28:22.159> go<01:28:22.199> ahead

was really really bad so let's go ahead

was really really bad so let's go ahead
and<01:28:22.480> implement<01:28:23.000> this<01:28:23.280> which<01:28:23.400> is<01:28:23.560> just<01:28:23.719> going

and implement this which is just going

and implement this which is just going
to<01:28:24.119> provide<01:28:24.800> much<01:28:25.000> more<01:28:25.400> intuitive<01:28:26.000> workflow

to provide much more intuitive workflow

to provide much more intuitive workflow
so<01:28:26.920> we<01:28:27.080> immediately<01:28:27.600> know<01:28:28.159> whether<01:28:28.400> the<01:28:28.480> user

so we immediately know whether the user

so we immediately know whether the user
was<01:28:29.000> created<01:28:29.760> or<01:28:30.280> not<01:28:31.280> now<01:28:31.480> I'm<01:28:31.600> going<01:28:31.719> to<01:28:31.880> show

was created or not now I'm going to show

was created or not now I'm going to show
you<01:28:32.520> how<01:28:32.679> to<01:28:32.960> add<01:28:33.320> this<01:28:33.560> second<01:28:34.080> shaten

you how to add this second shaten

you how to add this second shaten
component<01:28:35.400> to<01:28:35.520> our<01:28:35.679> workflow<01:28:36.520> we<01:28:36.679> just<01:28:36.800> have

component to our workflow we just have

component to our workflow we just have
to<01:28:37.000> follow<01:28:37.320> the

to follow the

to follow the
documentation<01:28:39.040> first<01:28:39.400> you<01:28:39.560> run<01:28:39.800> the

documentation first you run the

documentation first you run the
following<01:28:40.320> command<01:28:41.159> MPX<01:28:41.840> Shad<01:28:42.239> CN<01:28:42.480> UI<01:28:43.119> latest

following command MPX Shad CN UI latest

following command MPX Shad CN UI latest
add<01:28:44.719> toast<01:28:45.719> we<01:28:45.840> can<01:28:46.040> do<01:28:46.239> that<01:28:46.560> by<01:28:46.719> opening<01:28:47.080> the

add toast we can do that by opening the

add toast we can do that by opening the
second<01:28:47.520> terminal<01:28:48.000> we<01:28:48.159> have<01:28:48.400> here<01:28:49.199> and<01:28:49.480> simply

second terminal we have here and simply

second terminal we have here and simply
pasting<01:28:50.239> it<01:28:50.840> once<01:28:51.119> again<01:28:51.560> that's<01:28:52.000> MPX<01:28:52.719> shaty

pasting it once again that's MPX shaty

pasting it once again that's MPX shaty
and<01:28:53.400> UI<01:28:54.040> add<01:28:54.320> latest<01:28:55.199> add<01:28:55.719> toast<01:28:56.679> this<01:28:57.119> is<01:28:57.280> now

and UI add latest add toast this is now

and UI add latest add toast this is now
going<01:28:57.679> to<01:28:57.960> add<01:28:58.159> it<01:28:58.560> within<01:28:58.800> our<01:28:59.320> components

going to add it within our components

going to add it within our components
and<01:29:00.480> then<01:29:00.719> UI<01:29:01.719> and<01:29:01.840> you<01:29:01.920> can<01:29:02.040> see<01:29:02.320> that<01:29:02.480> the

and then UI and you can see that the

and then UI and you can see that the
toast<01:29:03.080> and<01:29:03.239> the<01:29:03.400> toaster<01:29:04.080> as<01:29:04.239> well<01:29:04.360> as<01:29:04.480> the

toast and the toaster as well as the

toast and the toaster as well as the
used<01:29:04.960> toast<01:29:05.320> functionality<01:29:06.159> were<01:29:06.480> added

used toast functionality were added

used toast functionality were added
automatically<01:29:08.080> don't<01:29:08.280> worry<01:29:08.639> you<01:29:08.760> don't<01:29:08.960> have

automatically don't worry you don't have

automatically don't worry you don't have
to<01:29:09.239> modify<01:29:09.760> these<01:29:10.159> we<01:29:10.320> just<01:29:10.440> want<01:29:10.560> to<01:29:10.719> use<01:29:10.960> them

to modify these we just want to use them

to modify these we just want to use them
within<01:29:11.400> our<01:29:11.600> code<01:29:12.600> so<01:29:12.840> how<01:29:12.960> do<01:29:13.119> we<01:29:13.239> use<01:29:13.520> them

within our code so how do we use them

within our code so how do we use them
well<01:29:14.320> we<01:29:14.440> can<01:29:14.639> refer<01:29:15.000> to<01:29:15.199> the<01:29:15.360> documentation

well we can refer to the documentation

well we can refer to the documentation
here<01:29:17.119> we<01:29:17.239> need<01:29:17.400> to<01:29:17.600> add<01:29:17.800> it<01:29:18.080> to<01:29:18.239> the<01:29:18.480> most<01:29:18.800> outer

here we need to add it to the most outer

here we need to add it to the most outer
part<01:29:19.480> of<01:29:19.600> our<01:29:20.119> application<01:29:21.119> in<01:29:21.320> this<01:29:21.480> case

part of our application in this case

part of our application in this case
it's<01:29:22.000> not<01:29:22.159> going<01:29:22.320> to<01:29:22.400> be<01:29:22.639> app<01:29:22.880> layout<01:29:23.239> TSX<01:29:24.159> it's

it's not going to be app layout TSX it's

it's not going to be app layout TSX it's
going<01:29:24.520> to<01:29:24.639> be<01:29:24.880> our<01:29:25.280> app<01:29:25.960> so<01:29:26.119> let's<01:29:26.280> go<01:29:26.400> ahead

going to be our app so let's go ahead

going to be our app so let's go ahead
and<01:29:26.800> copy<01:29:27.119> this<01:29:27.520> import<01:29:28.520> let's<01:29:28.840> go<01:29:29.239> right<01:29:29.440> here

and copy this import let's go right here

and copy this import let's go right here
to<01:29:30.040> our<01:29:30.480> app<01:29:31.480> and<01:29:31.760> let's<01:29:32.000> import<01:29:32.320> it<01:29:32.560> right

to our app and let's import it right

to our app and let's import it right
here<01:29:32.840> at<01:29:33.000> the<01:29:33.159> top<01:29:33.960> we<01:29:34.119> don't<01:29:34.360> need<01:29:34.639> this

here at the top we don't need this

here at the top we don't need this
entire<01:29:35.199> part<01:29:35.800> we<01:29:35.960> simply<01:29:36.280> need<01:29:36.600> the<01:29:36.760> import<01:29:37.600> so

entire part we simply need the import so

entire part we simply need the import so
we're<01:29:37.960> importing<01:29:38.320> it<01:29:38.520> from<01:29:38.760> toaster<01:29:39.280> UI

we're importing it from toaster UI

we're importing it from toaster UI
components<01:29:41.000> and<01:29:41.119> then<01:29:41.239> we<01:29:41.360> want<01:29:41.440> to<01:29:41.600> put<01:29:41.719> it

components and then we want to put it

components and then we want to put it
right<01:29:42.400> here<01:29:42.679> at<01:29:42.840> the<01:29:42.960> end<01:29:43.480> near<01:29:43.760> the<01:29:44.000> closing

right here at the end near the closing

right here at the end near the closing
main<01:29:45.280> toaster<01:29:46.080> like<01:29:46.280> so<01:29:47.000> this<01:29:47.119> is<01:29:47.239> going<01:29:47.360> to

main toaster like so this is going to

main toaster like so this is going to
allow<01:29:47.760> us<01:29:47.880> to<01:29:48.000> see<01:29:48.159> the<01:29:48.440> toaster<01:29:49.440> and<01:29:49.679> then<01:29:50.080> we

allow us to see the toaster and then we

allow us to see the toaster and then we
have<01:29:50.320> to<01:29:50.520> use<01:29:50.760> the<01:29:50.920> used<01:29:51.280> toast<01:29:51.639> hook<01:29:52.159> whenever

have to use the used toast hook whenever

have to use the used toast hook whenever
you<01:29:52.560> want<01:29:52.679> to<01:29:52.840> call<01:29:53.119> it<01:29:53.719> so<01:29:54.199> right<01:29:54.400> here<01:29:54.719> we<01:29:54.800> can

you want to call it so right here we can

you want to call it so right here we can
import<01:29:55.560> this<01:29:56.480> go<01:29:56.760> back<01:29:56.920> to<01:29:57.080> the<01:29:57.199> signup<01:29:57.679> form

import this go back to the signup form

import this go back to the signup form
we<01:29:58.800> can<01:29:59.080> import<01:29:59.480> it<01:29:59.960> right<01:30:00.199> here<01:30:00.400> at<01:30:00.560> the

we can import it right here at the

we can import it right here at the
top<01:30:02.840> we<01:30:03.000> don't<01:30:03.239> need<01:30:03.400> the<01:30:03.520> form<01:30:03.840> description

top we don't need the form description

top we don't need the form description
as<01:30:04.600> we're<01:30:04.760> not<01:30:04.960> using<01:30:05.280> it<01:30:05.920> and<01:30:06.080> then<01:30:06.480> where<01:30:06.679> do

as we're not using it and then where do

as we're not using it and then where do
we<01:30:06.960> want<01:30:07.040> to<01:30:07.239> use<01:30:07.440> it<01:30:08.040> we<01:30:08.119> have<01:30:08.239> to<01:30:08.440> declare<01:30:08.800> it

we want to use it we have to declare it

we want to use it we have to declare it
as<01:30:09.040> a<01:30:09.199> hook<01:30:09.719> right<01:30:09.920> here<01:30:10.119> at<01:30:10.239> the<01:30:10.480> top<01:30:11.480> cons

as a hook right here at the top cons

as a hook right here at the top cons
toast<01:30:12.320> is<01:30:12.480> equal<01:30:12.719> to<01:30:12.840> use<01:30:13.159> toast<01:30:14.000> and<01:30:14.119> then<01:30:14.239> we

toast is equal to use toast and then we

toast is equal to use toast and then we
call<01:30:14.719> it<01:30:15.119> whenever<01:30:15.440> we<01:30:15.520> want<01:30:15.679> it<01:30:15.880> to<01:30:16.040> appear<01:30:16.840> in

call it whenever we want it to appear in

call it whenever we want it to appear in
this<01:30:17.280> case<01:30:18.040> right<01:30:18.280> here<01:30:18.679> after<01:30:19.000> the<01:30:19.360> return<01:30:20.159> so

this case right here after the return so

this case right here after the return so
we<01:30:20.440> say<01:30:20.719> toast<01:30:21.320> schedule<01:30:22.199> description<01:30:23.199> this

we say toast schedule description this

we say toast schedule description this
is<01:30:23.520> it<01:30:24.199> but<01:30:24.360> of<01:30:24.480> course<01:30:24.679> we<01:30:24.800> want<01:30:24.960> our<01:30:25.159> toes<01:30:25.520> to

is it but of course we want our toes to

is it but of course we want our toes to
say<01:30:25.920> something<01:30:26.320> different<01:30:27.239> so<01:30:27.639> we<01:30:27.760> can<01:30:28.000> just

say something different so we can just

say something different so we can just
give<01:30:28.320> it<01:30:28.440> a<01:30:28.679> title<01:30:29.199> no<01:30:29.400> need<01:30:29.560> for<01:30:29.719> a

give it a title no need for a

give it a title no need for a
description<01:30:31.520> that's<01:30:31.719> going<01:30:31.840> to<01:30:32.000> look

description that's going to look

description that's going to look
something<01:30:32.520> like<01:30:32.760> this<01:30:33.639> title<01:30:34.679> is<01:30:35.679> sign<01:30:36.960> up

something like this title is sign up

something like this title is sign up
failed<01:30:39.199> please<01:30:40.040> try<01:30:41.040> again<01:30:42.040> as<01:30:42.320> simple<01:30:42.920> as<01:30:43.040> it

failed please try again as simple as it

failed please try again as simple as it
gets<01:30:43.880> now<01:30:44.159> in<01:30:44.320> this<01:30:44.520> case<01:30:44.760> let's<01:30:44.960> be

gets now in this case let's be

gets now in this case let's be
optimistic<01:30:45.920> we're<01:30:46.119> not<01:30:46.320> going<01:30:46.520> to<01:30:46.760> test<01:30:47.080> our

optimistic we're not going to test our

optimistic we're not going to test our
application<01:30:48.000> or<01:30:48.199> our<01:30:48.440> function<01:30:48.920> failing<01:30:49.800> we

application or our function failing we

application or our function failing we
want<01:30:50.040> to<01:30:50.199> test<01:30:50.400> the<01:30:50.560> toast<01:30:51.000> if<01:30:51.199> everything

want to test the toast if everything

want to test the toast if everything
works

works

works
so<01:30:53.040> what<01:30:53.159> do<01:30:53.320> we<01:30:53.440> want<01:30:53.560> to<01:30:53.760> do<01:30:54.440> we<01:30:54.560> want<01:30:54.719> to<01:30:55.000> sign

so what do we want to do we want to sign

so what do we want to do we want to sign
our<01:30:55.560> user<01:30:56.199> into<01:30:56.480> a<01:30:56.679> session<01:30:57.360> that's<01:30:57.600> the<01:30:57.760> next

our user into a session that's the next

our user into a session that's the next
step<01:30:58.520> so<01:30:58.679> we<01:30:58.760> can<01:30:58.920> say<01:30:59.199> con<01:30:59.719> session<01:31:00.719> is<01:31:01.080> equal

step so we can say con session is equal

step so we can say con session is equal
to

to

to
await<01:31:03.880> sign<01:31:04.719> in<01:31:05.679> account<01:31:06.679> okay<01:31:07.159> and<01:31:07.360> this<01:31:07.480> is

await sign in account okay and this is

await sign in account okay and this is
another<01:31:08.000> function<01:31:08.360> that<01:31:08.480> we<01:31:08.600> have<01:31:08.719> to<01:31:08.920> call

another function that we have to call

another function that we have to call
that<01:31:10.159> will<01:31:10.400> soon<01:31:10.880> Implement<01:31:11.880> for<01:31:12.159> now<01:31:12.560> let's

that will soon Implement for now let's

that will soon Implement for now let's
comment<01:31:13.119> and<01:31:13.480> out<01:31:14.480> and<01:31:14.600> let<01:31:14.719> me<01:31:14.880> tell<01:31:15.040> you

comment and out and let me tell you

comment and out and let me tell you
about<01:31:15.480> something<01:31:15.880> more<01:31:16.280> important<01:31:17.280> in<01:31:17.600> this

about something more important in this

about something more important in this
course<01:31:18.480> you'll<01:31:18.800> also<01:31:19.119> learn<01:31:19.679> how<01:31:19.800> to<01:31:20.040> use

course you'll also learn how to use

course you'll also learn how to use
react<01:31:21.199> query<01:31:22.159> recently<01:31:22.840> renamed<01:31:23.440> to<01:31:23.639> 10stack

react query recently renamed to 10stack

react query recently renamed to 10stack
query<01:31:24.800> as<01:31:24.960> they<01:31:25.119> started<01:31:25.480> supporting<01:31:26.040> view

query as they started supporting view

query as they started supporting view
spelt<01:31:27.560> solid<01:31:28.280> and<01:31:28.520> more<01:31:29.280> but<01:31:29.440> in<01:31:29.560> our<01:31:29.840> hearts

spelt solid and more but in our hearts

spelt solid and more but in our hearts
it's<01:31:30.440> still<01:31:30.679> called<01:31:31.119> react<01:31:31.600> query<01:31:32.520> it's<01:31:32.719> going

it's still called react query it's going

it's still called react query it's going
to<01:31:33.080> allow<01:31:33.360> us<01:31:33.520> to<01:31:33.679> do<01:31:33.920> a<01:31:34.119> lot<01:31:34.320> of<01:31:34.520> things<01:31:34.840> right

to allow us to do a lot of things right

to allow us to do a lot of things right
out<01:31:35.199> of<01:31:35.280> the<01:31:35.480> box<01:31:36.199> it's<01:31:36.360> going<01:31:36.520> to<01:31:36.639> be<01:31:36.880> simple

out of the box it's going to be simple

out of the box it's going to be simple
and<01:31:37.800> familiar<01:31:38.600> but<01:31:38.840> more<01:31:39.040> importantly<01:31:39.960> it

and familiar but more importantly it

and familiar but more importantly it
will<01:31:40.320> allow<01:31:40.679> us<01:31:40.880> to<01:31:41.199> Cache<01:31:41.719> the<01:31:41.920> data<01:31:42.199> we're

will allow us to Cache the data we're

will allow us to Cache the data we're
fetching<01:31:42.719> from<01:31:42.880> the<01:31:43.000> server<01:31:44.000> it<01:31:44.199> also<01:31:44.560> has

fetching from the server it also has

fetching from the server it also has
Auto<01:31:45.360> ref<01:31:45.639> fetching<01:31:46.360> server<01:31:46.840> side<01:31:46.960> rendering

Auto ref fetching server side rendering

Auto ref fetching server side rendering
support<01:31:48.159> pation<01:31:48.880> out<01:31:49.040> of<01:31:49.199> the<01:31:49.360> box<01:31:50.040> mutations

support pation out of the box mutations

support pation out of the box mutations
meaning<01:31:51.040> changes<01:31:51.440> to<01:31:51.560> the<01:31:51.800> server<01:31:52.159> data

meaning changes to the server data

meaning changes to the server data
infinite<01:31:53.360> scrolling<01:31:54.080> which<01:31:54.239> we're<01:31:54.360> going<01:31:54.440> to

infinite scrolling which we're going to

infinite scrolling which we're going to
use<01:31:55.000> and<01:31:55.239> Implement<01:31:55.800> in<01:31:56.080> this<01:31:56.480> video<01:31:57.480> and

use and Implement in this video and

use and Implement in this video and
there<01:31:57.719> are<01:31:57.920> so<01:31:58.119> many<01:31:58.360> more<01:31:58.639> reasons<01:31:58.960> to<01:31:59.119> use

there are so many more reasons to use

there are so many more reasons to use
react<01:31:59.800> query<01:32:00.199> in<01:32:00.360> your<01:32:00.520> react<01:32:01.280> applications

react query in your react applications

react query in your react applications
and<01:32:02.480> in<01:32:02.719> this<01:32:02.920> video<01:32:03.480> I'll<01:32:03.679> teach<01:32:03.920> you<01:32:04.119> how<01:32:04.239> to

and in this video I'll teach you how to

and in this video I'll teach you how to
use<01:32:04.639> it<01:32:05.040> from<01:32:05.320> scratch<01:32:06.320> so<01:32:06.639> what<01:32:06.760> do<01:32:06.880> we<01:32:06.960> need

use it from scratch so what do we need

use it from scratch so what do we need
to<01:32:07.280> do<01:32:07.719> to<01:32:07.880> get<01:32:08.040> started<01:32:08.480> with<01:32:08.679> react<01:32:09.119> query

to do to get started with react query

to do to get started with react query
and<01:32:09.840> using<01:32:10.159> it<01:32:10.440> alongside<01:32:11.520> aite<01:32:12.520> well<01:32:12.880> we<01:32:13.000> can

and using it alongside aite well we can

and using it alongside aite well we can
go<01:32:13.560> right<01:32:13.840> here<01:32:14.400> to<01:32:14.960> our<01:32:15.440> lib<01:32:16.280> and<01:32:16.400> then<01:32:16.600> next

go right here to our lib and then next

go right here to our lib and then next
to<01:32:17.040> aight<01:32:17.760> we<01:32:17.840> can<01:32:18.080> also<01:32:18.400> add<01:32:18.639> a<01:32:18.800> new<01:32:19.000> folder

to aight we can also add a new folder

to aight we can also add a new folder
called<01:32:20.000> react<01:32:20.920> D<01:32:21.320> query

called react D query

called react D query
within<01:32:23.080> here<01:32:23.639> we<01:32:23.760> can<01:32:23.960> create<01:32:24.360> a<01:32:24.560> new<01:32:24.880> file

within here we can create a new file

within here we can create a new file
called<01:32:26.080> queries<01:32:27.080> and

called queries and

called queries and
mutations.<01:32:29.600> TS<01:32:30.600> within<01:32:31.000> here<01:32:31.320> we're<01:32:31.480> going<01:32:31.600> to

mutations. TS within here we're going to

mutations. TS within here we're going to
import<01:32:32.239> a<01:32:32.440> couple<01:32:32.679> of<01:32:32.840> things<01:32:33.080> we'll<01:32:33.360> use<01:32:33.600> from

import a couple of things we'll use from

import a couple of things we'll use from
react<01:32:34.239> query<01:32:35.239> but<01:32:35.400> of<01:32:35.560> course<01:32:35.920> first<01:32:36.440> we<01:32:36.560> have

react query but of course first we have

react query but of course first we have
to<01:32:36.880> install<01:32:37.239> it<01:32:37.679> so<01:32:37.840> that's<01:32:38.000> going<01:32:38.159> to<01:32:38.320> be<01:32:38.560> at

to install it so that's going to be at

to install it so that's going to be at
10stack<01:32:40.920> SL<01:32:41.360> react<01:32:42.760> dqu<01:32:43.760> so<01:32:43.960> let's<01:32:44.239> copy<01:32:44.679> this

10stack SL react dqu so let's copy this

10stack SL react dqu so let's copy this
open<01:32:45.920> up<01:32:46.080> our<01:32:46.239> terminal<01:32:47.119> and<01:32:47.280> say<01:32:47.560> mpm<01:32:48.080> install

open up our terminal and say mpm install

open up our terminal and say mpm install
at<01:32:49.600> tanack<01:32:50.600> SL<01:32:51.040> react<01:32:51.639> query<01:32:52.480> press<01:32:52.920> enter<01:32:53.920> and

at tanack SL react query press enter and

at tanack SL react query press enter and
soon<01:32:54.400> enough<01:32:54.719> it<01:32:54.840> will<01:32:55.000> be<01:32:55.280> installed<01:32:55.920> it's<01:32:56.080> a

soon enough it will be installed it's a

soon enough it will be installed it's a
pretty<01:32:56.520> lightweight<01:32:57.440> Library<01:32:58.440> once<01:32:58.639> it's

pretty lightweight Library once it's

pretty lightweight Library once it's
installed<01:32:59.440> we're<01:32:59.639> going<01:32:59.760> to<01:32:59.920> import<01:33:00.520> use

installed we're going to import use

installed we're going to import use
Query<01:33:02.159> and<01:33:02.400> queries<01:33:02.840> are<01:33:03.000> for<01:33:03.199> fetching<01:33:03.600> the

Query and queries are for fetching the

Query and queries are for fetching the
data<01:33:04.719> use<01:33:05.199> mutation<01:33:06.040> mutations<01:33:06.480> are<01:33:06.719> for

data use mutation mutations are for

data use mutation mutations are for
modifying<01:33:07.440> the<01:33:07.679> data<01:33:08.600> use<01:33:09.040> Query

modifying the data use Query

modifying the data use Query
client<01:33:11.159> as<01:33:11.280> well<01:33:11.440> as<01:33:11.679> use<01:33:12.119> infinite

client as well as use infinite

client as well as use infinite
query<01:33:14.520> these<01:33:14.639> are<01:33:14.880> all<01:33:15.080> the<01:33:15.199> things<01:33:15.440> we'll<01:33:15.719> use

query these are all the things we'll use

query these are all the things we'll use
from<01:33:16.520> react

from react

from react
query<01:33:19.280> and<01:33:19.440> once<01:33:19.679> again<01:33:19.920> the<01:33:20.080> reason<01:33:20.360> why

query and once again the reason why

query and once again the reason why
we're<01:33:20.679> using<01:33:21.000> it<01:33:21.360> is<01:33:21.679> to<01:33:21.840> simplify<01:33:22.320> data

we're using it is to simplify data

we're using it is to simplify data
fetching<01:33:23.280> and<01:33:23.800> mutation<01:33:24.800> while<01:33:25.280> getting<01:33:25.639> all

fetching and mutation while getting all

fetching and mutation while getting all
the<01:33:26.119> benefits<01:33:26.800> such<01:33:26.960> as<01:33:27.239> caching<01:33:28.040> infinite

the benefits such as caching infinite

the benefits such as caching infinite
scroll<01:33:29.119> and<01:33:29.280> more<01:33:29.840> out<01:33:30.000> of<01:33:30.119> the<01:33:30.400> box<01:33:31.400> now<01:33:31.679> what

scroll and more out of the box now what

scroll and more out of the box now what
you<01:33:31.880> want<01:33:32.000> to<01:33:32.159> do<01:33:32.440> here<01:33:32.920> is<01:33:33.080> you<01:33:33.199> want<01:33:33.320> to

you want to do here is you want to

you want to do here is you want to
export<01:33:34.119> our<01:33:34.440> first<01:33:34.880> mutation<01:33:35.719> so<01:33:35.880> we<01:33:36.000> can<01:33:36.119> say

export our first mutation so we can say

export our first mutation so we can say
export<01:33:37.040> const<01:33:38.040> use<01:33:38.840> create<01:33:39.679> user<01:33:40.480> account

export const use create user account

export const use create user account
mutation<01:33:42.679> it's<01:33:42.800> a<01:33:42.960> long<01:33:43.280> name<01:33:43.760> I<01:33:43.880> know<01:33:44.280> but<01:33:44.400> we

mutation it's a long name I know but we

mutation it's a long name I know but we
try<01:33:44.800> to<01:33:45.000> make<01:33:45.280> them<01:33:45.719> as<01:33:45.960> meaningful<01:33:46.920> as

try to make them as meaningful as

try to make them as meaningful as
possible<01:33:48.400> it's<01:33:48.560> an<01:33:48.719> arrow<01:33:49.119> function<01:33:49.880> that

possible it's an arrow function that

possible it's an arrow function that
returns<01:33:50.880> a<01:33:51.080> call<01:33:51.639> to<01:33:51.920> use

returns a call to use

returns a call to use
mutation<01:33:54.159> that<01:33:54.360> then<01:33:54.600> gets<01:33:54.760> an<01:33:55.040> object<01:33:55.440> in<01:33:56.280> and

mutation that then gets an object in and

mutation that then gets an object in and
then<01:33:56.560> we<01:33:56.639> want<01:33:56.760> to<01:33:57.000> pass<01:33:57.320> the<01:33:57.440> mutation

then we want to pass the mutation

then we want to pass the mutation
function<01:33:58.639> so<01:33:58.920> what<01:33:59.040> are<01:33:59.199> we<01:33:59.520> actually<01:34:00.119> doing

function so what are we actually doing

function so what are we actually doing
and<01:34:01.280> in<01:34:01.480> this<01:34:01.719> case<01:34:02.199> it's<01:34:02.400> going<01:34:02.520> to<01:34:02.679> be<01:34:02.880> an

and in this case it's going to be an

and in this case it's going to be an
arrow<01:34:03.480> function<01:34:04.280> that's<01:34:04.480> going<01:34:04.600> to<01:34:04.960> return<01:34:05.280> a

arrow function that's going to return a

arrow function that's going to return a
call<01:34:06.040> to<01:34:06.239> our<01:34:06.560> create<01:34:07.320> user<01:34:08.000> account<01:34:08.840> function

call to our create user account function

call to our create user account function
that<01:34:10.000> we<01:34:10.119> have<01:34:10.320> created<01:34:10.719> not<01:34:11.000> that<01:34:11.239> long<01:34:11.440> ago

that we have created not that long ago

that we have created not that long ago
within

within

within
upright<01:34:14.400> SL

upright SL

upright SL
API<01:34:16.719> and<01:34:16.960> it's<01:34:17.119> going<01:34:17.280> to<01:34:17.440> get<01:34:17.600> the<01:34:17.760> user<01:34:18.480> right

API and it's going to get the user right

API and it's going to get the user right
here<01:34:19.080> as<01:34:19.239> its<01:34:19.480> first<01:34:19.840> and<01:34:20.040> only<01:34:20.520> parameter<01:34:21.560> and

here as its first and only parameter and

here as its first and only parameter and
that<01:34:21.840> user<01:34:22.119> is<01:34:22.280> coming<01:34:22.679> right<01:34:22.880> here<01:34:23.199> through

that user is coming right here through

that user is coming right here through
the<01:34:23.560> function<01:34:24.239> which<01:34:24.360> is<01:34:24.480> going<01:34:24.639> to<01:34:24.760> be<01:34:24.920> of<01:34:25.040> a

the function which is going to be of a

the function which is going to be of a
type<01:34:25.960> I<01:34:26.760> new<01:34:27.360> user<01:34:28.000> which<01:34:28.159> we<01:34:28.239> can<01:34:28.440> import<01:34:28.760> from

type I new user which we can import from

type I new user which we can import from
types<01:34:29.840> so<01:34:30.080> essentially<01:34:30.600> what<01:34:30.760> we've<01:34:31.000> done<01:34:31.600> is

types so essentially what we've done is

types so essentially what we've done is
we've<01:34:32.400> initialized<01:34:33.360> a<01:34:33.560> new<01:34:33.800> mutation

we've initialized a new mutation

we've initialized a new mutation
function<01:34:35.119> so<01:34:35.360> that<01:34:35.600> now<01:34:36.520> react<01:34:36.960> query<01:34:37.719> also

function so that now react query also

function so that now react query also
knows<01:34:38.360> what<01:34:38.520> we<01:34:38.600> are<01:34:39.000> doing<01:34:40.000> now<01:34:40.520> we<01:34:40.600> can<01:34:40.840> use

knows what we are doing now we can use

knows what we are doing now we can use
this<01:34:41.480> use<01:34:41.840> create<01:34:42.119> user<01:34:42.440> account<01:34:42.760> mutation

this use create user account mutation

this use create user account mutation
within<01:34:44.040> our<01:34:44.280> signup<01:34:44.800> form<01:34:45.800> and<01:34:45.920> you<01:34:46.040> might

within our signup form and you might

within our signup form and you might
have<01:34:46.280> seen<01:34:46.560> this<01:34:46.800> right<01:34:47.000> here<01:34:47.239> I<01:34:47.320> was<01:34:47.520> testing

have seen this right here I was testing

have seen this right here I was testing
that<01:34:48.199> but<01:34:48.360> let's<01:34:48.560> create<01:34:48.760> it<01:34:48.920> from<01:34:49.440> scratch

that but let's create it from scratch

that but let's create it from scratch
right<01:34:50.639> here<01:34:50.920> at<01:34:51.040> the<01:34:51.239> top<01:34:51.719> we<01:34:51.800> can<01:34:51.920> do<01:34:52.080> it<01:34:52.239> even

right here at the top we can do it even

right here at the top we can do it even
above<01:34:53.360> the<01:34:53.520> form<01:34:54.360> we<01:34:54.480> can<01:34:54.639> say<01:34:55.159> const<01:34:56.159> get

above the form we can say const get

above the form we can say const get
something<01:34:56.960> an<01:34:57.199> object<01:34:57.560> out<01:34:57.679> of<01:34:57.880> it<01:34:58.400> and<01:34:58.639> call<01:34:59.040> a

something an object out of it and call a

something an object out of it and call a
use<01:35:00.040> create<01:35:01.040> user<01:35:01.840> account<01:35:02.719> mutation<01:35:03.719> just

use create user account mutation just

use create user account mutation just
like<01:35:04.280> so<01:35:05.080> as<01:35:05.199> a<01:35:05.800> hook<01:35:06.800> we<01:35:06.920> can<01:35:07.080> immediately

like so as a hook we can immediately

like so as a hook we can immediately
import<01:35:07.920> it<01:35:08.119> from

import it from

import it from
addlib<01:35:10.239> SL<01:35:10.760> react<01:35:11.199> query<01:35:12.000> forqueries<01:35:13.000> and

addlib SL react query forqueries and

addlib SL react query forqueries and
mutations<01:35:14.320> there<01:35:14.440> we

mutations there we

mutations there we
go<01:35:16.639> and<01:35:16.880> now<01:35:17.520> what<01:35:17.679> do<01:35:17.800> we<01:35:18.000> get<01:35:18.239> back<01:35:18.880> well<01:35:19.080> we

go and now what do we get back well we

go and now what do we get back well we
get<01:35:19.520> back<01:35:20.159> mutate<01:35:21.159> a

get back mutate a

get back mutate a
sync<01:35:23.960> as<01:35:24.080> well<01:35:24.280> as<01:35:24.520> is<01:35:25.040> loading<01:35:26.040> the<01:35:26.199> mutate

sync as well as is loading the mutate

sync as well as is loading the mutate
async<01:35:27.760> if<01:35:27.880> I<01:35:28.000> can<01:35:28.159> spell<01:35:28.400> it<01:35:28.600> properly<01:35:29.600> is<01:35:29.800> the

async if I can spell it properly is the

async if I can spell it properly is the
actual<01:35:30.400> function<01:35:30.920> that<01:35:31.040> we're<01:35:31.199> calling<01:35:31.679> right

actual function that we're calling right

actual function that we're calling right
here<01:35:32.560> in<01:35:32.800> this<01:35:33.000> case<01:35:33.560> it<01:35:33.679> is<01:35:33.840> the<01:35:34.040> create<01:35:34.560> user

here in this case it is the create user

here in this case it is the create user
account<01:35:35.800> function<01:35:36.600> that<01:35:36.719> we<01:35:36.880> have<01:35:37.040> created

account function that we have created

account function that we have created
not<01:35:37.960> that<01:35:38.159> long<01:35:38.400> ago<01:35:39.159> that<01:35:39.480> creates<01:35:39.880> the<01:35:40.000> user

not that long ago that creates the user

not that long ago that creates the user
in<01:35:40.360> the<01:35:40.719> authentication<01:35:41.719> and<01:35:41.960> also<01:35:42.320> saves<01:35:42.800> the

in the authentication and also saves the

in the authentication and also saves the
user<01:35:43.400> in<01:35:43.520> the<01:35:44.119> database<01:35:45.119> so<01:35:45.960> now<01:35:46.400> we're

user in the database so now we're

user in the database so now we're
calling<01:35:47.040> that<01:35:47.239> as<01:35:47.360> a<01:35:47.560> hook<01:35:48.480> and<01:35:48.679> it's<01:35:48.880> giving

calling that as a hook and it's giving

calling that as a hook and it's giving
us<01:35:49.440> this<01:35:49.600> mutate<01:35:50.040> async<01:35:50.560> function<01:35:51.440> but<01:35:51.560> we<01:35:51.679> can

us this mutate async function but we can

us this mutate async function but we can
rename<01:35:52.320> it<01:35:52.560> so<01:35:52.760> we<01:35:52.920> know<01:35:53.199> what<01:35:53.320> it<01:35:53.560> means<01:35:54.560> this

rename it so we know what it means this

rename it so we know what it means this
is<01:35:55.040> going<01:35:55.239> to<01:35:55.480> create<01:35:56.119> a<01:35:56.360> new<01:35:57.000> user<01:35:57.679> account<01:35:58.119> so

is going to create a new user account so

is going to create a new user account so
we<01:35:58.360> can<01:35:58.480> say<01:35:58.760> create<01:35:59.520> user<01:36:00.320> account<01:36:01.320> so<01:36:01.600> this

we can say create user account so this

we can say create user account so this
syntax<01:36:02.199> simply<01:36:02.600> renames<01:36:03.320> this<01:36:03.520> mutate

syntax simply renames this mutate

syntax simply renames this mutate
function<01:36:04.560> into<01:36:04.840> create<01:36:05.159> user<01:36:05.600> account<01:36:06.600> and<01:36:06.800> we

function into create user account and we

function into create user account and we
can<01:36:07.080> also<01:36:07.440> rename<01:36:07.960> is<01:36:08.199> loading<01:36:09.000> to<01:36:09.840> is

can also rename is loading to is

can also rename is loading to is
creating<01:36:11.119> user<01:36:11.679> so<01:36:11.840> it<01:36:12.000> makes<01:36:12.239> more<01:36:12.800> sense<01:36:13.800> and

creating user so it makes more sense and

creating user so it makes more sense and
we<01:36:14.119> no<01:36:14.320> longer<01:36:14.639> need<01:36:14.920> this<01:36:15.080> fake<01:36:15.719> is<01:36:15.880> loading

we no longer need this fake is loading

we no longer need this fake is loading
right<01:36:16.600> here<01:36:16.960> so<01:36:17.119> we<01:36:17.239> can<01:36:17.400> remove<01:36:17.719> it<01:36:18.199> and<01:36:18.320> we

right here so we can remove it and we

right here so we can remove it and we
can<01:36:18.600> immediately<01:36:19.159> use<01:36:19.679> is<01:36:20.080> creating<01:36:20.560> user

can immediately use is creating user

can immediately use is creating user
right<01:36:21.600> here<01:36:21.800> at<01:36:21.960> the<01:36:22.280> bottom<01:36:23.280> there<01:36:23.440> we<01:36:23.639> go

right here at the bottom there we go

right here at the bottom there we go
that's<01:36:24.600> our<01:36:24.800> new<01:36:25.080> is<01:36:25.280> loading<01:36:26.280> so<01:36:26.560> react<01:36:26.960> query

that's our new is loading so react query

that's our new is loading so react query
provides<01:36:27.960> this<01:36:28.119> out<01:36:28.280> of<01:36:28.400> the<01:36:28.560> box<01:36:28.880> as<01:36:29.239> well<01:36:30.239> now

provides this out of the box as well now

provides this out of the box as well now
right<01:36:30.840> now<01:36:31.199> it<01:36:31.320> says<01:36:31.639> is<01:36:31.880> loading<01:36:32.320> is<01:36:32.480> not

right now it says is loading is not

right now it says is loading is not
defined<01:36:33.159> or<01:36:33.400> does<01:36:33.560> not<01:36:33.840> exist<01:36:34.360> but<01:36:34.520> don't

defined or does not exist but don't

defined or does not exist but don't
worry<01:36:34.920> we're<01:36:35.080> going<01:36:35.159> to<01:36:35.320> fix<01:36:35.600> this<01:36:35.800> soon<01:36:36.440> for

worry we're going to fix this soon for

worry we're going to fix this soon for
now<01:36:36.920> it's<01:36:37.119> important<01:36:37.639> that<01:36:37.800> we<01:36:37.960> have<01:36:38.159> this

now it's important that we have this

now it's important that we have this
create<01:36:38.719> user<01:36:39.080> account<01:36:39.560> which<01:36:39.679> we<01:36:39.800> can<01:36:40.000> call

create user account which we can call

create user account which we can call
and<01:36:40.760> we<01:36:40.880> no<01:36:41.040> longer<01:36:41.320> need<01:36:41.440> to<01:36:41.560> use<01:36:41.719> it<01:36:41.960> directly

and we no longer need to use it directly

and we no longer need to use it directly
from<01:36:42.840> aight<01:36:43.560> because<01:36:43.880> this<01:36:44.040> mutation<01:36:44.880> is

from aight because this mutation is

from aight because this mutation is
actually<01:36:45.600> calling<01:36:46.360> create<01:36:46.880> user<01:36:47.320> account

actually calling create user account

actually calling create user account
from<01:36:47.920> aight<01:36:48.679> for<01:36:48.960> us<01:36:49.480> it's<01:36:49.679> kind<01:36:49.800> of<01:36:49.920> a<01:36:50.119> level

from aight for us it's kind of a level

from aight for us it's kind of a level
in<01:36:50.719> between<01:36:51.480> the<01:36:51.639> app<01:36:51.960> right<01:36:52.159> in<01:36:52.280> our<01:36:52.440> front

in between the app right in our front

in between the app right in our front
end<01:36:53.159> to<01:36:53.400> ensure<01:36:54.000> that<01:36:54.239> we<01:36:54.440> have<01:36:54.719> easier<01:36:55.199> time

end to ensure that we have easier time

end to ensure that we have easier time
fetching<01:36:55.920> data<01:36:56.400> on<01:36:56.639> react<01:36:57.480> and<01:36:57.800> querying<01:36:58.320> and

fetching data on react and querying and

fetching data on react and querying and
mutating<01:36:58.960> the<01:36:59.119> data<01:36:59.920> as<01:37:00.119> well<01:37:00.280> as<01:37:00.520> caching<01:37:00.920> it

mutating the data as well as caching it

mutating the data as well as caching it
so<01:37:01.840> now<01:37:02.320> we<01:37:02.520> have<01:37:02.920> this<01:37:03.360> and<01:37:03.480> we're<01:37:03.679> calling

so now we have this and we're calling

so now we have this and we're calling
the<01:37:04.199> create<01:37:04.520> user<01:37:04.880> account<01:37:05.280> as<01:37:05.400> we<01:37:05.560> were

the create user account as we were

the create user account as we were
before<01:37:06.560> but<01:37:06.760> now<01:37:07.159> this<01:37:07.320> is<01:37:07.440> a<01:37:07.600> mutation<01:37:08.280> from

before but now this is a mutation from

before but now this is a mutation from
react<01:37:09.040> query<01:37:09.719> now<01:37:10.040> we<01:37:10.119> can<01:37:10.360> also<01:37:10.760> do<01:37:11.119> a<01:37:11.360> session

react query now we can also do a session

react query now we can also do a session
which<01:37:12.159> is<01:37:12.280> the<01:37:12.520> sign<01:37:12.800> in<01:37:13.199> account<01:37:14.040> which<01:37:14.159> is

which is the sign in account which is

which is the sign in account which is
going<01:37:14.480> to<01:37:14.639> be<01:37:15.119> yet<01:37:15.440> another<01:37:15.800> mutation<01:37:16.800> so

going to be yet another mutation so

going to be yet another mutation so
let's<01:37:17.239> go<01:37:17.440> to<01:37:17.760> our<01:37:18.320> mutations<01:37:19.320> right<01:37:19.560> here<01:37:20.199> and

let's go to our mutations right here and

let's go to our mutations right here and
we<01:37:20.400> can<01:37:20.560> create<01:37:20.840> another<01:37:21.360> one<01:37:21.679> just<01:37:21.840> by

we can create another one just by

we can create another one just by
duplicating<01:37:22.639> this<01:37:22.760> one<01:37:23.080> below<01:37:24.080> we<01:37:24.199> can<01:37:24.440> call

duplicating this one below we can call

duplicating this one below we can call
it<01:37:25.360> use<01:37:26.000> sign<01:37:26.360> in<01:37:26.800> account<01:37:27.239> mutation<01:37:28.080> so<01:37:28.760> use

it use sign in account mutation so use

it use sign in account mutation so use
sign<01:37:30.800> in<01:37:31.920> account<01:37:32.920> and<01:37:33.159> now<01:37:33.320> that<01:37:33.440> I<01:37:33.600> think

sign in account and now that I think

sign in account and now that I think
about<01:37:34.000> it<01:37:34.280> we<01:37:34.400> don't<01:37:34.639> have<01:37:34.760> to<01:37:34.960> add<01:37:35.199> mutation

about it we don't have to add mutation

about it we don't have to add mutation
at<01:37:35.800> the<01:37:35.880> end<01:37:36.040> of<01:37:36.199> every<01:37:36.440> single<01:37:36.719> one<01:37:37.119> so<01:37:37.320> we<01:37:37.400> can

at the end of every single one so we can

at the end of every single one so we can
simply<01:37:37.920> fix<01:37:38.239> this<01:37:38.480> right<01:37:38.840> here<01:37:39.840> and<01:37:40.040> modify<01:37:40.480> it

simply fix this right here and modify it

simply fix this right here and modify it
right<01:37:40.920> here<01:37:41.280> at<01:37:41.400> the<01:37:41.840> top<01:37:42.840> as<01:37:43.000> well<01:37:43.199> as<01:37:43.480> in<01:37:43.599> the

right here at the top as well as in the

right here at the top as well as in the
import<01:37:45.119> so<01:37:45.400> now<01:37:45.880> if<01:37:45.960> we<01:37:46.119> go<01:37:46.400> back<01:37:46.679> we<01:37:46.800> have<01:37:46.960> the

import so now if we go back we have the

import so now if we go back we have the
use<01:37:47.639> signin<01:37:48.199> account<01:37:48.960> and<01:37:49.239> here<01:37:49.560> what<01:37:49.679> we<01:37:49.800> want

use signin account and here what we want

use signin account and here what we want
to<01:37:50.040> do<01:37:50.639> is<01:37:50.880> have<01:37:51.239> a<01:37:51.400> mutation<01:37:51.960> function<01:37:52.560> that's

to do is have a mutation function that's

to do is have a mutation function that's
going<01:37:52.920> to<01:37:53.040> get<01:37:53.199> the<01:37:53.360> user<01:37:54.119> but<01:37:54.280> in<01:37:54.480> this<01:37:54.679> case

going to get the user but in this case

going to get the user but in this case
the<01:37:55.360> user<01:37:55.760> is<01:37:55.920> going<01:37:56.080> to<01:37:56.239> be<01:37:56.440> just<01:37:56.639> the<01:37:56.960> email

the user is going to be just the email

the user is going to be just the email
of<01:37:58.119> a<01:37:58.320> type<01:37:58.719> string<01:37:59.719> as<01:37:59.920> well<01:38:00.239> as<01:38:00.400> a<01:38:00.719> password

of a type string as well as a password

of a type string as well as a password
of<01:38:01.639> a<01:38:01.840> type

of a type

of a type
string<01:38:04.000> we<01:38:04.080> can<01:38:04.280> put<01:38:04.440> this<01:38:04.520> in<01:38:04.639> a<01:38:04.800> new<01:38:05.000> line<01:38:05.320> so

string we can put this in a new line so

string we can put this in a new line so
it<01:38:05.599> makes<01:38:05.800> a<01:38:05.920> bit<01:38:06.119> more<01:38:06.560> sense<01:38:07.560> and<01:38:07.760> now<01:38:08.119> of

it makes a bit more sense and now of

it makes a bit more sense and now of
course<01:38:08.480> we're<01:38:08.639> not<01:38:08.840> going<01:38:08.920> to<01:38:09.080> call<01:38:09.360> the<01:38:09.520> same

course we're not going to call the same

course we're not going to call the same
function<01:38:10.199> once<01:38:10.800> again<01:38:11.800> which<01:38:11.920> is<01:38:12.040> the<01:38:12.199> create

function once again which is the create

function once again which is the create
user<01:38:12.840> account<01:38:13.719> in<01:38:13.960> this<01:38:14.199> case<01:38:14.480> we're<01:38:14.639> going<01:38:14.719> to

user account in this case we're going to

user account in this case we're going to
call<01:38:15.599> a<01:38:15.920> sign<01:38:16.440> in<01:38:17.000> account<01:38:18.000> and<01:38:18.159> we<01:38:18.280> want<01:38:18.400> to

call a sign in account and we want to

call a sign in account and we want to
pass<01:38:19.000> the<01:38:19.280> user<01:38:20.280> and<01:38:20.639> this<01:38:20.880> sign<01:38:21.400> in<01:38:21.639> account

pass the user and this sign in account

pass the user and this sign in account
will<01:38:22.400> create<01:38:22.880> in<01:38:23.159> aide<01:38:23.920> so<01:38:24.119> let's<01:38:24.320> go<01:38:24.480> to<01:38:24.719> aite

will create in aide so let's go to aite

will create in aide so let's go to aite
API<01:38:26.920> we<01:38:27.119> now<01:38:27.400> have<01:38:28.199> create<01:38:28.520> user<01:38:28.880> account<01:38:29.760> save

API we now have create user account save

API we now have create user account save
user<01:38:30.320> to

user to

user to
DB<01:38:32.080> but<01:38:32.440> right<01:38:32.679> below<01:38:33.000> it<01:38:33.199> we're<01:38:33.400> going<01:38:33.560> to

DB but right below it we're going to

DB but right below it we're going to
export<01:38:35.040> async<01:38:36.239> function<01:38:37.239> sign<01:38:37.840> in<01:38:38.520> account

export async function sign in account

export async function sign in account
that's<01:38:39.719> going<01:38:39.920> to<01:38:40.040> get<01:38:40.199> the<01:38:40.360> user<01:38:41.360> which<01:38:41.480> is

that's going to get the user which is

that's going to get the user which is
going<01:38:41.800> to<01:38:42.119> have<01:38:42.520> a<01:38:42.840> email<01:38:43.400> of<01:38:43.560> a<01:38:43.760> type<01:38:44.040> string

going to have a email of a type string

going to have a email of a type string
as<01:38:45.159> well<01:38:45.440> as<01:38:45.760> a<01:38:46.040> password<01:38:46.760> of<01:38:46.920> a<01:38:47.119> type<01:38:47.360> string

as well as a password of a type string

as well as a password of a type string
as<01:38:47.840> well<01:38:48.480> and<01:38:48.639> then<01:38:49.000> it's<01:38:49.159> going<01:38:49.320> to<01:38:49.520> have<01:38:49.679> a

as well and then it's going to have a

as well and then it's going to have a
try<01:38:50.239> and<01:38:50.520> catch<01:38:50.800> block

try and catch block

try and catch block
here<01:38:52.159> we<01:38:52.280> can<01:38:52.440> simply<01:38:52.760> kolck<01:38:53.520> the<01:38:53.639> error<01:38:54.560> and

here we can simply kolck the error and

here we can simply kolck the error and
in<01:38:54.880> the<01:38:55.040> try<01:38:55.639> we<01:38:55.719> can<01:38:55.920> create<01:38:56.280> a<01:38:56.520> new<01:38:56.960> email

in the try we can create a new email

in the try we can create a new email
session<01:38:58.239> by<01:38:58.400> saying<01:38:58.760> cons<01:38:59.239> session<01:39:00.159> is<01:39:00.440> equal

session by saying cons session is equal

session by saying cons session is equal
to<01:39:01.840> await<01:39:03.119> account.<01:39:04.119> create<01:39:04.639> session<01:39:05.520> and

to await account. create session and

to await account. create session and
again<01:39:06.040> this<01:39:06.159> is<01:39:06.320> another<01:39:06.599> utility<01:39:07.480> provided

again this is another utility provided

again this is another utility provided
to<01:39:08.159> us<01:39:08.679> by<01:39:08.960> aight<01:39:09.800> it's<01:39:10.119> create<01:39:10.679> email<01:39:11.159> session

to us by aight it's create email session

to us by aight it's create email session
to<01:39:12.239> which<01:39:12.679> we<01:39:12.840> have<01:39:12.960> to<01:39:13.199> pass<01:39:13.520> user.<01:39:14.440> email<01:39:15.440> as

to which we have to pass user. email as

to which we have to pass user. email as
well<01:39:16.080> as<01:39:16.320> the<01:39:16.520> password<01:39:17.159> by<01:39:17.280> saying<01:39:17.599> user.

well as the password by saying user.

well as the password by saying user.
password<01:39:19.199> and<01:39:19.400> then<01:39:19.679> we<01:39:19.800> can<01:39:20.159> return<01:39:20.679> this

password and then we can return this

password and then we can return this
session<01:39:21.800> so<01:39:22.040> once<01:39:22.320> again<01:39:23.000> we<01:39:23.159> have<01:39:23.360> created<01:39:23.840> an

session so once again we have created an

session so once again we have created an
App<01:39:24.920> function<01:39:25.920> that's<01:39:26.159> then<01:39:26.320> getting

App function that's then getting

App function that's then getting
utilized<01:39:27.480> by<01:39:27.800> react<01:39:28.239> query<01:39:28.920> and<01:39:29.119> we<01:39:29.199> can

utilized by react query and we can

utilized by react query and we can
import<01:39:29.760> it<01:39:30.040> right<01:39:30.239> here<01:39:30.639> from<01:39:30.960> aight<01:39:31.520> API<01:39:32.400> so

import it right here from aight API so

import it right here from aight API so
now<01:39:32.920> this<01:39:33.040> one<01:39:33.199> is<01:39:33.320> for<01:39:33.480> creating<01:39:33.840> the<01:39:33.960> user

now this one is for creating the user

now this one is for creating the user
and<01:39:34.920> this<01:39:35.040> one<01:39:35.360> is<01:39:35.480> for<01:39:35.719> signing<01:39:36.159> into<01:39:36.440> the

and this one is for signing into the

and this one is for signing into the
account<01:39:37.280> and<01:39:37.440> now<01:39:37.599> we<01:39:37.719> can<01:39:37.840> repeat<01:39:38.280> this<01:39:38.599> with

account and now we can repeat this with

account and now we can repeat this with
the<01:39:38.960> other<01:39:39.239> hook<01:39:39.719> that<01:39:39.840> we<01:39:40.000> have<01:39:40.280> right<01:39:40.480> here

the other hook that we have right here

the other hook that we have right here
in<01:39:40.800> our<01:39:41.000> signup<01:39:41.400> form<01:39:42.320> we<01:39:42.440> can<01:39:42.560> say<01:39:43.040> const<01:39:44.040> we

in our signup form we can say const we

in our signup form we can say const we
get<01:39:44.400> a<01:39:44.800> mutate

get a mutate

get a mutate
async<01:39:47.520> which<01:39:47.639> is<01:39:47.760> going<01:39:47.920> to<01:39:48.080> be<01:39:48.239> equal<01:39:48.520> to<01:39:48.639> a

async which is going to be equal to a

async which is going to be equal to a
function<01:39:49.119> of<01:39:49.360> sign<01:39:49.679> in<01:39:50.119> account<01:39:51.400> and<01:39:51.560> we<01:39:51.679> get

function of sign in account and we get

function of sign in account and we get
is<01:39:52.119> loading<01:39:52.760> which<01:39:52.880> is<01:39:53.080> equal<01:39:53.360> to<01:39:53.639> is<01:39:54.080> signing

is loading which is equal to is signing

is loading which is equal to is signing
in<01:39:56.199> and<01:39:56.400> once<01:39:56.599> we<01:39:56.760> get<01:39:56.960> that<01:39:57.280> we<01:39:57.360> can<01:39:57.520> say

in and once we get that we can say

in and once we get that we can say
that's<01:39:58.080> equal<01:39:58.360> to<01:39:59.119> use<01:39:59.639> sign<01:40:00.000> in<01:40:00.400> account

that's equal to use sign in account

that's equal to use sign in account
which<01:40:01.400> we<01:40:01.520> have<01:40:01.639> to<01:40:01.840> import<01:40:02.520> from<01:40:03.040> react<01:40:03.599> query

which we have to import from react query

which we have to import from react query
queries<01:40:04.719> and<01:40:05.000> mutations<01:40:05.960> and<01:40:06.119> now<01:40:06.320> we<01:40:06.400> can<01:40:06.560> use

queries and mutations and now we can use

queries and mutations and now we can use
this<01:40:07.080> function<01:40:07.760> right<01:40:08.000> here<01:40:09.000> await<01:40:09.760> sign<01:40:10.080> in

this function right here await sign in

this function right here await sign in
account<01:40:11.119> to<01:40:11.440> which<01:40:11.920> we<01:40:12.080> have<01:40:12.199> to<01:40:12.440> pass<01:40:12.679> the

account to which we have to pass the

account to which we have to pass the
email<01:40:13.560> which<01:40:13.679> is<01:40:13.800> going<01:40:14.000> to<01:40:14.159> be<01:40:14.719> values.<01:40:15.719> mail

email which is going to be values. mail

email which is going to be values. mail
right<01:40:16.599> here<01:40:17.360> and<01:40:17.520> then<01:40:17.800> password<01:40:18.520> which<01:40:18.639> is

right here and then password which is

right here and then password which is
going<01:40:18.960> to<01:40:19.119> be<01:40:19.960> values.<01:40:21.040> password<01:40:21.760> and<01:40:21.920> all<01:40:22.080> of

going to be values. password and all of

going to be values. password and all of
this<01:40:22.400> is<01:40:22.560> coming<01:40:22.960> from<01:40:23.239> our<01:40:23.639> form<01:40:24.639> once<01:40:24.840> we

this is coming from our form once we

this is coming from our form once we
have<01:40:25.280> that<01:40:25.599> we<01:40:25.679> can<01:40:25.840> check<01:40:26.080> if<01:40:26.239> session<01:40:26.639> exists

have that we can check if session exists

have that we can check if session exists
by<01:40:27.320> saying<01:40:27.719> if<01:40:28.040> no<01:40:28.440> session<01:40:29.440> we<01:40:29.560> want<01:40:29.679> to

by saying if no session we want to

by saying if no session we want to
return<01:40:30.280> a<01:40:30.480> new<01:40:30.760> toast<01:40:31.480> saying<01:40:32.040> sign<01:40:32.360> in<01:40:32.639> failed

return a new toast saying sign in failed

return a new toast saying sign in failed
please<01:40:33.719> try<01:40:34.119> again<01:40:35.000> and<01:40:35.239> bear<01:40:35.560> with<01:40:35.719> me<01:40:36.199> I<01:40:36.280> know

please try again and bear with me I know

please try again and bear with me I know
this<01:40:36.599> is<01:40:36.719> taking<01:40:37.080> some<01:40:37.320> time<01:40:37.679> but

this is taking some time but

this is taking some time but
authentication<01:40:38.719> and<01:40:38.920> creating<01:40:39.239> user

authentication and creating user

authentication and creating user
accounts<01:40:40.199> is<01:40:40.360> one<01:40:40.520> of<01:40:40.639> the<01:40:40.760> most<01:40:41.040> complicated

accounts is one of the most complicated

accounts is one of the most complicated
parts<01:40:41.880> of<01:40:42.119> every<01:40:42.360> single<01:40:42.800> application<01:40:43.800> now

parts of every single application now

parts of every single application now
after<01:40:44.440> we<01:40:44.599> have<01:40:44.800> the<01:40:45.040> session<01:40:45.760> we<01:40:45.920> have<01:40:46.040> to

after we have the session we have to

after we have the session we have to
store<01:40:46.639> that<01:40:46.880> session<01:40:47.520> in<01:40:47.760> our<01:40:48.080> react<01:40:48.639> context

store that session in our react context

store that session in our react context
at<01:40:49.520> all<01:40:49.880> times<01:40:50.400> we<01:40:50.520> need<01:40:50.679> to<01:40:50.960> know<01:40:51.320> that<01:40:51.480> we

at all times we need to know that we

at all times we need to know that we
have<01:40:51.960> a<01:40:52.199> logged<01:40:52.560> in<01:40:52.920> user<01:40:53.880> so<01:40:54.159> for<01:40:54.440> that<01:40:54.639> reason

have a logged in user so for that reason

have a logged in user so for that reason
we<01:40:55.239> can<01:40:55.440> create<01:40:55.800> a<01:40:56.000> new<01:40:56.239> folder<01:40:57.199> right<01:40:57.400> here

we can create a new folder right here

we can create a new folder right here
within<01:40:57.840> the<01:40:58.000> source<01:40:58.679> which<01:40:58.880> is<01:40:59.000> going<01:40:59.159> to<01:40:59.280> be

within the source which is going to be

within the source which is going to be
called

called

called
context<01:41:01.639> within<01:41:01.920> the<01:41:02.119> context<01:41:02.719> we<01:41:02.800> can<01:41:03.000> create

context within the context we can create

context within the context we can create
a<01:41:03.480> new<01:41:03.840> file<01:41:04.840> called<01:41:05.320> oth<01:41:06.320> context.

a new file called oth context.

a new file called oth context.
TSX<01:41:09.040> there<01:41:09.360> we<01:41:09.480> can<01:41:09.639> run

TSX there we can run

TSX there we can run
RFC<01:41:11.840> and<01:41:12.000> we'll<01:41:12.199> need<01:41:12.320> to<01:41:12.520> import<01:41:13.000> some

RFC and we'll need to import some

RFC and we'll need to import some
utilities<01:41:13.920> for<01:41:14.159> creating<01:41:14.560> context<01:41:15.119> from

utilities for creating context from

utilities for creating context from
react<01:41:16.280> such<01:41:16.480> as<01:41:16.760> create<01:41:17.679> context<01:41:18.679> use<01:41:19.560> context

react such as create context use context

react such as create context use context
use<01:41:20.920> use<01:41:21.280> effect<01:41:22.280> as<01:41:22.440> well<01:41:22.679> as<01:41:23.080> use<01:41:24.040> State<01:41:25.040> now

use use effect as well as use State now

use use effect as well as use State now
we<01:41:25.360> need<01:41:25.480> to<01:41:25.679> Define<01:41:26.080> how<01:41:26.239> an<01:41:26.400> empty<01:41:26.760> user<01:41:27.080> is

we need to Define how an empty user is

we need to Define how an empty user is
going<01:41:27.360> to<01:41:27.560> look<01:41:27.800> like<01:41:28.280> so<01:41:28.400> we<01:41:28.520> can<01:41:28.639> say<01:41:28.960> export

going to look like so we can say export

going to look like so we can say export
const<01:41:30.560> initial<01:41:31.159> uncore<01:41:31.800> user<01:41:32.400> is<01:41:32.560> equal<01:41:32.800> to<01:41:32.960> an

const initial uncore user is equal to an

const initial uncore user is equal to an
object<01:41:34.119> where<01:41:34.440> the<01:41:34.679> ID<01:41:35.360> is<01:41:35.480> equal<01:41:35.760> to<01:41:35.840> an<01:41:35.960> empty

object where the ID is equal to an empty

object where the ID is equal to an empty
string<01:41:37.760> name<01:41:38.239> is<01:41:38.400> equal<01:41:38.639> to<01:41:38.760> an<01:41:38.880> empty<01:41:39.520> string

string name is equal to an empty string

string name is equal to an empty string
username<01:41:41.320> is<01:41:41.480> equal<01:41:41.800> to<01:41:42.119> an<01:41:42.320> empty<01:41:42.960> string

username is equal to an empty string

username is equal to an empty string
email<01:41:44.560> is<01:41:44.760> again<01:41:45.159> an<01:41:45.320> empty<01:41:45.639> string<01:41:46.159> as<01:41:46.719> well

email is again an empty string as well

email is again an empty string as well
image<01:41:48.159> URL<01:41:48.960> is<01:41:49.080> an<01:41:49.239> empty<01:41:49.599> string<01:41:50.599> and<01:41:50.840> and<01:41:51.080> a

image URL is an empty string and and a

image URL is an empty string and and a
bio<01:41:52.040> is<01:41:52.239> also<01:41:52.599> an<01:41:52.760> empty<01:41:53.080> string<01:41:53.920> so

bio is also an empty string so

bio is also an empty string so
everything<01:41:54.719> is

everything is

everything is
empty<01:41:56.920> after<01:41:57.239> that<01:41:57.480> we<01:41:57.599> have<01:41:57.719> to<01:41:57.880> declare<01:41:58.440> the

empty after that we have to declare the

empty after that we have to declare the
initial<01:41:59.400> of<01:42:00.080> state<01:42:00.760> so<01:42:00.920> we<01:42:01.000> can<01:42:01.159> say<01:42:01.440> initial

initial of state so we can say initial

initial of state so we can say initial
undor<01:42:02.679> state<01:42:03.480> is<01:42:03.719> equal<01:42:04.040> to<01:42:04.840> an<01:42:05.159> object<01:42:06.080> where

undor state is equal to an object where

undor state is equal to an object where
the<01:42:06.440> user<01:42:07.080> is<01:42:07.320> equal<01:42:07.639> to<01:42:07.840> the<01:42:08.000> initial<01:42:08.840> user<01:42:09.840> is

the user is equal to the initial user is

the user is equal to the initial user is
loading<01:42:10.880> is<01:42:11.119> set<01:42:11.480> to<01:42:11.719> false<01:42:12.599> is<01:42:13.280> authenticated

loading is set to false is authenticated

loading is set to false is authenticated
is<01:42:14.480> by<01:42:14.800> default<01:42:15.119> set<01:42:15.320> to<01:42:15.599> false<01:42:16.599> and<01:42:16.719> then

is by default set to false and then

is by default set to false and then
we're<01:42:16.960> going<01:42:17.040> to<01:42:17.199> also<01:42:17.520> have<01:42:17.719> the<01:42:17.880> function<01:42:18.239> to

we're going to also have the function to

we're going to also have the function to
set<01:42:18.840> the<01:42:18.960> authenticated<01:42:19.639> user<01:42:20.520> so<01:42:20.920> set<01:42:21.159> user

set the authenticated user so set user

set the authenticated user so set user
is<01:42:22.080> equal<01:42:22.360> to<01:42:22.520> a<01:42:22.679> function<01:42:23.560> set<01:42:24.040> is

is equal to a function set is

is equal to a function set is
authenticated<01:42:25.280> this<01:42:25.360> is<01:42:25.480> for<01:42:25.679> setting<01:42:25.960> up<01:42:26.119> a

authenticated this is for setting up a

authenticated this is for setting up a
Boolean<01:42:26.800> value<01:42:27.520> which<01:42:27.639> is<01:42:27.800> also<01:42:28.040> going<01:42:28.159> to<01:42:28.320> be

Boolean value which is also going to be

Boolean value which is also going to be
a<01:42:28.560> function<01:42:29.560> and<01:42:29.800> then<01:42:30.159> we're<01:42:30.320> going<01:42:30.440> to<01:42:30.560> have

a function and then we're going to have

a function and then we're going to have
a<01:42:30.920> check<01:42:31.599> off<01:42:32.119> user<01:42:33.000> which<01:42:33.119> is<01:42:33.239> going<01:42:33.400> to<01:42:33.520> be<01:42:33.639> an

a check off user which is going to be an

a check off user which is going to be an
async<01:42:34.440> function<01:42:35.440> that's<01:42:35.639> going<01:42:35.760> to<01:42:36.119> return

async function that's going to return

async function that's going to return
either<01:42:37.199> a<01:42:37.440> false<01:42:38.239> or<01:42:38.560> a<01:42:38.800> true<01:42:39.480> which<01:42:39.639> is<01:42:39.760> a

either a false or a true which is a

either a false or a true which is a
Boolean<01:42:40.440> value<01:42:41.400> just<01:42:41.920> like<01:42:42.400> so<01:42:43.400> why<01:42:43.599> we<01:42:43.800> have

Boolean value just like so why we have

Boolean value just like so why we have
this<01:42:44.480> to<01:42:44.800> know<01:42:45.199> whether<01:42:45.400> we<01:42:45.560> have<01:42:45.679> a<01:42:45.840> logged<01:42:46.119> in

this to know whether we have a logged in

this to know whether we have a logged in
user<01:42:46.800> at<01:42:47.000> all<01:42:47.480> times<01:42:48.480> and<01:42:48.679> now<01:42:49.000> we<01:42:49.119> can<01:42:49.320> declare

user at all times and now we can declare

user at all times and now we can declare
our<01:42:50.000> context<01:42:50.599> but<01:42:50.760> by<01:42:50.880> saying<01:42:51.199> const<01:42:51.920> O

our context but by saying const O

our context but by saying const O
context<01:42:53.239> is<01:42:53.480> equal<01:42:53.800> to<01:42:54.400> create<01:42:55.040> context<01:42:56.040> we

context is equal to create context we

context is equal to create context we
can<01:42:56.320> Define<01:42:56.639> the<01:42:56.880> type<01:42:57.199> of<01:42:57.360> that<01:42:57.679> context<01:42:58.320> by

can Define the type of that context by

can Define the type of that context by
providing<01:42:59.000> this<01:42:59.199> syntax<01:43:00.199> and<01:43:00.360> then

providing this syntax and then

providing this syntax and then
referencing<01:43:01.159> the<01:43:01.400> I<01:43:01.920> context<01:43:02.480> type<01:43:03.159> which<01:43:03.280> is

referencing the I context type which is

referencing the I context type which is
coming<01:43:03.719> from<01:43:04.199> addtype<01:43:05.400> if<01:43:06.400> you<01:43:06.560> look<01:43:06.760> into

coming from addtype if you look into

coming from addtype if you look into
this<01:43:07.480> this<01:43:07.560> is<01:43:07.719> simply<01:43:08.040> declaring<01:43:08.520> the<01:43:08.719> types

this this is simply declaring the types

this this is simply declaring the types
of<01:43:09.440> everything<01:43:09.760> we<01:43:09.920> have<01:43:10.080> now

of everything we have now

of everything we have now
discussed<01:43:11.880> and<01:43:12.199> finally<01:43:12.760> we<01:43:12.880> need<01:43:13.040> to<01:43:13.199> set<01:43:13.480> it

discussed and finally we need to set it

discussed and finally we need to set it
to<01:43:14.199> the<01:43:14.400> initial<01:43:15.440> State<01:43:16.440> now<01:43:16.760> instead<01:43:17.040> of

to the initial State now instead of

to the initial State now instead of
calling<01:43:17.560> this<01:43:17.800> component<01:43:18.360> o<01:43:18.760> context<01:43:19.480> we<01:43:19.560> can

calling this component o context we can

calling this component o context we can
call<01:43:20.000> it<01:43:20.199> o

call it o

call it o
provider<01:43:22.440> because<01:43:22.760> that's<01:43:22.920> going<01:43:23.080> to<01:43:23.280> wrap

provider because that's going to wrap

provider because that's going to wrap
our<01:43:23.880> entire<01:43:24.400> app<01:43:24.760> and<01:43:25.080> provide<01:43:25.760> the<01:43:26.000> access<01:43:26.320> to

our entire app and provide the access to

our entire app and provide the access to
the<01:43:27.040> context<01:43:28.040> every<01:43:28.320> context<01:43:28.800> needs<01:43:29.000> to<01:43:29.159> have

the context every context needs to have

the context every context needs to have
children<01:43:30.360> because<01:43:30.599> it<01:43:30.800> wraps<01:43:31.239> the<01:43:31.360> entire<01:43:31.760> app

children because it wraps the entire app

children because it wraps the entire app
and<01:43:32.320> then<01:43:32.520> displays<01:43:33.080> whatever<01:43:33.400> is<01:43:33.639> within<01:43:33.880> it

and then displays whatever is within it

and then displays whatever is within it
we<01:43:34.840> can<01:43:35.040> also<01:43:35.280> Define<01:43:35.599> the<01:43:35.840> type<01:43:36.159> of<01:43:36.320> children

we can also Define the type of children

we can also Define the type of children
to<01:43:37.360> be<01:43:37.560> equal<01:43:37.840> to<01:43:38.239> a<01:43:38.679> react.<01:43:39.679> node<01:43:40.480> and<01:43:40.599> I

to be equal to a react. node and I

to be equal to a react. node and I
believe<01:43:40.960> it's<01:43:41.159> called<01:43:41.480> react<01:43:42.000> node<01:43:42.480> so<01:43:42.599> we

believe it's called react node so we

believe it's called react node so we
have<01:43:42.840> to<01:43:43.040> add<01:43:43.280> that<01:43:43.520> here<01:43:44.280> so<01:43:44.480> now<01:43:44.840> what<01:43:44.920> do<01:43:45.080> we

have to add that here so now what do we

have to add that here so now what do we
do<01:43:45.560> right<01:43:45.760> here<01:43:46.159> within<01:43:46.440> it<01:43:46.960> well<01:43:47.159> we<01:43:47.239> want<01:43:47.360> to

do right here within it well we want to

do right here within it well we want to
define<01:43:48.000> the<01:43:48.239> state<01:43:48.760> of<01:43:48.960> this<01:43:49.119> user<01:43:49.719> so<01:43:49.880> that's

define the state of this user so that's

define the state of this user so that's
going<01:43:50.199> to<01:43:50.280> be<01:43:50.440> us<01:43:50.679> use<01:43:51.000> State<01:43:51.360> snippet<01:43:52.119> called

going to be us use State snippet called

going to be us use State snippet called
user<01:43:53.239> set<01:43:53.639> user<01:43:54.159> as<01:43:54.360> well<01:43:55.159> and<01:43:55.360> at<01:43:55.520> the<01:43:55.719> start

user set user as well and at the start

user set user as well and at the start
it's<01:43:56.400> going<01:43:56.560> to<01:43:56.679> be<01:43:56.920> equal<01:43:57.239> to<01:43:57.800> the<01:43:58.080> initial

it's going to be equal to the initial

it's going to be equal to the initial
user<01:43:59.679> variable<01:44:00.159> that<01:44:00.280> we<01:44:00.400> have<01:44:00.560> declared

user variable that we have declared

user variable that we have declared
before<01:44:01.840> and<01:44:01.960> we<01:44:02.040> can<01:44:02.280> also<01:44:02.560> give<01:44:02.679> it<01:44:02.920> a<01:44:03.159> context

before and we can also give it a context

before and we can also give it a context
or<01:44:04.040> a<01:44:04.280> type<01:44:04.960> of<01:44:05.360> I<01:44:06.320> user<01:44:07.320> which<01:44:07.520> we<01:44:07.639> can<01:44:07.920> import

or a type of I user which we can import

or a type of I user which we can import
from<01:44:08.880> types<01:44:09.760> so<01:44:09.960> this<01:44:10.040> is<01:44:10.239> just<01:44:10.360> so<01:44:10.520> our

from types so this is just so our

from types so this is just so our
typescript<01:44:11.199> knows<01:44:11.679> exactly<01:44:12.239> how<01:44:12.440> our<01:44:12.599> user<01:44:12.880> is

typescript knows exactly how our user is

typescript knows exactly how our user is
going<01:44:13.199> to<01:44:13.360> look<01:44:13.599> like<01:44:14.080> we're<01:44:14.239> going<01:44:14.360> to<01:44:14.480> also

going to look like we're going to also

going to look like we're going to also
need<01:44:15.080> States<01:44:15.480> for<01:44:15.800> loading<01:44:16.639> so<01:44:16.760> we<01:44:16.880> can<01:44:17.000> say

need States for loading so we can say

need States for loading so we can say
use<01:44:17.800> state<01:44:18.719> is<01:44:19.080> loading<01:44:20.080> set<01:44:20.440> is<01:44:20.639> is<01:44:20.800> loading

use state is loading set is is loading

use state is loading set is is loading
so<01:44:21.599> we<01:44:21.679> can<01:44:21.880> write<01:44:22.119> here<01:44:22.639> declare<01:44:23.480> that<01:44:24.400> and

so we can write here declare that and

so we can write here declare that and
then<01:44:24.800> at<01:44:24.960> the<01:44:25.119> start<01:44:25.440> it's<01:44:25.560> going<01:44:25.719> to<01:44:25.880> be<01:44:26.239> false

then at the start it's going to be false

then at the start it's going to be false
and<01:44:27.360> we<01:44:27.480> can<01:44:27.639> repeat<01:44:28.040> this<01:44:28.199> as<01:44:28.360> well<01:44:28.880> for

and we can repeat this as well for

and we can repeat this as well for
another<01:44:29.920> one<01:44:30.599> use

another one use

another one use
state<01:44:32.760> which<01:44:32.880> is<01:44:33.040> going<01:44:33.199> to<01:44:33.360> be<01:44:33.960> is

state which is going to be is

state which is going to be is
authenticated<01:44:36.960> set<01:44:37.400> is<01:44:37.880> authenticated<01:44:38.880> at

authenticated set is authenticated at

authenticated set is authenticated at
the<01:44:39.159> start<01:44:39.520> set<01:44:39.760> to<01:44:39.960> false<01:44:40.560> because<01:44:40.840> we<01:44:41.000> don't

the start set to false because we don't

the start set to false because we don't
yet<01:44:41.520> have<01:44:41.719> users<01:44:42.400> that<01:44:42.480> are<01:44:42.639> logged<01:44:43.159> in<01:44:44.159> what

yet have users that are logged in what

yet have users that are logged in what
are<01:44:44.400> we<01:44:44.520> going<01:44:44.719> to<01:44:44.840> do<01:44:45.080> then<01:44:45.760> well<01:44:45.960> we're<01:44:46.119> going

are we going to do then well we're going

are we going to do then well we're going
to<01:44:46.440> wrap<01:44:46.960> everything<01:44:47.560> in<01:44:47.679> our<01:44:47.880> o<01:44:48.280> context

to wrap everything in our o context

to wrap everything in our o context
that's<01:44:49.280> going<01:44:49.440> to<01:44:49.599> look<01:44:49.840> like<01:44:50.080> this<01:44:50.840> of

that's going to look like this of

that's going to look like this of
context.<01:44:53.880> provider<01:44:54.880> and<01:44:55.119> we<01:44:55.239> need<01:44:55.360> to<01:44:55.599> pass<01:44:55.800> it

context. provider and we need to pass it

context. provider and we need to pass it
the<01:44:56.320> value<01:44:56.920> so<01:44:57.119> the<01:44:57.280> value<01:44:57.760> will<01:44:57.920> be<01:44:58.119> equal<01:44:58.520> to

the value so the value will be equal to

the value so the value will be equal to
value<01:44:59.639> and<01:44:59.800> we<01:44:59.880> can<01:45:00.080> declare<01:45:01.040> what<01:45:01.159> we're

value and we can declare what we're

value and we can declare what we're
passing<01:45:01.840> right<01:45:02.000> here<01:45:02.199> on<01:45:02.360> the<01:45:02.560> top<01:45:03.000> by<01:45:03.119> saying

passing right here on the top by saying

passing right here on the top by saying
const<01:45:03.960> value<01:45:04.480> is<01:45:04.639> equal<01:45:04.880> to<01:45:05.040> an<01:45:05.239> object<01:45:05.960> that's

const value is equal to an object that's

const value is equal to an object that's
going<01:45:06.280> to<01:45:06.440> have<01:45:06.639> the<01:45:06.840> user<01:45:07.840> the<01:45:08.040> set<01:45:08.360> user

going to have the user the set user

going to have the user the set user
function<01:45:09.320> which<01:45:09.480> we<01:45:09.560> will<01:45:09.760> declare<01:45:10.159> soon<01:45:11.119> it's

function which we will declare soon it's

function which we will declare soon it's
also<01:45:11.520> going<01:45:11.639> to<01:45:11.800> have<01:45:11.960> the<01:45:12.119> is<01:45:12.599> loading<01:45:13.599> it's

also going to have the is loading it's

also going to have the is loading it's
going<01:45:13.960> to<01:45:14.119> have<01:45:14.320> the<01:45:14.599> is

going to have the is

going to have the is
authenticated<01:45:17.199> it<01:45:17.320> will<01:45:17.560> have<01:45:17.800> the<01:45:18.040> set<01:45:18.440> is

authenticated it will have the set is

authenticated it will have the set is
authenticated<01:45:19.360> as<01:45:19.520> well<01:45:20.639> and<01:45:20.800> it's<01:45:20.960> going<01:45:21.119> to

authenticated as well and it's going to

authenticated as well and it's going to
have<01:45:21.679> a<01:45:21.880> function<01:45:22.320> called<01:45:22.719> check<01:45:23.400> o<01:45:23.920> user

have a function called check o user

have a function called check o user
which<01:45:25.119> we<01:45:25.199> can<01:45:25.440> Define<01:45:26.119> right<01:45:26.360> here<01:45:26.960> const

which we can Define right here const

which we can Define right here const
check<01:45:28.239> o<01:45:28.840> user<01:45:29.760> is<01:45:30.000> equal<01:45:30.360> to<01:45:31.040> a<01:45:31.280> function

check o user is equal to a function

check o user is equal to a function
right<01:45:32.320> here<01:45:33.320> and<01:45:33.480> now<01:45:33.599> we're<01:45:33.920> passing<01:45:34.320> that

right here and now we're passing that

right here and now we're passing that
value<01:45:35.159> to<01:45:35.360> our<01:45:35.719> provider<01:45:36.719> also<01:45:37.239> we<01:45:37.400> need<01:45:37.520> to

value to our provider also we need to

value to our provider also we need to
render<01:45:38.000> the<01:45:38.119> children<01:45:38.760> within<01:45:39.040> it<01:45:39.560> right<01:45:39.760> here

render the children within it right here

render the children within it right here
now<01:45:40.639> of<01:45:40.800> course<01:45:41.080> the<01:45:41.239> value<01:45:41.480> is<01:45:41.599> going<01:45:41.760> to

now of course the value is going to

now of course the value is going to
complain<01:45:42.599> because<01:45:43.000> there's<01:45:43.199> going<01:45:43.360> to<01:45:43.480> be<01:45:43.639> a

complain because there's going to be a

complain because there's going to be a
mismatch<01:45:44.520> between<01:45:44.840> the<01:45:45.000> types<01:45:45.679> but<01:45:45.880> we'll

mismatch between the types but we'll

mismatch between the types but we'll
solve<01:45:46.480> that<01:45:46.679> really<01:45:46.920> soon<01:45:47.520> once<01:45:47.719> we<01:45:47.920> utilize

solve that really soon once we utilize

solve that really soon once we utilize
the<01:45:48.760> check<01:45:49.239> off<01:45:49.599> user<01:45:50.000> function<01:45:50.719> so<01:45:51.040> what<01:45:51.159> is

the check off user function so what is

the check off user function so what is
this<01:45:51.480> function<01:45:51.760> going<01:45:51.920> to<01:45:52.080> do<01:45:52.880> well<01:45:53.080> it's

this function going to do well it's

this function going to do well it's
going<01:45:53.400> to<01:45:53.520> be<01:45:53.679> an<01:45:53.840> async<01:45:54.639> function<01:45:55.639> that's

going to be an async function that's

going to be an async function that's
going<01:45:56.000> to<01:45:56.159> have<01:45:56.360> a<01:45:56.599> try<01:45:57.040> and<01:45:57.440> catch<01:45:58.320> Block<01:45:59.320> in

going to have a try and catch Block in

going to have a try and catch Block in
the<01:45:59.719> catch<01:46:00.440> we<01:46:00.560> can<01:46:00.760> simply<01:46:01.119> say<01:46:01.840> console.<01:46:03.040> log

the catch we can simply say console. log

the catch we can simply say console. log
error<01:46:04.840> and<01:46:05.000> we<01:46:05.080> can<01:46:05.360> return<01:46:05.599> a<01:46:05.760> false<01:46:06.480> meaning

error and we can return a false meaning

error and we can return a false meaning
user<01:46:07.239> is<01:46:07.400> not<01:46:07.880> authenticated<01:46:08.880> we<01:46:08.960> can<01:46:09.119> also

user is not authenticated we can also

user is not authenticated we can also
have<01:46:09.560> a<01:46:09.760> finally<01:46:10.639> clause<01:46:11.639> which<01:46:11.760> is<01:46:11.920> going<01:46:12.080> to

have a finally clause which is going to

have a finally clause which is going to
set<01:46:13.000> is<01:46:13.239> loading<01:46:13.719> to<01:46:13.960> false<01:46:14.560> meaning<01:46:14.880> we're

set is loading to false meaning we're

set is loading to false meaning we're
done<01:46:15.360> with<01:46:15.520> loading<01:46:16.280> but<01:46:16.440> in<01:46:16.560> the<01:46:16.760> try<01:46:17.320> we'll

done with loading but in the try we'll

done with loading but in the try we'll
actually<01:46:18.040> try<01:46:18.520> to<01:46:18.760> get<01:46:18.920> to<01:46:19.119> the<01:46:19.280> currently

actually try to get to the currently

actually try to get to the currently
logged<01:46:20.000> in<01:46:20.119> user<01:46:20.639> account<01:46:21.239> so<01:46:21.440> we<01:46:21.520> can<01:46:21.679> say

logged in user account so we can say

logged in user account so we can say
const<01:46:22.920> current<01:46:23.719> account<01:46:24.719> is<01:46:25.040> equal<01:46:25.360> to<01:46:26.639> await

const current account is equal to await

const current account is equal to await
get<01:46:28.480> current<01:46:29.400> user<01:46:30.400> and<01:46:30.679> this<01:46:30.920> is<01:46:31.080> a<01:46:31.320> function

get current user and this is a function

get current user and this is a function
will<01:46:32.000> create<01:46:32.440> directly<01:46:33.199> within<01:46:33.639> aite<01:46:34.639> so

will create directly within aite so

will create directly within aite so
let's<01:46:35.360> go<01:46:35.560> to<01:46:36.280> aite<01:46:37.280> API<01:46:37.960> that's<01:46:38.159> going<01:46:38.320> to<01:46:38.440> be

let's go to aite API that's going to be

let's go to aite API that's going to be
right<01:46:38.920> here<01:46:39.599> and<01:46:39.719> let's<01:46:39.960> go<01:46:40.199> below<01:46:40.800> the<01:46:41.000> sign

right here and let's go below the sign

right here and let's go below the sign
in<01:46:41.840> account<01:46:42.840> export<01:46:44.000> async<01:46:45.000> function<01:46:45.960> get

in account export async function get

in account export async function get
current<01:46:47.440> user<01:46:48.280> and<01:46:48.480> we<01:46:48.560> can<01:46:48.719> open<01:46:49.000> up<01:46:49.199> a<01:46:49.360> try

current user and we can open up a try

current user and we can open up a try
and<01:46:49.920> catch<01:46:50.159> block<01:46:50.400> block<01:46:50.880> as<01:46:51.000> we<01:46:51.199> always<01:46:51.480> do<01:46:52.159> in

and catch block block as we always do in

and catch block block as we always do in
the<01:46:52.520> catch<01:46:53.320> simply<01:46:54.560> console.log<01:46:55.560> the<01:46:55.760> error

the catch simply console.log the error

the catch simply console.log the error
and<01:46:57.000> here<01:46:57.360> we<01:46:57.480> can<01:46:57.599> say<01:46:57.880> const<01:46:58.360> current

and here we can say const current

and here we can say const current
account<01:46:59.920> is<01:47:00.239> equal<01:47:00.599> to<01:47:01.639> await<01:47:02.880> account.<01:47:03.880> getet

account is equal to await account. getet

account is equal to await account. getet
and<01:47:04.719> then<01:47:05.040> we<01:47:05.159> can<01:47:05.400> check<01:47:06.040> if<01:47:06.400> that<01:47:06.639> current

and then we can check if that current

and then we can check if that current
account<01:47:07.320> doesn't<01:47:07.719> exist<01:47:08.400> we<01:47:08.480> can<01:47:08.679> simply

account doesn't exist we can simply

account doesn't exist we can simply
throw<01:47:09.239> a<01:47:09.400> new<01:47:09.599> error<01:47:10.520> but<01:47:10.760> if<01:47:10.880> it<01:47:11.040> does<01:47:11.360> exist

throw a new error but if it does exist

throw a new error but if it does exist
we<01:47:11.920> can<01:47:12.080> try<01:47:12.280> to<01:47:12.480> retrieve<01:47:13.320> that<01:47:13.599> current

we can try to retrieve that current

we can try to retrieve that current
account<01:47:14.800> by<01:47:14.960> saying<01:47:15.360> const<01:47:16.199> current<01:47:16.639> user<01:47:17.639> is

account by saying const current user is

account by saying const current user is
equal<01:47:18.239> to<01:47:18.840> a<01:47:19.119> wait<01:47:19.920> datab

equal to a wait datab

equal to a wait datab
bases.<01:47:21.840> list<01:47:22.960> documents<01:47:23.960> so<01:47:24.199> here<01:47:24.400> we<01:47:24.520> need<01:47:24.639> to

bases. list documents so here we need to

bases. list documents so here we need to
pass<01:47:25.000> the<01:47:25.159> database<01:47:25.639> ID<01:47:26.280> from<01:47:26.480> which<01:47:26.639> we<01:47:26.719> want

pass the database ID from which we want

pass the database ID from which we want
to<01:47:27.000> read<01:47:27.560> The<01:47:27.719> Collection<01:47:28.119> ID<01:47:28.440> from<01:47:28.599> which<01:47:28.719> we

to read The Collection ID from which we

to read The Collection ID from which we
want<01:47:28.920> to<01:47:29.080> read<01:47:29.639> and<01:47:29.760> then<01:47:29.920> the<01:47:30.080> query<01:47:30.639> of<01:47:30.800> what

want to read and then the query of what

want to read and then the query of what
we're<01:47:31.080> trying<01:47:31.320> to<01:47:31.480> fetch<01:47:32.119> so<01:47:32.280> we<01:47:32.400> need<01:47:32.520> to<01:47:32.679> get

we're trying to fetch so we need to get

we're trying to fetch so we need to get
a<01:47:33.040> list<01:47:33.320> of<01:47:33.480> all<01:47:33.760> user<01:47:34.199> documents<01:47:34.679> in<01:47:34.800> a<01:47:34.960> given

a list of all user documents in a given

a list of all user documents in a given
collection<01:47:36.560> first<01:47:36.920> we<01:47:37.000> need<01:47:37.159> to<01:47:37.360> pass<01:47:37.679> the

collection first we need to pass the

collection first we need to pass the
aite

aite

aite
config<01:47:41.119> database<01:47:42.000> ID<01:47:43.000> then<01:47:43.199> we<01:47:43.320> need<01:47:43.480> to<01:47:43.639> pass

config database ID then we need to pass

config database ID then we need to pass
the<01:47:44.080> app<01:47:44.840> config<01:47:45.840> do<01:47:46.320> user<01:47:47.000> collection<01:47:47.800> ID<01:47:48.800> and

the app config do user collection ID and

the app config do user collection ID and
then<01:47:49.119> we<01:47:49.239> need<01:47:49.360> to<01:47:49.599> pass<01:47:50.000> what<01:47:50.320> we're<01:47:50.480> trying

then we need to pass what we're trying

then we need to pass what we're trying
to<01:47:50.880> fetch<01:47:51.840> which<01:47:52.000> is<01:47:52.199> a<01:47:52.440> query<01:47:53.119> of<01:47:53.280> a<01:47:53.480> type

to fetch which is a query of a type

to fetch which is a query of a type
array<01:47:54.880> so<01:47:55.040> we<01:47:55.159> can<01:47:55.280> say

array so we can say

array so we can say
query.<01:47:57.280> equal<01:47:57.960> we<01:47:58.119> want<01:47:58.320> to<01:47:58.440> get<01:47:58.599> the<01:47:58.800> account

query. equal we want to get the account

query. equal we want to get the account
ID<01:48:00.440> and<01:48:00.679> we<01:48:00.800> want<01:48:00.960> to<01:48:01.159> get<01:48:01.520> only<01:48:01.880> the<01:48:02.080> current

ID and we want to get only the current

ID and we want to get only the current
account<01:48:04.080> do<01:48:04.560> dollar<01:48:04.960> sign<01:48:05.280> ID<01:48:06.280> and<01:48:06.480> this<01:48:06.639> query

account do dollar sign ID and this query

account do dollar sign ID and this query
is<01:48:07.560> coming<01:48:07.960> from<01:48:08.520> aight<01:48:09.199> so<01:48:09.360> we<01:48:09.440> can<01:48:09.599> import<01:48:09.920> it

is coming from aight so we can import it

is coming from aight so we can import it
at<01:48:10.199> the<01:48:10.400> top<01:48:11.080> finally<01:48:11.520> we<01:48:11.639> can<01:48:11.760> do<01:48:11.960> another

at the top finally we can do another

at the top finally we can do another
check<01:48:12.760> saying<01:48:13.159> if<01:48:13.400> there's<01:48:13.719> no<01:48:14.280> current

check saying if there's no current

check saying if there's no current
account<01:48:15.119> or<01:48:15.360> current<01:48:15.639> user<01:48:16.040> this<01:48:16.239> time<01:48:16.599> we're

account or current user this time we're

account or current user this time we're
going<01:48:16.880> to<01:48:16.960> throw<01:48:17.159> an<01:48:17.320> error<01:48:18.119> but<01:48:18.320> if<01:48:18.440> we<01:48:18.639> have

going to throw an error but if we have

going to throw an error but if we have
it<01:48:19.239> we<01:48:19.360> can<01:48:19.679> return<01:48:20.040> a<01:48:20.400> current

it we can return a current

it we can return a current
user.<01:48:22.440> documents

user. documents

user. documents
zero<01:48:25.040> there<01:48:25.199> we<01:48:25.400> go<01:48:26.000> so<01:48:26.199> now<01:48:26.400> we<01:48:26.560> have<01:48:26.719> the<01:48:26.960> get

zero there we go so now we have the get

zero there we go so now we have the get
current<01:48:27.599> user<01:48:28.239> function<01:48:29.159> which<01:48:29.360> we<01:48:29.480> can<01:48:29.679> now

current user function which we can now

current user function which we can now
use<01:48:30.560> within<01:48:30.840> our<01:48:31.080> OD<01:48:31.480> context<01:48:32.440> by<01:48:32.679> simply

use within our OD context by simply

use within our OD context by simply
importing<01:48:33.560> it<01:48:33.840> from<01:48:34.080> lib<01:48:34.599> ight<01:48:35.679> API<01:48:36.679> so<01:48:37.000> here

importing it from lib ight API so here

importing it from lib ight API so here
now<01:48:37.719> we<01:48:37.880> check<01:48:38.320> if<01:48:39.000> the<01:48:39.159> current<01:48:39.560> account

now we check if the current account

now we check if the current account
exists<01:48:41.560> in<01:48:41.800> that<01:48:42.080> case<01:48:42.480> we<01:48:42.599> want<01:48:42.760> to<01:48:43.040> set<01:48:43.440> our

exists in that case we want to set our

exists in that case we want to set our
user<01:48:44.520> so<01:48:44.679> we<01:48:44.760> can<01:48:44.880> say<01:48:45.119> set<01:48:45.440> user<01:48:46.280> and<01:48:46.400> then<01:48:46.520> we

user so we can say set user and then we

user so we can say set user and then we
set<01:48:46.880> the<01:48:47.040> ID<01:48:47.639> to<01:48:47.800> be<01:48:48.000> equal<01:48:48.280> to<01:48:48.440> the<01:48:48.599> current

set the ID to be equal to the current

set the ID to be equal to the current
account<01:48:50.520> dollar<01:48:50.840> sign<01:48:51.360> ID<01:48:52.360> the<01:48:52.560> name<01:48:52.960> to<01:48:53.159> be

account dollar sign ID the name to be

account dollar sign ID the name to be
current

accountname username to be equal to

accountname username to be equal to
current<01:49:00.360> account.

current account.

current account.
username<01:49:03.960> email<01:49:04.599> to<01:49:04.800> be<01:49:05.000> equal<01:49:05.280> to<01:49:05.480> current

username email to be equal to current

username email to be equal to current
account.<01:49:06.560> email<01:49:07.560> image<01:49:07.880> URL<01:49:08.440> to<01:49:08.639> be<01:49:08.800> equal<01:49:09.080> to

account. email image URL to be equal to

account. email image URL to be equal to
current<01:49:09.760> account<01:49:10.639> dot<01:49:11.639> that's<01:49:11.840> going<01:49:12.040> to<01:49:12.199> be

current account dot that's going to be

current account dot that's going to be
image<01:49:13.360> URL<01:49:14.360> and<01:49:14.480> then<01:49:14.719> bio<01:49:15.159> to<01:49:15.320> be<01:49:15.520> equal<01:49:15.760> to

image URL and then bio to be equal to

image URL and then bio to be equal to
current<01:49:16.320> account.<01:49:17.679> bio<01:49:18.679> of<01:49:18.840> course<01:49:19.080> what<01:49:19.199> you

current account. bio of course what you

current account. bio of course what you
could<01:49:19.440> have<01:49:19.599> done<01:49:19.840> is<01:49:20.199> you<01:49:20.280> could<01:49:20.360> have

could have done is you could have

could have done is you could have
destructured<01:49:21.400> all<01:49:21.560> of<01:49:21.760> these<01:49:22.040> values<01:49:22.880> from

destructured all of these values from

destructured all of these values from
the<01:49:23.599> current<01:49:24.000> account<01:49:24.800> right<01:49:25.080> here<01:49:25.560> by<01:49:25.679> using

the current account right here by using

the current account right here by using
the<01:49:26.080> destructuring<01:49:26.760> assignment<01:49:27.639> and<01:49:27.760> then

the destructuring assignment and then

the destructuring assignment and then
pasting<01:49:28.320> them<01:49:29.000> here<01:49:30.000> you<01:49:30.159> also<01:49:30.360> need<01:49:30.520> to<01:49:30.760> add

pasting them here you also need to add

pasting them here you also need to add
commas<01:49:31.719> to<01:49:31.880> the

commas to the

commas to the
end<01:49:33.840> and<01:49:34.040> if<01:49:34.159> you<01:49:34.320> did<01:49:34.599> that<01:49:35.400> you<01:49:35.520> can<01:49:35.719> also<01:49:35.960> put

end and if you did that you can also put

end and if you did that you can also put
it<01:49:36.280> all<01:49:36.440> in<01:49:36.639> one<01:49:36.840> line<01:49:37.320> as<01:49:37.440> it's<01:49:37.639> not<01:49:37.840> taking

it all in one line as it's not taking

it all in one line as it's not taking
too<01:49:38.400> much

too much

too much
space<01:49:40.480> and<01:49:40.639> now<01:49:40.960> you<01:49:41.119> don't<01:49:41.360> have<01:49:41.480> to<01:49:41.599> mention

space and now you don't have to mention

space and now you don't have to mention
current<01:49:42.599> account<01:49:43.239> every<01:49:43.639> single<01:49:44.000> time<01:49:44.960> so

current account every single time so

current account every single time so
it's<01:49:45.239> going<01:49:45.400> to<01:49:45.560> look<01:49:45.920> a<01:49:46.040> bit<01:49:46.239> cleaner<01:49:46.719> like

it's going to look a bit cleaner like

it's going to look a bit cleaner like
this<01:49:47.760> and<01:49:47.920> for<01:49:48.199> other<01:49:48.520> properties<01:49:49.440> you<01:49:49.599> don't

this and for other properties you don't

this and for other properties you don't
even<01:49:50.280> have<01:49:50.440> to<01:49:50.679> say<01:49:51.400> what<01:49:51.560> it<01:49:51.719> is<01:49:52.040> if<01:49:52.159> the<01:49:52.280> name

even have to say what it is if the name

even have to say what it is if the name
is<01:49:52.679> the<01:49:52.800> same<01:49:53.440> which<01:49:53.560> in<01:49:53.719> all<01:49:53.880> of<01:49:54.080> these<01:49:54.280> cases

is the same which in all of these cases

is the same which in all of these cases
is<01:49:55.239> so<01:49:55.400> you<01:49:55.520> can<01:49:55.719> simply<01:49:56.119> keep<01:49:56.639> the<01:49:56.840> key<01:49:57.400> name

is so you can simply keep the key name

is so you can simply keep the key name
here<01:49:58.719> since<01:49:58.920> we<01:49:59.040> no<01:49:59.199> longer<01:49:59.560> have<01:49:59.800> access<01:50:00.040> to

here since we no longer have access to

here since we no longer have access to
the<01:50:00.360> entire<01:50:00.719> current<01:50:01.119> account<01:50:01.760> we<01:50:01.880> can<01:50:02.000> just

the entire current account we can just

the entire current account we can just
refer<01:50:02.480> to<01:50:02.599> the

refer to the

refer to the
ID<01:50:04.280> and<01:50:04.440> then<01:50:04.800> all<01:50:05.000> of<01:50:05.199> this<01:50:05.440> also<01:50:05.719> fits<01:50:06.119> in<01:50:06.280> one

ID and then all of this also fits in one

ID and then all of this also fits in one
line<01:50:06.920> so<01:50:07.080> we<01:50:07.199> can<01:50:07.320> put<01:50:07.520> it<01:50:07.639> in<01:50:07.760> one<01:50:08.040> line<01:50:08.520> like

line so we can put it in one line like

line so we can put it in one line like
so<01:50:09.800> this<01:50:09.960> is<01:50:10.280> in<01:50:10.480> my<01:50:10.719> opinion<01:50:11.119> a<01:50:11.239> bit<01:50:11.480> easier<01:50:11.800> to

so this is in my opinion a bit easier to

so this is in my opinion a bit easier to
understand<01:50:12.560> what<01:50:12.679> we're<01:50:12.880> doing<01:50:13.760> but<01:50:14.080> we<01:50:14.199> have

understand what we're doing but we have

understand what we're doing but we have
to<01:50:14.440> be<01:50:14.599> careful<01:50:15.199> and<01:50:15.360> typescript<01:50:15.880> comes<01:50:16.000> in

to be careful and typescript comes in

to be careful and typescript comes in
really<01:50:16.520> handy<01:50:16.880> here<01:50:17.320> if<01:50:17.480> I<01:50:17.599> wasn't<01:50:17.880> using

really handy here if I wasn't using

really handy here if I wasn't using
typescript<01:50:18.840> I<01:50:18.880> would<01:50:19.080> do<01:50:19.199> it<01:50:19.599> exactly<01:50:20.199> like

typescript I would do it exactly like

typescript I would do it exactly like
this<01:50:21.080> I<01:50:21.199> would<01:50:21.400> destructure<01:50:22.040> everything<01:50:22.599> and

this I would destructure everything and

this I would destructure everything and
get<01:50:22.920> the<01:50:23.199> values<01:50:24.199> but<01:50:24.400> if<01:50:24.480> you<01:50:24.639> read<01:50:24.920> this<01:50:25.080> in

get the values but if you read this in

get the values but if you read this in
typescript<01:50:25.880> it's<01:50:26.000> going<01:50:26.159> to<01:50:26.280> say<01:50:26.639> property

typescript it's going to say property

typescript it's going to say property
dollar<01:50:27.639> sign<01:50:28.040> ID<01:50:29.040> as<01:50:29.199> well<01:50:29.400> as<01:50:29.560> all<01:50:29.800> the<01:50:29.960> other

dollar sign ID as well as all the other

dollar sign ID as well as all the other
ones<01:50:30.920> do<01:50:31.159> not<01:50:31.520> exist<01:50:31.960> on<01:50:32.199> type<01:50:32.560> document<01:50:33.280> or

ones do not exist on type document or

ones do not exist on type document or
undefined<01:50:35.080> so<01:50:35.239> if<01:50:35.320> you<01:50:35.480> look<01:50:35.719> into<01:50:35.960> the<01:50:36.159> get

undefined so if you look into the get

undefined so if you look into the get
current<01:50:36.679> user<01:50:37.440> you<01:50:37.560> can<01:50:37.760> notice<01:50:38.199> that<01:50:38.520> here

current user you can notice that here

current user you can notice that here
it's<01:50:39.280> great<01:50:40.000> it's<01:50:40.159> returning<01:50:40.639> all<01:50:40.800> of<01:50:40.960> these

it's great it's returning all of these

it's great it's returning all of these
values<01:50:42.199> but<01:50:42.400> in<01:50:42.520> the<01:50:42.760> catch<01:50:43.480> it's<01:50:43.639> not

values but in the catch it's not

values but in the catch it's not
returning<01:50:44.360> anything<01:50:45.320> so<01:50:45.599> if<01:50:45.800> this<01:50:46.000> function

returning anything so if this function

returning anything so if this function
fails<01:50:47.520> then<01:50:48.040> these<01:50:48.280> values<01:50:48.560> will<01:50:48.719> be

fails then these values will be

fails then these values will be
undefined<01:50:49.800> and<01:50:50.040> and<01:50:50.119> they'll<01:50:50.400> cause<01:50:50.880> an<01:50:51.079> error

undefined and and they'll cause an error

undefined and and they'll cause an error
so<01:50:52.000> in<01:50:52.239> this<01:50:52.480> case<01:50:52.679> to<01:50:52.840> make<01:50:53.000> our<01:50:53.239> application

so in this case to make our application

so in this case to make our application
less<01:50:54.079> error<01:50:54.480> prone<01:50:55.199> I<01:50:55.280> would<01:50:55.560> actually<01:50:55.920> get

less error prone I would actually get

less error prone I would actually get
back<01:50:56.400> a<01:50:56.599> bit<01:50:57.119> and<01:50:57.239> I<01:50:57.360> wouldn't<01:50:57.639> D<01:50:57.880> structure

back a bit and I wouldn't D structure

back a bit and I wouldn't D structure
the<01:50:58.400> value<01:50:59.239> although<01:50:59.719> it's<01:50:59.880> taking<01:51:00.199> a<01:51:00.320> bit

the value although it's taking a bit

the value although it's taking a bit
more<01:51:00.800> space<01:51:01.520> and<01:51:01.719> maybe<01:51:02.000> includes<01:51:02.360> a<01:51:02.520> bit<01:51:02.679> more

more space and maybe includes a bit more

more space and maybe includes a bit more
words<01:51:03.679> I<01:51:03.800> would<01:51:03.960> still<01:51:04.199> keep<01:51:04.360> it<01:51:04.560> like<01:51:04.760> this

words I would still keep it like this

words I would still keep it like this
sometimes<01:51:06.079> more<01:51:06.320> words<01:51:06.639> is<01:51:06.800> not<01:51:07.119> bad<01:51:07.679> if<01:51:07.800> your

sometimes more words is not bad if your

sometimes more words is not bad if your
application<01:51:08.719> is<01:51:08.880> more<01:51:09.199> robust<01:51:10.199> finally<01:51:10.679> if<01:51:10.800> we

application is more robust finally if we

application is more robust finally if we
get<01:51:11.079> to<01:51:11.320> here<01:51:11.760> once<01:51:11.960> we<01:51:12.119> set<01:51:12.280> our<01:51:12.440> user<01:51:13.119> we<01:51:13.239> can

get to here once we set our user we can

get to here once we set our user we can
also<01:51:14.000> set<01:51:14.159> the<01:51:14.320> authenticated<01:51:15.040> status<01:51:15.639> to

also set the authenticated status to

also set the authenticated status to
true<01:51:16.760> and<01:51:17.360> return<01:51:18.360> true<01:51:18.760> as<01:51:18.920> well<01:51:19.599> if<01:51:19.719> we

true and return true as well if we

true and return true as well if we
outside<01:51:20.480> of<01:51:20.639> this<01:51:20.840> block<01:51:21.280> we're<01:51:21.400> going<01:51:21.520> to

outside of this block we're going to

outside of this block we're going to
return

return

return
false<01:51:23.920> and<01:51:24.400> this<01:51:24.719> is<01:51:24.880> our<01:51:25.199> check<01:51:25.599> off<01:51:25.920> user

false and this is our check off user

false and this is our check off user
function<01:51:27.159> now<01:51:27.560> this<01:51:27.760> has<01:51:28.000> to<01:51:28.079> be<01:51:28.199> called

function now this has to be called

function now this has to be called
whenever<01:51:28.960> we<01:51:29.119> reload<01:51:29.599> our<01:51:29.880> page<01:51:30.679> and<01:51:30.840> for<01:51:31.119> that

whenever we reload our page and for that

whenever we reload our page and for that
we<01:51:31.560> have<01:51:31.679> to<01:51:31.880> use<01:51:32.400> the<01:51:32.599> use<01:51:33.159> effect<01:51:34.119> so<01:51:34.280> we<01:51:34.360> can

we have to use the use effect so we can

we have to use the use effect so we can
define<01:51:35.000> a<01:51:35.199> new<01:51:35.440> use<01:51:35.719> effect<01:51:36.079> hook<01:51:36.639> that's

define a new use effect hook that's

define a new use effect hook that's
going<01:51:37.040> to<01:51:37.280> have<01:51:37.520> a<01:51:37.719> function<01:51:38.599> like<01:51:38.800> so<01:51:39.599> and<01:51:39.800> a

going to have a function like so and a

going to have a function like so and a
dependency<01:51:40.440> array<01:51:40.960> like<01:51:41.199> this<01:51:41.840> empty<01:51:42.480> meaning

dependency array like this empty meaning

dependency array like this empty meaning
it's<01:51:43.040> only<01:51:43.239> going<01:51:43.400> to<01:51:43.520> be<01:51:43.679> called<01:51:44.239> whenever

it's only going to be called whenever

it's only going to be called whenever
the<01:51:44.800> app<01:51:45.119> reloads<01:51:46.119> here<01:51:46.560> we<01:51:46.679> can<01:51:46.880> look<01:51:47.159> into

the app reloads here we can look into

the app reloads here we can look into
our<01:51:47.760> local<01:51:48.119> storage<01:51:48.760> so<01:51:48.960> we<01:51:49.040> can<01:51:49.159> say<01:51:49.480> if<01:51:50.079> local

our local storage so we can say if local

our local storage so we can say if local
storage.<01:51:52.159> get<01:51:52.440> item<01:51:53.119> upright<01:51:53.560> called<01:51:53.880> it

storage. get item upright called it

storage. get item upright called it
cookie

cookie

cookie
foldback<01:51:57.159> is<01:51:57.560> triple<01:51:58.040> equal<01:51:58.320> to<01:51:58.880> a<01:51:59.040> string<01:51:59.480> of

foldback is triple equal to a string of

foldback is triple equal to a string of
an<01:51:59.800> empty<01:52:00.400> array<01:52:01.320> or<01:52:02.040> it's<01:52:02.360> a<01:52:02.560> local<01:52:03.000> storage.

an empty array or it's a local storage.

an empty array or it's a local storage.
getet<01:52:04.239> item<01:52:04.800> cookie<01:52:05.119> fullback<01:52:05.679> is<01:52:05.920> equal<01:52:06.199> to

getet item cookie fullback is equal to

getet item cookie fullback is equal to
null<01:52:07.400> in<01:52:07.599> that<01:52:07.840> case<01:52:08.320> we<01:52:08.480> simply<01:52:08.760> want<01:52:08.920> to

null in that case we simply want to

null in that case we simply want to
navigate<01:52:09.560> the<01:52:09.679> user<01:52:10.159> back<01:52:10.639> to<01:52:10.840> the<01:52:11.000> sign-in

navigate the user back to the sign-in

navigate the user back to the sign-in
screen<01:52:12.159> so<01:52:12.440> in<01:52:12.639> that<01:52:12.880> case<01:52:13.239> we<01:52:13.360> can<01:52:13.560> import<01:52:14.000> a

screen so in that case we can import a

screen so in that case we can import a
new<01:52:14.440> hook<01:52:14.880> at<01:52:15.040> the<01:52:15.360> top<01:52:16.639> import<01:52:17.639> use

new hook at the top import use

new hook at the top import use
navigate<01:52:20.280> which<01:52:20.400> is<01:52:20.560> coming<01:52:20.920> from<01:52:21.520> react

navigate which is coming from react

navigate which is coming from react
router<01:52:22.360> Dom<01:52:23.320> and<01:52:23.520> we<01:52:23.599> need<01:52:23.760> to<01:52:23.960> initialize<01:52:24.520> it

router Dom and we need to initialize it

router Dom and we need to initialize it
right<01:52:24.880> here<01:52:25.040> at<01:52:25.159> the<01:52:25.360> top<01:52:26.040> by<01:52:26.199> saying<01:52:26.560> cons

right here at the top by saying cons

right here at the top by saying cons
navigate<01:52:27.719> is<01:52:28.000> equal<01:52:28.239> to<01:52:28.400> use<01:52:28.880> navigate<01:52:29.880> and

navigate is equal to use navigate and

navigate is equal to use navigate and
now<01:52:30.239> we<01:52:30.360> can<01:52:30.560> call<01:52:30.800> it<01:52:31.520> navigate<01:52:32.040> to<01:52:33.079> SL<01:52:34.280> in<01:52:35.280> and

now we can call it navigate to SL in and

now we can call it navigate to SL in and
I<01:52:35.599> notied<01:52:35.960> that<01:52:36.079> I<01:52:36.199> didn't<01:52:36.480> close<01:52:37.000> the<01:52:37.159> local

I notied that I didn't close the local

I notied that I didn't close the local
storage.<01:52:38.079> getet<01:52:38.280> item<01:52:38.880> so<01:52:39.159> here<01:52:39.400> I'm<01:52:39.520> going<01:52:39.599> to

storage. getet item so here I'm going to

storage. getet item so here I'm going to
close<01:52:40.079> it<01:52:40.800> and<01:52:41.040> this<01:52:41.159> is<01:52:41.360> how<01:52:41.719> it's<01:52:41.920> supposed

close it and this is how it's supposed

close it and this is how it's supposed
to<01:52:42.360> look<01:52:42.560> like<01:52:43.320> finally<01:52:43.920> whenever<01:52:44.280> we<01:52:44.440> reload

to look like finally whenever we reload

to look like finally whenever we reload
the<01:52:45.000> page<01:52:45.520> we<01:52:45.599> want<01:52:45.760> to<01:52:46.040> recall<01:52:46.920> the<01:52:47.119> check<01:52:48.079> o

the page we want to recall the check o

the page we want to recall the check o
user<01:52:49.079> function<01:52:49.880> we<01:52:49.960> have<01:52:50.119> created<01:52:50.560> above<01:52:51.520> so

user function we have created above so

user function we have created above so
now<01:52:51.920> we<01:52:52.040> have<01:52:52.199> our<01:52:52.360> use<01:52:52.679> effect<01:52:53.119> we<01:52:53.239> have<01:52:53.360> our

now we have our use effect we have our

now we have our use effect we have our
check<01:52:53.800> off<01:52:54.119> user<01:52:54.840> we're<01:52:55.079> passing<01:52:55.520> all<01:52:55.679> of

check off user we're passing all of

check off user we're passing all of
these<01:52:56.079> as<01:52:56.320> values<01:52:57.159> and<01:52:57.360> we're<01:52:57.560> wrapping<01:52:58.040> our

these as values and we're wrapping our

these as values and we're wrapping our
entire<01:52:58.639> application<01:52:59.560> with<01:52:59.800> all<01:53:00.000> of<01:53:00.199> these

entire application with all of these

entire application with all of these
values<01:53:01.119> so<01:53:01.400> that<01:53:01.599> at<01:53:01.800> any<01:53:02.040> point<01:53:02.239> in<01:53:02.480> time<01:53:02.880> we

values so that at any point in time we

values so that at any point in time we
completely<01:53:04.000> understand<01:53:04.560> whether<01:53:04.840> our<01:53:05.000> user

completely understand whether our user

completely understand whether our user
is<01:53:05.440> logged<01:53:05.760> in<01:53:06.400> or<01:53:06.840> not<01:53:07.520> finally<01:53:08.079> we<01:53:08.199> can<01:53:08.480> also

is logged in or not finally we can also

is logged in or not finally we can also
export<01:53:09.639> right<01:53:09.800> here<01:53:09.920> at<01:53:10.040> the<01:53:10.199> bottom<01:53:11.159> export

export right here at the bottom export

export right here at the bottom export
const<01:53:12.599> use<01:53:13.599> user<01:53:14.520> context<01:53:15.360> this<01:53:15.480> is<01:53:15.599> going<01:53:15.760> to

const use user context this is going to

const use user context this is going to
make<01:53:16.040> it<01:53:16.199> simple<01:53:16.520> for<01:53:16.719> us<01:53:16.840> to<01:53:17.040> call<01:53:17.679> this

make it simple for us to call this

make it simple for us to call this
context<01:53:18.400> every<01:53:18.679> time<01:53:19.440> which<01:53:19.560> is<01:53:19.960> a<01:53:20.119> function

context every time which is a function

context every time which is a function
call<01:53:21.440> to<01:53:21.719> use<01:53:22.159> context<01:53:23.119> and<01:53:23.280> then<01:53:23.400> we<01:53:23.639> pass<01:53:23.880> in

call to use context and then we pass in

call to use context and then we pass in
the<01:53:24.679> O<01:53:25.440> context<01:53:26.440> great<01:53:27.400> so<01:53:27.679> now<01:53:28.239> we<01:53:28.360> have<01:53:28.560> this

the O context great so now we have this

the O context great so now we have this
phenomenal<01:53:29.520> context<01:53:30.400> and<01:53:30.639> I<01:53:30.719> notice<01:53:31.079> that

phenomenal context and I notice that

phenomenal context and I notice that
here<01:53:31.639> it<01:53:31.760> says<01:53:32.119> o<01:53:32.679> provider<01:53:33.400> which<01:53:33.520> is<01:53:33.679> not

here it says o provider which is not

here it says o provider which is not
really<01:53:34.159> used<01:53:35.000> we<01:53:35.119> have<01:53:35.239> to<01:53:35.480> export<01:53:35.920> it<01:53:36.159> right

really used we have to export it right

really used we have to export it right
here<01:53:36.880> export<01:53:37.480> default<01:53:38.199> o<01:53:38.639> provider<01:53:39.599> not<01:53:39.960> o

here export default o provider not o

here export default o provider not o
context<01:53:41.560> and<01:53:41.719> I<01:53:41.800> want<01:53:41.920> to<01:53:42.079> point<01:53:42.280> your

context and I want to point your

context and I want to point your
attention<01:53:42.719> to<01:53:43.079> something<01:53:44.079> this<01:53:44.400> is<01:53:44.560> a<01:53:44.800> complex

attention to something this is a complex

attention to something this is a complex
app<01:53:46.159> the<01:53:46.360> files<01:53:46.639> are<01:53:46.880> also<01:53:47.199> complex<01:53:47.639> there's<01:53:47.800> a

app the files are also complex there's a

app the files are also complex there's a
lot<01:53:48.079> of<01:53:48.280> logic<01:53:48.679> Happening<01:53:49.119> Here<01:53:49.760> and<01:53:49.960> although

lot of logic Happening Here and although

lot of logic Happening Here and although
I<01:53:50.360> try<01:53:50.599> to<01:53:50.760> explain<01:53:51.239> everything<01:53:51.599> to<01:53:51.800> the<01:53:52.000> best

I try to explain everything to the best

I try to explain everything to the best
of<01:53:52.360> my<01:53:52.520> ability<01:53:53.360> it's<01:53:53.639> possible<01:53:54.079> that<01:53:54.320> either

of my ability it's possible that either

of my ability it's possible that either
I<01:53:55.159> or<01:53:55.360> maybe<01:53:55.679> you<01:53:56.119> miss<01:53:56.400> something<01:53:57.040> it's<01:53:57.239> easy

I or maybe you miss something it's easy

I or maybe you miss something it's easy
to<01:53:57.719> make<01:53:57.840> a<01:53:58.000> typo<01:53:58.719> right<01:53:59.280> so<01:53:59.920> test<01:54:00.159> your

to make a typo right so test your

to make a typo right so test your
application<01:54:00.880> thoroughly<01:54:01.440> we're<01:54:01.560> going<01:54:01.679> to

application thoroughly we're going to

application thoroughly we're going to
test<01:54:02.000> it<01:54:02.280> together<01:54:02.599> after<01:54:02.880> we're<01:54:03.079> done<01:54:03.280> with

test it together after we're done with

test it together after we're done with
this<01:54:03.840> authentication<01:54:04.840> and<01:54:05.079> if<01:54:05.239> something

this authentication and if something

this authentication and if something
doesn't<01:54:05.880> work<01:54:06.480> the<01:54:06.679> complete<01:54:07.199> GitHub

doesn't work the complete GitHub

doesn't work the complete GitHub
repository<01:54:08.400> is<01:54:08.560> going<01:54:08.719> to<01:54:08.840> be<01:54:09.040> down<01:54:09.239> in<01:54:09.360> the

repository is going to be down in the

repository is going to be down in the
description<01:54:10.400> so<01:54:10.599> simply<01:54:10.920> refer<01:54:11.400> to<01:54:11.599> all<01:54:11.840> the

description so simply refer to all the

description so simply refer to all the
finished<01:54:12.360> files<01:54:13.159> and<01:54:13.320> simply<01:54:13.760> override<01:54:14.239> the

finished files and simply override the

finished files and simply override the
things<01:54:14.560> you<01:54:14.719> have<01:54:14.920> so<01:54:15.159> far<01:54:15.599> to<01:54:15.800> ensure<01:54:16.079> that

things you have so far to ensure that

things you have so far to ensure that
everything<01:54:16.599> is<01:54:16.840> good<01:54:17.199> and<01:54:17.360> if<01:54:17.440> you're<01:54:17.599> still

everything is good and if you're still

everything is good and if you're still
having<01:54:18.119> some<01:54:18.320> errors<01:54:19.040> or<01:54:19.239> disc<01:54:19.760> Community

having some errors or disc Community

having some errors or disc Community
Link<01:54:20.440> is<01:54:20.599> going<01:54:20.760> to<01:54:20.880> be<01:54:21.079> down<01:54:21.719> and<01:54:21.960> we<01:54:22.119> have<01:54:22.239> a

Link is going to be down and we have a

Link is going to be down and we have a
forum<01:54:23.000> specifically<01:54:23.480> for<01:54:23.719> this<01:54:23.880> video<01:54:24.480> for

forum specifically for this video for

forum specifically for this video for
everybody<01:54:25.199> to<01:54:25.400> assist<01:54:25.679> you<01:54:26.000> with<01:54:26.159> the

everybody to assist you with the

everybody to assist you with the
problems<01:54:26.599> you're<01:54:26.840> having<01:54:27.719> so<01:54:28.000> with<01:54:28.159> that<01:54:28.360> said

problems you're having so with that said

problems you're having so with that said
let's<01:54:29.280> now<01:54:29.520> utilize<01:54:30.320> this<01:54:30.480> odd<01:54:30.960> context

let's now utilize this odd context

let's now utilize this odd context
within<01:54:32.400> our<01:54:32.679> signup<01:54:33.280> form<01:54:34.280> right<01:54:34.520> here<01:54:34.880> we<01:54:35.000> can

within our signup form right here we can

within our signup form right here we can
say<01:54:35.480> const<01:54:36.360> is<01:54:36.840> logged<01:54:37.280> in<01:54:38.239> is<01:54:38.440> equal<01:54:38.760> to<01:54:39.239> a

say const is logged in is equal to a

say const is logged in is equal to a
wait<01:54:40.159> check<01:54:40.760> off<01:54:41.239> user<01:54:42.040> which<01:54:42.239> we<01:54:42.360> can<01:54:42.560> import

wait check off user which we can import

wait check off user which we can import
from<01:54:43.159> our<01:54:43.520> context<01:54:44.520> so<01:54:44.840> right<01:54:45.079> here<01:54:45.400> we<01:54:45.520> can

from our context so right here we can

from our context so right here we can
say<01:54:46.040> const<01:54:47.040> check<01:54:47.639> off<01:54:48.360> user<01:54:49.360> as<01:54:49.480> well<01:54:49.639> as<01:54:49.760> well

say const check off user as well as well

say const check off user as well as well
as<01:54:50.239> is<01:54:50.520> loading<01:54:51.480> which<01:54:51.639> we<01:54:51.760> can<01:54:51.920> rename<01:54:52.280> to<01:54:52.560> is

as is loading which we can rename to is

as is loading which we can rename to is
user<01:54:54.079> loading<01:54:55.079> is<01:54:55.320> equal<01:54:55.639> to<01:54:56.599> use<01:54:57.239> user

user loading is equal to use user

user loading is equal to use user
context<01:54:59.639> like<01:54:59.880> so<01:55:00.440> and<01:55:00.560> we<01:55:00.679> can<01:55:00.880> import<01:55:01.280> it

context like so and we can import it

context like so and we can import it
from<01:55:02.360> use<01:55:02.719> user<01:55:03.119> context<01:55:04.000> context<01:55:04.599> o<01:55:05.000> context

from use user context context o context

from use user context context o context
there<01:55:06.119> we<01:55:06.320> go<01:55:06.920> so<01:55:07.199> now<01:55:07.520> we're<01:55:07.719> calling<01:55:08.119> it<01:55:08.320> and

there we go so now we're calling it and

there we go so now we're calling it and
we're<01:55:08.599> getting<01:55:08.800> the<01:55:08.920> Boolean<01:55:09.520> value<01:55:09.960> back<01:55:10.679> is

we're getting the Boolean value back is

we're getting the Boolean value back is
logged<01:55:11.719> in<01:55:12.320> finally<01:55:13.119> what<01:55:13.280> we<01:55:13.400> want<01:55:13.520> to<01:55:13.719> do<01:55:14.239> is

logged in finally what we want to do is

logged in finally what we want to do is
if<01:55:15.440> is<01:55:15.840> logged<01:55:16.440> in<01:55:17.440> in<01:55:17.719> that<01:55:17.960> case<01:55:18.679> we<01:55:18.800> want<01:55:18.920> to

if is logged in in that case we want to

if is logged in in that case we want to
call<01:55:19.360> the<01:55:19.679> form.<01:55:20.360> reset<01:55:21.040> so<01:55:21.159> we<01:55:21.280> want<01:55:21.400> to<01:55:21.599> reset

call the form. reset so we want to reset

call the form. reset so we want to reset
the<01:55:22.079> form<01:55:22.840> and<01:55:23.000> we<01:55:23.119> want<01:55:23.239> to<01:55:23.360> call<01:55:23.639> that<01:55:23.800> same

the form and we want to call that same

the form and we want to call that same
navigate<01:55:24.840> remember<01:55:25.560> from<01:55:25.920> react<01:55:26.360> router<01:55:26.920> so

navigate remember from react router so

navigate remember from react router so
that's<01:55:27.320> going<01:55:27.480> to<01:55:27.760> be<01:55:28.199> link<01:55:28.920> but<01:55:29.119> also<01:55:29.520> use

that's going to be link but also use

that's going to be link but also use
navigate<01:55:32.639> and<01:55:32.800> we<01:55:32.960> Define<01:55:33.239> it<01:55:33.480> right<01:55:33.679> here

navigate and we Define it right here

navigate and we Define it right here
cons<01:55:35.199> navigate<01:55:36.199> is<01:55:36.480> equal<01:55:36.800> to<01:55:37.560> use

cons navigate is equal to use

cons navigate is equal to use
navigate<01:55:39.639> and<01:55:39.800> now<01:55:40.040> we<01:55:40.119> want<01:55:40.239> to<01:55:40.440> navigate<01:55:41.040> to

navigate and now we want to navigate to

navigate and now we want to navigate to
the<01:55:41.400> homepage<01:55:42.159> because<01:55:42.480> we<01:55:42.639> are<01:55:43.079> successfully

the homepage because we are successfully

the homepage because we are successfully
logged<01:55:44.400> in<01:55:45.159> so<01:55:45.320> we<01:55:45.440> can<01:55:45.560> say

logged in so we can say

logged in so we can say
navigate<01:55:47.760> to<01:55:48.320> forward<01:55:48.800> slash

navigate to forward slash

navigate to forward slash
else<01:55:50.960> if<01:55:51.079> we're<01:55:51.320> not<01:55:51.560> successfully<01:55:52.119> logged<01:55:52.440> in

else if we're not successfully logged in

else if we're not successfully logged in
we<01:55:53.400> can<01:55:53.599> again<01:55:53.840> show<01:55:54.199> a<01:55:54.400> toast<01:55:55.280> saying<01:55:55.880> sign<01:55:56.119> up

we can again show a toast saying sign up

we can again show a toast saying sign up
failed<01:55:57.040> please<01:55:57.280> try<01:55:57.679> again<01:55:58.400> and<01:55:58.520> we<01:55:58.599> can

failed please try again and we can

failed please try again and we can
immediately<01:55:59.880> return<01:56:00.119> it<01:56:00.840> and<01:56:01.159> this<01:56:01.719> is<01:56:01.840> our

immediately return it and this is our

immediately return it and this is our
onsubmit<01:56:02.719> function<01:56:03.719> a<01:56:03.880> lot<01:56:04.040> of<01:56:04.199> things<01:56:04.360> were

onsubmit function a lot of things were

onsubmit function a lot of things were
happening<01:56:05.000> in<01:56:05.159> the<01:56:05.280> meantime<01:56:06.159> we<01:56:06.320> worked<01:56:06.639> out

happening in the meantime we worked out

happening in the meantime we worked out
our<01:56:07.079> database<01:56:07.719> we<01:56:07.880> worked<01:56:08.159> out<01:56:08.360> our<01:56:08.639> react

our database we worked out our react

our database we worked out our react
query<01:56:09.920> ight<01:56:10.719> we<01:56:10.880> did<01:56:11.239> everything<01:56:12.079> also<01:56:12.360> we

query ight we did everything also we

query ight we did everything also we
created<01:56:12.880> contact<01:56:13.280> in<01:56:13.400> the<01:56:13.560> meantime<01:56:14.239> so<01:56:14.520> a<01:56:14.639> lot

created contact in the meantime so a lot

created contact in the meantime so a lot
of<01:56:14.960> stuff<01:56:15.199> has<01:56:15.360> happened<01:56:16.119> let's<01:56:16.360> go<01:56:16.520> ahead<01:56:17.119> and

of stuff has happened let's go ahead and

of stuff has happened let's go ahead and
test<01:56:17.599> it<01:56:17.800> out<01:56:18.560> so<01:56:18.719> we<01:56:18.800> can<01:56:18.960> go<01:56:19.119> back<01:56:19.280> through

test it out so we can go back through

test it out so we can go back through
application<01:56:20.560> I'm<01:56:20.719> sure<01:56:21.119> something's<01:56:21.520> going

application I'm sure something's going

application I'm sure something's going
to<01:56:21.760> be<01:56:21.920> broken<01:56:22.639> so<01:56:22.800> let's<01:56:23.000> go<01:56:23.119> to

inspect console and let's reload the

inspect console and let's reload the
page<01:56:29.679> as<01:56:29.800> you<01:56:29.880> can<01:56:30.040> see<01:56:30.560> it's<01:56:30.760> saying<01:56:31.639> that<01:56:31.800> we

page as you can see it's saying that we

page as you can see it's saying that we
have<01:56:32.079> an

have an

have an
error<01:56:34.320> in<01:56:34.520> the<01:56:34.679> signup<01:56:35.040> form<01:56:36.040> saying<01:56:36.320> that

error in the signup form saying that

error in the signup form saying that
there's<01:56:36.760> no<01:56:37.040> query<01:56:37.400> client<01:56:37.800> set<01:56:38.520> use<01:56:38.880> Query

there's no query client set use Query

there's no query client set use Query
client<01:56:39.679> provider<01:56:40.320> to<01:56:40.520> set<01:56:40.800> one<01:56:41.599> the<01:56:41.719> reason

client provider to set one the reason

client provider to set one the reason
why<01:56:42.159> we're<01:56:42.320> getting<01:56:42.560> this<01:56:42.719> error<01:56:43.400> is<01:56:43.679> because

why we're getting this error is because

why we're getting this error is because
we<01:56:44.079> didn't<01:56:44.480> actually<01:56:44.880> utilize<01:56:45.599> our<01:56:45.920> o<01:56:46.719> nor<01:56:47.199> our

we didn't actually utilize our o nor our

we didn't actually utilize our o nor our
react<01:56:47.880> query<01:56:48.400> in<01:56:48.520> our<01:56:48.800> app<01:56:49.280> with<01:56:49.480> we<01:56:49.560> simply

react query in our app with we simply

react query in our app with we simply
wrote<01:56:50.119> some<01:56:50.320> code<01:56:50.679> in<01:56:50.840> some<01:56:51.199> files<01:56:52.119> but<01:56:52.239> to

wrote some code in some files but to

wrote some code in some files but to
actually<01:56:52.920> utilize<01:56:53.400> it<01:56:53.880> we<01:56:54.000> have<01:56:54.119> to<01:56:54.320> go<01:56:54.679> way

actually utilize it we have to go way

actually utilize it we have to go way
back<01:56:55.560> to<01:56:55.760> our<01:56:56.000> source<01:56:57.079> main.<01:56:58.079> TSX<01:56:58.960> and<01:56:59.079> we<01:56:59.239> have

back to our source main. TSX and we have

back to our source main. TSX and we have
to<01:56:59.560> wrap<01:56:59.920> our<01:57:00.159> app<01:57:00.679> with<01:57:00.920> all<01:57:01.079> of<01:57:01.280> these

to wrap our app with all of these

to wrap our app with all of these
providers<01:57:02.840> so<01:57:03.159> first<01:57:03.599> let's<01:57:03.800> wrap<01:57:04.119> it<01:57:04.280> with

providers so first let's wrap it with

providers so first let's wrap it with
the<01:57:04.639> O<01:57:05.320> provider<01:57:06.320> which<01:57:06.440> is<01:57:06.599> coming<01:57:07.000> fromc

the O provider which is coming fromc

the O provider which is coming fromc
context<01:57:08.800> o<01:57:09.400> context<01:57:10.400> and<01:57:10.520> then<01:57:10.639> we<01:57:10.760> can<01:57:10.960> put

context o context and then we can put

context o context and then we can put
our<01:57:11.400> app<01:57:11.960> right<01:57:12.199> here<01:57:12.639> within<01:57:12.920> it<01:57:13.480> and

our app right here within it and

our app right here within it and
indented<01:57:14.679> properly<01:57:15.679> this<01:57:15.880> is<01:57:16.040> the<01:57:16.199> context<01:57:16.760> we

indented properly this is the context we

indented properly this is the context we
have<01:57:17.199> created<01:57:18.199> but<01:57:18.480> with<01:57:18.679> react<01:57:19.079> query<01:57:19.760> we

have created but with react query we

have created but with react query we
also<01:57:20.239> have<01:57:20.360> to<01:57:20.560> create<01:57:20.960> our<01:57:21.159> own<01:57:21.679> context<01:57:22.679> so

also have to create our own context so

also have to create our own context so
let's<01:57:23.159> go<01:57:23.360> into<01:57:23.920> lib<01:57:24.800> react<01:57:25.320> query<01:57:26.079> and<01:57:26.320> create

let's go into lib react query and create

let's go into lib react query and create
a<01:57:27.000> query<01:57:28.440> provider.

a query provider.

a query provider.
DSX<01:57:30.960> here<01:57:31.119> we<01:57:31.280> have<01:57:31.400> to<01:57:31.520> do<01:57:31.679> something<01:57:32.000> similar

DSX here we have to do something similar

DSX here we have to do something similar
we've<01:57:32.679> done<01:57:32.880> with<01:57:33.000> our<01:57:33.199> own<01:57:33.840> context<01:57:34.840> by

we've done with our own context by

we've done with our own context by
running

running

running
rafc<01:57:38.400> instead<01:57:38.679> of<01:57:38.800> a<01:57:39.000> default<01:57:39.679> export<01:57:40.199> we<01:57:40.320> can

rafc instead of a default export we can

rafc instead of a default export we can
simply<01:57:40.719> use<01:57:40.920> a<01:57:41.119> named<01:57:41.440> one<01:57:42.040> export<01:57:42.560> const

simply use a named one export const

simply use a named one export const
query<01:57:43.480> provider<01:57:44.320> we<01:57:44.560> also<01:57:44.920> get<01:57:45.159> the<01:57:45.280> children

query provider we also get the children

query provider we also get the children
right<01:57:46.199> here<01:57:47.079> because<01:57:47.320> we<01:57:47.400> need<01:57:47.560> to<01:57:47.639> show<01:57:47.920> the

right here because we need to show the

right here because we need to show the
entire<01:57:48.480> app<01:57:48.719> within<01:57:48.960> it<01:57:49.520> which<01:57:49.639> is<01:57:49.760> going<01:57:49.960> to

entire app within it which is going to

entire app within it which is going to
be<01:57:50.280> of<01:57:50.440> a<01:57:50.880> type<01:57:51.960> children<01:57:53.079> react.<01:57:54.079> react<01:57:55.119> node

be of a type children react. react node

be of a type children react. react node
like<01:57:56.320> so<01:57:57.280> we<01:57:57.440> can<01:57:57.599> also<01:57:57.880> just<01:57:58.079> import<01:57:58.560> react

like so we can also just import react

like so we can also just import react
node<01:57:59.599> at<01:57:59.760> the<01:57:59.960> top<01:58:00.639> that's<01:58:00.840> going<01:58:01.000> to<01:58:01.079> be<01:58:01.199> a<01:58:01.320> bit

node at the top that's going to be a bit

node at the top that's going to be a bit
simpler<01:58:01.880> so<01:58:02.000> we<01:58:02.079> can<01:58:02.679> destructure<01:58:03.679> react<01:58:04.119> node

simpler so we can destructure react node

simpler so we can destructure react node
from<01:58:05.119> react<01:58:06.119> and<01:58:06.320> now<01:58:06.599> it's<01:58:06.760> going<01:58:06.880> to<01:58:07.000> fit<01:58:07.159> in

from react and now it's going to fit in

from react and now it's going to fit in
one<01:58:07.560> line<01:58:08.440> and<01:58:08.599> then<01:58:08.800> we<01:58:08.920> need<01:58:09.079> to

one line and then we need to

one line and then we need to
return<01:58:11.239> query

return query

return query
client

client

client
provider<01:58:16.119> like<01:58:16.800> this<01:58:17.800> that<01:58:17.920> we<01:58:18.040> can<01:58:18.280> import

provider like this that we can import

provider like this that we can import
from<01:58:19.040> t<01:58:19.480> stack<01:58:19.840> react

from t stack react

from t stack react
query<01:58:22.480> it's<01:58:22.679> going<01:58:22.840> to<01:58:23.079> have<01:58:23.400> a<01:58:23.679> client

query it's going to have a client

query it's going to have a client
property<01:58:25.199> equal<01:58:25.480> to<01:58:25.719> query<01:58:26.480> client<01:58:27.199> which<01:58:27.400> is

property equal to query client which is

property equal to query client which is
once<01:58:27.800> again<01:58:28.079> coming<01:58:28.400> from<01:58:28.800> T<01:58:29.199> stack<01:58:29.599> react

once again coming from T stack react

once again coming from T stack react
query<01:58:30.560> so<01:58:30.719> we<01:58:30.800> can<01:58:30.960> import<01:58:31.320> it<01:58:31.719> at<01:58:31.840> the<01:58:32.079> top<01:58:33.079> and

query so we can import it at the top and

query so we can import it at the top and
I<01:58:33.400> believe<01:58:33.760> it<01:58:33.840> should<01:58:34.040> start<01:58:34.400> with<01:58:34.560> a

I believe it should start with a

I believe it should start with a
lowercase<01:58:35.440> letter<01:58:35.920> so<01:58:36.079> it's<01:58:36.199> a<01:58:36.360> query<01:58:36.840> client

lowercase letter so it's a query client

lowercase letter so it's a query client
like<01:58:37.840> so<01:58:38.480> and<01:58:38.639> it's<01:58:38.840> complaining<01:58:39.440> right<01:58:39.639> here

like so and it's complaining right here

like so and it's complaining right here
that's<01:58:40.400> because<01:58:40.639> we<01:58:40.800> have<01:58:40.960> to<01:58:41.520> set<01:58:41.719> up<01:58:42.000> a<01:58:42.159> new

that's because we have to set up a new

that's because we have to set up a new
instance<01:58:43.119> of<01:58:43.360> that<01:58:43.520> query<01:58:43.880> client<01:58:44.560> by<01:58:44.679> saying

instance of that query client by saying

instance of that query client by saying
const<01:58:45.440> query<01:58:45.800> client<01:58:46.360> with<01:58:46.520> a<01:58:46.639> lowercase<01:58:47.280> Q<01:58:48.000> is

const query client with a lowercase Q is

const query client with a lowercase Q is
equal<01:58:48.520> to<01:58:49.000> new<01:58:49.320> new<01:58:49.440> query<01:58:49.800> client<01:58:50.480> that<01:58:50.599> we

equal to new new query client that we

equal to new new query client that we
call<01:58:51.000> like<01:58:51.239> this<01:58:51.960> and<01:58:52.079> then<01:58:52.239> we<01:58:52.400> pass<01:58:52.639> the

call like this and then we pass the

call like this and then we pass the
lowercase<01:58:53.360> one<01:58:53.960> right<01:58:54.199> here<01:58:55.000> and<01:58:55.239> finally<01:58:55.679> we

lowercase one right here and finally we

lowercase one right here and finally we
can<01:58:55.920> render<01:58:56.239> the<01:58:56.400> children<01:58:57.040> right<01:58:57.280> here<01:58:58.119> this

can render the children right here this

can render the children right here this
is<01:58:58.400> similar<01:58:58.719> to<01:58:58.880> our<01:58:59.040> own<01:58:59.440> context<01:59:00.000> we<01:59:00.119> have

is similar to our own context we have

is similar to our own context we have
created<01:59:00.800> before<01:59:01.800> so<01:59:02.040> now<01:59:02.280> going<01:59:02.599> back<01:59:02.719> to<01:59:02.880> our

created before so now going back to our

created before so now going back to our
main<01:59:03.560> alongside<01:59:04.119> wrapping<01:59:04.480> it<01:59:04.599> in<01:59:04.719> the<01:59:04.880> O

main alongside wrapping it in the O

main alongside wrapping it in the O
provider<01:59:05.960> we<01:59:06.040> can<01:59:06.280> also<01:59:06.599> wrap<01:59:06.880> it<01:59:07.079> in<01:59:07.280> the

provider we can also wrap it in the

provider we can also wrap it in the
query

query

query
provider<01:59:10.040> which<01:59:10.159> is<01:59:10.320> coming<01:59:10.599> from<01:59:10.880> lib<01:59:11.360> react

provider which is coming from lib react

provider which is coming from lib react
query<01:59:12.400> query

query query

query query
provider<01:59:15.159> and<01:59:15.320> we<01:59:15.400> can<01:59:15.639> put<01:59:16.079> all<01:59:16.239> of<01:59:16.480> this

provider and we can put all of this

provider and we can put all of this
within<01:59:17.639> it<01:59:18.639> and<01:59:18.880> in<01:59:19.079> then<01:59:19.440> it<01:59:19.719> properly<01:59:20.719> so<01:59:20.920> now

within it and in then it properly so now

within it and in then it properly so now
we're<01:59:21.360> properly<01:59:21.719> wrapping<01:59:22.079> our<01:59:22.320> app<01:59:22.560> with

we're properly wrapping our app with

we're properly wrapping our app with
everything<01:59:23.159> we<01:59:23.280> need<01:59:23.840> and<01:59:24.000> we<01:59:24.119> can<01:59:24.360> again

everything we need and we can again

everything we need and we can again
check<01:59:24.920> the<01:59:25.239> errors<01:59:26.239> now<01:59:26.480> the<01:59:26.599> error<01:59:26.840> is<01:59:26.960> saying

check the errors now the error is saying

check the errors now the error is saying
that<01:59:27.520> is<01:59:27.800> creating<01:59:28.199> user<01:59:28.800> is<01:59:29.000> not<01:59:29.280> defined<01:59:30.159> add

that is creating user is not defined add

that is creating user is not defined add
signup<01:59:30.920> form<01:59:31.800> so<01:59:32.119> let's<01:59:32.360> go<01:59:32.480> to<01:59:32.639> our<01:59:32.840> signup

signup form so let's go to our signup

signup form so let's go to our signup
form<01:59:34.920> and<01:59:35.079> let's<01:59:35.320> search<01:59:35.639> for<01:59:36.360> is<01:59:36.639> creating

form and let's search for is creating

form and let's search for is creating
user<01:59:39.079> that<01:59:39.280> is<01:59:39.560> creating<01:59:39.920> user<01:59:40.480> is<01:59:40.639> coming

user that is creating user is coming

user that is creating user is coming
right<01:59:41.440> here<01:59:42.199> from<01:59:42.520> our<01:59:42.960> use<01:59:43.520> create<01:59:43.960> user

right here from our use create user

right here from our use create user
account<01:59:45.679> so<01:59:46.119> why<01:59:46.480> would<01:59:46.679> this<01:59:46.880> is<01:59:47.159> loading<01:59:47.639> not

account so why would this is loading not

account so why would this is loading not
be<01:59:48.239> there<01:59:49.079> if<01:59:49.239> it's<01:59:49.480> actually<01:59:49.719> saying<01:59:50.040> that

be there if it's actually saying that

be there if it's actually saying that
it's<01:59:50.360> not<01:59:50.520> returning<01:59:51.079> the<01:59:51.199> is<01:59:51.360> loading

it's not returning the is loading

it's not returning the is loading
property<01:59:53.400> well<01:59:53.719> this<01:59:53.840> is<01:59:54.000> coming<01:59:54.280> from<01:59:54.560> use

property well this is coming from use

property well this is coming from use
create<01:59:55.360> user<01:59:55.960> account<01:59:56.960> and<01:59:57.320> that<01:59:57.800> is<01:59:58.079> a

create user account and that is a

create user account and that is a
mutation<01:59:58.880> from<01:59:59.119> react<01:59:59.760> query<02:00:00.760> so<02:00:01.239> let's<02:00:01.480> go

mutation from react query so let's go

mutation from react query so let's go
ahead<02:00:01.960> and<02:00:02.280> check<02:00:02.560> out<02:00:02.960> our<02:00:03.520> package

ahead and check out our package

ahead and check out our package
Json<02:00:06.040> and<02:00:06.679> would<02:00:06.880> you<02:00:07.119> look<02:00:07.360> at<02:00:07.599> that<02:00:08.360> tanac

Json and would you look at that tanac

Json and would you look at that tanac
just<02:00:09.599> recently<02:00:10.400> changed<02:00:10.920> its<02:00:11.159> version<02:00:11.560> to

just recently changed its version to

just recently changed its version to
version

version

version
5.0.0<02:00:14.599> and<02:00:14.840> When<02:00:15.040> developing<02:00:15.560> these<02:00:15.800> projects

5.0.0 and When developing these projects

5.0.0 and When developing these projects
for<02:00:16.320> JSM<02:00:17.199> they<02:00:17.400> take<02:00:17.719> a<02:00:17.880> couple<02:00:18.079> of<02:00:18.280> weeks<02:00:18.679> up

for JSM they take a couple of weeks up

for JSM they take a couple of weeks up
to<02:00:18.920> a<02:00:19.239> couple<02:00:19.440> of<02:00:19.679> months<02:00:20.040> to<02:00:20.320> create<02:00:21.199> so<02:00:21.480> it's

to a couple of months to create so it's

to a couple of months to create so it's
possible<02:00:22.360> that<02:00:22.520> our<02:00:22.719> development<02:00:23.320> version<02:00:23.880> is

possible that our development version is

possible that our development version is
using<02:00:24.360> an<02:00:24.599> older<02:00:25.199> version<02:00:25.639> of<02:00:25.960> react<02:00:26.599> query

using an older version of react query

using an older version of react query
this<02:00:27.719> is<02:00:27.920> actually<02:00:28.239> quite<02:00:28.480> exciting<02:00:28.840> for<02:00:29.000> you

this is actually quite exciting for you

this is actually quite exciting for you
right<02:00:29.440> now<02:00:29.840> because<02:00:30.239> we're<02:00:30.400> going<02:00:30.480> to<02:00:30.639> do<02:00:30.840> some

right now because we're going to do some

right now because we're going to do some
live<02:00:31.560> debugging<02:00:32.560> we're<02:00:32.719> going<02:00:32.800> to<02:00:33.040> go<02:00:33.280> over

live debugging we're going to go over

live debugging we're going to go over
the<02:00:33.760> documentation<02:00:34.520> of<02:00:34.679> the<02:00:34.800> new<02:00:35.000> version<02:00:35.880> and

the documentation of the new version and

the documentation of the new version and
I'm<02:00:36.159> going<02:00:36.280> to<02:00:36.480> show<02:00:36.760> you<02:00:37.440> how<02:00:37.679> you<02:00:37.800> would<02:00:38.040> deal

I'm going to show you how you would deal

I'm going to show you how you would deal
with<02:00:38.800> this<02:00:39.000> error<02:00:39.599> if<02:00:39.719> you're<02:00:39.960> following<02:00:40.400> a

with this error if you're following a

with this error if you're following a
video<02:00:41.199> and<02:00:41.440> something<02:00:41.840> got<02:00:42.360> outdated<02:00:43.360> so<02:00:43.520> the

video and something got outdated so the

video and something got outdated so the
first<02:00:43.920> thing<02:00:44.040> you<02:00:44.159> have<02:00:44.280> to<02:00:44.440> do<02:00:44.840> is<02:00:45.040> go<02:00:45.199> to<02:00:45.360> the

first thing you have to do is go to the

first thing you have to do is go to the
library<02:00:45.920> we're<02:00:46.119> using<02:00:46.920> and<02:00:47.040> then<02:00:47.239> go<02:00:47.440> to<02:00:47.599> the

library we're using and then go to the

library we're using and then go to the
docs<02:00:48.719> in<02:00:48.880> this<02:00:49.159> this<02:00:49.280> case<02:00:49.440> we're<02:00:49.599> wondering

docs in this this case we're wondering

docs in this this case we're wondering
about<02:00:50.280> the<02:00:50.440> loading<02:00:51.040> so<02:00:51.199> if<02:00:51.320> I<02:00:51.440> search<02:00:51.719> for<02:00:52.000> is

about the loading so if I search for is

about the loading so if I search for is
loading<02:00:53.400> no<02:00:53.880> nothing<02:00:54.239> is<02:00:54.560> here<02:00:55.239> but<02:00:55.400> if<02:00:55.520> I

loading no nothing is here but if I

loading no nothing is here but if I
search<02:00:55.920> for<02:00:56.199> just<02:00:56.400> loading<02:00:57.079> itself<02:00:58.079> we<02:00:58.159> can

search for just loading itself we can

search for just loading itself we can
see<02:00:58.560> displaying<02:00:59.199> Global<02:00:59.639> background

see displaying Global background

see displaying Global background
fetching<02:01:00.520> loading<02:01:01.199> State<02:01:02.199> maybe<02:01:02.520> that's

fetching loading State maybe that's

fetching loading State maybe that's
useful<02:01:04.000> now<02:01:04.320> we<02:01:04.440> can<02:01:04.560> see<02:01:04.719> that<02:01:04.880> this<02:01:04.960> is<02:01:05.159> for

useful now we can see that this is for

useful now we can see that this is for
Global<02:01:06.079> fetching<02:01:06.800> right<02:01:07.400> but<02:01:07.599> we<02:01:07.719> want<02:01:07.840> to<02:01:08.040> see

Global fetching right but we want to see

Global fetching right but we want to see
maybe<02:01:09.040> use<02:01:09.520> is<02:01:09.880> fetching<02:01:10.679> no<02:01:11.199> let's<02:01:11.360> see<02:01:11.520> if<02:01:11.639> I

maybe use is fetching no let's see if I

maybe use is fetching no let's see if I
can<02:01:11.960> find<02:01:12.239> anything<02:01:12.639> useful<02:01:13.639> now<02:01:14.639> no<02:01:15.079> this<02:01:15.199> is

can find anything useful now no this is

can find anything useful now no this is
not<02:01:15.679> that<02:01:15.840> useful<02:01:16.560> let's<02:01:16.760> see<02:01:17.119> a<02:01:17.400> quick<02:01:17.639> start

not that useful let's see a quick start

not that useful let's see a quick start
here<02:01:18.679> we<02:01:18.800> can<02:01:19.159> use<02:01:19.440> the<02:01:19.599> use<02:01:20.239> mutation<02:01:21.239> they

here we can use the use mutation they

here we can use the use mutation they
are<02:01:21.639> creating<02:01:22.360> everything<02:01:22.679> we<02:01:22.840> discussed<02:01:23.280> in

are creating everything we discussed in

are creating everything we discussed in
this<02:01:23.599> video<02:01:24.079> creating<02:01:24.520> a<02:01:24.679> new<02:01:24.920> query<02:01:25.480> client

this video creating a new query client

this video creating a new query client
using<02:01:26.840> that<02:01:27.079> query<02:01:27.400> client<02:01:27.840> and<02:01:28.000> using<02:01:28.440> one

using that query client and using one

using that query client and using one
mutation<02:01:29.760> exactly<02:01:30.320> as<02:01:30.520> we<02:01:30.960> are<02:01:31.960> but<02:01:32.119> in<02:01:32.320> this

mutation exactly as we are but in this

mutation exactly as we are but in this
case<02:01:32.800> I<02:01:32.880> don't<02:01:33.040> see<02:01:33.239> there're<02:01:33.440> using<02:01:33.760> the

case I don't see there're using the

case I don't see there're using the
loading<02:01:34.639> so<02:01:34.840> let's<02:01:35.119> go<02:01:35.480> a<02:01:35.639> bit<02:01:35.840> more<02:01:36.119> in<02:01:36.360> depth

loading so let's go a bit more in depth

loading so let's go a bit more in depth
into<02:01:36.840> the<02:01:37.320> overview<02:01:38.320> and<02:01:38.480> there<02:01:38.639> we<02:01:38.800> go<02:01:39.199> here

into the overview and there we go here

into the overview and there we go here
the<02:01:39.560> user<02:01:39.880> query<02:01:40.599> and<02:01:40.840> it<02:01:41.040> indeed<02:01:41.719> is<02:01:42.079> using

the user query and it indeed is using

the user query and it indeed is using
the<02:01:42.719> is<02:01:43.079> loading<02:01:43.480> property<02:01:44.280> but<02:01:44.480> this<02:01:44.560> is<02:01:44.719> a

the is loading property but this is a

the is loading property but this is a
query<02:01:45.520> and<02:01:45.760> not<02:01:46.000> a<02:01:46.199> mutation<02:01:47.040> we<02:01:47.159> have<02:01:47.280> to

query and not a mutation we have to

query and not a mutation we have to
differentiate<02:01:48.000> the<02:01:48.159> query<02:01:48.480> from<02:01:48.639> a<02:01:48.760> mutation

differentiate the query from a mutation

differentiate the query from a mutation
mutation<02:01:49.880> so<02:01:50.079> maybe<02:01:50.320> we<02:01:50.440> want<02:01:50.520> to<02:01:50.679> read<02:01:50.880> a<02:01:51.040> bit

mutation so maybe we want to read a bit

mutation so maybe we want to read a bit
more<02:01:51.960> about<02:01:52.280> the<02:01:52.440> mutation<02:01:53.400> so<02:01:53.560> let's<02:01:53.840> go<02:01:54.079> into

more about the mutation so let's go into

more about the mutation so let's go into
mutations<02:01:56.079> and<02:01:56.239> let's<02:01:56.400> see<02:01:56.560> how<02:01:56.800> that

mutations and let's see how that

mutations and let's see how that
works<02:01:58.920> so<02:01:59.199> we<02:01:59.320> can<02:01:59.480> use<02:01:59.679> a<02:01:59.880> mutation<02:02:00.719> and

works so we can use a mutation and

works so we can use a mutation and
apparently<02:02:02.360> there<02:02:02.639> is<02:02:02.920> a<02:02:03.119> mutation<02:02:03.719> that<02:02:04.000> is

apparently there is a mutation that is

apparently there is a mutation that is
loading<02:02:05.199> also<02:02:05.480> the<02:02:05.639> is<02:02:05.920> error<02:02:06.480> and<02:02:06.760> is

loading also the is error and is

loading also the is error and is
Success<02:02:09.000> so<02:02:09.199> let's<02:02:09.440> compare<02:02:09.840> the<02:02:09.960> two<02:02:10.920> con

Success so let's compare the two con

Success so let's compare the two con
mutation<02:02:12.199> is<02:02:12.400> equal<02:02:12.679> to<02:02:12.840> use<02:02:13.280> mutation<02:02:14.280> and

mutation is equal to use mutation and

mutation is equal to use mutation and
they<02:02:14.639> use<02:02:14.840> it<02:02:15.079> directly<02:02:15.639> right<02:02:15.840> here<02:02:16.040> within

they use it directly right here within

they use it directly right here within
the<02:02:16.440> code<02:02:17.400> oh<02:02:17.639> this<02:02:17.760> is<02:02:17.920> interesting<02:02:18.599> so

the code oh this is interesting so

the code oh this is interesting so
unlike<02:02:19.520> queries<02:02:20.320> mutations<02:02:20.880> are<02:02:21.119> typically

unlike queries mutations are typically

unlike queries mutations are typically
used<02:02:21.719> to<02:02:21.960> create<02:02:22.560> update<02:02:23.000> delete<02:02:23.480> data<02:02:24.000> or

used to create update delete data or

used to create update delete data or
perform<02:02:25.159> side<02:02:25.440> effects<02:02:26.320> for<02:02:26.560> this<02:02:26.760> purpose

perform side effects for this purpose

perform side effects for this purpose
stack<02:02:27.800> query<02:02:28.320> exports<02:02:28.840> a<02:02:29.040> used<02:02:29.360> mutation<02:02:30.040> hook

stack query exports a used mutation hook

stack query exports a used mutation hook
but<02:02:31.239> I<02:02:31.360> just<02:02:31.480> figured<02:02:31.800> out<02:02:32.000> I'm<02:02:32.159> reading<02:02:32.480> the

but I just figured out I'm reading the

but I just figured out I'm reading the
V4<02:02:33.320> docs<02:02:34.040> we<02:02:34.159> want<02:02:34.280> to<02:02:34.440> redirect<02:02:34.880> to<02:02:35.040> the

V4 docs we want to redirect to the

V4 docs we want to redirect to the
latest<02:02:35.800> version<02:02:36.800> oh<02:02:37.360> there<02:02:37.520> we<02:02:37.679> go<02:02:38.159> can<02:02:38.280> you

latest version oh there we go can you

latest version oh there we go can you
see<02:02:38.520> the<02:02:38.920> difference<02:02:39.920> mutation<02:02:40.639> that<02:02:40.960> is

see the difference mutation that is

see the difference mutation that is
pending<02:02:42.239> and<02:02:42.440> not<02:02:42.760> is<02:02:43.400> loading<02:02:44.400> okay<02:02:45.040> okay<02:02:45.480> I

pending and not is loading okay okay I

pending and not is loading okay okay I
get<02:02:45.760> it<02:02:46.360> maybe<02:02:46.599> they<02:02:46.719> wanted<02:02:46.920> to<02:02:47.079> make<02:02:47.199> a

get it maybe they wanted to make a

get it maybe they wanted to make a
change<02:02:47.639> from<02:02:47.800> the<02:02:47.960> query<02:02:48.440> so<02:02:48.599> in<02:02:48.679> the<02:02:48.960> query

change from the query so in the query

change from the query so in the query
right<02:02:49.599> here<02:02:50.440> once<02:02:50.599> we<02:02:50.760> try<02:02:50.960> to<02:02:51.119> call<02:02:51.400> it<02:02:51.920> yeah

right here once we try to call it yeah

right here once we try to call it yeah
they're<02:02:52.280> also<02:02:52.480> calling<02:02:52.840> it<02:02:53.000> is<02:02:53.239> pending<02:02:53.960> so

they're also calling it is pending so

they're also calling it is pending so
kind<02:02:54.280> of<02:02:54.480> waiting<02:02:54.840> for<02:02:55.079> something<02:02:55.480> not

kind of waiting for something not

kind of waiting for something not
loading<02:02:56.480> but<02:02:56.920> pending<02:02:57.520> right<02:02:58.520> okay<02:02:58.960> okay<02:02:59.159> I'm

loading but pending right okay okay I'm

loading but pending right okay okay I'm
going<02:02:59.360> to<02:02:59.480> give<02:02:59.599> it<02:02:59.719> to<02:02:59.920> them<02:03:00.360> but<02:03:00.840> now<02:03:01.119> if<02:03:01.239> we

going to give it to them but now if we

going to give it to them but now if we
go<02:03:01.599> back<02:03:01.719> to<02:03:01.840> our<02:03:02.440> application<02:03:03.440> and<02:03:03.719> go<02:03:04.000> back

go back to our application and go back

go back to our application and go back
here<02:03:04.960> and<02:03:05.119> simply<02:03:05.440> use<02:03:05.840> is<02:03:06.199> pending<02:03:07.119> instead

here and simply use is pending instead

here and simply use is pending instead
of<02:03:07.560> is<02:03:07.760> loading<02:03:08.639> you<02:03:08.760> can<02:03:08.920> see<02:03:09.480> it<02:03:09.760> actually

of is loading you can see it actually

of is loading you can see it actually
works<02:03:11.280> this<02:03:11.400> is<02:03:11.599> amazing<02:03:12.480> so<02:03:12.679> now<02:03:12.920> if<02:03:13.040> I<02:03:13.199> save

works this is amazing so now if I save

works this is amazing so now if I save
the<02:03:14.000> file<02:03:15.000> and<02:03:15.199> reload<02:03:15.599> the<02:03:16.199> page<02:03:17.199> everything

the file and reload the page everything

the file and reload the page everything
seems<02:03:17.960> good<02:03:18.639> but<02:03:18.960> it's<02:03:19.040> saying<02:03:19.320> is<02:03:19.560> creating

seems good but it's saying is creating

seems good but it's saying is creating
user<02:03:20.239> is<02:03:20.400> not<02:03:20.639> defined<02:03:21.639> I<02:03:21.719> think<02:03:21.880> we<02:03:22.000> called<02:03:22.280> it

user is not defined I think we called it

user is not defined I think we called it
is<02:03:22.760> creating<02:03:23.239> account<02:03:24.239> so<02:03:24.400> let's<02:03:24.599> simply<02:03:24.960> copy

is creating account so let's simply copy

is creating account so let's simply copy
is<02:03:25.520> creating<02:03:26.079> account<02:03:27.079> move<02:03:27.400> all<02:03:27.639> the<02:03:27.760> way

is creating account move all the way

is creating account move all the way
down<02:03:28.719> and<02:03:28.880> then<02:03:29.079> modify<02:03:29.560> it<02:03:30.560> and<02:03:30.760> now<02:03:31.000> we're

down and then modify it and now we're

down and then modify it and now we're
back<02:03:31.440> to<02:03:31.599> our<02:03:31.840> sign<02:03:32.119> in<02:03:32.440> form<02:03:33.119> which<02:03:33.239> means<02:03:33.480> we

back to our sign in form which means we

back to our sign in form which means we
were

were

were
redirected<02:03:35.400> let's<02:03:35.599> try<02:03:35.800> to<02:03:36.000> close<02:03:36.280> and<02:03:36.800> reload

redirected let's try to close and reload

redirected let's try to close and reload
okay<02:03:38.000> no<02:03:38.199> errors<02:03:38.679> that's<02:03:38.960> good<02:03:39.520> but<02:03:39.679> let's<02:03:39.920> go

okay no errors that's good but let's go

okay no errors that's good but let's go
back<02:03:40.599> to<02:03:40.800> the<02:03:41.000> sign<02:03:41.400> up<02:03:41.679> form<02:03:42.360> that's<02:03:42.559> what<02:03:42.679> we

back to the sign up form that's what we

back to the sign up form that's what we
were<02:03:42.960> working<02:03:43.239> on<02:03:43.520> this<02:03:43.719> entire

were working on this entire

were working on this entire
time<02:03:45.760> okay<02:03:45.960> this<02:03:46.079> is<02:03:46.239> interesting<02:03:46.719> so<02:03:47.040> every

time okay this is interesting so every

time okay this is interesting so every
time<02:03:47.559> we<02:03:47.760> go<02:03:48.040> back<02:03:48.199> to<02:03:48.400> sign<02:03:48.639> up<02:03:49.000> it<02:03:49.199> redirects

time we go back to sign up it redirects

time we go back to sign up it redirects
us<02:03:50.040> back<02:03:50.239> to<02:03:50.480> sign

us back to sign

us back to sign
in<02:03:52.840> I'm<02:03:53.000> guessing<02:03:53.360> that's<02:03:53.599> because<02:03:53.840> it<02:03:54.040> thinks

in I'm guessing that's because it thinks

in I'm guessing that's because it thinks
we<02:03:54.480> have<02:03:54.679> already<02:03:55.079> created<02:03:55.400> a<02:03:55.559> user<02:03:56.520> so<02:03:56.840> what

we have already created a user so what

we have already created a user so what
we<02:03:57.079> can<02:03:57.239> do<02:03:57.760> is<02:03:58.000> just<02:03:58.239> go<02:03:58.520> back<02:03:58.840> here<02:03:59.639> go<02:03:59.800> to<02:04:00.000> the

we can do is just go back here go to the

we can do is just go back here go to the
application<02:04:00.840> Tab<02:04:01.639> and<02:04:01.800> check<02:04:02.119> our<02:04:02.440> local

application Tab and check our local

application Tab and check our local
storage<02:04:04.159> it<02:04:04.280> seems<02:04:04.520> to<02:04:04.639> be<02:04:04.880> empty<02:04:05.679> as<02:04:05.840> well<02:04:06.079> as

storage it seems to be empty as well as

storage it seems to be empty as well as
the<02:04:06.360> session<02:04:06.840> storage<02:04:07.840> so<02:04:08.040> the<02:04:08.239> question<02:04:08.599> is

the session storage so the question is

the session storage so the question is
why<02:04:09.320> are<02:04:09.480> we<02:04:09.639> getting

why are we getting

why are we getting
redirected<02:04:11.800> the<02:04:11.920> only<02:04:12.320> place<02:04:12.599> where<02:04:12.920> this

redirected the only place where this

redirected the only place where this
could<02:04:13.320> occur<02:04:14.119> is<02:04:14.360> the<02:04:14.599> place<02:04:15.320> that<02:04:15.639> happens<02:04:16.079> as

could occur is the place that happens as

could occur is the place that happens as
soon<02:04:16.360> as<02:04:16.520> we<02:04:16.639> load<02:04:16.920> the<02:04:17.159> page<02:04:17.960> do<02:04:18.119> you<02:04:18.239> know

soon as we load the page do you know

soon as we load the page do you know
such<02:04:18.920> place<02:04:19.920> I<02:04:20.119> think<02:04:20.599> that's<02:04:20.800> going<02:04:20.960> to<02:04:21.119> be

such place I think that's going to be

such place I think that's going to be
our<02:04:21.559> odd<02:04:22.280> context<02:04:23.280> here<02:04:23.679> we<02:04:23.840> have<02:04:23.960> a<02:04:24.119> use

our odd context here we have a use

our odd context here we have a use
effect<02:04:25.199> and<02:04:25.520> here<02:04:25.960> we<02:04:26.119> navigate<02:04:26.800> to<02:04:27.000> sign

effect and here we navigate to sign

effect and here we navigate to sign
in<02:04:28.880> so<02:04:29.239> right<02:04:29.400> in<02:04:29.639> here<02:04:30.040> for<02:04:30.360> now<02:04:30.719> we're<02:04:30.920> going

in so right in here for now we're going

in so right in here for now we're going
to<02:04:31.320> comment<02:04:31.760> out<02:04:32.239> this<02:04:32.440> second<02:04:32.800> line<02:04:33.360> and<02:04:33.520> we

to comment out this second line and we

to comment out this second line and we
can<02:04:33.800> put<02:04:33.920> it<02:04:34.239> right<02:04:34.400> here<02:04:34.639> above<02:04:35.520> and<02:04:35.920> save<02:04:36.199> it

can put it right here above and save it

can put it right here above and save it
and<02:04:37.119> remove<02:04:37.599> this<02:04:37.840> or<02:04:38.280> sign<02:04:39.199> if<02:04:39.320> we<02:04:39.480> do<02:04:39.760> this

and remove this or sign if we do this

and remove this or sign if we do this
and<02:04:40.559> now<02:04:40.920> if<02:04:41.040> we<02:04:41.199> go<02:04:41.400> to<02:04:41.719> sign<02:04:42.639> up<02:04:43.639> you<02:04:43.760> can<02:04:43.920> see

and now if we go to sign up you can see

and now if we go to sign up you can see
it's<02:04:44.440> no<02:04:44.599> longer<02:04:44.920> going<02:04:45.079> to<02:04:45.280> redirect<02:04:45.920> us

it's no longer going to redirect us

it's no longer going to redirect us
everything<02:04:46.800> is<02:04:47.159> working<02:04:48.159> and<02:04:48.320> there<02:04:48.440> we<02:04:48.599> go<02:04:48.880> go

everything is working and there we go go

everything is working and there we go go
we<02:04:49.520> can<02:04:49.840> finally<02:04:50.280> see<02:04:51.000> our<02:04:51.280> signup<02:04:51.760> screen

we can finally see our signup screen

we can finally see our signup screen
we've<02:04:52.520> been<02:04:52.719> working<02:04:53.079> on<02:04:53.480> for<02:04:53.760> such<02:04:53.960> a<02:04:54.119> long

we've been working on for such a long

we've been working on for such a long
time<02:04:55.199> but<02:04:55.360> if<02:04:55.480> you<02:04:55.679> think<02:04:55.920> about<02:04:56.159> it<02:04:56.520> we

time but if you think about it we

time but if you think about it we
weren't<02:04:57.159> working<02:04:57.480> on<02:04:57.639> just<02:04:57.800> the<02:04:57.960> signup

weren't working on just the signup

weren't working on just the signup
screen<02:04:59.040> we<02:04:59.159> were<02:04:59.400> working<02:04:59.800> on<02:05:00.320> everything

screen we were working on everything

screen we were working on everything
else<02:05:01.400> we'll<02:05:01.679> need<02:05:02.000> for<02:05:02.320> the<02:05:02.599> entirety<02:05:03.440> of<02:05:03.599> our

else we'll need for the entirety of our

else we'll need for the entirety of our
application<02:05:04.880> so<02:05:05.159> now<02:05:05.599> if<02:05:05.719> we<02:05:05.880> go<02:05:06.079> back<02:05:06.239> to<02:05:06.360> our

application so now if we go back to our

application so now if we go back to our
signup<02:05:06.880> form<02:05:07.639> we<02:05:07.840> know<02:05:08.320> what<02:05:08.480> needs<02:05:08.760> to<02:05:09.440> happen

signup form we know what needs to happen

signup form we know what needs to happen
after<02:05:10.679> we<02:05:10.840> successfully<02:05:11.440> create<02:05:11.719> an<02:05:11.920> account

after we successfully create an account

after we successfully create an account
we're<02:05:12.719> going<02:05:12.800> to<02:05:12.920> create<02:05:13.159> a<02:05:13.320> session<02:05:14.199> add<02:05:14.400> that

we're going to create a session add that

we're going to create a session add that
to<02:05:14.679> the<02:05:14.760> user<02:05:15.199> context<02:05:16.199> and<02:05:16.400> then<02:05:16.840> navigate<02:05:17.440> to

to the user context and then navigate to

to the user context and then navigate to
the<02:05:17.800> homepage<02:05:18.760> so<02:05:18.920> let's<02:05:19.119> see<02:05:19.639> if<02:05:19.880> that<02:05:20.360> works

the homepage so let's see if that works

the homepage so let's see if that works
let's<02:05:21.639> try<02:05:22.119> with<02:05:22.520> something<02:05:23.040> like<02:05:23.760> the<02:05:24.199> real

let's try with something like the real

let's try with something like the real
JSM<02:05:26.480> we<02:05:26.599> can<02:05:26.840> also<02:05:27.040> do<02:05:27.239> that<02:05:27.520> right<02:05:27.719> here<02:05:28.079> the

JSM we can also do that right here the

JSM we can also do that right here the
real<02:05:28.800> JSM<02:05:29.800> the<02:05:30.000> email<02:05:30.400> can<02:05:30.559> be<02:05:30.840> something<02:05:31.320> like

real JSM the email can be something like

real JSM the email can be something like
let's<02:05:31.880> do<02:05:32.320> Adrien<02:05:33.320> JSM<02:05:33.800> mastery.<02:05:34.559> proo<02:05:35.239> and<02:05:35.480> we

let's do Adrien JSM mastery. proo and we

let's do Adrien JSM mastery. proo and we
can<02:05:35.760> choose<02:05:36.199> a<02:05:36.440> specific<02:05:36.960> password<02:05:37.599> and<02:05:37.840> click

can choose a specific password and click

can choose a specific password and click
sign<02:05:38.800> up<02:05:39.800> it<02:05:39.920> says<02:05:40.639> loading<02:05:41.639> and<02:05:42.000> it

sign up it says loading and it

sign up it says loading and it
disappeared<02:05:43.119> or<02:05:43.440> no<02:05:43.679> it<02:05:43.800> didn't<02:05:44.440> it<02:05:44.719> actually

disappeared or no it didn't it actually

disappeared or no it didn't it actually
redirected<02:05:45.800> us<02:05:45.960> to<02:05:46.119> the<02:05:46.280> homepage<02:05:47.079> which

redirected us to the homepage which

redirected us to the homepage which
right<02:05:47.520> now<02:05:47.840> is<02:05:48.040> completely<02:05:48.440> empty<02:05:48.679> empty<02:05:49.320> and

right now is completely empty empty and

right now is completely empty empty and
has<02:05:49.719> the<02:05:49.880> root<02:05:50.199> layout<02:05:51.159> after<02:05:51.440> all<02:05:51.679> this<02:05:51.880> hard

has the root layout after all this hard

has the root layout after all this hard
work<02:05:52.440> we<02:05:52.559> should<02:05:52.760> have<02:05:52.920> implemented<02:05:53.520> that

work we should have implemented that

work we should have implemented that
confetti<02:05:54.199> screen<02:05:54.559> to<02:05:54.760> also<02:05:55.159> pop<02:05:55.400> up<02:05:55.880> as<02:05:56.320> this

confetti screen to also pop up as this

confetti screen to also pop up as this
was<02:05:56.800> stuff<02:05:57.320> what<02:05:57.480> we've<02:05:57.679> gotten<02:05:58.040> here<02:05:58.880> if

was stuff what we've gotten here if

was stuff what we've gotten here if
something<02:05:59.440> didn't<02:05:59.760> work<02:05:59.960> for<02:06:00.199> you<02:06:00.880> definitely

something didn't work for you definitely

something didn't work for you definitely
make<02:06:01.559> sure<02:06:01.719> to<02:06:01.880> refer<02:06:02.199> to<02:06:02.360> the<02:06:02.480> codebase

make sure to refer to the codebase

make sure to refer to the codebase
what's<02:06:03.679> also<02:06:04.079> possible<02:06:04.880> is<02:06:05.119> that<02:06:05.360> while<02:06:05.559> you

what's also possible is that while you

what's also possible is that while you
were<02:06:05.800> trying<02:06:06.040> to<02:06:06.199> log<02:06:06.480> in<02:06:07.159> maybe<02:06:07.440> you<02:06:07.599> use<02:06:07.920> the

were trying to log in maybe you use the

were trying to log in maybe you use the
same<02:06:08.360> email<02:06:08.800> before<02:06:09.360> so<02:06:09.559> your<02:06:09.760> user<02:06:10.159> already

same email before so your user already

same email before so your user already
got<02:06:11.040> created<02:06:12.040> if<02:06:12.239> that's<02:06:12.440> the<02:06:12.639> case<02:06:13.440> try<02:06:13.840> a

got created if that's the case try a

got created if that's the case try a
couple<02:06:14.239> of<02:06:14.400> different<02:06:14.719> emails<02:06:15.199> and<02:06:15.400> usernames

couple of different emails and usernames

couple of different emails and usernames
and<02:06:16.679> ensure<02:06:17.079> that<02:06:17.280> isn't<02:06:17.559> the<02:06:17.719> case<02:06:18.760> but<02:06:19.079> now

and ensure that isn't the case but now

and ensure that isn't the case but now
that<02:06:19.440> we<02:06:19.599> have<02:06:19.800> successfully<02:06:20.360> created<02:06:20.719> our

that we have successfully created our

that we have successfully created our
user<02:06:21.559> you<02:06:21.679> can<02:06:21.840> see<02:06:22.199> that<02:06:22.520> we<02:06:22.719> have<02:06:22.880> it<02:06:23.239> right

user you can see that we have it right

user you can see that we have it right
here<02:06:23.880> under<02:06:24.280> a<02:06:24.480> user<02:06:25.119> collection<02:06:26.119> no<02:06:26.360> longer

here under a user collection no longer

here under a user collection no longer
is<02:06:27.079> it<02:06:27.320> just<02:06:27.520> under<02:06:27.840> o<02:06:28.480> but<02:06:28.719> also<02:06:29.040> under

is it just under o but also under

is it just under o but also under
databases<02:06:30.679> users<02:06:31.520> and<02:06:31.679> we<02:06:31.840> have<02:06:32.000> the<02:06:32.159> real<02:06:32.480> JSM

databases users and we have the real JSM

databases users and we have the real JSM
with<02:06:33.320> the<02:06:33.440> username<02:06:34.239> account<02:06:34.559> ID<02:06:35.320> email<02:06:36.280> and

with the username account ID email and

with the username account ID email and
everything<02:06:37.040> else<02:06:37.719> so<02:06:37.960> this<02:06:38.079> is

everything else so this is

everything else so this is
great<02:06:40.280> this<02:06:40.440> means<02:06:40.840> that<02:06:41.000> we<02:06:41.119> have<02:06:41.360> just<02:06:41.639> added

great this means that we have just added

great this means that we have just added
a<02:06:42.639> document<02:06:43.159> in<02:06:43.239> our<02:06:43.559> database<02:06:44.559> and<02:06:44.800> also<02:06:45.159> that

a document in our database and also that

a document in our database and also that
we<02:06:45.400> have<02:06:45.599> logged<02:06:45.920> in<02:06:46.040> our<02:06:46.239> user<02:06:46.840> so<02:06:47.079> now<02:06:47.320> if<02:06:47.400> we

we have logged in our user so now if we

we have logged in our user so now if we
go<02:06:47.840> back<02:06:48.119> and<02:06:48.280> reload<02:06:48.840> the<02:06:49.000> page<02:06:49.639> you<02:06:49.800> can

go back and reload the page you can

go back and reload the page you can
notice<02:06:50.400> that<02:06:50.559> we<02:06:50.760> stay<02:06:51.119> here<02:06:51.840> because<02:06:52.079> it

notice that we stay here because it

notice that we stay here because it
knows<02:06:52.520> that<02:06:52.679> the<02:06:52.800> user<02:06:53.119> is<02:06:53.280> already<02:06:53.599> logged<02:06:53.960> in

knows that the user is already logged in

knows that the user is already logged in
but<02:06:55.079> of<02:06:55.239> course<02:06:55.520> to<02:06:55.719> completely<02:06:56.239> finalize<02:06:56.960> our

but of course to completely finalize our

but of course to completely finalize our
o<02:06:58.000> we<02:06:58.119> need<02:06:58.239> to<02:06:58.440> implement<02:06:58.840> the<02:06:59.040> login<02:06:59.559> screen

o we need to implement the login screen

o we need to implement the login screen
as<02:07:00.400> well<02:07:01.159> so<02:07:01.400> what<02:07:01.559> we<02:07:01.679> can<02:07:01.840> do<02:07:02.440> is<02:07:02.800> right<02:07:03.079> click

as well so what we can do is right click

as well so what we can do is right click
go<02:07:03.880> to<02:07:04.280> inspect<02:07:05.280> go<02:07:05.480> to<02:07:05.639> the<02:07:05.840> application<02:07:06.520> tab

go to inspect go to the application tab

go to inspect go to the application tab
right<02:07:07.400> here<02:07:08.280> and<02:07:08.480> then<02:07:08.960> under<02:07:09.320> local<02:07:09.639> storage

right here and then under local storage

right here and then under local storage
you'll<02:07:10.559> be<02:07:10.719> able<02:07:10.880> to<02:07:11.000> see<02:07:11.280> a<02:07:11.480> cookie<02:07:12.159> fullback

you'll be able to see a cookie fullback

you'll be able to see a cookie fullback
this<02:07:13.320> was<02:07:13.559> added<02:07:13.920> by<02:07:14.280> ight<02:07:15.280> what<02:07:15.400> you<02:07:15.520> need<02:07:15.639> to

this was added by ight what you need to

this was added by ight what you need to
do<02:07:16.360> is<02:07:16.599> just<02:07:16.840> clear<02:07:17.199> it<02:07:17.679> this<02:07:17.800> is<02:07:17.960> going<02:07:18.119> to

do is just clear it this is going to

do is just clear it this is going to
clear<02:07:18.599> here<02:07:18.760> our<02:07:19.000> existing<02:07:19.480> session<02:07:20.360> and<02:07:20.559> then

clear here our existing session and then

clear here our existing session and then
we<02:07:21.000> can<02:07:21.199> go<02:07:21.480> back<02:07:21.760> right<02:07:21.960> here<02:07:22.280> to<02:07:22.520> OD

we can go back right here to OD

we can go back right here to OD
context<02:07:24.599> and<02:07:24.760> we<02:07:24.880> can<02:07:25.079> check<02:07:25.520> if<02:07:25.719> local

context and we can check if local

context and we can check if local
storage<02:07:26.559> that<02:07:26.760> get<02:07:27.040> item<02:07:27.559> cookie<02:07:27.880> fback<02:07:28.599> is

storage that get item cookie fback is

storage that get item cookie fback is
null<02:07:29.679> in<02:07:29.880> that<02:07:30.079> case<02:07:30.360> want<02:07:30.480> to<02:07:30.679> redirect<02:07:31.360> back

null in that case want to redirect back

null in that case want to redirect back
to<02:07:32.239> the<02:07:32.480> sign<02:07:32.800> in<02:07:33.079> screen<02:07:33.840> so<02:07:34.079> now<02:07:34.360> if<02:07:34.599> we<02:07:34.760> save

to the sign in screen so now if we save

to the sign in screen so now if we save
this<02:07:35.960> you<02:07:36.079> can<02:07:36.199> see<02:07:36.440> we're<02:07:36.760> redirected<02:07:37.520> to<02:07:37.719> the

this you can see we're redirected to the

this you can see we're redirected to the
signin<02:07:38.400> form<02:07:39.320> so<02:07:39.559> now<02:07:40.159> let's<02:07:40.360> try<02:07:40.559> to

signin form so now let's try to

signin form so now let's try to
implement<02:07:41.360> the<02:07:41.559> sign<02:07:42.239> in<02:07:43.239> trust<02:07:43.559> me<02:07:43.840> to<02:07:44.000> do<02:07:44.159> it

implement the sign in trust me to do it

implement the sign in trust me to do it
it<02:07:44.520> won't<02:07:44.800> be<02:07:45.079> as<02:07:45.520> difficult<02:07:45.960> as<02:07:46.119> implementing

it won't be as difficult as implementing

it won't be as difficult as implementing
the<02:07:47.079> sign<02:07:47.360> up<02:07:48.159> what<02:07:48.320> we<02:07:48.599> can<02:07:48.760> do<02:07:49.320> is<02:07:49.800> copy

the sign up what we can do is copy

the sign up what we can do is copy
literally<02:07:51.360> the<02:07:51.719> entire<02:07:52.480> sign<02:07:52.880> up<02:07:53.280> form

literally the entire sign up form

literally the entire sign up form
exactly<02:07:54.960> as<02:07:55.079> it<02:07:55.280> is<02:07:56.280> and<02:07:56.599> then<02:07:57.079> go<02:07:57.280> to<02:07:57.520> sign<02:07:57.920> in

exactly as it is and then go to sign in

exactly as it is and then go to sign in
form<02:07:59.119> and<02:07:59.559> paste<02:07:59.920> it<02:08:00.360> right<02:08:00.719> here<02:08:01.719> first<02:08:01.920> of

form and paste it right here first of

form and paste it right here first of
all<02:08:02.559> rename<02:08:03.000> it<02:08:03.199> from<02:08:03.480> sign<02:08:04.079> up<02:08:04.400> form<02:08:04.920> right

all rename it from sign up form right

all rename it from sign up form right
here<02:08:05.159> at<02:08:05.280> the<02:08:05.440> bottom<02:08:06.119> to<02:08:06.360> sign<02:08:06.719> in<02:08:07.079> form<02:08:08.000> also

here at the bottom to sign in form also

here at the bottom to sign in form also
rename<02:08:08.639> it<02:08:09.280> right<02:08:09.719> here<02:08:10.000> at<02:08:10.159> the<02:08:10.679> top<02:08:11.679> and<02:08:11.880> now

rename it right here at the top and now

rename it right here at the top and now
there<02:08:12.280> are<02:08:12.520> couple<02:08:12.760> of<02:08:12.920> modifications<02:08:13.880> we'll

there are couple of modifications we'll

there are couple of modifications we'll
have<02:08:14.239> to<02:08:14.559> make<02:08:15.559> let's<02:08:15.760> start<02:08:16.040> from<02:08:16.199> the<02:08:16.400> top<02:08:16.719> to

have to make let's start from the top to

have to make let's start from the top to
the<02:08:17.040> bottom<02:08:17.800> we'll<02:08:18.000> be<02:08:18.119> using<02:08:18.520> the<02:08:18.599> use<02:08:18.800> user

the bottom we'll be using the use user

the bottom we'll be using the use user
context<02:08:19.760> that's<02:08:20.119> okay<02:08:20.880> and<02:08:21.040> we'll<02:08:21.239> use<02:08:21.480> the

context that's okay and we'll use the

context that's okay and we'll use the
use<02:08:21.920> signin<02:08:22.719> in<02:08:22.920> this<02:08:23.079> case<02:08:23.280> we<02:08:23.440> don't<02:08:23.719> need

use signin in this case we don't need

use signin in this case we don't need
the<02:08:24.159> use<02:08:24.520> create<02:08:25.000> account<02:08:25.960> the<02:08:26.119> form<02:08:26.679> is<02:08:26.880> only

the use create account the form is only

the use create account the form is only
going<02:08:27.320> to<02:08:27.559> accept<02:08:27.880> the<02:08:28.079> email<02:08:28.400> and<02:08:28.520> the

going to accept the email and the

going to accept the email and the
password<02:08:29.440> not<02:08:29.639> the<02:08:29.800> name<02:08:30.000> and<02:08:30.159> the<02:08:30.280> username

password not the name and the username

password not the name and the username
as<02:08:30.960> well<02:08:31.960> and<02:08:32.239> we<02:08:32.400> have<02:08:32.520> to<02:08:32.679> change<02:08:33.079> this<02:08:33.280> to

as well and we have to change this to

as well and we have to change this to
sign<02:08:33.960> in<02:08:34.639> validation<02:08:35.639> so<02:08:36.199> let's<02:08:36.440> go<02:08:36.599> to<02:08:36.760> our

sign in validation so let's go to our

sign in validation so let's go to our
Zod<02:08:37.679> which<02:08:37.840> is<02:08:38.079> right<02:08:38.280> here<02:08:38.520> under<02:08:38.880> validation

Zod which is right here under validation

Zod which is right here under validation
index<02:08:40.119> DS<02:08:41.119> and<02:08:41.280> we<02:08:41.400> can<02:08:41.559> duplicate<02:08:42.119> this<02:08:42.520> right

index DS and we can duplicate this right

index DS and we can duplicate this right
below<02:08:43.719> rename<02:08:44.159> it<02:08:44.440> to<02:08:44.800> sign<02:08:45.199> in<02:08:45.679> validation

below rename it to sign in validation

below rename it to sign in validation
and<02:08:46.920> only<02:08:47.440> contain<02:08:48.079> the<02:08:48.440> email<02:08:48.800> and<02:08:48.960> the

and only contain the email and the

and only contain the email and the
password<02:08:49.760> we<02:08:49.880> can<02:08:50.040> remove<02:08:50.360> the<02:08:50.520> name<02:08:50.679> and<02:08:50.840> the

password we can remove the name and the

password we can remove the name and the
username<02:08:52.480> then<02:08:52.800> you<02:08:52.880> can<02:08:53.119> go<02:08:53.360> back<02:08:54.280> and

username then you can go back and

username then you can go back and
doubleclick<02:08:55.520> this<02:08:56.119> and<02:08:56.480> press<02:08:56.920> f2<02:08:57.920> this<02:08:58.040> is

doubleclick this and press f2 this is

doubleclick this and press f2 this is
going<02:08:58.320> to<02:08:58.520> open<02:08:58.800> up<02:08:58.960> a<02:08:59.159> rename<02:08:59.719> window<02:09:00.280> or<02:09:00.440> you

going to open up a rename window or you

going to open up a rename window or you
can<02:09:00.719> just<02:09:00.880> simply<02:09:01.239> press<02:09:01.639> sign<02:09:02.040> in<02:09:03.040> and<02:09:03.239> press

can just simply press sign in and press

can just simply press sign in and press
enter<02:09:04.360> it's<02:09:04.480> going<02:09:04.639> to<02:09:04.800> automatically<02:09:05.559> change

enter it's going to automatically change

enter it's going to automatically change
all<02:09:06.199> of<02:09:06.320> the<02:09:06.480> naming<02:09:07.480> if<02:09:07.639> this<02:09:07.760> didn't<02:09:08.000> work

all of the naming if this didn't work

all of the naming if this didn't work
for<02:09:08.360> you<02:09:08.880> simply<02:09:09.280> exchange<02:09:09.840> every<02:09:10.119> time<02:09:10.320> that

for you simply exchange every time that

for you simply exchange every time that
it<02:09:10.520> says<02:09:10.800> sign<02:09:11.040> up<02:09:11.480> to<02:09:11.679> say<02:09:11.960> sign<02:09:12.199> in<02:09:13.119> after

it says sign up to say sign in after

it says sign up to say sign in after
that<02:09:13.880> we<02:09:14.119> have<02:09:14.320> our<02:09:14.559> submit<02:09:15.000> Handler<02:09:16.000> we<02:09:16.199> also

that we have our submit Handler we also

that we have our submit Handler we also
get<02:09:16.679> the<02:09:16.880> values<02:09:17.440> but<02:09:17.599> we<02:09:17.719> can<02:09:17.880> skip<02:09:18.400> the<02:09:18.520> user

get the values but we can skip the user

get the values but we can skip the user
creation<02:09:19.320> process<02:09:19.840> and<02:09:20.040> only<02:09:20.400> focus<02:09:20.760> on<02:09:20.960> the

creation process and only focus on the

creation process and only focus on the
session<02:09:21.960> still<02:09:22.440> the<02:09:22.559> check-in<02:09:22.960> is<02:09:23.040> going<02:09:23.159> to

session still the check-in is going to

session still the check-in is going to
be<02:09:23.440> the<02:09:23.599> same<02:09:24.320> and<02:09:24.639> everything<02:09:25.040> else<02:09:25.480> is<02:09:25.639> going

be the same and everything else is going

be the same and everything else is going
to<02:09:25.960> be<02:09:26.599> exactly<02:09:27.159> the<02:09:27.320> same<02:09:28.239> but<02:09:28.480> we'll<02:09:28.679> have<02:09:28.800> to

to be exactly the same but we'll have to

to be exactly the same but we'll have to
modify<02:09:29.520> our<02:09:29.760> form<02:09:30.639> instead<02:09:30.920> of<02:09:31.079> create<02:09:31.360> a<02:09:31.480> new

modify our form instead of create a new

modify our form instead of create a new
account<02:09:32.280> we<02:09:32.400> can<02:09:32.599> say<02:09:33.400> log<02:09:33.880> in<02:09:34.480> to<02:09:34.840> your

account we can say log in to your

account we can say log in to your
account<02:09:36.719> we<02:09:36.840> can<02:09:37.000> say<02:09:37.360> something<02:09:37.639> more

account we can say something more

account we can say something more
personal<02:09:38.679> something<02:09:39.040> like<02:09:39.280> welcome<02:09:39.760> back

personal something like welcome back

personal something like welcome back
please<02:09:41.239> enter<02:09:41.719> your

please enter your

please enter your
details<02:09:44.520> then<02:09:44.920> we<02:09:45.119> don't<02:09:45.440> have<02:09:45.599> the<02:09:45.760> first<02:09:46.000> two

details then we don't have the first two

details then we don't have the first two
Fields<02:09:46.719> so<02:09:46.880> we<02:09:47.000> can<02:09:47.199> completely<02:09:47.679> remove<02:09:48.079> them

Fields so we can completely remove them

Fields so we can completely remove them
the<02:09:49.000> only<02:09:49.280> thing<02:09:49.480> we<02:09:49.639> do<02:09:49.960> have<02:09:50.440> is<02:09:50.599> going<02:09:50.760> to<02:09:50.880> be

the only thing we do have is going to be

the only thing we do have is going to be
the<02:09:51.199> email<02:09:52.000> and<02:09:52.159> the<02:09:52.679> password<02:09:53.679> so<02:09:53.880> now<02:09:54.079> if<02:09:54.159> you

the email and the password so now if you

the email and the password so now if you
save<02:09:54.679> this<02:09:55.199> you<02:09:55.320> can<02:09:55.480> see<02:09:55.760> it's<02:09:55.960> no<02:09:56.119> longer

save this you can see it's no longer

save this you can see it's no longer
going<02:09:56.480> to<02:09:56.599> be<02:09:56.800> is<02:09:57.040> creating<02:09:57.559> account<02:09:58.520> this

going to be is creating account this

going to be is creating account this
time<02:09:58.960> it's<02:09:59.159> going<02:09:59.280> to<02:09:59.480> be<02:09:59.840> is<02:10:00.559> user

time it's going to be is user

time it's going to be is user
loading<02:10:03.840> and<02:10:04.840> is<02:10:05.000> that<02:10:05.199> it<02:10:05.840> we<02:10:05.960> won't<02:10:06.280> need

loading and is that it we won't need

loading and is that it we won't need
this<02:10:06.840> rename<02:10:07.400> right<02:10:07.960> here<02:10:08.960> and<02:10:09.199> we<02:10:09.320> won't<02:10:09.559> need

this rename right here and we won't need

this rename right here and we won't need
use<02:10:10.159> create<02:10:10.760> account<02:10:11.760> if<02:10:11.880> we<02:10:12.000> save<02:10:12.360> this<02:10:13.000> our

use create account if we save this our

use create account if we save this our
form<02:10:13.840> is<02:10:14.159> back<02:10:14.920> and<02:10:15.119> we<02:10:15.280> also<02:10:15.520> need<02:10:15.679> to<02:10:15.840> change

form is back and we also need to change

form is back and we also need to change
the<02:10:16.400> last<02:10:16.639> thing<02:10:16.840> that<02:10:16.960> it<02:10:17.079> says<02:10:17.400> right<02:10:17.599> here

the last thing that it says right here

the last thing that it says right here
as<02:10:18.480> well<02:10:18.639> as<02:10:18.760> the<02:10:18.920> button<02:10:19.400> it's<02:10:19.520> going<02:10:19.719> to<02:10:19.840> say

as well as the button it's going to say

as well as the button it's going to say
sign<02:10:20.800> in<02:10:21.800> and<02:10:21.920> then<02:10:22.199> here<02:10:22.599> we<02:10:22.719> can<02:10:22.880> say<02:10:23.880> don't

sign in and then here we can say don't

sign in and then here we can say don't
have<02:10:25.079> an

have an

have an
account<02:10:26.960> in<02:10:27.199> that<02:10:27.480> case<02:10:28.159> you<02:10:28.320> can<02:10:28.960> sign

account in that case you can sign

account in that case you can sign
up<02:10:31.199> and<02:10:31.360> then<02:10:31.520> this<02:10:31.639> is<02:10:31.760> going<02:10:31.920> to<02:10:32.079> redirect<02:10:32.639> to

up and then this is going to redirect to

up and then this is going to redirect to
sign<02:10:34.159> up<02:10:35.159> you<02:10:35.280> see<02:10:35.520> how<02:10:35.679> simple<02:10:36.040> that<02:10:36.239> was<02:10:37.199> and

sign up you see how simple that was and

sign up you see how simple that was and
there<02:10:37.480> we<02:10:37.639> go<02:10:38.199> now<02:10:38.360> if<02:10:38.480> you<02:10:38.639> click<02:10:38.840> it<02:10:39.119> you<02:10:39.280> go

there we go now if you click it you go

there we go now if you click it you go
to<02:10:39.599> sign<02:10:39.840> up<02:10:40.280> you<02:10:40.440> go<02:10:40.559> to<02:10:40.719> login<02:10:41.440> this<02:10:41.559> is

to sign up you go to login this is

to sign up you go to login this is
looking<02:10:42.040> great<02:10:42.880> and<02:10:43.040> now<02:10:43.280> let's<02:10:43.440> try<02:10:43.599> to<02:10:43.760> log

looking great and now let's try to log

looking great and now let's try to log
in<02:10:44.159> with<02:10:44.280> the<02:10:44.440> account<02:10:44.760> we<02:10:44.880> have

in with the account we have

in with the account we have
created<02:10:46.559> I'll<02:10:46.760> use<02:10:47.000> the<02:10:47.159> same<02:10:47.440> email<02:10:47.719> and

created I'll use the same email and

created I'll use the same email and
password<02:10:48.679> and<02:10:48.880> click<02:10:49.119> sign<02:10:49.760> in<02:10:50.760> this<02:10:51.000> time<02:10:51.320> it

password and click sign in this time it

password and click sign in this time it
doesn't<02:10:51.800> seem<02:10:51.960> to<02:10:52.159> go<02:10:52.360> through<02:10:53.199> let's<02:10:53.400> see<02:10:53.760> why

doesn't seem to go through let's see why

doesn't seem to go through let's see why
that<02:10:54.159> might<02:10:54.360> be<02:10:54.520> the<02:10:54.679> case<02:10:55.559> I'm<02:10:55.679> going<02:10:55.760> to<02:10:55.920> go

that might be the case I'm going to go

that might be the case I'm going to go
to<02:10:56.320> inspect<02:10:57.320> and<02:10:57.480> then<02:10:57.719> I'm<02:10:57.840> going<02:10:57.920> to<02:10:58.119> go<02:10:58.239> to

to inspect and then I'm going to go to

to inspect and then I'm going to go to
console<02:10:59.199> and<02:10:59.320> reload<02:10:59.719> the<02:10:59.920> page<02:11:00.920> I'll<02:11:01.119> try<02:11:01.280> to

console and reload the page I'll try to

console and reload the page I'll try to
enter<02:11:01.880> my<02:11:02.159> same<02:11:02.480> email<02:11:02.880> and<02:11:03.159> password<02:11:03.599> one

enter my same email and password one

enter my same email and password one
more<02:11:04.000> time<02:11:04.639> and<02:11:04.840> click<02:11:05.079> sign

more time and click sign

more time and click sign
in<02:11:07.320> it<02:11:07.599> almost<02:11:07.920> seems<02:11:08.239> like<02:11:08.440> nothing<02:11:08.719> is

in it almost seems like nothing is

in it almost seems like nothing is
happening<02:11:10.199> so<02:11:10.800> our<02:11:11.079> submit<02:11:11.520> button<02:11:12.239> is

happening so our submit button is

happening so our submit button is
actually<02:11:12.840> submitting<02:11:13.239> the

actually submitting the

actually submitting the
form<02:11:15.360> we<02:11:15.480> don't<02:11:15.760> need<02:11:16.000> this<02:11:16.239> is<02:11:16.520> pending<02:11:17.000> right

form we don't need this is pending right

form we don't need this is pending right
here<02:11:17.960> and<02:11:18.360> then<02:11:18.639> we<02:11:18.800> call<02:11:19.159> the<02:11:19.280> onsubmit

here and then we call the onsubmit

here and then we call the onsubmit
Handler<02:11:20.719> which<02:11:20.880> should<02:11:21.159> sign<02:11:21.440> us<02:11:21.719> right<02:11:21.880> in

Handler which should sign us right in

Handler which should sign us right in
and<02:11:22.840> then<02:11:23.040> if<02:11:23.199> we<02:11:23.320> are<02:11:23.599> logged<02:11:23.960> in<02:11:24.440> it<02:11:24.559> should

and then if we are logged in it should

and then if we are logged in it should
navigate<02:11:25.400> to<02:11:25.599> forward<02:11:26.000> slash<02:11:27.000> but<02:11:27.199> in<02:11:27.440> this

navigate to forward slash but in this

navigate to forward slash but in this
case<02:11:27.920> for<02:11:28.079> some<02:11:28.320> reason<02:11:28.880> it<02:11:29.040> doesn't<02:11:29.360> do<02:11:29.520> it

case for some reason it doesn't do it

case for some reason it doesn't do it
I'll<02:11:30.360> try<02:11:30.559> to<02:11:30.880> reload<02:11:31.880> even<02:11:32.079> if<02:11:32.199> I<02:11:32.400> reload

I'll try to reload even if I reload

I'll try to reload even if I reload
we're<02:11:33.159> still<02:11:33.480> here<02:11:33.800> on<02:11:34.000> square<02:11:34.920> one<02:11:35.920> but

we're still here on square one but

we're still here on square one but
that's<02:11:36.440> okay<02:11:36.880> let's<02:11:37.079> figure<02:11:37.320> it<02:11:37.440> out<02:11:37.719> together

that's okay let's figure it out together

that's okay let's figure it out together
let's<02:11:38.520> see<02:11:38.800> if<02:11:38.960> we<02:11:39.199> actually<02:11:39.719> get<02:11:40.280> right<02:11:40.559> here

let's see if we actually get right here

let's see if we actually get right here
so<02:11:41.480> let's<02:11:41.639> try<02:11:41.840> to

so let's try to

so let's try to
console.log<02:11:43.639> is<02:11:44.239> logged<02:11:45.079> in<02:11:46.079> and<02:11:46.199> then<02:11:46.360> we<02:11:46.480> can

console.log is logged in and then we can

console.log is logged in and then we can
say<02:11:47.559> console.<02:11:48.239> log<02:11:49.119> navigating<02:11:50.119> I'm<02:11:50.320> guessing

say console. log navigating I'm guessing

say console. log navigating I'm guessing
we're<02:11:50.880> not<02:11:51.199> getting<02:11:51.800> to<02:11:52.079> right<02:11:52.360> here<02:11:52.920> so<02:11:53.079> I'm

we're not getting to right here so I'm

we're not getting to right here so I'm
going<02:11:53.280> to<02:11:53.440> save<02:11:54.000> it<02:11:55.000> and<02:11:55.199> I'll<02:11:55.400> enter<02:11:55.719> my

going to save it and I'll enter my

going to save it and I'll enter my
details<02:11:56.320> one<02:11:56.480> more

details one more

details one more
time<02:11:58.559> and<02:11:59.000> press<02:11:59.360> sign

time and press sign

time and press sign
in<02:12:01.639> it's<02:12:01.880> almost<02:12:02.280> as<02:12:02.400> if<02:12:02.760> nothing<02:12:03.480> happens

in it's almost as if nothing happens

in it's almost as if nothing happens
we're<02:12:04.760> also<02:12:05.000> not<02:12:05.199> getting<02:12:05.440> any<02:12:05.639> toasts<02:12:06.360> so

we're also not getting any toasts so

we're also not getting any toasts so
that's<02:12:06.920> a<02:12:07.040> bit<02:12:07.239> suspicious<02:12:08.199> let's<02:12:08.440> add<02:12:08.639> some

that's a bit suspicious let's add some

that's a bit suspicious let's add some
more<02:12:09.040> conso<02:12:09.440> locks<02:12:09.760> a<02:12:09.880> bit<02:12:10.119> higher<02:12:10.559> right<02:12:10.760> here

more conso locks a bit higher right here

more conso locks a bit higher right here
let's<02:12:11.679> conso<02:12:12.040> loog

let's conso loog

let's conso loog
session<02:12:14.639> and<02:12:14.840> let's<02:12:15.000> also<02:12:15.239> cons<02:12:15.599> log<02:12:16.000> right

session and let's also cons log right

session and let's also cons log right
here<02:12:16.360> at<02:12:16.480> the<02:12:16.679> top<02:12:17.400> by<02:12:17.559> saying

here at the top by saying

here at the top by saying
we're

we're

we're
in<02:12:20.840> that's<02:12:21.000> the<02:12:21.119> whole<02:12:21.320> point<02:12:21.520> of<02:12:21.679> coding

in that's the whole point of coding

in that's the whole point of coding
right<02:12:22.559> getting<02:12:22.880> stuck<02:12:23.320> and<02:12:23.480> getting<02:12:23.840> past

right getting stuck and getting past

right getting stuck and getting past
these<02:12:24.400> errors<02:12:25.400> once<02:12:25.679> again<02:12:26.119> let's<02:12:26.320> try<02:12:26.520> it

these errors once again let's try it

these errors once again let's try it
together<02:12:28.239> and<02:12:28.480> once<02:12:28.760> again<02:12:29.440> absolutely

together and once again absolutely

together and once again absolutely
nothing<02:12:30.760> happens<02:12:31.760> here<02:12:32.320> nor

nothing happens here nor

nothing happens here nor
here<02:12:34.239> now<02:12:34.559> it<02:12:34.719> seems<02:12:35.079> like<02:12:35.280> this<02:12:35.440> onsubmit

here now it seems like this onsubmit

here now it seems like this onsubmit
function<02:12:36.599> is<02:12:36.880> not<02:12:37.280> actually<02:12:37.639> getting<02:12:37.960> cold

function is not actually getting cold

function is not actually getting cold
even<02:12:39.000> though<02:12:39.159> we<02:12:39.320> have<02:12:39.480> it<02:12:39.719> right<02:12:39.920> here<02:12:40.199> under

even though we have it right here under

even though we have it right here under
form<02:12:40.920> submit<02:12:41.599> and<02:12:41.760> the<02:12:41.920> button<02:12:42.520> should<02:12:42.880> indeed

form submit and the button should indeed

form submit and the button should indeed
submit<02:12:44.079> that<02:12:44.280> form<02:12:44.800> as<02:12:44.920> it<02:12:45.119> has<02:12:45.320> the<02:12:45.559> type<02:12:45.920> of

submit that form as it has the type of

submit that form as it has the type of
submit<02:12:47.520> so<02:12:47.719> one<02:12:48.079> thing<02:12:48.159> I'll<02:12:48.320> try<02:12:48.520> to<02:12:48.679> do<02:12:49.400> is

submit so one thing I'll try to do is

submit so one thing I'll try to do is
just<02:12:50.040> restart<02:12:50.520> our<02:12:50.760> application<02:12:51.520> so<02:12:51.719> go<02:12:51.880> to

just restart our application so go to

just restart our application so go to
our<02:12:52.199> terminal<02:12:52.880> press<02:12:53.119> contrl<02:12:53.360> +<02:12:53.480> C<02:12:53.960> and<02:12:54.119> then<02:12:54.360> Y

our terminal press contrl + C and then Y

our terminal press contrl + C and then Y
and<02:12:55.400> then<02:12:55.559> simply<02:12:55.840> run<02:12:56.239> mpm<02:12:56.679> run<02:12:56.960> Dev<02:12:57.400> one<02:12:57.599> more

and then simply run mpm run Dev one more

and then simply run mpm run Dev one more
time<02:12:58.840> it's<02:12:58.960> a<02:12:59.119> wild<02:12:59.440> guess<02:13:00.040> but<02:13:00.440> sometimes<02:13:00.679> who

time it's a wild guess but sometimes who

time it's a wild guess but sometimes who
know<02:13:01.400> it<02:13:01.559> might<02:13:01.840> make<02:13:02.079> things

know it might make things

know it might make things
work<02:13:04.960> I'm<02:13:05.119> going<02:13:05.320> to<02:13:05.679> make<02:13:05.880> this<02:13:06.040> a<02:13:06.159> bit<02:13:06.320> larger

work I'm going to make this a bit larger

work I'm going to make this a bit larger
so<02:13:06.960> we<02:13:07.079> can<02:13:07.199> see<02:13:07.360> it<02:13:07.480> a<02:13:07.639> bit

so we can see it a bit

so we can see it a bit
better<02:13:10.440> let's<02:13:10.639> make<02:13:10.760> it<02:13:10.880> so<02:13:11.159> large<02:13:11.559> so<02:13:11.679> we<02:13:11.800> can

better let's make it so large so we can

better let's make it so large so we can
see<02:13:12.199> this<02:13:12.400> nice<02:13:12.639> image<02:13:12.960> as<02:13:13.119> well<02:13:13.800> I'm<02:13:13.960> going<02:13:14.040> to

see this nice image as well I'm going to

see this nice image as well I'm going to
enter<02:13:14.760> my<02:13:15.199> email<02:13:16.159> and<02:13:16.360> the<02:13:16.599> password<02:13:17.360> and

enter my email and the password and

enter my email and the password and
click<02:13:17.760> sign<02:13:18.040> sign

click sign sign

click sign sign
in<02:13:19.880> and<02:13:20.079> once<02:13:20.320> again<02:13:20.880> no<02:13:21.119> conso<02:13:21.559> logs<02:13:22.440> no

in and once again no conso logs no

in and once again no conso logs no
errors<02:13:23.920> nothing<02:13:24.320> is<02:13:24.520> even<02:13:24.840> in<02:13:24.960> the<02:13:25.159> network

errors nothing is even in the network

errors nothing is even in the network
tab<02:13:25.880> right<02:13:26.159> here<02:13:26.520> so<02:13:26.719> if<02:13:26.800> you<02:13:26.920> clean<02:13:27.159> it<02:13:27.320> and

tab right here so if you clean it and

tab right here so if you clean it and
click<02:13:28.239> nothing<02:13:28.599> is<02:13:28.960> here<02:13:29.960> it<02:13:30.119> seems<02:13:30.440> like<02:13:30.639> this

click nothing is here it seems like this

click nothing is here it seems like this
form<02:13:31.199> is<02:13:31.360> not<02:13:31.599> getting<02:13:32.079> fired<02:13:33.079> and<02:13:33.320> I<02:13:33.520> really

form is not getting fired and I really

form is not getting fired and I really
like<02:13:34.000> it<02:13:34.159> when<02:13:34.360> this<02:13:34.520> happens<02:13:35.360> it<02:13:35.559> exposes<02:13:36.040> me

like it when this happens it exposes me

like it when this happens it exposes me
to<02:13:36.400> you<02:13:36.920> and<02:13:37.159> it<02:13:37.360> makes<02:13:37.639> me<02:13:37.960> think<02:13:38.440> it<02:13:38.599> makes<02:13:38.800> me

to you and it makes me think it makes me

to you and it makes me think it makes me
want<02:13:39.119> to<02:13:39.360> resolve<02:13:39.840> this<02:13:40.159> together<02:13:40.760> with<02:13:40.920> you

want to resolve this together with you

want to resolve this together with you
watching<02:13:41.559> this<02:13:41.760> video<02:13:42.639> so<02:13:42.880> let's<02:13:43.079> try<02:13:43.280> to

watching this video so let's try to

watching this video so let's try to
figure<02:13:43.719> it<02:13:43.840> out<02:13:44.199> together<02:13:45.159> let's<02:13:45.440> go<02:13:45.679> all<02:13:45.960> the

figure it out together let's go all the

figure it out together let's go all the
way<02:13:46.239> to<02:13:46.400> the<02:13:46.599> top<02:13:46.800> of<02:13:46.880> the<02:13:47.079> file<02:13:47.639> and<02:13:47.760> let's

way to the top of the file and let's

way to the top of the file and let's
let's<02:13:48.079> see<02:13:48.199> if<02:13:48.360> everything<02:13:48.639> is<02:13:48.800> looking<02:13:49.159> good

let's see if everything is looking good

let's see if everything is looking good
we<02:13:50.119> have<02:13:50.280> some<02:13:50.520> imports<02:13:51.000> from<02:13:51.239> Hook<02:13:51.520> form

we have some imports from Hook form

we have some imports from Hook form
react<02:13:52.520> router<02:13:53.040> Dom<02:13:54.040> then<02:13:54.239> we<02:13:54.320> can<02:13:54.520> divide<02:13:55.040> our

react router Dom then we can divide our

react router Dom then we can divide our
internal<02:13:55.639> Imports<02:13:56.159> coming<02:13:56.360> from<02:13:56.639> components

internal Imports coming from components

internal Imports coming from components
right<02:13:57.760> here<02:13:58.440> we<02:13:58.639> also<02:13:58.920> have<02:13:59.079> some<02:13:59.280> more<02:13:59.760> react

right here we also have some more react

right here we also have some more react
hook<02:14:00.559> form<02:14:01.360> rather<02:14:01.639> this<02:14:01.760> is<02:14:01.960> this<02:14:02.040> was<02:14:02.280> react

hook form rather this is this was react

hook form rather this is this was react
ROM<02:14:03.199> this<02:14:03.280> is<02:14:03.440> react<02:14:03.679> hook<02:14:03.960> form<02:14:04.719> and<02:14:04.840> then<02:14:05.000> we

ROM this is react hook form and then we

ROM this is react hook form and then we
have<02:14:05.400> something<02:14:05.800> from<02:14:06.040> lib<02:14:06.639> validation<02:14:07.639> this

have something from lib validation this

have something from lib validation this
is<02:14:07.960> the<02:14:08.199> signup

is the signup

is the signup
validation<02:14:10.400> oh<02:14:10.559> no<02:14:10.880> wait<02:14:11.199> this<02:14:11.320> was<02:14:11.520> supposed

validation oh no wait this was supposed

validation oh no wait this was supposed
to<02:14:11.920> be<02:14:12.079> sign<02:14:12.719> in<02:14:13.719> looks<02:14:14.000> like<02:14:14.199> it<02:14:14.360> auto

to be sign in looks like it auto

to be sign in looks like it auto
imported<02:14:15.159> it<02:14:15.360> in<02:14:15.520> the<02:14:15.760> wrong<02:14:16.159> way<02:14:17.040> this<02:14:17.280> right

imported it in the wrong way this right

imported it in the wrong way this right
here<02:14:17.639> was<02:14:18.000> supposed<02:14:18.320> to<02:14:18.440> be<02:14:18.800> only<02:14:19.280> sign<02:14:19.760> in<02:14:20.760> yes

here was supposed to be only sign in yes

here was supposed to be only sign in yes
because<02:14:21.840> now<02:14:22.040> we're<02:14:22.280> talking<02:14:22.639> about<02:14:23.000> sign<02:14:23.360> in

because now we're talking about sign in

because now we're talking about sign in
right<02:14:24.280> here<02:14:24.559> and<02:14:24.719> not<02:14:25.000> sign<02:14:25.559> up<02:14:26.559> actually

right here and not sign up actually

right here and not sign up actually
disallowed<02:14:27.559> us<02:14:27.760> from<02:14:27.960> submitting<02:14:28.440> the<02:14:28.559> form

disallowed us from submitting the form

disallowed us from submitting the form
well<02:14:29.520> I<02:14:29.639> guess<02:14:29.880> that's<02:14:30.040> its<02:14:30.320> job<02:14:30.679> right<02:14:31.199> so<02:14:31.320> I'm

well I guess that's its job right so I'm

well I guess that's its job right so I'm
going<02:14:31.639> to<02:14:31.960> delete<02:14:32.400> all<02:14:32.559> of<02:14:32.679> the<02:14:32.800> conso<02:14:33.199> logs

going to delete all of the conso logs

going to delete all of the conso logs
right

right

right
now<02:14:36.079> and<02:14:36.719> save<02:14:37.040> the<02:14:37.239> file<02:14:38.079> there<02:14:38.239> we

now and save the file there we

now and save the file there we
go<02:14:40.360> and<02:14:40.599> hope<02:14:41.000> that<02:14:41.239> it<02:14:41.400> was<02:14:41.599> just<02:14:41.760> the<02:14:41.920> wrong

go and hope that it was just the wrong

go and hope that it was just the wrong
import<02:14:43.440> right<02:14:43.679> here<02:14:44.520> so<02:14:44.800> now<02:14:45.079> I'm<02:14:45.199> going<02:14:45.320> to

import right here so now I'm going to

import right here so now I'm going to
expand<02:14:46.000> the<02:14:46.159> entire<02:14:46.599> app<02:14:47.599> we<02:14:47.719> can<02:14:47.920> can<02:14:48.040> see<02:14:48.400> how

expand the entire app we can can see how

expand the entire app we can can see how
wonderful<02:14:49.440> this<02:14:49.599> signin<02:14:50.119> is<02:14:50.880> sign<02:14:51.199> up<02:14:51.559> as<02:14:51.800> well

wonderful this signin is sign up as well

wonderful this signin is sign up as well
it's<02:14:52.800> instantaneous<02:14:53.599> moving<02:14:54.000> between<02:14:54.320> the

it's instantaneous moving between the

it's instantaneous moving between the
two<02:14:55.440> and<02:14:55.639> we<02:14:55.760> can<02:14:55.920> try<02:14:56.119> to<02:14:56.320> log<02:14:56.599> in<02:14:56.920> with<02:14:57.079> the

two and we can try to log in with the

two and we can try to log in with the
account<02:14:57.639> we<02:14:57.760> have<02:14:57.960> previously

account we have previously

account we have previously
created<02:15:00.159> I'm<02:15:00.280> going<02:15:00.360> to<02:15:00.520> enter<02:15:00.840> my<02:15:01.079> password

created I'm going to enter my password

created I'm going to enter my password
and<02:15:01.880> click<02:15:02.199> sign

and click sign

and click sign
in<02:15:04.599> and<02:15:04.960> we<02:15:05.159> are<02:15:05.440> on<02:15:05.599> our<02:15:05.960> homepage<02:15:06.840> this<02:15:06.960> is

in and we are on our homepage this is

in and we are on our homepage this is
phenomenal<02:15:08.239> I<02:15:08.360> know<02:15:08.599> it<02:15:08.719> took<02:15:08.920> some<02:15:09.159> time<02:15:09.400> to

phenomenal I know it took some time to

phenomenal I know it took some time to
do<02:15:10.159> this<02:15:10.360> entire<02:15:10.840> Au<02:15:11.280> and<02:15:11.440> everything<02:15:11.880> else

do this entire Au and everything else

do this entire Au and everything else
but<02:15:13.040> hey<02:15:13.440> we're<02:15:13.800> finally<02:15:14.480> in<02:15:15.239> and<02:15:15.440> now<02:15:15.679> we<02:15:15.800> can

but hey we're finally in and now we can

but hey we're finally in and now we can
start<02:15:16.320> focusing<02:15:16.960> on<02:15:17.119> our<02:15:17.320> homepage<02:15:18.239> so<02:15:18.440> we<02:15:18.520> can

start focusing on our homepage so we can

start focusing on our homepage so we can
close<02:15:19.040> our<02:15:19.239> sign<02:15:19.480> in<02:15:19.920> and<02:15:20.119> the<02:15:20.320> sign<02:15:20.599> up<02:15:21.159> and<02:15:21.320> we

close our sign in and the sign up and we

close our sign in and the sign up and we
can<02:15:21.760> go<02:15:22.760> right<02:15:22.960> here<02:15:23.159> to<02:15:23.559> Source<02:15:24.639> root

can go right here to Source root

can go right here to Source root
pages<02:15:27.239> and<02:15:27.360> then<02:15:27.599> homepage<02:15:28.320> or<02:15:28.599> rather<02:15:28.840> we'll

pages and then homepage or rather we'll

pages and then homepage or rather we'll
have<02:15:29.159> to<02:15:29.239> do<02:15:29.400> the<02:15:29.520> root<02:15:29.880> layout<02:15:30.360> first<02:15:30.760> because

have to do the root layout first because

have to do the root layout first because
that<02:15:31.239> we're<02:15:31.440> seeing<02:15:32.040> but<02:15:32.199> then<02:15:32.360> soon<02:15:32.639> enough

that we're seeing but then soon enough

that we're seeing but then soon enough
we'll<02:15:33.079> move<02:15:33.320> to<02:15:33.440> the<02:15:33.559> homage<02:15:34.360> and<02:15:34.559> the<02:15:34.760> rest<02:15:35.000> of

we'll move to the homage and the rest of

we'll move to the homage and the rest of
the<02:15:35.400> content<02:15:36.360> I<02:15:36.480> know<02:15:36.760> it<02:15:36.880> took<02:15:37.119> some<02:15:37.320> time<02:15:37.880> but

the content I know it took some time but

the content I know it took some time but
we<02:15:38.400> laid<02:15:38.800> out<02:15:39.119> a<02:15:39.639> strong<02:15:40.000> foundation<02:15:40.920> for

we laid out a strong foundation for

we laid out a strong foundation for
everything<02:15:41.639> else<02:15:42.079> we're<02:15:42.320> about<02:15:42.559> to<02:15:42.719> build<02:15:43.320> so

everything else we're about to build so

everything else we're about to build so
phenomenal<02:15:44.239> job<02:15:44.520> coming<02:15:44.920> this<02:15:45.079> far<02:15:45.320> into<02:15:45.520> the

phenomenal job coming this far into the

phenomenal job coming this far into the
video<02:15:46.400> and<02:15:46.639> now<02:15:47.040> the<02:15:47.239> exciting<02:15:47.559> stuff<02:15:47.840> stuff

video and now the exciting stuff stuff

video and now the exciting stuff stuff
begins<02:15:49.599> let's<02:15:49.840> get<02:15:50.040> started<02:15:50.599> with<02:15:50.760> the<02:15:50.880> root

begins let's get started with the root

begins let's get started with the root
layout<02:15:52.360> the<02:15:52.520> layout<02:15:53.000> is<02:15:53.119> going<02:15:53.280> to<02:15:53.480> play<02:15:53.760> a

layout the layout is going to play a

layout the layout is going to play a
major<02:15:54.599> role<02:15:55.199> in<02:15:55.480> turning<02:15:55.880> our<02:15:56.119> app<02:15:56.400> from<02:15:56.800> this

major role in turning our app from this

major role in turning our app from this
to<02:15:58.000> this<02:15:58.599> where<02:15:58.760> we<02:15:58.920> have<02:15:59.159> the<02:15:59.360> sidebar<02:15:59.840> on<02:15:59.960> the

to this where we have the sidebar on the

to this where we have the sidebar on the
left<02:16:00.400> side<02:16:01.000> the<02:16:01.119> whole<02:16:01.480> middle<02:16:01.840> part<02:16:02.040> for<02:16:02.199> the

left side the whole middle part for the

left side the whole middle part for the
post<02:16:03.199> and<02:16:03.360> then<02:16:03.559> the<02:16:03.800> top<02:16:04.000> creators<02:16:04.440> on<02:16:04.599> the

post and then the top creators on the

post and then the top creators on the
right<02:16:05.400> and<02:16:05.559> of<02:16:05.719> course<02:16:06.040> it's<02:16:06.280> all<02:16:06.679> fully

right and of course it's all fully

right and of course it's all fully
mobile<02:16:07.520> responsive<02:16:08.119> so<02:16:08.360> as<02:16:08.480> you<02:16:08.639> scroll<02:16:09.280> we

mobile responsive so as you scroll we

mobile responsive so as you scroll we
have<02:16:09.639> this<02:16:09.840> beautiful<02:16:10.320> mobile<02:16:11.040> UI<02:16:12.040> so<02:16:12.599> let's

have this beautiful mobile UI so let's

have this beautiful mobile UI so let's
get<02:16:13.040> started<02:16:13.400> with<02:16:13.520> the<02:16:13.639> root<02:16:14.000> layout<02:16:15.000> by

get started with the root layout by

get started with the root layout by
wrapping<02:16:15.880> everything<02:16:16.239> in<02:16:16.360> a<02:16:16.559> div<02:16:17.159> that's

wrapping everything in a div that's

wrapping everything in a div that's
going<02:16:17.480> to<02:16:17.840> have<02:16:18.079> a<02:16:18.400> class<02:16:19.040> name<02:16:20.040> equal<02:16:20.400> to<02:16:21.280> w-

going to have a class name equal to w-

going to have a class name equal to w-
fold<02:16:22.320> for<02:16:22.520> full<02:16:22.880> width<02:16:23.520> and<02:16:23.679> on<02:16:23.840> medium

fold for full width and on medium

fold for full width and on medium
devices<02:16:25.480> Flex<02:16:26.480> now<02:16:26.800> within<02:16:27.199> here<02:16:27.440> we'll<02:16:27.679> have

devices Flex now within here we'll have

devices Flex now within here we'll have
a<02:16:28.000> couple<02:16:28.239> of<02:16:28.440> components<02:16:29.199> so<02:16:29.360> let's<02:16:29.559> go<02:16:29.679> ahead

a couple of components so let's go ahead

a couple of components so let's go ahead
and<02:16:30.079> create<02:16:30.400> them<02:16:31.040> we<02:16:31.159> can<02:16:31.280> do<02:16:31.520> them<02:16:31.719> within

and create them we can do them within

and create them we can do them within
the<02:16:32.120> shared<02:16:33.040> and<02:16:33.200> we<02:16:33.280> can<02:16:33.439> create<02:16:33.639> a<02:16:33.800> new<02:16:34.040> file

the shared and we can create a new file

the shared and we can create a new file
called<02:16:34.880> top<02:16:35.519> bar.<02:16:36.920> TSX<02:16:37.920> and<02:16:38.080> run<02:16:38.319> R<02:16:38.679> efce

called top bar. TSX and run R efce

called top bar. TSX and run R efce
inside<02:16:39.880> of<02:16:40.120> there<02:16:40.960> we<02:16:41.040> can<02:16:41.240> do<02:16:41.559> a<02:16:41.880> second<02:16:42.200> one

inside of there we can do a second one

inside of there we can do a second one
called<02:16:43.240> Left<02:16:44.240> sidebar.<02:16:45.280> TSX<02:16:46.280> and<02:16:46.439> run<02:16:46.719> r<02:16:47.160> fce

called Left sidebar. TSX and run r fce

called Left sidebar. TSX and run r fce
if<02:16:48.760> we<02:16:48.880> have<02:16:49.000> a<02:16:49.200> left<02:16:49.439> one<02:16:50.080> we're<02:16:50.240> going<02:16:50.359> to

if we have a left one we're going to

if we have a left one we're going to
also<02:16:51.040> have<02:16:51.399> a<02:16:51.679> bottom<02:16:52.080> bar<02:16:52.519> so<02:16:52.679> let's<02:16:52.920> create<02:16:53.200> a

also have a bottom bar so let's create a

also have a bottom bar so let's create a
bottom<02:16:54.439> bar.<02:16:55.439> TSX<02:16:56.439> run

bottom bar. TSX run

bottom bar. TSX run
rafc<02:16:58.760> and<02:16:59.000> that's<02:16:59.240> everything<02:16:59.599> we<02:16:59.719> need<02:16:59.960> so

rafc and that's everything we need so

rafc and that's everything we need so
far<02:17:00.760> so<02:17:00.960> let's<02:17:01.240> go<02:17:01.559> back<02:17:01.880> into<02:17:02.160> our<02:17:02.280> root

far so let's go back into our root

far so let's go back into our root
layout<02:17:03.280> and<02:17:03.479> let's<02:17:03.840> use<02:17:04.280> all<02:17:04.439> of<02:17:04.639> these

layout and let's use all of these

layout and let's use all of these
components<02:17:06.000> so<02:17:06.319> here<02:17:06.719> we<02:17:06.880> can<02:17:07.120> put<02:17:07.319> the<02:17:07.519> top

components so here we can put the top

components so here we can put the top
bar<02:17:08.280> at<02:17:08.439> the<02:17:08.639> top<02:17:09.080> and<02:17:09.240> just<02:17:09.359> self<02:17:09.760> close<02:17:10.359> it

bar at the top and just self close it

bar at the top and just self close it
and<02:17:11.639> import<02:17:12.000> it<02:17:12.359> by<02:17:12.599> double<02:17:12.960> clicking<02:17:13.399> and

and import it by double clicking and

and import it by double clicking and
pressing<02:17:13.920> control<02:17:14.679> space<02:17:15.679> then<02:17:15.920> we're<02:17:16.040> going

pressing control space then we're going

pressing control space then we're going
to<02:17:16.319> have<02:17:16.479> the<02:17:16.679> left<02:17:17.000> side<02:17:17.200> bar<02:17:17.679> immediately

to have the left side bar immediately

to have the left side bar immediately
below<02:17:19.000> also<02:17:19.319> you<02:17:19.399> need<02:17:19.559> to<02:17:19.719> import<02:17:20.319> it<02:17:21.319> then

below also you need to import it then

below also you need to import it then
below<02:17:22.160> it<02:17:22.319> we're<02:17:22.439> going<02:17:22.559> to<02:17:22.679> have<02:17:22.840> a

below it we're going to have a

below it we're going to have a
section<02:17:25.080> and<02:17:25.439> this<02:17:25.719> section<02:17:26.160> is<02:17:26.280> going<02:17:26.479> to

section and this section is going to

section and this section is going to
have<02:17:27.080> a<02:17:27.359> class<02:17:27.760> name<02:17:28.479> equal<02:17:28.800> to<02:17:29.000> flex<02:17:29.840> Flex<02:17:30.359> D1

have a class name equal to flex Flex D1

have a class name equal to flex Flex D1
so<02:17:31.120> it<02:17:31.319> expands<02:17:32.240> and<02:17:32.399> then<02:17:32.599> h-<02:17:33.240> full<02:17:33.719> for<02:17:33.920> the

so it expands and then h- full for the

so it expands and then h- full for the
full<02:17:34.399> height<02:17:35.399> and<02:17:35.679> within<02:17:36.000> it<02:17:36.319> we<02:17:36.439> want<02:17:36.559> to

full height and within it we want to

full height and within it we want to
render<02:17:37.479> the<02:17:37.800> outlet<02:17:38.920> component<02:17:39.920> this

render the outlet component this

render the outlet component this
component<02:17:40.679> has<02:17:40.800> to<02:17:40.960> be<02:17:41.120> imported<02:17:41.719> from<02:17:42.240> react

component has to be imported from react

component has to be imported from react
router<02:17:43.120> Dom<02:17:44.040> so<02:17:44.880> outlet<02:17:46.120> from<02:17:47.120> react

router Dom so outlet from react

router Dom so outlet from react
router

router

router
Dom<02:17:51.000> this<02:17:51.120> is<02:17:51.319> similar<02:17:51.679> to<02:17:51.840> what<02:17:51.960> we<02:17:52.080> have<02:17:52.240> done

Dom this is similar to what we have done

Dom this is similar to what we have done
before<02:17:53.160> for<02:17:53.519> our<02:17:54.040> off<02:17:54.399> layout<02:17:55.200> where<02:17:55.599> this

before for our off layout where this

before for our off layout where this
Outlet<02:17:56.760> actually<02:17:57.280> lets<02:17:57.599> us<02:17:57.880> show<02:17:58.519> what's

Outlet actually lets us show what's

Outlet actually lets us show what's
going<02:17:58.920> to<02:17:59.120> be<02:17:59.399> on<02:17:59.559> the<02:17:59.719> homepage<02:18:00.439> later<02:18:00.719> on<02:18:01.719> and

going to be on the homepage later on and

going to be on the homepage later on and
then<02:18:02.040> below<02:18:02.359> it<02:18:02.679> we<02:18:02.840> also<02:18:03.080> want<02:18:03.200> to<02:18:03.359> render<02:18:04.000> the

then below it we also want to render the

then below it we also want to render the
Bottom

Bottom

Bottom
bar<02:18:06.719> there<02:18:06.880> we<02:18:07.040> go<02:18:07.399> so<02:18:07.639> now<02:18:07.800> we<02:18:08.000> have

bar there we go so now we have

bar there we go so now we have
everything<02:18:08.679> we<02:18:08.800> need<02:18:09.319> right<02:18:09.559> here<02:18:10.120> if<02:18:10.240> you

everything we need right here if you

everything we need right here if you
scroll<02:18:10.760> all<02:18:11.000> the<02:18:11.120> way<02:18:11.599> you'll<02:18:11.760> see<02:18:11.960> a<02:18:12.120> bottom

scroll all the way you'll see a bottom

scroll all the way you'll see a bottom
bar<02:18:12.880> there<02:18:13.280> as<02:18:13.479> well<02:18:14.359> so<02:18:14.639> now<02:18:14.960> before<02:18:15.200> we<02:18:15.319> start

bar there as well so now before we start

bar there as well so now before we start
with<02:18:15.719> the<02:18:15.840> homepage<02:18:16.599> let's<02:18:16.840> start<02:18:17.120> with<02:18:17.280> these

with the homepage let's start with these

with the homepage let's start with these
individual<02:18:18.200> Pages<02:18:19.000> such<02:18:19.200> as<02:18:19.599> the<02:18:19.800> top<02:18:20.080> bar

individual Pages such as the top bar

individual Pages such as the top bar
since<02:18:21.080> it's<02:18:21.280> at<02:18:21.439> the<02:18:21.960> top<02:18:22.960> this<02:18:23.240> is<02:18:23.399> going<02:18:23.599> to

since it's at the top this is going to

since it's at the top this is going to
be<02:18:24.040> a<02:18:24.280> simple<02:18:24.760> section<02:18:25.399> so<02:18:25.719> let's<02:18:25.920> turn<02:18:26.160> it

be a simple section so let's turn it

be a simple section so let's turn it
into<02:18:26.599> a

into a

into a
section<02:18:28.599> and<02:18:28.800> it's<02:18:28.960> going<02:18:29.120> to<02:18:29.280> have<02:18:29.439> a<02:18:29.679> class

section and it's going to have a class

section and it's going to have a class
name<02:18:30.599> equal<02:18:30.960> to<02:18:31.599> Top

name equal to Top

name equal to Top
Bar<02:18:34.240> within<02:18:34.519> it<02:18:34.800> we<02:18:34.920> can<02:18:35.120> create<02:18:35.399> a<02:18:35.639> div<02:18:36.439> and

Bar within it we can create a div and

Bar within it we can create a div and
that<02:18:36.880> div<02:18:37.200> is<02:18:37.319> going<02:18:37.519> to<02:18:37.679> have<02:18:37.840> a<02:18:38.080> class<02:18:38.399> name

that div is going to have a class name

that div is going to have a class name
equal<02:18:39.399> to<02:18:39.599> flex

equal to flex

equal to flex
between<02:18:41.880> padding<02:18:42.319> y<02:18:42.559> of<02:18:42.760> four<02:18:43.200> meaning<02:18:43.639> top

between padding y of four meaning top

between padding y of four meaning top
and<02:18:44.040> bottom<02:18:44.679> and<02:18:44.880> padding<02:18:45.280> X<02:18:45.679> meaning<02:18:46.040> left

and bottom and padding X meaning left

and bottom and padding X meaning left
and<02:18:46.519> right<02:18:47.000> of<02:18:47.240> five

and right of five

and right of five
right<02:18:49.040> here<02:18:49.399> we<02:18:49.559> can<02:18:49.679> render<02:18:50.120> a<02:18:50.639> link<02:18:51.639> and<02:18:51.920> that

right here we can render a link and that

right here we can render a link and that
link<02:18:52.439> is<02:18:52.599> going<02:18:52.760> to<02:18:53.000> point<02:18:53.399> to<02:18:54.040> the<02:18:54.359> homepage

link is going to point to the homepage

link is going to point to the homepage
it's<02:18:55.599> also<02:18:55.800> going<02:18:55.960> to<02:18:56.120> have<02:18:56.280> a<02:18:56.479> class<02:18:56.840> name

it's also going to have a class name

it's also going to have a class name
equal<02:18:57.760> to<02:18:58.399> flex<02:18:59.399> Gap<02:18:59.920> D3<02:19:00.920> and<02:19:01.200> items<02:19:01.639> Das

equal to flex Gap D3 and items Das

equal to flex Gap D3 and items Das
Center<02:19:02.719> because<02:19:03.040> it<02:19:03.200> needs<02:19:03.479> to<02:19:03.679> Center<02:19:04.359> our

Center because it needs to Center our

Center because it needs to Center our
image<02:19:06.240> so<02:19:06.519> first<02:19:06.840> let's<02:19:07.120> import<02:19:07.559> this<02:19:07.760> link

image so first let's import this link

image so first let's import this link
from<02:19:08.760> react<02:19:09.160> router<02:19:09.519> Dom<02:19:10.040> by<02:19:10.160> saying<02:19:10.559> import

from react router Dom by saying import

from react router Dom by saying import
link<02:19:12.439> from<02:19:12.920> react<02:19:13.719> router

link from react router

link from react router
Dom<02:19:16.200> and<02:19:16.399> then<02:19:16.639> this<02:19:16.880> image<02:19:17.280> is<02:19:17.519> is<02:19:17.599> going<02:19:17.760> to

Dom and then this image is is going to

Dom and then this image is is going to
have<02:19:18.040> a<02:19:18.240> source<02:19:19.000> equal<02:19:19.319> to<02:19:20.280> SL

have a source equal to SL

have a source equal to SL
assets

assets

assets
slimes<02:19:24.040> SL<02:19:24.559> logo.<02:19:25.840> SVG<02:19:26.840> once<02:19:27.000> we<02:19:27.160> save<02:19:27.439> it<02:19:27.880> you

slimes SL logo. SVG once we save it you

slimes SL logo. SVG once we save it you
can<02:19:28.160> see<02:19:28.359> snapgram<02:19:29.160> appear<02:19:29.639> on<02:19:30.000> top<02:19:31.000> let's

can see snapgram appear on top let's

can see snapgram appear on top let's
also<02:19:31.519> give<02:19:31.639> it<02:19:31.760> an<02:19:31.920> Al<02:19:32.280> tag<02:19:32.519> off<02:19:33.040> logo<02:19:34.040> a<02:19:34.319> width

also give it an Al tag off logo a width

also give it an Al tag off logo a width
of<02:19:35.040> 130<02:19:36.040> pixels<02:19:36.760> and<02:19:37.000> a<02:19:37.280> height<02:19:37.639> of<02:19:38.240> 325<02:19:39.399> pixels

of 130 pixels and a height of 325 pixels

of 130 pixels and a height of 325 pixels
there<02:19:40.559> we<02:19:40.760> go<02:19:41.599> now<02:19:41.880> below<02:19:42.240> the<02:19:42.399> link<02:19:43.000> still

there we go now below the link still

there we go now below the link still
within<02:19:43.679> this<02:19:43.840> div<02:19:44.280> we<02:19:44.359> want<02:19:44.479> to<02:19:44.639> do<02:19:44.800> another

within this div we want to do another

within this div we want to do another
div<02:19:45.840> that's<02:19:46.040> going<02:19:46.200> to<02:19:46.399> have<02:19:46.559> a<02:19:46.760> class<02:19:47.080> name

div that's going to have a class name

div that's going to have a class name
equal<02:19:47.960> to<02:19:48.240> flex<02:19:49.240> and<02:19:49.520> a<02:19:49.760> gap<02:19:50.040> of

equal to flex and a gap of

equal to flex and a gap of
four<02:19:51.880> within<02:19:52.160> it<02:19:52.359> we<02:19:52.439> can<02:19:52.640> create<02:19:53.040> a<02:19:53.319> button

four within it we can create a button

four within it we can create a button
and<02:19:54.479> this<02:19:54.600> is<02:19:54.720> going<02:19:54.880> to<02:19:55.000> be<02:19:55.160> a<02:19:55.399> reusable

and this is going to be a reusable

and this is going to be a reusable
button<02:19:57.000> component<02:19:58.000> of<02:19:58.200> course<02:19:58.680> coming<02:19:59.040> from

button component of course coming from

button component of course coming from
Shad<02:19:59.840> CN<02:20:00.560> meaning<02:20:01.000> from<02:20:01.240> UI<02:20:01.800> button<02:20:02.800> within

Shad CN meaning from UI button within

Shad CN meaning from UI button within
the<02:20:03.200> button<02:20:03.800> we<02:20:03.920> can<02:20:04.080> render<02:20:04.720> the<02:20:04.920> image<02:20:05.680> that

the button we can render the image that

the button we can render the image that
has<02:20:06.160> a<02:20:06.399> source<02:20:07.000> equal<02:20:07.280> to<02:20:07.479> for<02:20:07.840> SL<02:20:08.319> assets<02:20:09.319> SL

has a source equal to for SL assets SL

has a source equal to for SL assets SL
ions<02:20:10.760> SL<02:20:11.160> log<02:20:11.399> out.<02:20:12.040> SVG<02:20:13.040> and<02:20:13.200> the<02:20:13.319> alt<02:20:13.640> tag<02:20:13.920> can

ions SL log out. SVG and the alt tag can

ions SL log out. SVG and the alt tag can
be<02:20:14.240> log<02:20:14.520> out<02:20:14.880> as

be log out as

be log out as
well<02:20:16.880> there<02:20:17.000> we<02:20:17.160> go<02:20:17.520> you<02:20:17.600> can<02:20:17.720> see<02:20:17.920> it<02:20:18.040> on<02:20:18.319> there

well there we go you can see it on there

well there we go you can see it on there
and<02:20:19.359> then<02:20:19.760> we<02:20:19.960> also<02:20:20.240> need<02:20:20.399> to<02:20:20.640> have<02:20:20.920> a<02:20:21.200> variant

and then we also need to have a variant

and then we also need to have a variant
equal<02:20:22.439> to<02:20:22.800> ghost<02:20:23.720> that's<02:20:23.920> an<02:20:24.080> interesting<02:20:24.600> one

equal to ghost that's an interesting one

equal to ghost that's an interesting one
we<02:20:25.720> can<02:20:25.880> give<02:20:26.000> it<02:20:26.120> a<02:20:26.319> class<02:20:26.720> name<02:20:27.359> equal<02:20:27.680> to

we can give it a class name equal to

we can give it a class name equal to
Shad<02:20:28.880> button<02:20:30.120> ghost<02:20:31.120> and<02:20:31.319> we<02:20:31.439> can<02:20:31.560> give<02:20:31.680> it<02:20:31.800> an

Shad button ghost and we can give it an

Shad button ghost and we can give it an
onclick

onclick

onclick
property<02:20:34.280> so<02:20:34.479> that's<02:20:34.640> going<02:20:34.800> to<02:20:34.960> be<02:20:35.240> right

property so that's going to be right

property so that's going to be right
here<02:20:35.680> on<02:20:36.120> click<02:20:37.040> and<02:20:37.200> we<02:20:37.319> simply<02:20:37.600> want<02:20:37.680> to<02:20:37.840> call

here on click and we simply want to call

here on click and we simply want to call
the<02:20:38.439> sign<02:20:38.880> out<02:20:39.640> functionality<02:20:40.640> now<02:20:40.960> this<02:20:41.120> sign

the sign out functionality now this sign

the sign out functionality now this sign
out<02:20:42.000> is<02:20:42.200> something<02:20:42.560> we<02:20:42.720> also<02:20:43.040> have<02:20:43.160> to<02:20:43.399> Define

out is something we also have to Define

out is something we also have to Define
so<02:20:44.560> we'll<02:20:44.800> have<02:20:44.920> to<02:20:45.200> go<02:20:45.640> to<02:20:45.880> our<02:20:46.319> queries

so we'll have to go to our queries

so we'll have to go to our queries
that's<02:20:47.680> going<02:20:47.880> to<02:20:48.000> be<02:20:48.240> within<02:20:48.560> lib<02:20:49.080> react

that's going to be within lib react

that's going to be within lib react
query<02:20:50.479> and<02:20:50.600> then<02:20:50.800> queries<02:20:51.160> and<02:20:51.439> mutations<02:20:52.439> and

query and then queries and mutations and

query and then queries and mutations and
right<02:20:52.920> here<02:20:53.319> we'll<02:20:53.560> have<02:20:53.720> to<02:20:54.000> copy<02:20:54.600> the<02:20:54.800> Ed

right here we'll have to copy the Ed

right here we'll have to copy the Ed
sign<02:20:55.520> in<02:20:56.120> account<02:20:57.120> duplicate<02:20:57.640> it<02:20:58.040> right<02:20:58.439> below

sign in account duplicate it right below

sign in account duplicate it right below
and<02:20:59.760> call<02:21:00.000> it<02:21:00.399> use<02:21:01.120> sign<02:21:01.720> out<02:21:02.760> account<02:21:03.760> and<02:21:03.920> we

and call it use sign out account and we

and call it use sign out account and we
simply<02:21:04.319> want<02:21:04.439> to<02:21:04.640> use<02:21:04.960> a<02:21:05.120> mutation<02:21:06.000> or<02:21:06.359> return

simply want to use a mutation or return

simply want to use a mutation or return
a<02:21:06.800> mutation<02:21:07.800> that<02:21:07.960> doesn't<02:21:08.280> have<02:21:08.439> to<02:21:08.960> get<02:21:09.240> any

a mutation that doesn't have to get any

a mutation that doesn't have to get any
properties<02:21:10.160> in<02:21:10.920> but<02:21:11.120> it<02:21:11.319> has<02:21:11.479> to<02:21:11.680> call<02:21:12.359> the

properties in but it has to call the

properties in but it has to call the
sign<02:21:13.479> out<02:21:14.479> account<02:21:15.359> function<02:21:16.120> so<02:21:16.280> we<02:21:16.399> can<02:21:16.560> do

sign out account function so we can do

sign out account function so we can do
it<02:21:16.960> just<02:21:17.399> like<02:21:17.600> so<02:21:18.399> but<02:21:18.560> of<02:21:18.760> course<02:21:19.439> this<02:21:19.960> has

it just like so but of course this has

it just like so but of course this has
to<02:21:20.319> come<02:21:20.600> from<02:21:21.000> aight<02:21:21.880> so<02:21:22.080> in<02:21:22.240> the<02:21:22.439> aight<02:21:23.080> we'll

to come from aight so in the aight we'll

to come from aight so in the aight we'll
have<02:21:23.439> to<02:21:23.600> create<02:21:23.920> a<02:21:24.160> new<02:21:24.720> function<02:21:25.399> like<02:21:25.560> we

have to create a new function like we

have to create a new function like we
have<02:21:25.920> sign<02:21:26.240> in<02:21:26.600> account<02:21:27.600> we'll<02:21:27.880> also<02:21:28.200> have<02:21:28.319> to

have sign in account we'll also have to

have sign in account we'll also have to
have<02:21:29.000> another<02:21:30.000> export<02:21:30.600> async

have another export async

have another export async
function<02:21:32.960> sign<02:21:33.680> out

function sign out

function sign out
account<02:21:36.439> we<02:21:36.520> can<02:21:36.720> open<02:21:36.960> up<02:21:37.080> a<02:21:37.240> new<02:21:37.520> try<02:21:37.840> and

account we can open up a new try and

account we can open up a new try and
catch<02:21:38.840> block<02:21:39.840> consol<02:21:40.399> log<02:21:40.680> the<02:21:40.880> error<02:21:41.680> right

catch block consol log the error right

catch block consol log the error right
here<02:21:42.680> and<02:21:42.840> then<02:21:43.000> on<02:21:43.280> try<02:21:44.080> we<02:21:44.200> can<02:21:44.359> say<02:21:44.680> con

here and then on try we can say con

here and then on try we can say con
session<02:21:46.120> is<02:21:46.319> equal<02:21:46.640> to<02:21:47.479> await<02:21:48.560> account.

session is equal to await account.

session is equal to await account.
delete<02:21:52.439> session<02:21:53.439> and<02:21:53.560> then<02:21:53.720> we<02:21:53.840> need<02:21:54.000> to<02:21:54.280> pass

delete session and then we need to pass

delete session and then we need to pass
current<02:21:55.960> this<02:21:56.080> is<02:21:56.240> so<02:21:56.479> cool<02:21:56.840> so<02:21:57.040> this<02:21:57.160> was

current this is so cool so this was

current this is so cool so this was
provided<02:21:57.800> to<02:21:58.040> us<02:21:58.640> by<02:21:59.040> app<02:21:59.439> right<02:21:59.840> so<02:22:00.000> we<02:22:00.120> can

provided to us by app right so we can

provided to us by app right so we can
delete<02:22:00.640> the<02:22:00.840> session<02:22:01.680> and<02:22:01.840> then<02:22:01.960> we<02:22:02.080> can

delete the session and then we can

delete the session and then we can
return<02:22:02.880> deleted

return deleted

return deleted
session<02:22:05.319> now<02:22:06.080> we<02:22:06.240> have<02:22:06.479> this<02:22:06.680> sign<02:22:06.960> out

session now we have this sign out

session now we have this sign out
account<02:22:08.600> within<02:22:09.000> queries<02:22:09.359> and<02:22:09.520> mutations<02:22:10.120> we

account within queries and mutations we

account within queries and mutations we
can<02:22:10.479> import<02:22:10.840> it<02:22:11.200> from<02:22:11.520> app<02:22:11.960> right<02:22:12.960> and<02:22:13.120> we

can import it from app right and we

can import it from app right and we
don't<02:22:13.439> have<02:22:13.560> to<02:22:13.720> call<02:22:13.960> it<02:22:14.280> because<02:22:14.760> it's<02:22:14.920> going

don't have to call it because it's going

don't have to call it because it's going
to<02:22:15.080> be<02:22:15.200> self<02:22:15.640> calling<02:22:16.000> function<02:22:16.800> or<02:22:17.240> rather

to be self calling function or rather

to be self calling function or rather
just<02:22:17.560> a<02:22:17.680> function<02:22:18.000> declaration<02:22:18.640> here<02:22:19.280> and

just a function declaration here and

just a function declaration here and
then<02:22:19.600> going<02:22:19.960> back<02:22:20.120> to<02:22:20.280> the<02:22:20.439> top<02:22:20.680> bar<02:22:21.120> we<02:22:21.240> can

then going back to the top bar we can

then going back to the top bar we can
Define<02:22:22.359> that<02:22:23.160> mutation<02:22:24.160> we<02:22:24.280> can<02:22:24.439> do<02:22:24.680> that<02:22:24.840> by

Define that mutation we can do that by

Define that mutation we can do that by
going<02:22:25.319> here<02:22:25.479> to<02:22:25.640> the<02:22:25.880> top<02:22:26.560> and<02:22:26.760> saying<02:22:27.760> const

going here to the top and saying const

going here to the top and saying const
mutate<02:22:29.720> in<02:22:29.920> this<02:22:30.160> case<02:22:30.399> it's<02:22:30.560> going<02:22:30.760> to<02:22:31.200> sign

mutate in this case it's going to sign

mutate in this case it's going to sign
out<02:22:33.439> we're<02:22:33.600> going<02:22:33.720> to<02:22:34.040> get<02:22:34.280> the<02:22:34.479> is<02:22:34.840> Success

out we're going to get the is Success

out we're going to get the is Success
variable<02:22:35.840> as<02:22:36.000> well<02:22:36.640> and<02:22:36.800> that's<02:22:36.960> going<02:22:37.040> to<02:22:37.160> be

variable as well and that's going to be

variable as well and that's going to be
equal<02:22:37.600> to<02:22:37.840> use<02:22:38.439> sign<02:22:39.160> out<02:22:39.920> account<02:22:40.680> coming

equal to use sign out account coming

equal to use sign out account coming
from<02:22:41.240> lib<02:22:41.720> react<02:22:42.200> query<02:22:42.920> queries<02:22:43.399> and

from lib react query queries and

from lib react query queries and
mutations<02:22:45.760> and<02:22:45.920> now<02:22:46.200> we<02:22:46.280> can<02:22:46.439> call<02:22:46.680> the<02:22:46.800> sign

mutations and now we can call the sign

mutations and now we can call the sign
now<02:22:47.560> on<02:22:48.439> click<02:22:49.439> and<02:22:49.560> we<02:22:49.680> can<02:22:49.880> also<02:22:50.200> make<02:22:50.359> it<02:22:51.040> a

now on click and we can also make it a

now on click and we can also make it a
an<02:22:51.760> actual<02:22:52.200> function<02:22:53.200> like<02:22:53.680> so<02:22:54.479> and<02:22:54.640> call<02:22:54.840> it

an actual function like so and call it

an actual function like so and call it
here<02:22:55.800> there<02:22:56.000> we<02:22:56.160> go<02:22:56.920> so<02:22:57.120> now<02:22:57.280> we<02:22:57.359> can<02:22:57.479> see<02:22:57.640> the

here there we go so now we can see the

here there we go so now we can see the
log<02:22:58.000> out<02:22:58.280> button<02:22:58.840> as<02:22:59.160> well<02:23:00.160> here<02:23:00.520> we<02:23:00.720> also<02:23:01.000> want

log out button as well here we also want

log out button as well here we also want
to<02:23:01.319> add<02:23:01.600> a<02:23:01.800> use<02:23:02.160> effect<02:23:02.600> so<02:23:02.760> we<02:23:02.840> can<02:23:02.960> say<02:23:03.319> use

to add a use effect so we can say use

to add a use effect so we can say use
effect<02:23:06.040> and<02:23:06.520> if<02:23:07.080> we<02:23:07.240> have<02:23:07.760> successfully

effect and if we have successfully

effect and if we have successfully
navigated<02:23:09.439> so<02:23:09.760> if<02:23:10.080> is<02:23:10.439> Success<02:23:11.439> then<02:23:11.800> we<02:23:11.920> want

navigated so if is Success then we want

navigated so if is Success then we want
to<02:23:12.200> use<02:23:12.439> the<02:23:12.600> navigate<02:23:13.479> so<02:23:13.760> right<02:23:14.000> here<02:23:14.520> we<02:23:14.640> can

to use the navigate so right here we can

to use the navigate so right here we can
import<02:23:17.160> const<02:23:17.960> so<02:23:18.160> at<02:23:18.319> the<02:23:18.520> top<02:23:18.880> we<02:23:19.000> can<02:23:19.240> import

import const so at the top we can import

import const so at the top we can import
use<02:23:20.680> navigate<02:23:21.600> from<02:23:21.800> react<02:23:22.359> Rd<02:23:23.359> we<02:23:23.439> can

use navigate from react Rd we can

use navigate from react Rd we can
declare<02:23:24.080> it<02:23:24.240> as<02:23:24.359> a<02:23:24.520> function<02:23:25.000> con<02:23:25.399> navigate<02:23:26.359> is

declare it as a function con navigate is

declare it as a function con navigate is
equal<02:23:26.880> to<02:23:27.120> use<02:23:27.600> navigate<02:23:28.600> and<02:23:28.800> then<02:23:29.439> if<02:23:30.120> is

equal to use navigate and then if is

equal to use navigate and then if is
Success<02:23:31.240> we<02:23:31.359> can<02:23:31.479> say<02:23:31.800> navigate<02:23:32.800> Z<02:23:33.800> this<02:23:33.920> is

Success we can say navigate Z this is

Success we can say navigate Z this is
going<02:23:34.200> to<02:23:34.399> navigate<02:23:34.880> us<02:23:35.240> to<02:23:35.479> the<02:23:35.760> sign<02:23:36.000> up<02:23:36.200> or

going to navigate us to the sign up or

going to navigate us to the sign up or
the<02:23:36.520> signin<02:23:36.960> screen<02:23:37.880> and<02:23:38.000> we<02:23:38.160> also<02:23:38.359> need<02:23:38.520> to

the signin screen and we also need to

the signin screen and we also need to
add<02:23:40.120> the<02:23:40.319> dependency<02:23:40.800> array<02:23:41.399> or<02:23:41.600> we<02:23:41.680> can<02:23:41.840> check

add the dependency array or we can check

add the dependency array or we can check
for<02:23:42.319> is<02:23:42.600> success<02:23:43.520> and<02:23:43.640> then<02:23:43.880> import<02:23:44.640> use

for is success and then import use

for is success and then import use
effect<02:23:45.520> from<02:23:45.840> react<02:23:46.479> so<02:23:46.720> the<02:23:46.840> task<02:23:47.520> we<02:23:47.600> can

effect from react so the task we can

effect from react so the task we can
import<02:23:49.160> use<02:23:49.880> effect<02:23:50.880> coming

import use effect coming

import use effect coming
from

from

from
react<02:23:54.880> there<02:23:55.319> we<02:23:55.960> go<02:23:56.960> finally<02:23:57.399> we<02:23:57.479> can<02:23:57.680> also

react there we go finally we can also

react there we go finally we can also
add<02:23:58.319> a<02:23:58.560> profile<02:23:58.960> photo<02:23:59.600> that<02:23:59.720> we<02:23:59.840> can<02:24:00.040> click<02:24:00.319> to

add a profile photo that we can click to

add a profile photo that we can click to
go<02:24:00.600> to<02:24:00.760> our<02:24:01.040> profile<02:24:01.680> so<02:24:02.000> right<02:24:02.240> below<02:24:02.560> the

go to our profile so right below the

go to our profile so right below the
button<02:24:03.359> we<02:24:03.479> can<02:24:03.680> add<02:24:03.840> a<02:24:04.040> link<02:24:05.040> that's<02:24:05.240> going<02:24:05.399> to

button we can add a link that's going to

button we can add a link that's going to
have<02:24:05.840> a<02:24:06.439> two<02:24:07.439> and<02:24:07.680> then<02:24:07.960> we<02:24:08.080> want<02:24:08.200> to<02:24:08.399> go<02:24:08.720> to<02:24:09.359> for

have a two and then we want to go to for

have a two and then we want to go to for
SL<02:24:10.319> profile<02:24:11.200> but<02:24:11.399> now<02:24:11.680> how<02:24:11.880> do<02:24:12.040> we<02:24:12.200> get<02:24:12.399> the<02:24:12.640> ID

SL profile but now how do we get the ID

SL profile but now how do we get the ID
of<02:24:13.439> the<02:24:13.600> currently<02:24:14.000> logged<02:24:14.319> in<02:24:14.520> user<02:24:15.439> well

of the currently logged in user well

of the currently logged in user well
thankfully<02:24:16.359> we<02:24:16.520> have<02:24:16.640> created<02:24:17.160> our<02:24:17.439> context

thankfully we have created our context

thankfully we have created our context
so<02:24:18.680> right<02:24:18.880> here<02:24:19.080> at<02:24:19.240> the<02:24:19.479> top<02:24:20.000> we<02:24:20.120> can<02:24:20.319> say

so right here at the top we can say

so right here at the top we can say
const<02:24:21.720> user<02:24:22.720> is<02:24:22.960> equal<02:24:23.279> to<02:24:24.040> use<02:24:24.720> user<02:24:25.640> context

const user is equal to use user context

const user is equal to use user context
which<02:24:26.720> we<02:24:26.880> have<02:24:27.000> to<02:24:27.279> import<02:24:27.960> from<02:24:28.760> atcontext

which we have to import from atcontext

which we have to import from atcontext
SLO<02:24:31.640> context<02:24:32.640> and<02:24:32.800> then<02:24:33.359> right<02:24:33.600> here<02:24:34.439> we<02:24:34.560> can

SLO context and then right here we can

SLO context and then right here we can
use<02:24:34.880> dollar<02:24:35.200> sign<02:24:35.359> and<02:24:35.520> curly<02:24:35.840> braces<02:24:36.840> and

use dollar sign and curly braces and

use dollar sign and curly braces and
then<02:24:37.160> say<02:24:37.479> user.

then say user.

then say user.
ID<02:24:40.040> we<02:24:40.120> can<02:24:40.279> also<02:24:40.520> give<02:24:40.720> this<02:24:40.840> link<02:24:41.120> a<02:24:41.359> class

ID we can also give this link a class

ID we can also give this link a class
name<02:24:42.479> equal<02:24:42.800> to<02:24:43.120> flex<02:24:44.200> Center<02:24:45.200> Gap<02:24:45.520> 3<02:24:46.439> and

name equal to flex Center Gap 3 and

name equal to flex Center Gap 3 and
write<02:24:47.040> within<02:24:47.319> the<02:24:47.439> link<02:24:47.840> we<02:24:47.960> can<02:24:48.080> render<02:24:48.359> an

write within the link we can render an

write within the link we can render an
image<02:24:49.640> that's<02:24:49.840> going<02:24:50.000> to<02:24:50.200> have<02:24:50.439> a<02:24:50.680> source

image that's going to have a source

image that's going to have a source
equal<02:24:51.720> to<02:24:52.720> either<02:24:53.760> user.<02:24:54.760> image<02:24:55.240> URL<02:24:56.240> or<02:24:56.439> we

equal to either user. image URL or we

equal to either user. image URL or we
can<02:24:56.680> use<02:24:56.880> some<02:24:57.040> kind<02:24:57.160> of<02:24:57.240> a<02:24:57.439> placeholder<02:24:58.359> just

can use some kind of a placeholder just

can use some kind of a placeholder just
to<02:24:58.680> be<02:24:58.880> safe<02:24:59.359> so<02:24:59.560> that's<02:24:59.760> for/<02:25:00.600> assets<02:25:01.600> SL

to be safe so that's for/ assets SL

to be safe so that's for/ assets SL
imagesprofile<02:25:04.200> dplace<02:25:05.120> holder.

imagesprofile dplace holder.

imagesprofile dplace holder.
SVG<02:25:07.920> if<02:25:08.000> we<02:25:08.160> save<02:25:08.439> it<02:25:09.200> we<02:25:09.319> can<02:25:09.439> see<02:25:09.640> our<02:25:09.960> huge

SVG if we save it we can see our huge

SVG if we save it we can see our huge
TR<02:25:12.560> soon<02:25:12.880> enough<02:25:13.120> we'll<02:25:13.319> figure<02:25:13.560> out<02:25:13.840> why<02:25:14.120> TR<02:25:14.880> I

TR soon enough we'll figure out why TR I

TR soon enough we'll figure out why TR I
don't<02:25:15.160> think<02:25:15.319> I've<02:25:15.520> called<02:25:15.840> myself<02:25:16.200> something

don't think I've called myself something

don't think I've called myself something
with<02:25:16.640> t<02:25:17.000> are<02:25:17.560> oh<02:25:17.760> I<02:25:18.000> have<02:25:18.439> it's<02:25:18.640> the<02:25:18.800> real<02:25:19.160> JSM

with t are oh I have it's the real JSM

with t are oh I have it's the real JSM
so<02:25:20.000> that's<02:25:20.120> why<02:25:20.279> it<02:25:20.479> has<02:25:20.680> those<02:25:21.040> initials<02:25:22.040> alt

so that's why it has those initials alt

so that's why it has those initials alt
is<02:25:22.560> going<02:25:22.720> to<02:25:22.840> be<02:25:23.160> profile<02:25:24.160> and<02:25:24.279> then<02:25:24.560> class

is going to be profile and then class

is going to be profile and then class
name<02:25:25.319> is<02:25:25.520> going<02:25:25.720> to<02:25:25.920> be

name is going to be

name is going to be
h-8<02:25:28.560> for<02:25:28.840> height

h-8 for height

h-8 for height
w-8<02:25:31.160> and<02:25:31.279> then<02:25:31.439> Tailwind<02:25:32.040> allows<02:25:32.319> us<02:25:32.439> to<02:25:32.560> make

w-8 and then Tailwind allows us to make

w-8 and then Tailwind allows us to make
it<02:25:32.920> rounded<02:25:33.399> really<02:25:33.680> easily<02:25:34.279> by<02:25:34.439> saying

it rounded really easily by saying

it rounded really easily by saying
rounded<02:25:35.399> Das<02:25:35.880> full<02:25:36.880> and<02:25:37.080> now<02:25:37.319> we<02:25:37.479> have<02:25:37.640> our<02:25:37.880> top

rounded Das full and now we have our top

rounded Das full and now we have our top
bar<02:25:38.840> you<02:25:39.000> might<02:25:39.160> have<02:25:39.279> been<02:25:39.600> wondering<02:25:40.600> where

bar you might have been wondering where

bar you might have been wondering where
is<02:25:41.200> this<02:25:41.359> stop<02:25:41.680> bar<02:25:42.000> right<02:25:42.399> on<02:25:42.560> the<02:25:42.720> desktop<02:25:43.200> we

is this stop bar right on the desktop we

is this stop bar right on the desktop we
don't<02:25:43.600> have<02:25:43.760> it<02:25:44.399> but<02:25:44.520> we're<02:25:44.760> immediately

don't have it but we're immediately

don't have it but we're immediately
building<02:25:45.840> this<02:25:46.040> application<02:25:46.920> so<02:25:47.240> it<02:25:47.439> works

building this application so it works

building this application so it works
well<02:25:48.359> not<02:25:48.680> well<02:25:49.080> so<02:25:49.279> it<02:25:49.399> works<02:25:49.840> phenomenally

well not well so it works phenomenally

well not well so it works phenomenally
on<02:25:51.000> mobile<02:25:51.399> devices<02:25:52.319> so<02:25:52.560> that's<02:25:52.800> why<02:25:53.000> here<02:25:53.200> in

on mobile devices so that's why here in

on mobile devices so that's why here in
Mobile<02:25:54.120> this<02:25:54.359> phenomenal<02:25:55.120> top<02:25:55.399> bar<02:25:56.120> appears

Mobile this phenomenal top bar appears

Mobile this phenomenal top bar appears
that's<02:25:57.399> great<02:25:58.240> and<02:25:58.479> now<02:25:58.640> we<02:25:58.800> also<02:25:59.000> have<02:25:59.160> the

that's great and now we also have the

that's great and now we also have the
log<02:25:59.520> out<02:25:59.760> functionality<02:26:00.600> so<02:26:00.760> if<02:26:00.880> we<02:26:01.040> click<02:26:01.279> it

log out functionality so if we click it

log out functionality so if we click it
actually<02:26:02.560> redirects<02:26:03.319> back<02:26:04.240> and<02:26:04.479> we<02:26:04.600> can

actually redirects back and we can

actually redirects back and we can
immediately<02:26:05.680> jump<02:26:06.359> back<02:26:06.720> in<02:26:07.520> everything<02:26:07.920> is

immediately jump back in everything is

immediately jump back in everything is
working<02:26:08.520> flawlessly<02:26:09.240> so<02:26:09.479> far<02:26:10.120> the<02:26:10.359> top<02:26:10.600> bar<02:26:10.880> is

working flawlessly so far the top bar is

working flawlessly so far the top bar is
done<02:26:11.720> let's<02:26:12.000> focus<02:26:12.399> on<02:26:12.560> the<02:26:12.840> left<02:26:13.279> sidebar

done let's focus on the left sidebar

done let's focus on the left sidebar
next<02:26:15.000> here<02:26:15.120> is<02:26:15.279> where<02:26:15.399> we're<02:26:15.520> going<02:26:15.600> to<02:26:15.800> have

next here is where we're going to have

next here is where we're going to have
all<02:26:16.399> of<02:26:16.560> the<02:26:16.920> links<02:26:17.720> that<02:26:17.880> we<02:26:18.120> have<02:26:18.720> right

all of the links that we have right

all of the links that we have right
here<02:26:20.720> to<02:26:21.080> get<02:26:21.279> started<02:26:21.640> with<02:26:21.800> the<02:26:21.960> left

here to get started with the left

here to get started with the left
sidebar<02:26:22.760> we'll<02:26:23.040> have<02:26:23.160> to<02:26:23.359> keep<02:26:23.520> our<02:26:23.720> window

sidebar we'll have to keep our window

sidebar we'll have to keep our window
expanded<02:26:24.960> so<02:26:25.080> we<02:26:25.200> can<02:26:25.319> see<02:26:25.520> it<02:26:25.680> on<02:26:25.840> the<02:26:26.040> desktop

expanded so we can see it on the desktop

expanded so we can see it on the desktop
mode<02:26:27.080> which<02:26:27.240> we<02:26:27.319> can<02:26:27.560> see<02:26:28.120> right<02:26:28.399> here<02:26:28.720> I<02:26:28.840> guess

mode which we can see right here I guess

mode which we can see right here I guess
it's<02:26:29.200> tablet<02:26:29.680> as<02:26:29.840> well<02:26:30.840> and<02:26:31.040> then<02:26:31.240> we<02:26:31.359> can<02:26:31.479> move

it's tablet as well and then we can move

it's tablet as well and then we can move
our<02:26:31.960> code<02:26:32.359> just<02:26:32.560> a<02:26:32.840> bit<02:26:33.520> to<02:26:33.760> the<02:26:33.960> left<02:26:34.479> there<02:26:34.640> we

our code just a bit to the left there we

our code just a bit to the left there we
go<02:26:35.600> so<02:26:35.840> let's<02:26:36.080> start<02:26:36.439> with<02:26:36.640> creating<02:26:37.080> a<02:26:37.279> nav

go so let's start with creating a nav

go so let's start with creating a nav
because<02:26:38.439> yeah<02:26:38.640> even<02:26:38.840> though<02:26:38.960> it's<02:26:39.040> a<02:26:39.240> sidebar

because yeah even though it's a sidebar

because yeah even though it's a sidebar
it<02:26:39.880> is<02:26:40.000> a<02:26:40.160> navigation<02:26:40.760> bar<02:26:41.760> we<02:26:41.880> can<02:26:42.000> give<02:26:42.120> it<02:26:42.240> a

it is a navigation bar we can give it a

it is a navigation bar we can give it a
class<02:26:42.800> name<02:26:43.399> equal<02:26:43.760> to<02:26:44.560> left<02:26:45.399> sidebar<02:26:46.399> we<02:26:46.520> can

class name equal to left sidebar we can

class name equal to left sidebar we can
save<02:26:47.080> it<02:26:47.319> and<02:26:47.520> go<02:26:47.800> back<02:26:48.399> and<02:26:48.520> now<02:26:48.840> here<02:26:49.040> you<02:26:49.120> can

save it and go back and now here you can

save it and go back and now here you can
see<02:26:49.520> immediately<02:26:50.080> that<02:26:50.279> this<02:26:50.479> shifted<02:26:51.279> the

see immediately that this shifted the

see immediately that this shifted the
homepage<02:26:52.040> a<02:26:52.200> bit<02:26:52.399> to<02:26:52.560> the<02:26:52.760> right<02:26:53.479> within<02:26:53.800> the

homepage a bit to the right within the

homepage a bit to the right within the
nav<02:26:54.359> let's<02:26:54.600> create<02:26:54.960> a<02:26:55.200> div<02:26:55.720> that's<02:26:55.920> going<02:26:56.080> to

nav let's create a div that's going to

nav let's create a div that's going to
have<02:26:56.439> a<02:26:56.680> class<02:26:57.040> name<02:26:57.520> equal<02:26:57.800> to<02:26:58.000> flex<02:26:59.200> flex-all

have a class name equal to flex flex-all

have a class name equal to flex flex-all
as<02:27:00.319> the<02:27:00.439> elements<02:27:00.760> are<02:27:00.880> going<02:27:01.040> to<02:27:01.240> appear<02:27:01.680> one

as the elements are going to appear one

as the elements are going to appear one
on<02:27:02.200> top<02:27:02.359> of<02:27:02.479> another<02:27:03.279> and<02:27:03.399> then<02:27:03.560> a<02:27:03.800> gap<02:27:04.120> of<02:27:04.439> 11

on top of another and then a gap of 11

on top of another and then a gap of 11
to<02:27:05.160> create<02:27:05.439> some<02:27:05.760> space<02:27:06.760> right<02:27:07.000> within<02:27:07.359> that

to create some space right within that

to create some space right within that
div<02:27:07.960> we're<02:27:08.080> going<02:27:08.200> to<02:27:08.439> have<02:27:08.680> our<02:27:08.920> first<02:27:09.399> link

div we're going to have our first link

div we're going to have our first link
and<02:27:10.359> this<02:27:10.439> is<02:27:10.560> going<02:27:10.760> to<02:27:10.840> be<02:27:11.000> the<02:27:11.120> same<02:27:11.399> link<02:27:12.000> as

and this is going to be the same link as

and this is going to be the same link as
on<02:27:12.520> mobile<02:27:13.160> so<02:27:13.319> we<02:27:13.439> can<02:27:13.720> go<02:27:14.160> back<02:27:14.840> to<02:27:15.439> our<02:27:16.000> top

on mobile so we can go back to our top

on mobile so we can go back to our top
bar<02:27:17.080> and<02:27:17.240> we<02:27:17.359> can<02:27:17.640> copy<02:27:18.279> this<02:27:18.520> entire<02:27:18.960> link

bar and we can copy this entire link

bar and we can copy this entire link
right<02:27:19.760> here<02:27:20.439> and<02:27:20.760> paste<02:27:21.000> it<02:27:21.160> in<02:27:21.279> the<02:27:21.439> left<02:27:21.720> side

right here and paste it in the left side

right here and paste it in the left side
bar<02:27:22.720> we<02:27:22.840> of<02:27:22.960> course<02:27:23.160> need<02:27:23.319> to<02:27:23.520> import<02:27:24.040> Link<02:27:24.800> at

bar we of course need to import Link at

bar we of course need to import Link at
the<02:27:25.120> top<02:27:25.520> from<02:27:25.760> react<02:27:26.120> router<02:27:26.439> Dom<02:27:27.080> so<02:27:27.240> we<02:27:27.359> can

the top from react router Dom so we can

the top from react router Dom so we can
say<02:27:28.160> link<02:27:29.160> and<02:27:29.319> that's<02:27:29.520> coming<02:27:29.800> from<02:27:30.080> react

say link and that's coming from react

say link and that's coming from react
router

router

router
Dom<02:27:34.000> if<02:27:34.120> we<02:27:34.279> save<02:27:34.520> it<02:27:35.279> it's<02:27:35.479> looking<02:27:35.840> good<02:27:36.160> but

Dom if we save it it's looking good but

Dom if we save it it's looking good but
we<02:27:36.399> can<02:27:36.560> modify<02:27:37.000> the<02:27:37.160> width<02:27:37.600> to<02:27:37.920> 170<02:27:38.920> and<02:27:39.080> the

we can modify the width to 170 and the

we can modify the width to 170 and the
height<02:27:39.560> to

height to

height to
36<02:27:42.040> there<02:27:42.200> we<02:27:42.359> go<02:27:42.640> that<02:27:42.800> looks<02:27:43.000> a<02:27:43.160> bit<02:27:43.319> better

36 there we go that looks a bit better

36 there we go that looks a bit better
for<02:27:43.800> the<02:27:44.279> sidebar<02:27:45.279> right<02:27:45.520> below<02:27:45.880> it<02:27:46.279> we<02:27:46.399> can

for the sidebar right below it we can

for the sidebar right below it we can
show<02:27:47.040> our<02:27:47.279> link<02:27:47.520> to<02:27:47.680> the<02:27:47.880> profile

show our link to the profile

show our link to the profile
page<02:27:50.000> so<02:27:50.359> let's<02:27:50.600> go<02:27:50.840> below<02:27:51.200> the<02:27:51.359> link<02:27:52.359> and<02:27:52.560> then

page so let's go below the link and then

page so let's go below the link and then
create<02:27:53.319> another<02:27:53.880> link<02:27:54.880> this<02:27:55.080> link<02:27:55.439> is<02:27:55.600> going

create another link this link is going

create another link this link is going
to<02:27:56.000> point<02:27:56.479> to<02:27:57.160> forward<02:27:57.640> slash<02:27:58.399> and<02:27:58.560> it's<02:27:58.720> going

to point to forward slash and it's going

to point to forward slash and it's going
to<02:27:58.960> be<02:27:59.120> as<02:27:59.319> before<02:28:00.080> a<02:28:00.319> dynamic<02:28:00.760> link<02:28:01.000> to

to be as before a dynamic link to

to be as before a dynamic link to
forward<02:28:01.520> SL<02:28:02.040> profile<02:28:03.040> not<02:28:03.399> this<02:28:03.760> what<02:28:03.880> I<02:28:04.040> just

forward SL profile not this what I just

forward SL profile not this what I just
typed<02:28:04.840> but<02:28:05.160> profile<02:28:05.800> and<02:28:05.920> then<02:28:06.120> forward<02:28:06.520> slash

typed but profile and then forward slash

typed but profile and then forward slash
the<02:28:07.600> user<02:28:08.319> ID<02:28:09.040> right<02:28:09.920> and<02:28:10.080> we<02:28:10.200> already<02:28:10.439> know

the user ID right and we already know

the user ID right and we already know
where<02:28:10.880> the<02:28:10.960> user<02:28:11.200> ID<02:28:11.439> is<02:28:11.600> coming<02:28:11.920> from<02:28:12.359> it's

where the user ID is coming from it's

where the user ID is coming from it's
going<02:28:12.680> to<02:28:12.800> be<02:28:13.040> similar<02:28:13.720> as<02:28:13.960> with<02:28:14.080> the<02:28:14.319> top<02:28:14.640> bar

going to be similar as with the top bar

going to be similar as with the top bar
so<02:28:15.840> here<02:28:16.160> we<02:28:16.279> can<02:28:16.399> IM<02:28:16.640> immediately<02:28:17.160> copy<02:28:17.880> what

so here we can IM immediately copy what

so here we can IM immediately copy what
we<02:28:18.319> have<02:28:19.319> because<02:28:19.600> in<02:28:19.720> the<02:28:19.920> sidebar<02:28:20.520> we'll

we have because in the sidebar we'll

we have because in the sidebar we'll
also<02:28:20.960> have<02:28:21.080> to<02:28:21.240> deal<02:28:21.439> with<02:28:21.560> the<02:28:21.720> logout

also have to deal with the logout

also have to deal with the logout
functionality<02:28:23.399> so<02:28:23.720> we<02:28:23.880> might<02:28:24.120> as<02:28:24.279> well<02:28:24.680> copy

functionality so we might as well copy

functionality so we might as well copy
most<02:28:25.880> of<02:28:26.040> the<02:28:26.160> things<02:28:26.439> we<02:28:26.600> have<02:28:26.880> here<02:28:27.319> on<02:28:27.520> the

most of the things we have here on the

most of the things we have here on the
top<02:28:28.520> as<02:28:28.680> well<02:28:28.840> as<02:28:29.000> what<02:28:29.120> we<02:28:29.240> have<02:28:29.439> defined<02:28:29.960> in

top as well as what we have defined in

top as well as what we have defined in
the<02:28:30.399> component<02:28:31.399> so<02:28:31.600> let's<02:28:31.840> copy<02:28:32.240> everything

the component so let's copy everything

the component so let's copy everything
from<02:28:33.240> here<02:28:34.240> and<02:28:34.479> paste<02:28:34.760> it<02:28:34.920> in<02:28:35.080> the<02:28:35.240> left

from here and paste it in the left

from here and paste it in the left
sidebar<02:28:36.240> on<02:28:36.520> top<02:28:37.479> just<02:28:37.800> replacing<02:28:38.399> the<02:28:38.560> name

sidebar on top just replacing the name

sidebar on top just replacing the name
of<02:28:38.960> the<02:28:39.160> component<02:28:39.800> to<02:28:40.160> left<02:28:40.840> sidebar<02:28:41.840> there

of the component to left sidebar there

of the component to left sidebar there
we<02:28:42.200> go<02:28:42.720> now<02:28:42.880> if<02:28:43.000> we<02:28:43.160> save<02:28:43.479> this<02:28:44.000> everything

we go now if we save this everything

we go now if we save this everything
still<02:28:44.680> works<02:28:45.680> we<02:28:45.840> have<02:28:45.960> the<02:28:46.080> user<02:28:46.359> ID<02:28:46.680> D<02:28:47.240> we<02:28:47.359> can

still works we have the user ID D we can

still works we have the user ID D we can
give<02:28:47.680> it<02:28:47.880> a<02:28:48.200> class<02:28:48.800> name<02:28:49.800> equal<02:28:50.319> to<02:28:51.520> flex

give it a class name equal to flex

give it a class name equal to flex
g-3<02:28:54.120> and<02:28:54.479> items<02:28:55.000> Das<02:28:55.240> center<02:28:56.200> right<02:28:56.439> within<02:28:56.720> it

g-3 and items Das center right within it

g-3 and items Das center right within it
we<02:28:57.160> can<02:28:57.279> show<02:28:57.560> an<02:28:57.760> image<02:28:58.319> that's<02:28:58.520> going<02:28:58.680> to

we can show an image that's going to

we can show an image that's going to
have<02:28:59.080> a<02:28:59.279> source<02:28:59.960> equal<02:29:00.640> to<02:29:01.800> user.<02:29:02.800> image<02:29:03.160> URL

have a source equal to user. image URL

have a source equal to user. image URL
or<02:29:05.520> SL<02:29:06.040> assets<02:29:07.040> SL<02:29:07.520> ions<02:29:08.520> SL<02:29:09.359> profile<02:29:10.200> Das

or SL assets SL ions SL profile Das

or SL assets SL ions SL profile Das
placeholder.svg

placeholder.svg

placeholder.svg
there<02:29:15.800> we<02:29:15.960> go<02:29:16.160> we<02:29:16.240> have<02:29:16.359> our<02:29:16.720> huge<02:29:17.160> the<02:29:17.279> real

there we go we have our huge the real

there we go we have our huge the real
JSM<02:29:18.880> let's<02:29:19.080> give<02:29:19.200> it<02:29:19.279> an<02:29:19.439> ALT<02:29:19.760> tag<02:29:20.080> of

JSM let's give it an ALT tag of

JSM let's give it an ALT tag of
profile<02:29:22.000> as<02:29:22.240> well<02:29:22.560> as<02:29:22.680> a<02:29:22.960> class<02:29:23.359> name<02:29:24.040> equal<02:29:24.319> to

profile as well as a class name equal to

profile as well as a class name equal to
age-14<02:29:26.560> width<02:29:27.000> of<02:29:27.240> 14<02:29:27.800> as<02:29:28.000> well<02:29:28.640> and<02:29:28.840> rounded

age-14 width of 14 as well and rounded

age-14 width of 14 as well and rounded
Das<02:29:30.040> full<02:29:31.040> now<02:29:31.279> next<02:29:31.520> to<02:29:31.720> this<02:29:32.040> we<02:29:32.160> also<02:29:32.359> want

Das full now next to this we also want

Das full now next to this we also want
to<02:29:32.600> show<02:29:32.840> the<02:29:33.040> name<02:29:33.439> of<02:29:33.600> the<02:29:33.760> person<02:29:34.040> that's

to show the name of the person that's

to show the name of the person that's
logged<02:29:34.600> in<02:29:35.000> because<02:29:35.240> we<02:29:35.359> have<02:29:35.479> a<02:29:35.640> bit<02:29:35.840> more

logged in because we have a bit more

logged in because we have a bit more
space<02:29:36.439> than<02:29:36.560> on<02:29:36.800> mobile<02:29:37.720> so<02:29:37.920> let's<02:29:38.120> create<02:29:38.359> a

space than on mobile so let's create a

space than on mobile so let's create a
div<02:29:39.560> that's<02:29:39.760> going<02:29:39.960> to<02:29:40.120> have<02:29:40.279> a<02:29:40.600> class<02:29:40.960> name

div that's going to have a class name

div that's going to have a class name
equal<02:29:42.160> to<02:29:42.560> flex<02:29:43.920> flex-all<02:29:44.920> so<02:29:45.120> it<02:29:45.319> appears<02:29:45.720> one

equal to flex flex-all so it appears one

equal to flex flex-all so it appears one
below<02:29:46.240> another

below another

below another
and<02:29:47.760> here<02:29:48.200> we<02:29:48.319> can<02:29:48.479> do<02:29:48.600> a<02:29:48.760> P<02:29:49.520> tag<02:29:50.520> that's<02:29:50.720> going

and here we can do a P tag that's going

and here we can do a P tag that's going
to<02:29:51.200> have<02:29:51.600> a<02:29:51.960> class<02:29:52.800> name<02:29:53.800> equal<02:29:54.120> to<02:29:55.120> body-<02:29:56.200> bold

to have a class name equal to body- bold

to have a class name equal to body- bold
here<02:29:57.680> we<02:29:57.840> can<02:29:57.960> render<02:29:59.160> user.name<02:30:00.160> and<02:30:00.960> that's

here we can render user.name and that's

here we can render user.name and that's
going<02:30:01.279> to<02:30:01.399> show<02:30:01.680> the<02:30:01.800> real<02:30:02.479> JSM<02:30:03.479> and<02:30:03.720> right

going to show the real JSM and right

going to show the real JSM and right
below<02:30:04.960> we<02:30:05.080> can<02:30:05.240> render<02:30:05.600> another<02:30:05.880> P

below we can render another P

below we can render another P
tag<02:30:07.880> that's<02:30:08.080> going<02:30:08.240> to<02:30:08.439> have<02:30:08.640> a<02:30:08.920> class<02:30:09.240> name

tag that's going to have a class name

tag that's going to have a class name
equal<02:30:10.479> to<02:30:11.160> small-<02:30:12.200> regular<02:30:13.200> text-

equal to small- regular text-

equal to small- regular text-
light-3<02:30:15.640> and<02:30:15.800> it's<02:30:15.960> going<02:30:16.120> to<02:30:16.200> say

light-3 and it's going to say

light-3 and it's going to say
at<02:30:17.760> and<02:30:17.920> then<02:30:18.120> dynamically<02:30:18.920> user.<02:30:20.120> username

at and then dynamically user. username

at and then dynamically user. username
if<02:30:21.279> we<02:30:21.439> save<02:30:21.680> it<02:30:22.439> now<02:30:22.600> we<02:30:22.720> can<02:30:22.840> see<02:30:23.040> this<02:30:23.160> is

if we save it now we can see this is

if we save it now we can see this is
going<02:30:23.479> to<02:30:23.640> work<02:30:23.920> but<02:30:24.040> we<02:30:24.160> can<02:30:24.279> remove<02:30:24.840> the

going to work but we can remove the

going to work but we can remove the
dollar<02:30:25.359> sign<02:30:25.920> there<02:30:26.080> we<02:30:26.479> go<02:30:27.479> how<02:30:27.680> cool<02:30:27.920> it<02:30:28.040> is

dollar sign there we go how cool it is

dollar sign there we go how cool it is
that<02:30:28.399> we<02:30:28.479> can<02:30:28.680> immediately<02:30:29.359> extract<02:30:30.120> all<02:30:30.240> of

that we can immediately extract all of

that we can immediately extract all of
this<02:30:30.560> user<02:30:30.960> information<02:30:32.080> directly<02:30:33.080> from<02:30:33.720> the

this user information directly from the

this user information directly from the
user<02:30:34.399> context<02:30:35.399> that's<02:30:35.680> what<02:30:35.800> we've<02:30:35.960> been

user context that's what we've been

user context that's what we've been
working<02:30:36.359> on<02:30:36.600> so<02:30:36.920> hard<02:30:37.279> while<02:30:37.520> creating<02:30:37.840> the

working on so hard while creating the

working on so hard while creating the
authentication<02:30:39.160> so<02:30:39.399> now<02:30:39.640> we<02:30:39.760> can<02:30:39.920> simply<02:30:40.240> use

authentication so now we can simply use

authentication so now we can simply use
it<02:30:41.200> now<02:30:41.439> going<02:30:41.720> below<02:30:42.240> we<02:30:42.319> want<02:30:42.439> to<02:30:42.560> render<02:30:42.960> the

it now going below we want to render the

it now going below we want to render the
sidebar<02:30:43.640> links<02:30:44.399> so<02:30:44.600> let's<02:30:44.880> move<02:30:45.279> below<02:30:45.720> this

sidebar links so let's move below this

sidebar links so let's move below this
link

link

link
and<02:30:47.160> let's<02:30:47.359> create<02:30:47.720> a<02:30:47.920> new<02:30:48.319> UL<02:30:49.319> an<02:30:49.520> unordered

and let's create a new UL an unordered

and let's create a new UL an unordered
list<02:30:51.080> that's<02:30:51.279> going<02:30:51.439> to<02:30:51.680> have<02:30:51.880> a<02:30:52.120> class<02:30:52.520> name

list that's going to have a class name

list that's going to have a class name
equal<02:30:53.520> to<02:30:53.920> flex

equal to flex

equal to flex
flex-all<02:30:56.600> and<02:30:56.880> a<02:30:57.120> gap<02:30:57.399> of<02:30:57.600> six<02:30:58.479> right<02:30:58.720> here<02:30:59.399> we

flex-all and a gap of six right here we

flex-all and a gap of six right here we
might<02:31:00.040> as<02:31:00.240> well<02:31:00.600> render<02:31:01.080> all<02:31:01.359> the<02:31:01.479> nav<02:31:01.840> links

might as well render all the nav links

might as well render all the nav links
one<02:31:02.560> by<02:31:02.760> one<02:31:03.160> by<02:31:03.279> saying<02:31:03.640> Link<02:31:04.279> Link<02:31:04.800> Link<02:31:05.359> and

one by one by saying Link Link Link and

one by one by saying Link Link Link and
then<02:31:05.640> duplicate<02:31:06.120> this<02:31:06.359> many<02:31:06.600> many<02:31:06.960> times<02:31:07.880> of

then duplicate this many many times of

then duplicate this many many times of
course<02:31:08.319> each<02:31:08.520> link<02:31:08.840> has<02:31:08.960> to<02:31:09.160> have<02:31:09.279> a<02:31:09.560> path<02:31:10.080> it

course each link has to have a path it

course each link has to have a path it
has<02:31:10.399> to<02:31:10.600> have<02:31:10.720> some<02:31:11.000> content<02:31:11.960> so<02:31:12.359> it's<02:31:12.520> going

has to have some content so it's going

has to have some content so it's going
to<02:31:13.120> expand<02:31:13.640> on<02:31:13.840> many<02:31:14.080> many<02:31:14.319> lines<02:31:14.760> right<02:31:14.960> here

to expand on many many lines right here

to expand on many many lines right here
instead<02:31:16.120> of<02:31:16.520> that<02:31:16.920> what<02:31:17.040> we<02:31:17.240> try<02:31:17.439> to<02:31:17.600> do<02:31:17.920> as

instead of that what we try to do as

instead of that what we try to do as
good<02:31:18.399> developers<02:31:19.000> being<02:31:19.279> more<02:31:19.760> structured<02:31:20.760> is

good developers being more structured is

good developers being more structured is
we<02:31:21.120> can<02:31:21.359> create<02:31:21.760> something<02:31:22.080> known<02:31:22.439> as

we can create something known as

we can create something known as
constants<02:31:23.640> file<02:31:24.600> that's<02:31:24.760> a<02:31:25.040> special<02:31:25.479> file<02:31:25.880> and

constants file that's a special file and

constants file that's a special file and
folder<02:31:26.960> right<02:31:27.200> here<02:31:27.600> above<02:31:27.880> our<02:31:28.120> context

folder right here above our context

folder right here above our context
still<02:31:29.319> within<02:31:29.560> the<02:31:29.760> source<02:31:30.319> so<02:31:30.560> create<02:31:30.800> a<02:31:30.960> new

still within the source so create a new

still within the source so create a new
folder<02:31:31.560> called

folder called

folder called
constants<02:31:33.840> and<02:31:33.960> then<02:31:34.120> create<02:31:34.359> a<02:31:34.560> new

constants and then create a new

constants and then create a new
index.ts<02:31:36.520> right<02:31:36.800> within<02:31:37.040> it<02:31:37.720> here<02:31:38.080> you<02:31:38.200> can

index.ts right within it here you can

index.ts right within it here you can
Define<02:31:38.960> some<02:31:39.240> sidebar<02:31:39.760> links<02:31:40.680> just<02:31:40.920> like<02:31:41.120> so

Define some sidebar links just like so

Define some sidebar links just like so
it's<02:31:41.800> going<02:31:41.960> to<02:31:42.080> be<02:31:42.200> an<02:31:42.359> array<02:31:42.920> and<02:31:43.000> then<02:31:43.160> we

it's going to be an array and then we

it's going to be an array and then we
can<02:31:43.399> say<02:31:43.760> home<02:31:44.479> anything<02:31:44.800> else<02:31:45.000> you<02:31:45.120> want<02:31:45.240> to

can say home anything else you want to

can say home anything else you want to
say<02:31:45.800> you<02:31:45.920> can<02:31:46.080> add<02:31:46.720> here<02:31:47.720> since<02:31:48.040> this<02:31:48.160> is<02:31:48.319> not

say you can add here since this is not

say you can add here since this is not
any<02:31:48.960> logic<02:31:49.560> but<02:31:49.760> rather<02:31:50.040> just<02:31:50.279> static<02:31:50.680> code

any logic but rather just static code

any logic but rather just static code
what<02:31:51.600> we<02:31:51.720> can<02:31:51.880> do<02:31:52.319> is<02:31:52.680> in<02:31:52.800> the<02:31:52.960> description

what we can do is in the description

what we can do is in the description
Down<02:31:53.640> Below<02:31:54.200> in<02:31:54.399> the<02:31:54.520> GitHub<02:31:54.880> gist<02:31:55.520> you<02:31:55.640> can

Down Below in the GitHub gist you can

Down Below in the GitHub gist you can
find<02:31:56.120> the<02:31:56.319> complete<02:31:57.200> constants<02:31:57.920> index.ts

find the complete constants index.ts

find the complete constants index.ts
file<02:31:59.680> so<02:32:00.000> copy<02:32:00.279> it<02:32:00.760> and<02:32:01.000> paste<02:32:01.240> it<02:32:01.479> here<02:32:02.319> you

file so copy it and paste it here you

file so copy it and paste it here you
can<02:32:02.600> notice<02:32:03.000> that<02:32:03.160> this<02:32:03.279> is<02:32:03.479> mostly<02:32:03.920> Bottom

can notice that this is mostly Bottom

can notice that this is mostly Bottom
bar<02:32:04.560> links<02:32:05.479> as<02:32:05.680> well<02:32:06.040> as<02:32:06.560> sidebar<02:32:07.240> links<02:32:08.240> so

bar links as well as sidebar links so

bar links as well as sidebar links so
what<02:32:08.720> this<02:32:08.880> allows<02:32:09.200> us<02:32:09.359> to<02:32:09.479> do<02:32:10.240> is<02:32:10.560> just<02:32:10.840> jump

what this allows us to do is just jump

what this allows us to do is just jump
right<02:32:11.600> into<02:32:12.080> here<02:32:13.080> and<02:32:13.840> open<02:32:14.120> up<02:32:14.279> a<02:32:14.439> dynamic

right into here and open up a dynamic

right into here and open up a dynamic
block<02:32:15.240> of<02:32:15.439> code<02:32:16.319> and<02:32:16.439> say<02:32:16.760> sidebar<02:32:17.800> links.<02:32:18.800> map

block of code and say sidebar links. map

block of code and say sidebar links. map
where<02:32:19.720> we<02:32:19.880> get<02:32:20.279> each<02:32:20.600> individual<02:32:21.359> link<02:32:22.359> which

where we get each individual link which

where we get each individual link which
is<02:32:22.640> of<02:32:22.800> a<02:32:23.000> type<02:32:23.359> I<02:32:24.040> nav<02:32:24.439> link<02:32:25.040> interface<02:32:25.600> nav

is of a type I nav link interface nav

is of a type I nav link interface nav
link<02:32:26.439> which<02:32:26.600> we<02:32:26.720> can<02:32:26.960> import<02:32:27.399> from<02:32:27.640> at/<02:32:28.600> types

link which we can import from at/ types

link which we can import from at/ types
and<02:32:29.600> then<02:32:29.720> you<02:32:29.840> can<02:32:30.000> open<02:32:30.240> up<02:32:30.439> a<02:32:30.640> new<02:32:30.880> function

and then you can open up a new function

and then you can open up a new function
block<02:32:32.520> also<02:32:33.080> import<02:32:33.520> sidebar<02:32:33.960> links<02:32:34.479> from<02:32:34.720> ad

block also import sidebar links from ad

block also import sidebar links from ad
SLC<02:32:35.680> constants<02:32:36.680> here<02:32:37.040> we<02:32:37.160> can<02:32:37.399> simply<02:32:38.080> return

SLC constants here we can simply return

SLC constants here we can simply return
something<02:32:39.240> known<02:32:39.600> as<02:32:39.760> a<02:32:39.960> nav<02:32:40.720> link<02:32:41.720> and<02:32:41.880> a<02:32:42.080> nav

something known as a nav link and a nav

something known as a nav link and a nav
link<02:32:42.640> is<02:32:42.760> a<02:32:42.960> component<02:32:43.680> coming<02:32:44.000> from<02:32:44.359> react

link is a component coming from react

link is a component coming from react
router<02:32:45.279> Dom<02:32:45.800> so<02:32:46.040> right<02:32:46.279> right<02:32:46.479> here<02:32:46.680> on<02:32:47.000> top<02:32:47.479> we

router Dom so right right here on top we

router Dom so right right here on top we
can<02:32:47.760> import<02:32:48.160> link<02:32:49.160> as<02:32:49.319> well<02:32:49.600> as<02:32:49.800> a<02:32:50.279> nav<02:32:51.520> link

can import link as well as a nav link

can import link as well as a nav link
there<02:32:52.680> we<02:32:52.880> go<02:32:53.640> so<02:32:53.840> now<02:32:54.200> going<02:32:54.520> here<02:32:55.240> each<02:32:55.520> nav

there we go so now going here each nav

there we go so now going here each nav
link<02:32:56.479> has<02:32:56.640> to<02:32:56.920> have<02:32:57.160> a<02:32:57.359> two<02:32:57.800> property<02:32:58.520> so<02:32:58.800> where

link has to have a two property so where

link has to have a two property so where
are<02:32:59.160> we<02:32:59.359> going<02:32:59.680> to<02:33:00.680> in<02:33:00.920> this<02:33:01.120> case<02:33:01.319> we're<02:33:01.520> going

are we going to in this case we're going

are we going to in this case we're going
to<02:33:01.840> link<02:33:02.240> that<02:33:02.600> route<02:33:03.319> because<02:33:03.640> each<02:33:03.920> sidebar

to link that route because each sidebar

to link that route because each sidebar
link<02:33:05.160> has<02:33:05.319> a<02:33:05.560> route<02:33:06.319> an<02:33:06.479> image<02:33:06.760> URL<02:33:07.640> and<02:33:07.880> a

link has a route an image URL and a

link has a route an image URL and a
label<02:33:09.479> so<02:33:09.800> now<02:33:10.479> we<02:33:10.600> can<02:33:10.760> also<02:33:11.000> give<02:33:11.120> it<02:33:11.240> a<02:33:11.439> class

label so now we can also give it a class

label so now we can also give it a class
name<02:33:12.600> equal<02:33:12.920> to<02:33:13.200> left<02:33:14.240> sidebar<02:33:15.240> daslink

name equal to left sidebar daslink

name equal to left sidebar daslink
and<02:33:17.200> as<02:33:17.319> a<02:33:17.439> matter<02:33:17.680> of<02:33:17.920> fact<02:33:18.240> I<02:33:18.359> think<02:33:18.479> we<02:33:18.600> need

and as a matter of fact I think we need

and as a matter of fact I think we need
to<02:33:19.000> wrap<02:33:19.640> this<02:33:20.040> nav<02:33:20.439> link<02:33:20.840> with<02:33:21.000> an<02:33:21.200> Li<02:33:22.000> because

to wrap this nav link with an Li because

to wrap this nav link with an Li because
An<02:33:22.399> Li<02:33:22.800> is<02:33:22.920> a<02:33:23.160> list<02:33:23.560> item<02:33:23.880> that<02:33:24.040> has<02:33:24.319> to<02:33:24.520> go

An Li is a list item that has to go

An Li is a list item that has to go
between<02:33:25.600> the<02:33:25.960> uls<02:33:26.960> so<02:33:27.120> you<02:33:27.200> can<02:33:27.359> put<02:33:27.520> the<02:33:27.680> nav

between the uls so you can put the nav

between the uls so you can put the nav
link<02:33:28.319> between<02:33:29.040> the

link between the

link between the
Li<02:33:30.800> and<02:33:31.000> then<02:33:31.240> the<02:33:31.439> class<02:33:31.760> name<02:33:31.920> of<02:33:32.200> left

Li and then the class name of left

Li and then the class name of left
sidebar<02:33:32.840> link<02:33:33.359> is<02:33:33.560> actually<02:33:33.880> going<02:33:34.040> to<02:33:34.240> go<02:33:34.520> to

sidebar link is actually going to go to

sidebar link is actually going to go to
the<02:33:35.279> LI<02:33:36.000> since<02:33:36.200> we're<02:33:36.399> mapping<02:33:36.800> over<02:33:37.040> it<02:33:37.279> we

the LI since we're mapping over it we

the LI since we're mapping over it we
also<02:33:37.640> have<02:33:37.760> to<02:33:37.880> give<02:33:38.000> it<02:33:38.120> a<02:33:38.279> key<02:33:38.960> equal<02:33:39.319> to

also have to give it a key equal to

also have to give it a key equal to
link.<02:33:40.319> label<02:33:41.080> now<02:33:41.640> our<02:33:41.840> nav<02:33:42.200> link<02:33:42.399> is<02:33:42.520> going<02:33:42.680> to

link. label now our nav link is going to

link. label now our nav link is going to
say<02:33:43.120> something<02:33:43.600> right<02:33:44.000> and<02:33:44.240> that<02:33:44.479> something

say something right and that something

say something right and that something
is<02:33:45.439> link

is link

is link
label<02:33:47.640> so<02:33:47.800> if<02:33:47.880> we<02:33:48.040> save<02:33:48.319> it<02:33:48.680> now<02:33:48.880> you<02:33:49.000> can<02:33:49.120> see

label so if we save it now you can see

label so if we save it now you can see
all<02:33:49.800> of<02:33:50.040> these<02:33:50.319> different<02:33:50.800> labels<02:33:51.800> let's

all of these different labels let's

all of these different labels let's
style<02:33:52.319> it<02:33:52.439> a<02:33:52.560> bit<02:33:52.760> further<02:33:53.479> by<02:33:53.720> giving<02:33:53.960> it<02:33:54.240> a

style it a bit further by giving it a

style it a bit further by giving it a
class<02:33:54.840> name<02:33:55.479> equal<02:33:56.200> to<02:33:57.399> flex<02:33:58.399> gap<02:33:58.680> of<02:33:58.880> four

class name equal to flex gap of four

class name equal to flex gap of four
items<02:34:00.319> Das<02:34:00.560> Center<02:34:01.479> and<02:34:01.920> padding<02:34:02.399> off<02:34:03.080> four

items Das Center and padding off four

items Das Center and padding off four
there<02:34:04.240> we<02:34:04.439> go<02:34:04.840> this<02:34:05.000> gives<02:34:05.200> us<02:34:05.479> much<02:34:05.680> more

there we go this gives us much more

there we go this gives us much more
space<02:34:06.920> we<02:34:07.040> can<02:34:07.240> also<02:34:07.520> render<02:34:07.880> an<02:34:08.120> image<02:34:08.640> right

space we can also render an image right

space we can also render an image right
here<02:34:09.040> next<02:34:09.200> to<02:34:09.319> the<02:34:09.479> label<02:34:10.200> by<02:34:10.319> saying

here next to the label by saying

here next to the label by saying
IMG<02:34:12.880> we<02:34:13.000> can<02:34:13.160> give<02:34:13.279> it<02:34:13.439> a<02:34:14.040> source<02:34:15.040> equal<02:34:15.359> to

IMG we can give it a source equal to

IMG we can give it a source equal to
link.<02:34:17.880> image<02:34:18.399> URL<02:34:19.399> alt<02:34:19.960> is<02:34:20.120> equal<02:34:20.359> to<02:34:20.600> link.

link. image URL alt is equal to link.

link. image URL alt is equal to link.
label<02:34:23.120> and<02:34:23.279> we<02:34:23.399> can<02:34:23.560> give<02:34:23.640> it<02:34:23.760> a<02:34:23.880> class<02:34:24.319> name

label and we can give it a class name

label and we can give it a class name
equal<02:34:25.439> to<02:34:26.439> group-

equal to group-

equal to group-
hover<02:34:28.960> invert<02:34:29.800> D<02:34:30.319> white<02:34:30.880> so<02:34:31.080> this<02:34:31.160> is<02:34:31.319> just<02:34:31.439> to

hover invert D white so this is just to

hover invert D white so this is just to
make<02:34:31.760> the<02:34:31.880> color<02:34:32.840> work<02:34:33.840> and<02:34:34.040> there<02:34:34.160> we<02:34:34.319> go<02:34:34.560> so

make the color work and there we go so

make the color work and there we go so
now<02:34:34.840> if<02:34:34.920> you<02:34:35.040> hover<02:34:35.359> over<02:34:35.600> it<02:34:35.960> you<02:34:36.120> cannot<02:34:36.439> see

now if you hover over it you cannot see

now if you hover over it you cannot see
it<02:34:36.960> we're<02:34:37.200> about<02:34:37.359> to<02:34:37.560> fix<02:34:37.920> that<02:34:38.680> but<02:34:38.960> this<02:34:39.080> is

it we're about to fix that but this is

it we're about to fix that but this is
looking<02:34:39.640> good<02:34:40.359> but<02:34:40.520> on<02:34:40.680> the<02:34:40.880> final<02:34:41.200> version<02:34:41.479> of

looking good but on the final version of

looking good but on the final version of
our<02:34:41.800> application<02:34:42.800> you<02:34:42.920> can<02:34:43.080> see<02:34:43.279> that<02:34:43.439> we<02:34:43.600> have

our application you can see that we have

our application you can see that we have
a<02:34:44.040> currently<02:34:44.760> active<02:34:45.439> link<02:34:46.439> so<02:34:46.640> we<02:34:46.760> can<02:34:46.920> do

a currently active link so we can do

a currently active link so we can do
that<02:34:47.399> here<02:34:47.680> as<02:34:47.840> well<02:34:48.600> but<02:34:48.800> how<02:34:48.920> do<02:34:49.080> we<02:34:49.240> figure

that here as well but how do we figure

that here as well but how do we figure
out<02:34:49.960> on<02:34:50.279> which<02:34:50.560> link<02:34:50.920> are<02:34:51.160> we<02:34:51.680> on<02:34:52.680> well<02:34:52.880> we<02:34:53.040> have

out on which link are we on well we have

out on which link are we on well we have
to<02:34:53.319> use<02:34:53.680> something<02:34:54.040> known<02:34:54.359> as<02:34:54.479> a<02:34:54.760> use<02:34:55.520> location

to use something known as a use location

to use something known as a use location
so<02:34:56.880> right<02:34:57.080> here<02:34:57.359> from<02:34:57.640> react<02:34:58.000> R<02:34:58.359> Dom<02:34:58.880> we<02:34:58.960> can

so right here from react R Dom we can

so right here from react R Dom we can
also<02:34:59.600> import<02:35:00.200> use<02:35:00.760> location<02:35:01.680> which<02:35:01.800> is<02:35:01.920> a<02:35:02.200> hook

also import use location which is a hook

also import use location which is a hook
and<02:35:03.319> then<02:35:03.439> we<02:35:03.560> can<02:35:03.760> declare<02:35:04.200> it<02:35:04.800> right<02:35:05.000> here<02:35:05.200> at

and then we can declare it right here at

and then we can declare it right here at
the<02:35:05.600> top<02:35:06.200> by<02:35:06.399> saying<02:35:07.080> const<02:35:08.080> path

the top by saying const path

the top by saying const path
name<02:35:10.720> is<02:35:11.000> equal<02:35:11.319> to<02:35:12.040> use

name is equal to use

name is equal to use
location<02:35:15.080> and<02:35:15.240> now<02:35:15.439> we<02:35:15.520> can<02:35:15.680> use<02:35:16.080> that<02:35:16.319> path

location and now we can use that path

location and now we can use that path
name<02:35:17.080> right<02:35:17.319> here<02:35:17.800> in<02:35:17.960> the<02:35:18.120> sidebar<02:35:18.800> links<02:35:19.800> to

name right here in the sidebar links to

name right here in the sidebar links to
create<02:35:20.240> a<02:35:20.399> Boolean<02:35:20.960> variable<02:35:21.520> called<02:35:21.880> is

create a Boolean variable called is

create a Boolean variable called is
active<02:35:22.960> so<02:35:23.240> const<02:35:23.800> is<02:35:24.240> active<02:35:25.160> is<02:35:25.399> equal<02:35:25.680> to

active so const is active is equal to

active so const is active is equal to
and<02:35:26.720> it's<02:35:27.080> active<02:35:27.720> if<02:35:27.880> the<02:35:28.120> path<02:35:28.359> name<02:35:28.680> is

and it's active if the path name is

and it's active if the path name is
equal<02:35:29.240> to<02:35:29.760> link.<02:35:30.840> route<02:35:31.840> based<02:35:32.439> off<02:35:32.680> of<02:35:32.840> this

equal to link. route based off of this

equal to link. route based off of this
is<02:35:33.359> active<02:35:33.680> Boolean<02:35:34.560> we<02:35:34.680> can<02:35:34.880> also<02:35:35.160> change

is active Boolean we can also change

is active Boolean we can also change
some<02:35:35.680> Styles<02:35:36.680> so<02:35:36.880> in<02:35:37.080> this<02:35:37.279> Li<02:35:38.120> we<02:35:38.240> can<02:35:38.399> make<02:35:38.520> it

some Styles so in this Li we can make it

some Styles so in this Li we can make it
Dynamic<02:35:39.800> by<02:35:40.000> turning<02:35:40.279> it<02:35:40.479> into<02:35:40.880> a<02:35:41.080> template

Dynamic by turning it into a template

Dynamic by turning it into a template
string<02:35:42.399> like<02:35:42.840> so<02:35:43.840> and<02:35:44.080> then<02:35:44.520> we<02:35:44.640> can<02:35:44.960> say

string like so and then we can say

string like so and then we can say
if<02:35:47.319> is

if is

if is
active<02:35:49.240> then<02:35:49.800> also<02:35:50.120> render<02:35:50.560> the<02:35:50.720> BG<02:35:51.240> primary

active then also render the BG primary

active then also render the BG primary
500<02:35:53.319> so<02:35:53.439> if<02:35:53.560> we<02:35:53.680> save<02:35:53.880> it<02:35:54.279> you<02:35:54.399> can<02:35:54.520> see<02:35:54.680> the

500 so if we save it you can see the

500 so if we save it you can see the
color<02:35:55.240> changes<02:35:56.240> now<02:35:56.439> the<02:35:56.600> last<02:35:56.840> thing<02:35:57.000> is<02:35:57.160> also

color changes now the last thing is also

color changes now the last thing is also
to<02:35:57.560> change<02:35:58.000> the<02:35:58.160> color<02:35:58.399> of<02:35:58.560> the<02:35:58.720> icon<02:35:59.640> so<02:35:59.840> let's

to change the color of the icon so let's

to change the color of the icon so let's
change<02:36:00.359> the<02:36:00.560> image<02:36:01.080> to<02:36:01.279> be<02:36:01.479> also<02:36:01.880> dyamic

change the image to be also dyamic

change the image to be also dyamic
template<02:36:02.920> string<02:36:03.920> and<02:36:04.200> if<02:36:04.319> it<02:36:04.479> is

template string and if it is

template string and if it is
active<02:36:06.920> then<02:36:07.319> we<02:36:07.439> can<02:36:07.640> call<02:36:08.080> the<02:36:08.319> invert<02:36:09.279> white

active then we can call the invert white

active then we can call the invert white
so<02:36:10.399> if<02:36:10.520> I<02:36:10.680> now<02:36:10.880> save<02:36:11.640> it<02:36:12.640> we<02:36:12.800> have<02:36:12.920> to<02:36:13.080> properly

so if I now save it we have to properly

so if I now save it we have to properly
spell<02:36:13.720> it<02:36:13.840> for<02:36:14.000> this<02:36:14.160> to

spell it for this to

spell it for this to
work<02:36:15.960> it<02:36:16.040> seems<02:36:16.240> like<02:36:16.359> we<02:36:16.479> have<02:36:16.640> one<02:36:16.840> extra

work it seems like we have one extra

work it seems like we have one extra
brace<02:36:17.840> so<02:36:17.960> if<02:36:18.080> we<02:36:18.279> fix<02:36:18.479> it<02:36:19.160> there<02:36:19.359> we<02:36:19.560> go<02:36:20.439> but<02:36:20.600> if

brace so if we fix it there we go but if

brace so if we fix it there we go but if
we<02:36:20.880> hover<02:36:21.359> it's<02:36:21.520> not<02:36:21.800> yet<02:36:22.000> fixed<02:36:22.520> so<02:36:22.680> let's<02:36:22.840> see

we hover it's not yet fixed so let's see

we hover it's not yet fixed so let's see
what<02:36:23.319> that<02:36:23.479> is<02:36:23.840> about<02:36:24.840> let's<02:36:25.040> try<02:36:25.200> to<02:36:25.399> properly

what that is about let's try to properly

what that is about let's try to properly
space<02:36:26.080> it<02:36:26.200> out<02:36:26.399> so<02:36:26.520> we<02:36:26.640> can<02:36:26.800> better<02:36:27.080> see<02:36:27.279> it

space it out so we can better see it

space it out so we can better see it
group<02:36:28.720> hover<02:36:29.720> invert<02:36:30.760> white<02:36:31.760> and<02:36:32.120> then<02:36:32.479> we

group hover invert white and then we

group hover invert white and then we
have<02:36:32.880> if<02:36:33.120> is<02:36:33.439> active<02:36:34.120> then<02:36:34.359> also<02:36:34.720> invert<02:36:35.120> white

have if is active then also invert white

have if is active then also invert white
if<02:36:36.040> we<02:36:36.200> go<02:36:36.479> here<02:36:37.279> you<02:36:37.399> can<02:36:37.520> see<02:36:37.720> that<02:36:37.840> it<02:36:38.000> works

if we go here you can see that it works

if we go here you can see that it works
really<02:36:38.680> nicely<02:36:39.279> it<02:36:39.479> inverts<02:36:40.479> but<02:36:40.640> in<02:36:40.880> this<02:36:41.080> one

really nicely it inverts but in this one

really nicely it inverts but in this one
it<02:36:42.319> doesn't<02:36:43.319> that's<02:36:43.960> interesting<02:36:44.960> that's

it doesn't that's interesting that's

it doesn't that's interesting that's
because<02:36:45.399> we<02:36:45.520> have<02:36:45.640> to<02:36:45.960> make<02:36:46.279> this<02:36:46.560> a<02:36:46.800> group<02:36:47.479> so

because we have to make this a group so

because we have to make this a group so
this<02:36:47.920> Li<02:36:48.680> actually<02:36:49.040> has<02:36:49.160> to<02:36:49.359> have<02:36:49.560> a<02:36:49.840> group

this Li actually has to have a group

this Li actually has to have a group
property<02:36:51.319> so<02:36:51.479> it<02:36:51.600> knows<02:36:51.920> it's<02:36:52.120> grouped<02:36:52.520> with

property so it knows it's grouped with

property so it knows it's grouped with
this<02:36:52.880> so<02:36:53.000> if<02:36:53.080> we<02:36:53.200> hover<02:36:53.479> over<02:36:53.840> this<02:36:54.560> it

this so if we hover over this it

this so if we hover over this it
actually<02:36:55.080> applies<02:36:55.560> a<02:36:55.800> group<02:36:56.160> hover<02:36:56.960> there<02:36:57.120> we

actually applies a group hover there we

actually applies a group hover there we
go<02:36:57.800> so<02:36:58.080> now<02:36:58.359> this<02:36:58.479> is<02:36:58.760> such<02:36:58.960> a<02:36:59.200> wonderful

go so now this is such a wonderful

go so now this is such a wonderful
sidebar<02:37:00.960> the<02:37:01.160> last<02:37:01.319> thing<02:37:01.439> we're<02:37:01.600> missing<02:37:02.040> is

sidebar the last thing we're missing is

sidebar the last thing we're missing is
the<02:37:02.359> logout<02:37:03.240> functionality<02:37:04.240> so<02:37:04.560> let's<02:37:04.880> add

the logout functionality so let's add

the logout functionality so let's add
that<02:37:05.560> right<02:37:05.800> here<02:37:06.479> below<02:37:07.279> this<02:37:07.720> ul<02:37:08.720> and<02:37:08.880> then

that right here below this ul and then

that right here below this ul and then
going<02:37:09.359> one<02:37:09.560> more<02:37:09.880> time<02:37:10.160> below<02:37:10.520> the<02:37:10.800> div<02:37:11.800> here

going one more time below the div here

going one more time below the div here
we<02:37:12.279> want<02:37:12.399> to<02:37:12.680> add<02:37:12.960> a<02:37:13.240> button<02:37:14.240> and<02:37:14.439> this<02:37:14.600> button

we want to add a button and this button

we want to add a button and this button
is<02:37:15.080> going<02:37:15.240> to<02:37:15.359> be<02:37:15.520> only<02:37:15.880> almost<02:37:16.160> exactly<02:37:16.640> the

is going to be only almost exactly the

is going to be only almost exactly the
same<02:37:17.160> as<02:37:17.240> in<02:37:17.399> the<02:37:17.600> top<02:37:17.880> bar<02:37:18.600> so<02:37:18.760> we<02:37:18.880> can<02:37:19.040> just

same as in the top bar so we can just

same as in the top bar so we can just
copy<02:37:20.160> this<02:37:20.439> entire<02:37:20.960> sign<02:37:21.319> out

copy this entire sign out

copy this entire sign out
button<02:37:23.479> and<02:37:23.680> then<02:37:24.000> paste<02:37:24.240> it<02:37:24.960> here<02:37:25.960> if<02:37:26.080> you<02:37:26.200> do

button and then paste it here if you do

button and then paste it here if you do
that<02:37:27.000> you<02:37:27.120> can<02:37:27.279> notice<02:37:27.600> the<02:37:27.720> icon<02:37:28.120> appear<02:37:28.880> but

that you can notice the icon appear but

that you can notice the icon appear but
here<02:37:29.240> we<02:37:29.399> have<02:37:29.520> a<02:37:29.640> bit<02:37:29.840> more<02:37:30.319> space<02:37:31.000> so<02:37:31.160> we<02:37:31.279> can

here we have a bit more space so we can

here we have a bit more space so we can
also<02:37:31.840> add<02:37:32.040> the<02:37:32.240> text<02:37:32.760> that<02:37:32.880> says<02:37:33.200> log<02:37:33.560> out<02:37:34.560> and

also add the text that says log out and

also add the text that says log out and
let's<02:37:34.880> also<02:37:35.120> space<02:37:35.520> this<02:37:35.720> correctly<02:37:36.319> so<02:37:36.439> we

let's also space this correctly so we

let's also space this correctly so we
have<02:37:36.680> a<02:37:36.880> variant<02:37:37.439> class<02:37:37.800> name<02:37:38.399> onclick<02:37:39.399> and

have a variant class name onclick and

have a variant class name onclick and
then<02:37:39.640> we<02:37:39.840> have<02:37:39.960> an<02:37:40.279> image<02:37:41.279> and<02:37:41.399> then<02:37:41.640> finally

then we have an image and then finally

then we have an image and then finally
below<02:37:42.800> the<02:37:42.960> image<02:37:43.399> we<02:37:43.520> can<02:37:43.680> have<02:37:43.800> a<02:37:43.960> P<02:37:44.240> tag

below the image we can have a P tag

below the image we can have a P tag
that's<02:37:44.920> going<02:37:45.080> to<02:37:45.200> say<02:37:45.439> log<02:37:45.640> out<02:37:45.840> out<02:37:46.680> and<02:37:46.800> we

that's going to say log out out and we

that's going to say log out out and we
can<02:37:47.040> give<02:37:47.160> it<02:37:47.240> a<02:37:47.479> class<02:37:47.960> name<02:37:48.960> equal<02:37:49.279> to<02:37:50.120> small

can give it a class name equal to small

can give it a class name equal to small
medium<02:37:52.439> and<02:37:53.000> LG<02:37:54.000> base<02:37:54.760> medium<02:37:55.760> so<02:37:55.920> if<02:37:56.040> we<02:37:56.200> save

medium and LG base medium so if we save

medium and LG base medium so if we save
it<02:37:56.840> you<02:37:56.960> can<02:37:57.120> see<02:37:57.359> log<02:37:57.600> out<02:37:58.399> and<02:37:58.680> that

it you can see log out and that

it you can see log out and that
concludes<02:38:00.120> our<02:38:00.720> sidebar<02:38:01.720> of<02:38:01.880> course<02:38:02.080> now<02:38:02.240> if

concludes our sidebar of course now if

concludes our sidebar of course now if
you<02:38:02.439> try<02:38:02.680> clicking<02:38:03.080> explore<02:38:04.040> nothing's<02:38:04.399> going

you try clicking explore nothing's going

you try clicking explore nothing's going
to<02:38:04.720> happen<02:38:05.359> because<02:38:05.760> that<02:38:06.040> route<02:38:06.680> doesn't<02:38:07.080> yet

to happen because that route doesn't yet

to happen because that route doesn't yet
exist<02:38:08.319> so<02:38:08.560> while<02:38:08.760> we're<02:38:09.040> here<02:38:09.399> what<02:38:09.479> do<02:38:09.600> you

exist so while we're here what do you

exist so while we're here what do you
say<02:38:10.000> that<02:38:10.120> we<02:38:10.279> implement<02:38:10.800> the<02:38:11.000> routing<02:38:12.000> so

say that we implement the routing so

say that we implement the routing so
that<02:38:12.520> everything<02:38:12.880> we<02:38:13.040> work<02:38:13.279> so<02:38:13.479> hard<02:38:13.720> on

that everything we work so hard on

that everything we work so hard on
doesn't<02:38:14.399> just<02:38:14.840> disappear<02:38:15.960> so<02:38:16.200> to<02:38:16.399> do<02:38:16.640> that<02:38:17.160> we

doesn't just disappear so to do that we

doesn't just disappear so to do that we
can<02:38:17.439> now<02:38:17.680> go<02:38:18.080> back<02:38:18.760> to<02:38:19.120> our<02:38:19.720> main<02:38:20.720> or<02:38:20.960> rather<02:38:21.240> to

can now go back to our main or rather to

can now go back to our main or rather to
our<02:38:21.680> app<02:38:22.160> right<02:38:22.399> here<02:38:22.680> because<02:38:23.000> that's<02:38:23.200> where

our app right here because that's where

our app right here because that's where
we<02:38:23.479> have<02:38:23.600> the<02:38:23.760> routing<02:38:24.520> and<02:38:24.680> we<02:38:24.760> can<02:38:25.000> Implement

we have the routing and we can Implement

we have the routing and we can Implement
all<02:38:25.960> the<02:38:26.160> other<02:38:26.560> private

all the other private

all the other private
routes<02:38:28.680> and<02:38:28.880> trust<02:38:29.200> me<02:38:29.680> we're<02:38:29.880> going<02:38:29.960> to<02:38:30.240> have

routes and trust me we're going to have

routes and trust me we're going to have
quite<02:38:31.319> a<02:38:31.479> few<02:38:32.399> so<02:38:32.640> let's<02:38:32.880> create<02:38:33.120> a<02:38:33.279> new<02:38:33.520> route

quite a few so let's create a new route

quite a few so let's create a new route
which<02:38:34.319> is<02:38:34.439> going<02:38:34.600> to<02:38:34.720> be<02:38:34.840> a<02:38:34.920> self-closing

which is going to be a self-closing

which is going to be a self-closing
component<02:38:36.520> with<02:38:36.720> a<02:38:37.080> path<02:38:37.520> of<02:38:37.800> for<02:38:38.240> SL<02:38:39.000> explore

component with a path of for SL explore

component with a path of for SL explore
and<02:38:40.240> it's<02:38:40.399> going<02:38:40.560> to<02:38:40.720> render<02:38:41.040> an<02:38:41.240> element

and it's going to render an element

and it's going to render an element
that's<02:38:42.399> going<02:38:42.560> to<02:38:42.680> be<02:38:42.880> called<02:38:43.800> I<02:38:43.880> think<02:38:44.040> you

that's going to be called I think you

that's going to be called I think you
can<02:38:44.359> guess<02:38:44.720> it<02:38:45.760> explore<02:38:46.560> there<02:38:46.720> we<02:38:46.920> go<02:38:47.840> so<02:38:48.080> now

can guess it explore there we go so now

can guess it explore there we go so now
we<02:38:48.479> want<02:38:48.600> to<02:38:48.800> duplicate<02:38:49.359> this<02:38:49.800> many<02:38:50.080> many

we want to duplicate this many many

we want to duplicate this many many
times<02:38:51.120> below<02:38:52.120> the<02:38:52.279> second<02:38:52.600> one<02:38:52.880> is<02:38:53.040> going<02:38:53.240> to

times below the second one is going to

times below the second one is going to
be<02:38:53.720> saved<02:38:54.319> meaning<02:38:54.720> all<02:38:55.000> the<02:38:55.160> saved<02:38:55.600> posts

be saved meaning all the saved posts

be saved meaning all the saved posts
right<02:38:56.680> here<02:38:57.040> but<02:38:57.160> we<02:38:57.279> cannot<02:38:57.600> now<02:38:57.760> see<02:38:57.960> it

right here but we cannot now see it

right here but we cannot now see it
because<02:38:58.359> we<02:38:58.520> broke<02:38:58.760> it<02:38:59.200> and<02:38:59.359> that's<02:38:59.560> going<02:38:59.680> to

because we broke it and that's going to

because we broke it and that's going to
render<02:39:00.680> saved<02:39:01.680> then<02:39:01.960> we<02:39:02.120> have<02:39:02.240> to<02:39:02.479> have<02:39:02.800> all

render saved then we have to have all

render saved then we have to have all
users<02:39:04.520> which<02:39:04.640> is<02:39:04.760> going<02:39:04.920> to<02:39:05.120> go<02:39:05.319> to<02:39:05.680> all

users which is going to go to all

users which is going to go to all
users<02:39:07.880> let's<02:39:08.120> expand<02:39:08.479> this<02:39:08.680> just<02:39:08.800> a

bit then we can have create post and

bit then we can have create post and
that's<02:39:16.479> going<02:39:16.640> to<02:39:16.840> be<02:39:17.359> create<02:39:18.359> post<02:39:19.359> we<02:39:19.479> can

that's going to be create post we can

that's going to be create post we can
also<02:39:20.120> have<02:39:20.520> update<02:39:21.359> Das<02:39:22.200> poost<02:39:23.200> and<02:39:23.399> we<02:39:23.479> need

also have update Das poost and we need

also have update Das poost and we need
to<02:39:23.800> know<02:39:24.000> the<02:39:24.200> ID<02:39:24.680> of<02:39:24.800> the<02:39:24.960> post<02:39:25.240> we're

to know the ID of the post we're

to know the ID of the post we're
updating<02:39:26.600> take<02:39:26.880> care<02:39:27.200> of<02:39:27.439> these<02:39:27.840> columns

updating take care of these columns

updating take care of these columns
right<02:39:28.560> here<02:39:29.439> that's<02:39:29.680> going<02:39:29.840> to<02:39:30.000> be<02:39:30.359> edit<02:39:31.720> post

right here that's going to be edit post

right here that's going to be edit post
then<02:39:33.000> we're<02:39:33.160> going<02:39:33.240> to<02:39:33.479> have<02:39:33.880> a<02:39:34.120> specific<02:39:34.600> post

then we're going to have a specific post

then we're going to have a specific post
details<02:39:35.640> so<02:39:35.800> that's<02:39:36.000> going<02:39:36.120> to<02:39:36.240> be<02:39:36.479> posts<02:39:37.080> and

details so that's going to be posts and

details so that's going to be posts and
then<02:39:37.399> the<02:39:37.600> ID<02:39:37.960> of<02:39:38.160> that<02:39:38.520> post<02:39:39.520> so<02:39:39.760> that's<02:39:39.920> going

then the ID of that post so that's going

then the ID of that post so that's going
to<02:39:40.160> be<02:39:40.399> post

to be post

to be post
details<02:39:42.479> and<02:39:42.680> then<02:39:43.040> we<02:39:43.240> have<02:39:43.520> a<02:39:43.840> profile<02:39:44.479> so

details and then we have a profile so

details and then we have a profile so
that's<02:39:44.840> for/<02:39:45.720> profile

that's for/ profile

that's for/ profile
slid<02:39:48.640> and<02:39:48.760> we<02:39:48.840> can<02:39:49.080> also<02:39:49.399> add<02:39:49.680> this<02:39:49.880> special

slid and we can also add this special

slid and we can also add this special
asterisk<02:39:51.200> which<02:39:51.319> means<02:39:51.560> that<02:39:51.800> everything

asterisk which means that everything

asterisk which means that everything
after<02:39:52.520> the<02:39:52.760> profile<02:39:53.319> is<02:39:53.600> also<02:39:53.800> going<02:39:53.960> to<02:39:54.200> point

after the profile is also going to point

after the profile is also going to point
to<02:39:54.880> that<02:39:55.200> profile<02:39:56.200> we<02:39:56.279> can<02:39:56.439> say<02:39:57.080> profile<02:39:58.080> and

to that profile we can say profile and

to that profile we can say profile and
finally<02:39:58.880> we're<02:39:59.040> going<02:39:59.160> to<02:39:59.319> have<02:39:59.520> the<02:39:59.760> update

finally we're going to have the update

finally we're going to have the update
Das<02:40:01.120> profile

Das profile

Das profile
slid<02:40:03.680> where<02:40:03.960> we're<02:40:04.080> going<02:40:04.200> to<02:40:04.319> render<02:40:05.000> the

slid where we're going to render the

slid where we're going to render the
update

update

update
profile<02:40:09.080> and<02:40:09.279> with<02:40:09.479> that<02:40:09.720> said<02:40:10.120> we<02:40:10.240> now<02:40:10.520> have

profile and with that said we now have

profile and with that said we now have
all<02:40:10.960> of<02:40:11.080> our<02:40:11.279> routes<02:40:11.960> the<02:40:12.120> last<02:40:12.319> thing<02:40:12.479> we<02:40:12.600> have

all of our routes the last thing we have

all of our routes the last thing we have
to<02:40:12.880> do<02:40:13.600> is<02:40:14.000> create<02:40:14.640> those<02:40:14.960> pages<02:40:15.800> within<02:40:16.359> the

to do is create those pages within the

to do is create those pages within the
pages<02:40:16.960> folder<02:40:17.800> right<02:40:18.040> here<02:40:18.840> so<02:40:19.200> let's<02:40:19.439> create

pages folder right here so let's create

pages folder right here so let's create
them<02:40:20.040> one<02:40:20.279> by<02:40:20.479> one<02:40:21.120> that's<02:40:21.359> going<02:40:21.560> to<02:40:21.760> be

them one by one that's going to be

them one by one that's going to be
starting<02:40:22.720> from<02:40:22.960> the

starting from the

starting from the
top<02:40:25.040> all<02:40:26.040> users.<02:40:27.200> TSX<02:40:28.200> where<02:40:28.479> we<02:40:28.600> can<02:40:28.760> run

top all users. TSX where we can run

top all users. TSX where we can run
ource<02:40:31.399> let's<02:40:31.640> go<02:40:31.800> to<02:40:31.960> the<02:40:32.120> next<02:40:32.359> one<02:40:32.720> that's

ource let's go to the next one that's

ource let's go to the next one that's
going<02:40:33.080> to<02:40:33.240> be<02:40:33.479> create<02:40:34.319> post.<02:40:35.399> TSX<02:40:36.399> and<02:40:36.640> again

going to be create post. TSX and again

going to be create post. TSX and again
run

run

run
RFC<02:40:39.560> after<02:40:39.840> create<02:40:40.279> post<02:40:40.840> we're<02:40:40.960> going<02:40:41.080> to

RFC after create post we're going to

RFC after create post we're going to
have<02:40:41.600> edit<02:40:42.520> post.<02:40:43.600> TSX<02:40:44.600> where<02:40:44.840> we're<02:40:44.960> going<02:40:45.080> to

have edit post. TSX where we're going to

have edit post. TSX where we're going to
create

create

create
rafc<02:40:47.920> after<02:40:48.279> that<02:40:48.560> we're<02:40:48.720> going<02:40:48.800> to<02:40:49.040> have

rafc after that we're going to have

rafc after that we're going to have
explore.<02:40:51.080> TSX<02:40:52.080> once<02:40:52.359> again<02:40:52.800> run

explore. TSX once again run

explore. TSX once again run
rce<02:40:55.240> after<02:40:55.600> that<02:40:55.960> we're<02:40:56.120> going<02:40:56.240> to<02:40:56.399> run<02:40:57.279> post

rce after that we're going to run post

rce after that we're going to run post
details.<02:40:59.800> TSX<02:41:00.800> run

details. TSX run

details. TSX run
rce<02:41:02.880> we're<02:41:03.040> going<02:41:03.160> to<02:41:03.319> have<02:41:03.520> our<02:41:03.920> profile<02:41:04.359> of

rce we're going to have our profile of

rce we're going to have our profile of
course<02:41:05.520> TSX<02:41:06.520> and<02:41:06.720> run

course TSX and run

course TSX and run
RFC<02:41:08.840> and<02:41:09.000> we're<02:41:09.120> going<02:41:09.240> to<02:41:09.479> also<02:41:09.840> have<02:41:10.160> our

RFC and we're going to also have our

RFC and we're going to also have our
saved<02:41:11.040> for<02:41:11.319> saved<02:41:11.760> posts.<02:41:12.760> TSX<02:41:13.680> and<02:41:13.840> run<02:41:14.439> RFC

saved for saved posts. TSX and run RFC

saved for saved posts. TSX and run RFC
and<02:41:16.479> we're<02:41:16.600> going<02:41:16.720> to<02:41:16.920> also<02:41:17.319> have<02:41:17.760> the<02:41:18.279> update

and we're going to also have the update

and we're going to also have the update
profile.<02:41:21.040> TSX<02:41:22.040> and<02:41:22.160> we<02:41:22.279> can<02:41:22.399> run<02:41:22.600> R<02:41:23.359> afce<02:41:24.359> so

profile. TSX and we can run R afce so

profile. TSX and we can run R afce so
now<02:41:24.760> we<02:41:24.920> have<02:41:25.200> all<02:41:25.399> of<02:41:25.600> these<02:41:25.880> Pages<02:41:26.720> you<02:41:26.840> can

now we have all of these Pages you can

now we have all of these Pages you can
close<02:41:27.399> them<02:41:27.600> by<02:41:27.720> pressing<02:41:28.040> control<02:41:28.479> or

close them by pressing control or

close them by pressing control or
command<02:41:29.680> W<02:41:30.399> don't<02:41:30.640> do<02:41:30.880> that<02:41:31.080> while<02:41:31.240> you're<02:41:31.359> in

command W don't do that while you're in

command W don't do that while you're in
your<02:41:31.640> browser<02:41:32.279> move<02:41:32.520> to<02:41:32.640> your<02:41:32.800> Visual<02:41:33.080> Studio

your browser move to your Visual Studio

your browser move to your Visual Studio
code<02:41:34.000> because<02:41:34.240> usually<02:41:34.560> it<02:41:34.680> would<02:41:34.840> close<02:41:35.160> your

code because usually it would close your

code because usually it would close your
tab<02:41:36.479> and<02:41:36.600> then<02:41:36.760> you<02:41:36.840> can<02:41:37.080> close<02:41:37.439> all<02:41:37.600> of<02:41:37.800> these

tab and then you can close all of these

tab and then you can close all of these
tabs<02:41:39.479> and<02:41:39.600> we<02:41:39.720> can<02:41:39.960> go<02:41:40.439> to<02:41:40.720> this<02:41:40.960> index<02:41:41.640> within

tabs and we can go to this index within

tabs and we can go to this index within
the<02:41:42.080> pages<02:41:43.000> and<02:41:43.120> we<02:41:43.240> can<02:41:43.479> export<02:41:43.920> all<02:41:44.040> of<02:41:44.200> these

the pages and we can export all of these

the pages and we can export all of these
components<02:41:45.040> so<02:41:45.200> that<02:41:45.479> it's<02:41:45.600> easier<02:41:45.920> to<02:41:46.080> import

components so that it's easier to import

components so that it's easier to import
them<02:41:46.920> so<02:41:47.120> let's<02:41:47.359> duplicate<02:41:47.840> this<02:41:48.000> a<02:41:48.120> few<02:41:48.600> times

them so let's duplicate this a few times

them so let's duplicate this a few times
quite<02:41:49.760> a<02:41:49.920> few

quite a few

quite a few
actually<02:41:51.880> and<02:41:52.000> then<02:41:52.160> we<02:41:52.240> can<02:41:52.800> export<02:41:53.800> explore

actually and then we can export explore

actually and then we can export explore
from<02:41:55.640> exlore<02:41:56.640> we<02:41:56.760> can<02:41:57.000> also<02:41:57.720> export

from exlore we can also export

from exlore we can also export
saved<02:41:59.880> we<02:42:00.000> can<02:42:00.319> export<02:42:01.279> create<02:42:02.720> post<02:42:03.720> we<02:42:03.840> can

saved we can export create post we can

saved we can export create post we can
export

export

export
profile<02:42:07.000> we<02:42:07.120> can<02:42:07.399> export<02:42:08.040> update<02:42:08.920> profile<02:42:09.840> we

profile we can export update profile we

profile we can export update profile we
can<02:42:10.240> export<02:42:10.840> edit<02:42:12.080> post<02:42:13.080> we<02:42:13.200> can<02:42:13.479> export<02:42:14.439> post

can export edit post we can export post

can export edit post we can export post
details

details

details
and<02:42:17.520> we<02:42:17.640> can<02:42:17.880> export<02:42:18.640> all

and we can export all

and we can export all
users<02:42:20.760> right<02:42:21.200> here<02:42:21.600> as

users right here as

users right here as
well<02:42:23.479> and<02:42:23.840> I<02:42:24.040> think<02:42:24.479> we're<02:42:24.640> going<02:42:24.720> to<02:42:24.920> use<02:42:25.200> the

well and I think we're going to use the

well and I think we're going to use the
like<02:42:25.760> post<02:42:26.160> as<02:42:26.319> well<02:42:26.840> so<02:42:27.160> let's<02:42:27.479> add<02:42:27.760> like

like post as well so let's add like

like post as well so let's add like
posts<02:42:29.160> as<02:42:29.840> well<02:42:30.840> and<02:42:31.040> we<02:42:31.160> need<02:42:31.279> to<02:42:31.520> create<02:42:32.359> the

posts as well and we need to create the

posts as well and we need to create the
component<02:42:33.040> for<02:42:34.160> liked<02:42:35.359> posts.<02:42:36.399> TSX<02:42:37.399> and<02:42:37.560> run

component for liked posts. TSX and run

component for liked posts. TSX and run
RFC<02:42:39.680> now<02:42:39.880> that<02:42:40.000> we<02:42:40.160> have<02:42:40.319> created<02:42:40.800> all<02:42:40.960> of

RFC now that we have created all of

RFC now that we have created all of
these<02:42:41.479> Pages<02:42:42.479> within<02:42:43.000> app<02:42:43.479> you<02:42:43.600> can

these Pages within app you can

these Pages within app you can
doubleclick<02:42:44.479> each<02:42:44.720> word<02:42:45.359> press<02:42:45.560> control<02:42:45.880> or

doubleclick each word press control or

doubleclick each word press control or
command<02:42:46.479> space<02:42:47.240> and<02:42:47.439> it's<02:42:47.560> going<02:42:47.760> to

command space and it's going to

command space and it's going to
automatically<02:42:48.720> give<02:42:48.840> you<02:42:49.000> the<02:42:49.160> import<02:42:50.040> repeat

automatically give you the import repeat

automatically give you the import repeat
this<02:42:50.720> procedure<02:42:51.359> all<02:42:51.920> seven<02:42:52.200> or<02:42:52.359> eight<02:42:52.680> times

this procedure all seven or eight times

this procedure all seven or eight times
however<02:42:53.920> many<02:42:54.200> components<02:42:55.160> we<02:42:55.600> have<02:42:56.600> so<02:42:56.880> if

however many components we have so if

however many components we have so if
you<02:42:57.160> do<02:42:57.600> this<02:42:58.600> you<02:42:58.720> can<02:42:58.960> see<02:42:59.840> that<02:43:00.160> they're<02:43:00.479> all

you do this you can see that they're all

you do this you can see that they're all
getting<02:43:00.960> imported<02:43:01.479> from<02:43:01.680> one<02:43:01.920> line<02:43:02.439> which<02:43:02.560> is

getting imported from one line which is

getting imported from one line which is
pretty<02:43:03.000> cool<02:43:03.520> that's<02:43:03.760> exactly<02:43:04.160> why<02:43:04.279> we<02:43:04.399> needed

pretty cool that's exactly why we needed

pretty cool that's exactly why we needed
to<02:43:04.880> export<02:43:05.359> them<02:43:06.120> whereas<02:43:06.680> these<02:43:06.960> components

to export them whereas these components

to export them whereas these components
are<02:43:07.960> being<02:43:08.200> imported<02:43:08.680> in<02:43:08.880> their<02:43:09.040> own

are being imported in their own

are being imported in their own
individual<02:43:10.359> lines<02:43:11.359> so<02:43:11.680> now<02:43:12.160> if<02:43:12.279> we<02:43:12.479> save<02:43:12.800> this

individual lines so now if we save this

individual lines so now if we save this
file<02:43:14.439> and<02:43:14.600> reload<02:43:15.000> the<02:43:15.080> page<02:43:15.399> page<02:43:16.080> you<02:43:16.200> can

file and reload the page page you can

file and reload the page page you can
see<02:43:16.560> the<02:43:16.880> sidebar<02:43:17.880> and<02:43:18.160> you<02:43:18.279> can<02:43:18.439> see<02:43:18.640> that<02:43:18.760> it

see the sidebar and you can see that it

see the sidebar and you can see that it
says<02:43:19.240> explore<02:43:20.240> and<02:43:20.399> it<02:43:20.520> says<02:43:20.800> home<02:43:21.600> the<02:43:21.760> URL

says explore and it says home the URL

says explore and it says home the URL
changes<02:43:23.120> and<02:43:23.680> what<02:43:23.920> it<02:43:24.080> says<02:43:24.640> also<02:43:24.920> changes<02:43:25.760> so

changes and what it says also changes so

changes and what it says also changes so
now<02:43:26.240> we<02:43:26.399> have<02:43:26.640> complete<02:43:27.240> routing<02:43:28.080> implemented

now we have complete routing implemented

now we have complete routing implemented
in<02:43:29.200> our<02:43:29.520> great<02:43:30.200> application<02:43:31.200> before<02:43:31.520> we<02:43:31.680> focus

in our great application before we focus

in our great application before we focus
on<02:43:32.279> that<02:43:32.680> central<02:43:33.200> part<02:43:33.960> we're<02:43:34.120> going<02:43:34.200> to

on that central part we're going to

on that central part we're going to
first<02:43:34.920> focus<02:43:35.399> on<02:43:35.600> the<02:43:35.800> bottom<02:43:36.160> bar<02:43:36.680> which<02:43:36.800> is<02:43:36.920> a

first focus on the bottom bar which is a

first focus on the bottom bar which is a
bit<02:43:37.200> weird<02:43:37.680> right<02:43:38.319> where<02:43:38.560> do<02:43:38.680> we<02:43:38.920> have<02:43:39.160> a

bit weird right where do we have a

bit weird right where do we have a
bottom<02:43:39.840> bar<02:43:40.160> here<02:43:41.080> well<02:43:41.520> as<02:43:41.720> with<02:43:41.920> the<02:43:42.120> top<02:43:42.399> bar

bottom bar here well as with the top bar

bottom bar here well as with the top bar
it<02:43:43.399> only<02:43:44.240> happens<02:43:44.920> on<02:43:45.399> mobile<02:43:45.800> devices<02:43:46.760> I<02:43:46.840> mean

it only happens on mobile devices I mean

it only happens on mobile devices I mean
how<02:43:47.680> cool<02:43:47.960> is<02:43:48.200> this<02:43:48.880> this<02:43:49.040> is<02:43:49.240> a<02:43:49.560> special

how cool is this this is a special

how cool is this this is a special
native<02:43:51.160> mobile<02:43:51.760> like<02:43:52.319> Bottom<02:43:52.680> bar<02:43:53.080> so<02:43:53.319> you<02:43:53.399> can

native mobile like Bottom bar so you can

native mobile like Bottom bar so you can
press<02:43:54.160> your<02:43:55.160> so<02:43:55.359> you<02:43:55.439> can<02:43:55.680> navigate<02:43:56.160> your<02:43:56.439> app

press your so you can navigate your app

press your so you can navigate your app
with<02:43:57.120> your<02:43:57.359> thumb<02:43:58.200> how<02:43:58.439> cool<02:43:58.680> is<02:43:58.880> that<02:43:59.600> so<02:43:59.880> now

with your thumb how cool is that so now

with your thumb how cool is that so now
we're<02:44:00.240> going<02:44:00.319> to<02:44:00.560> definitely<02:44:00.920> stay<02:44:01.279> in<02:44:01.439> mobile

we're going to definitely stay in mobile

we're going to definitely stay in mobile
view<02:44:03.240> we<02:44:03.359> can<02:44:03.800> return<02:44:04.600> back<02:44:04.920> to<02:44:05.160> our<02:44:05.399> root

view we can return back to our root

view we can return back to our root
layout<02:44:06.560> and<02:44:06.840> move<02:44:07.399> to<02:44:07.600> our<02:44:07.840> Bottom<02:44:08.279> bar<02:44:08.880> as

layout and move to our Bottom bar as

layout and move to our Bottom bar as
that's<02:44:09.319> going<02:44:09.439> to<02:44:09.560> be<02:44:09.680> the<02:44:09.840> component<02:44:10.439> we're

that's going to be the component we're

that's going to be the component we're
going<02:44:10.680> to<02:44:10.880> implement<02:44:11.479> next<02:44:12.279> trust<02:44:12.560> me<02:44:12.840> it's

going to implement next trust me it's

going to implement next trust me it's
not<02:44:13.200> going<02:44:13.359> to<02:44:13.520> be<02:44:13.840> that<02:44:14.200> complicated<02:44:15.200> we'll

not going to be that complicated we'll

not going to be that complicated we'll
be<02:44:15.439> able<02:44:15.600> to<02:44:15.800> use<02:44:16.520> the<02:44:16.680> majority<02:44:17.080> of<02:44:17.240> things<02:44:17.479> we

be able to use the majority of things we

be able to use the majority of things we
have<02:44:17.760> in<02:44:17.880> the<02:44:18.040> left<02:44:18.319> sidebar<02:44:19.120> to<02:44:19.319> make<02:44:19.479> it

have in the left sidebar to make it

have in the left sidebar to make it
happen<02:44:20.960> so<02:44:21.279> first<02:44:21.479> of<02:44:21.640> all<02:44:22.160> let's<02:44:22.399> create<02:44:22.680> a

happen so first of all let's create a

happen so first of all let's create a
section<02:44:24.240> and<02:44:24.520> that<02:44:24.760> section<02:44:25.520> is<02:44:25.720> going<02:44:25.960> to

section and that section is going to

section and that section is going to
have<02:44:26.640> a<02:44:26.920> class<02:44:27.279> name<02:44:28.279> equal<02:44:28.600> to<02:44:29.479> bottom<02:44:30.479> dasar

have a class name equal to bottom dasar

have a class name equal to bottom dasar
we<02:44:31.600> can

we can

we can
import<02:44:33.720> a<02:44:34.359> link<02:44:35.359> as<02:44:35.520> well<02:44:35.720> as<02:44:35.960> use<02:44:36.560> location

import a link as well as use location

import a link as well as use location
coming<02:44:37.920> from

coming from

coming from
react<02:44:40.240> router<02:44:41.319> Dom<02:44:42.319> and<02:44:42.439> then<02:44:42.600> we<02:44:42.680> can

react router Dom and then we can

react router Dom and then we can
initialize<02:44:43.560> that<02:44:43.800> path<02:44:44.080> name<02:44:44.640> to<02:44:44.800> know<02:44:45.399> on

initialize that path name to know on

initialize that path name to know on
which<02:44:45.800> page<02:44:46.000> are<02:44:46.120> we<02:44:46.279> currently<02:44:46.680> on<02:44:47.520> so<02:44:47.840> const

which page are we currently on so const

which page are we currently on so const
path<02:44:49.160> name<02:44:49.960> is<02:44:50.240> equal<02:44:50.560> to<02:44:51.359> use

path name is equal to use

path name is equal to use
location<02:44:53.880> now<02:44:54.160> we<02:44:54.279> can<02:44:54.399> do<02:44:54.600> something<02:44:55.000> similar

location now we can do something similar

location now we can do something similar
to<02:44:55.800> what<02:44:55.960> we've<02:44:56.160> done<02:44:56.359> with<02:44:56.479> the<02:44:56.680> sidebar<02:44:57.640> so

to what we've done with the sidebar so

to what we've done with the sidebar so
let's<02:44:58.040> go<02:44:58.240> into<02:44:58.439> the<02:44:58.640> sidebar<02:44:59.600> and<02:44:59.800> let's<02:45:00.120> copy

let's go into the sidebar and let's copy

let's go into the sidebar and let's copy
all<02:45:00.880> of<02:45:01.120> these<02:45:01.399> sidebar

links all the way until the

links all the way until the
end<02:45:07.680> and<02:45:07.800> then<02:45:08.080> paste<02:45:08.399> it<02:45:08.880> right<02:45:09.160> here<02:45:09.520> in<02:45:09.680> the

end and then paste it right here in the

end and then paste it right here in the
bottom<02:45:10.600> bar<02:45:11.600> so<02:45:11.840> essentially<02:45:12.840> we<02:45:13.000> are<02:45:13.439> going

bottom bar so essentially we are going

bottom bar so essentially we are going
over<02:45:14.399> now<02:45:14.720> the<02:45:14.880> side<02:45:15.399> links<02:45:15.760> this<02:45:15.960> time<02:45:16.600> but

over now the side links this time but

over now the side links this time but
Bottom<02:45:17.920> bar<02:45:18.600> links<02:45:19.439> which<02:45:19.560> you<02:45:19.720> have<02:45:19.840> to

Bottom bar links which you have to

Bottom bar links which you have to
import<02:45:20.479> from<02:45:20.760> at<02:45:21.399> SL<02:45:21.880> constants<02:45:22.880> in<02:45:23.120> this<02:45:23.319> case

import from at SL constants in this case

import from at SL constants in this case
we<02:45:23.640> don't<02:45:23.840> need<02:45:24.000> to<02:45:24.240> provide<02:45:24.840> the

we don't need to provide the

we don't need to provide the
interface<02:45:27.040> and<02:45:27.279> instead<02:45:27.520> of<02:45:27.640> a<02:45:27.760> nav<02:45:28.080> link

interface and instead of a nav link

interface and instead of a nav link
we're<02:45:28.600> going<02:45:28.680> to<02:45:28.840> use<02:45:29.240> a

we're going to use a

we're going to use a
link<02:45:31.600> now<02:45:31.800> if<02:45:31.880> you<02:45:32.040> save<02:45:32.439> this<02:45:32.960> already<02:45:33.680> it's

link now if you save this already it's

link now if you save this already it's
looking<02:45:34.520> okay<02:45:35.240> but<02:45:35.399> we<02:45:35.520> can<02:45:35.680> make<02:45:35.800> it<02:45:36.000> look

looking okay but we can make it look

looking okay but we can make it look
better<02:45:37.800> instead<02:45:38.120> of<02:45:38.279> a<02:45:38.600> left<02:45:39.000> sidebar<02:45:39.479> link

better instead of a left sidebar link

better instead of a left sidebar link
you<02:45:40.120> can<02:45:40.279> say<02:45:40.720> Bottom<02:45:41.680> bar<02:45:42.319> link<02:45:43.200> but<02:45:43.359> in<02:45:43.560> this

you can say Bottom bar link but in this

you can say Bottom bar link but in this
case<02:45:43.920> we<02:45:44.040> don't<02:45:44.279> even<02:45:44.439> need<02:45:44.640> an<02:45:44.800> l

case we don't even need an l

case we don't even need an l
everything<02:45:45.960> is<02:45:46.080> going<02:45:46.240> to<02:45:46.399> be<02:45:46.560> in<02:45:46.680> a<02:45:46.880> link<02:45:47.600> so

everything is going to be in a link so

everything is going to be in a link so
simply<02:45:48.240> copy<02:45:48.600> the<02:45:48.760> key<02:45:49.200> and<02:45:49.359> the<02:45:49.560> class<02:45:49.840> name

simply copy the key and the class name

simply copy the key and the class name
from<02:45:50.200> the<02:45:50.720> LI<02:45:51.720> remove<02:45:52.080> it<02:45:52.640> completely<02:45:53.640> as<02:45:53.760> well

from the LI remove it completely as well

from the LI remove it completely as well
as<02:45:54.000> the<02:45:54.120> ending<02:45:54.520> tag<02:45:55.520> and<02:45:55.680> then<02:45:55.920> add<02:45:56.120> it

as the ending tag and then add it

as the ending tag and then add it
instead<02:45:56.760> of<02:45:56.920> the<02:45:57.120> class<02:45:57.399> name<02:45:57.680> right<02:45:57.840> here<02:45:58.000> to

instead of the class name right here to

instead of the class name right here to
the

the

the
link<02:46:00.240> there<02:46:00.399> we<02:46:00.600> go<02:46:01.040> that's<02:46:01.240> more<02:46:01.560> like<02:46:01.760> it

link there we go that's more like it

link there we go that's more like it
let's<02:46:02.920> put<02:46:03.120> this<02:46:03.200> in<02:46:03.319> a<02:46:03.439> new<02:46:03.760> line<02:46:04.760> let's

let's put this in a new line let's

let's put this in a new line let's
remove<02:46:05.399> the<02:46:05.560> Bottom<02:46:05.840> bar<02:46:06.120> link<02:46:06.600> I<02:46:06.720> don't<02:46:06.880> think

remove the Bottom bar link I don't think

remove the Bottom bar link I don't think
we'll<02:46:07.240> need<02:46:07.439> it<02:46:07.600> in<02:46:07.800> this<02:46:08.040> case<02:46:08.720> we<02:46:08.880> just<02:46:09.080> want

we'll need it in this case we just want

we'll need it in this case we just want
to<02:46:09.399> apply<02:46:09.720> a<02:46:09.840> couple<02:46:10.040> of<02:46:10.240> class<02:46:10.520> names<02:46:10.880> if<02:46:11.040> we

to apply a couple of class names if we

to apply a couple of class names if we
are<02:46:11.600> active<02:46:12.279> so<02:46:12.640> if<02:46:13.000> the<02:46:13.160> current<02:46:13.520> link<02:46:13.920> is

are active so if the current link is

are active so if the current link is
active<02:46:15.120> in<02:46:15.359> that<02:46:15.600> case<02:46:16.000> we<02:46:16.160> want<02:46:16.319> to<02:46:16.520> provide

active in that case we want to provide

active in that case we want to provide
it<02:46:17.120> a<02:46:17.399> BG<02:46:17.800> primary<02:46:18.640> 500<02:46:19.640> as<02:46:19.840> well<02:46:20.160> as<02:46:20.319> a<02:46:20.560> rounded

it a BG primary 500 as well as a rounded

it a BG primary 500 as well as a rounded
Das<02:46:22.120> 10<02:46:22.520> pixels<02:46:23.279> to<02:46:23.479> make<02:46:23.600> it<02:46:23.840> just<02:46:24.000> a<02:46:24.120> bit

Das 10 pixels to make it just a bit

Das 10 pixels to make it just a bit
rounded<02:46:25.840> and<02:46:26.040> then<02:46:26.520> usually<02:46:27.200> it<02:46:27.359> has<02:46:27.479> to<02:46:27.640> be

rounded and then usually it has to be

rounded and then usually it has to be
Flex<02:46:28.279> Center<02:46:28.920> so<02:46:29.120> we<02:46:29.279> Center<02:46:29.680> the<02:46:29.800> link<02:46:30.760> see

Flex Center so we Center the link see

Flex Center so we Center the link see
how<02:46:31.240> it<02:46:31.319> changes<02:46:31.680> on<02:46:31.840> the<02:46:32.040> bottom<02:46:33.040> we<02:46:33.160> want<02:46:33.240> to

how it changes on the bottom we want to

how it changes on the bottom we want to
give<02:46:33.520> it<02:46:33.600> a<02:46:33.760> flex<02:46:34.120> call<02:46:34.720> so<02:46:34.880> it<02:46:35.040> appears<02:46:35.439> one<02:46:35.600> on

give it a flex call so it appears one on

give it a flex call so it appears one on
top<02:46:36.000> of<02:46:36.200> another<02:46:36.800> because<02:46:37.000> on<02:46:37.200> mobile<02:46:37.600> we<02:46:37.760> have

top of another because on mobile we have

top of another because on mobile we have
more<02:46:38.319> vertical<02:46:38.760> space<02:46:39.160> than<02:46:39.800> horizontal<02:46:40.800> a

more vertical space than horizontal a

more vertical space than horizontal a
gap<02:46:41.240> of<02:46:41.399> one<02:46:41.720> to<02:46:41.880> create<02:46:42.160> some<02:46:42.399> space<02:46:43.319> a

gap of one to create some space a

gap of one to create some space a
padding<02:46:43.880> of<02:46:44.040> two<02:46:44.800> and<02:46:45.000> and<02:46:45.200> a<02:46:45.399> transition<02:46:46.359> this

padding of two and and a transition this

padding of two and and a transition this
is<02:46:46.640> going<02:46:46.800> to<02:46:47.120> just<02:46:47.479> make<02:46:47.600> it<02:46:47.840> animate<02:46:48.319> slowly

is going to just make it animate slowly

is going to just make it animate slowly
once<02:46:49.160> we<02:46:49.560> hover<02:46:50.560> finally<02:46:51.359> we<02:46:51.600> want<02:46:51.760> to<02:46:52.080> style

once we hover finally we want to style

once we hover finally we want to style
the<02:46:52.680> image<02:46:53.479> by<02:46:53.800> just<02:46:54.000> giving<02:46:54.279> it<02:46:55.000> on<02:46:55.439> active

the image by just giving it on active

the image by just giving it on active
invert<02:46:56.600> white<02:46:57.479> and<02:46:57.680> then<02:46:58.319> instead<02:46:58.600> of<02:46:58.720> a<02:46:58.840> link

invert white and then instead of a link

invert white and then instead of a link
label<02:46:59.920> let's<02:47:00.160> simply<02:47:00.439> create<02:47:00.640> a<02:47:00.800> P<02:47:01.600> tag<02:47:02.600> that's

label let's simply create a P tag that's

label let's simply create a P tag that's
going<02:47:02.920> to<02:47:03.080> render<02:47:03.479> the<02:47:03.600> link

going to render the link

going to render the link
label<02:47:05.920> but<02:47:06.160> it's<02:47:06.319> going<02:47:06.479> to<02:47:06.640> have<02:47:06.760> a<02:47:07.040> class

label but it's going to have a class

label but it's going to have a class
name<02:47:08.319> equal<02:47:08.640> to<02:47:09.040> Tiny<02:47:09.760> Das<02:47:10.200> medium<02:47:11.200> text-

name equal to Tiny Das medium text-

name equal to Tiny Das medium text-
light-2<02:47:13.640> so<02:47:13.800> if<02:47:13.920> we<02:47:14.080> save<02:47:14.319> it<02:47:15.080> this<02:47:15.200> is<02:47:15.359> now

light-2 so if we save it this is now

light-2 so if we save it this is now
looking<02:47:15.920> good<02:47:16.520> but<02:47:16.720> is<02:47:16.840> it<02:47:17.000> looking<02:47:17.359> close<02:47:17.760> to

looking good but is it looking close to

looking good but is it looking close to
the<02:47:18.000> finished

the finished

the finished
version<02:47:20.040> okay<02:47:20.680> we're<02:47:20.960> almost<02:47:21.399> there<02:47:21.800> the

version okay we're almost there the

version okay we're almost there the
icons<02:47:22.399> have<02:47:22.560> to<02:47:22.640> be<02:47:22.760> a<02:47:22.840> bit<02:47:23.080> smaller<02:47:23.880> so<02:47:24.040> we<02:47:24.120> can

icons have to be a bit smaller so we can

icons have to be a bit smaller so we can
add<02:47:24.520> a<02:47:25.040> width<02:47:26.040> of<02:47:26.680> 16<02:47:27.680> and<02:47:27.960> a<02:47:28.240> height<02:47:28.920> of<02:47:29.160> 16<02:47:29.760> as

add a width of 16 and a height of 16 as

add a width of 16 and a height of 16 as
well<02:47:30.960> and<02:47:31.240> now<02:47:32.160> I<02:47:32.319> think<02:47:33.040> we're<02:47:33.439> there<02:47:34.279> keep<02:47:34.479> in

well and now I think we're there keep in

well and now I think we're there keep in
mind<02:47:35.160> this<02:47:35.399> automatically<02:47:36.040> works<02:47:36.359> as<02:47:36.560> well<02:47:37.080> so

mind this automatically works as well so

mind this automatically works as well so
we<02:47:37.359> can<02:47:37.520> now<02:47:37.800> navigate<02:47:38.520> on<02:47:38.760> mobile<02:47:39.200> devices

we can now navigate on mobile devices

we can now navigate on mobile devices
too<02:47:41.160> this<02:47:41.319> is<02:47:41.720> pretty<02:47:42.479> crazy<02:47:43.479> and<02:47:43.800> it<02:47:44.000> also<02:47:44.279> of

too this is pretty crazy and it also of

too this is pretty crazy and it also of
course<02:47:44.880> works<02:47:45.160> with<02:47:45.319> a

course works with a

course works with a
sidebar<02:47:47.080> this<02:47:47.200> is<02:47:47.439> great<02:47:48.319> and<02:47:48.600> I<02:47:48.680> would<02:47:48.840> want

sidebar this is great and I would want

sidebar this is great and I would want
to<02:47:49.120> focus<02:47:49.439> on<02:47:49.600> the<02:47:49.800> homepage<02:47:50.479> so<02:47:50.960> bad<02:47:51.359> because

to focus on the homepage so bad because

to focus on the homepage so bad because
we've<02:47:51.680> been<02:47:51.840> waiting<02:47:52.120> to<02:47:52.279> implement<02:47:52.720> this

we've been waiting to implement this

we've been waiting to implement this
beautiful<02:47:53.600> homepage<02:47:54.040> for<02:47:54.200> a<02:47:54.399> long<02:47:54.760> time<02:47:55.760> but

beautiful homepage for a long time but

beautiful homepage for a long time but
I'm<02:47:56.279> sure<02:47:56.600> that<02:47:56.720> you're<02:47:56.960> aware<02:47:57.359> that<02:47:57.479> we're

I'm sure that you're aware that we're

I'm sure that you're aware that we're
missing<02:47:58.160> something<02:47:58.920> before<02:47:59.279> we<02:47:59.600> dive<02:47:59.920> into<02:48:00.160> it

missing something before we dive into it

missing something before we dive into it
right<02:48:01.680> and<02:48:01.920> that<02:48:02.399> something<02:48:03.399> is<02:48:03.640> create<02:48:04.080> post

right and that something is create post

right and that something is create post
how<02:48:05.200> can<02:48:05.359> we<02:48:05.479> see<02:48:05.800> the<02:48:06.000> homepage<02:48:06.800> if<02:48:06.920> we<02:48:07.120> don't

how can we see the homepage if we don't

how can we see the homepage if we don't
yet<02:48:07.680> have<02:48:07.960> any<02:48:08.560> posts<02:48:09.560> so<02:48:10.120> I'll<02:48:10.319> have<02:48:10.439> to<02:48:10.640> keep

yet have any posts so I'll have to keep

yet have any posts so I'll have to keep
you<02:48:10.920> waiting<02:48:11.240> a<02:48:11.359> bit<02:48:11.560> longer<02:48:11.920> until<02:48:12.160> we<02:48:12.279> do<02:48:12.479> the

you waiting a bit longer until we do the

you waiting a bit longer until we do the
homepage<02:48:13.600> we'll<02:48:13.960> have<02:48:14.120> to<02:48:14.319> focus<02:48:15.200> on<02:48:15.520> create

homepage we'll have to focus on create

homepage we'll have to focus on create
post<02:48:16.359> first<02:48:17.319> so<02:48:17.479> let's<02:48:17.760> collapse<02:48:18.240> this<02:48:18.640> we

post first so let's collapse this we

post first so let's collapse this we
have<02:48:18.920> a<02:48:19.080> beautiful<02:48:19.520> create<02:48:19.840> post<02:48:20.120> on<02:48:20.279> mobile

have a beautiful create post on mobile

have a beautiful create post on mobile
as<02:48:21.160> well<02:48:22.160> we<02:48:22.279> can<02:48:22.640> close<02:48:23.640> this<02:48:24.200> the<02:48:24.359> root

as well we can close this the root

as well we can close this the root
layout<02:48:25.040> as<02:48:25.240> well<02:48:25.960> and<02:48:26.120> we<02:48:26.200> can<02:48:26.399> move<02:48:26.920> into

layout as well and we can move into

layout as well and we can move into
create<02:48:29.040> post<02:48:30.040> page<02:48:31.040> as<02:48:31.160> soon<02:48:31.359> as<02:48:31.520> we<02:48:31.680> have<02:48:32.000> this

create post page as soon as we have this

create post page as soon as we have this
we'll<02:48:32.840> be<02:48:33.080> ready<02:48:33.359> to<02:48:33.600> fetch<02:48:34.000> those<02:48:34.279> posts<02:48:34.600> on

we'll be ready to fetch those posts on

we'll be ready to fetch those posts on
the<02:48:34.920> homepage<02:48:35.800> and<02:48:36.040> display<02:48:36.520> them<02:48:37.520> so<02:48:37.760> first

the homepage and display them so first

the homepage and display them so first
of<02:48:38.160> all<02:48:38.840> the<02:48:38.960> layout<02:48:39.920> and<02:48:40.120> then<02:48:40.319> the

of all the layout and then the

of all the layout and then the
functionality<02:48:41.560> of<02:48:41.840> creating<02:48:42.680> and<02:48:42.960> finally

functionality of creating and finally

functionality of creating and finally
reading<02:48:43.920> those<02:48:44.200> posts<02:48:44.800> on<02:48:44.960> the<02:48:45.200> homepage<02:48:46.200> once

reading those posts on the homepage once

reading those posts on the homepage once
again<02:48:47.160> exciting<02:48:47.720> stuff<02:48:48.319> coming<02:48:48.760> really<02:48:49.319> soon

again exciting stuff coming really soon

again exciting stuff coming really soon
to<02:48:50.760> start<02:48:51.160> creating<02:48:51.680> our<02:48:52.000> create<02:48:52.439> post<02:48:52.960> page

to start creating our create post page

to start creating our create post page
we<02:48:53.800> can<02:48:54.000> wrap<02:48:54.479> everything<02:48:55.040> inside<02:48:55.359> of<02:48:55.479> a<02:48:56.120> div

we can wrap everything inside of a div

we can wrap everything inside of a div
that<02:48:57.359> div<02:48:57.720> is<02:48:57.880> going<02:48:58.040> to<02:48:58.319> have<02:48:58.640> a<02:48:58.960> class<02:48:59.359> name

that div is going to have a class name

that div is going to have a class name
equal<02:49:00.520> to<02:49:00.760> flex<02:49:01.520> and<02:49:01.640> then<02:49:01.840> Flex<02:49:02.279> one<02:49:02.680> so<02:49:02.880> it

equal to flex and then Flex one so it

equal to flex and then Flex one so it
expands<02:49:03.800> nicely<02:49:04.800> let's<02:49:05.040> go<02:49:05.240> back<02:49:05.359> to<02:49:05.479> our

expands nicely let's go back to our

expands nicely let's go back to our
current<02:49:06.160> website<02:49:07.160> and<02:49:07.439> let's<02:49:07.720> add<02:49:08.080> another

current website and let's add another

current website and let's add another
div<02:49:09.279> that's<02:49:09.640> inside<02:49:10.120> of<02:49:10.319> this<02:49:10.520> existing<02:49:10.960> div

div that's inside of this existing div

div that's inside of this existing div
that's<02:49:12.160> going<02:49:12.319> to<02:49:12.439> have<02:49:12.600> a<02:49:12.800> class<02:49:13.160> name<02:49:14.000> equal

that's going to have a class name equal

that's going to have a class name equal
to<02:49:14.800> common<02:49:15.399> Das<02:49:15.800> container<02:49:16.640> as<02:49:16.800> we're<02:49:16.920> going

to common Das container as we're going

to common Das container as we're going
to<02:49:17.200> reuse<02:49:17.600> it<02:49:17.920> a<02:49:18.040> couple<02:49:18.279> of<02:49:18.520> times<02:49:19.439> within

to reuse it a couple of times within

to reuse it a couple of times within
this<02:49:20.000> div<02:49:20.439> we<02:49:20.560> can<02:49:20.760> have<02:49:21.040> another<02:49:21.439> div<02:49:22.239> and

this div we can have another div and

this div we can have another div and
this<02:49:22.760> div<02:49:23.120> is<02:49:23.239> going<02:49:23.479> to<02:49:23.920> render<02:49:24.399> an<02:49:24.960> image

this div is going to render an image

this div is going to render an image
this<02:49:26.160> image<02:49:26.680> is<02:49:26.840> going<02:49:27.000> to<02:49:27.200> have<02:49:27.319> a<02:49:27.520> source

this image is going to have a source

this image is going to have a source
equal<02:49:28.359> to<02:49:28.560> for<02:49:28.960> slash<02:49:29.520> assets<02:49:30.520> SL<02:49:31.160> icons<02:49:32.160> SL

equal to for slash assets SL icons SL

equal to for slash assets SL icons SL
a-post

a-post

a-post
SVG<02:49:36.359> it's<02:49:36.520> also<02:49:36.720> going<02:49:36.880> to<02:49:37.040> have<02:49:37.160> a<02:49:37.399> width<02:49:37.800> of

SVG it's also going to have a width of

SVG it's also going to have a width of
36<02:49:39.200> and<02:49:39.399> a<02:49:39.680> height<02:49:40.160> of<02:49:40.800> 36<02:49:41.800> and<02:49:42.000> it's<02:49:42.120> going<02:49:42.279> to

36 and a height of 36 and it's going to

36 and a height of 36 and it's going to
have<02:49:42.520> an<02:49:42.640> Al<02:49:43.000> tag<02:49:43.399> of<02:49:43.840> ad<02:49:44.760> that's<02:49:45.000> because<02:49:45.319> this

have an Al tag of ad that's because this

have an Al tag of ad that's because this
is<02:49:45.600> going<02:49:45.760> to<02:49:45.840> be<02:49:46.000> an<02:49:46.160> icon<02:49:46.479> to<02:49:46.760> add<02:49:47.080> a<02:49:47.720> post

is going to be an icon to add a post

is going to be an icon to add a post
finally<02:49:49.359> we<02:49:49.439> can<02:49:49.640> create<02:49:49.880> an<02:49:50.040> H2<02:49:50.920> right<02:49:51.120> below

finally we can create an H2 right below

finally we can create an H2 right below
it<02:49:51.800> that's<02:49:52.000> going<02:49:52.160> to<02:49:52.279> say<02:49:52.800> create

it that's going to say create

it that's going to say create
post<02:49:55.399> there<02:49:55.560> we<02:49:55.760> go<02:49:56.200> we<02:49:56.319> can<02:49:56.479> style<02:49:56.800> it<02:49:56.960> a<02:49:57.080> bit

post there we go we can style it a bit

post there we go we can style it a bit
by<02:49:57.760> giving<02:49:58.000> it<02:49:58.160> a<02:49:58.359> class<02:49:58.720> name<02:49:59.600> equal<02:49:59.920> to<02:50:00.120> H3

by giving it a class name equal to H3

by giving it a class name equal to H3
dasb<02:50:02.880> on<02:50:03.080> medium<02:50:03.520> devices

dasb on medium devices

dasb on medium devices
H2

dasb it's going to be text left as well

dasb it's going to be text left as well
as<02:50:11.840> w-<02:50:12.600> full<02:50:13.439> we<02:50:13.560> want<02:50:13.680> to<02:50:13.880> style<02:50:14.239> this<02:50:14.359> out<02:50:14.960> div

as w- full we want to style this out div

as w- full we want to style this out div
by<02:50:15.840> giving<02:50:16.080> it<02:50:16.239> a<02:50:16.479> class<02:50:16.800> name<02:50:17.479> equal<02:50:17.760> to<02:50:18.000> Max

by giving it a class name equal to Max

by giving it a class name equal to Max
dw-<02:50:19.640> 5xl<02:50:20.600> so<02:50:20.960> really<02:50:21.439> wide<02:50:22.640> width<02:50:23.640> we<02:50:23.800> also

dw- 5xl so really wide width we also

dw- 5xl so really wide width we also
want<02:50:24.080> to<02:50:24.200> give<02:50:24.319> it<02:50:24.439> a<02:50:24.560> flex

want to give it a flex

want to give it a flex
start<02:50:26.520> so<02:50:26.720> now<02:50:26.880> it<02:50:27.040> appears<02:50:27.359> as<02:50:27.479> a<02:50:27.600> flex

start so now it appears as a flex

start so now it appears as a flex
container<02:50:29.040> a<02:50:29.279> gap<02:50:29.560> of<02:50:29.720> three<02:50:29.960> to<02:50:30.120> create<02:50:30.399> some

container a gap of three to create some

container a gap of three to create some
space<02:50:31.720> a<02:50:31.960> justify<02:50:32.640> Das<02:50:32.960> start<02:50:33.960> and<02:50:34.200> a<02:50:34.600> w-o<02:50:35.600> for

space a justify Das start and a w-o for

space a justify Das start and a w-o for
full<02:50:36.239> width<02:50:37.200> and<02:50:37.319> now<02:50:37.520> we<02:50:37.640> have<02:50:37.800> our<02:50:38.000> create

full width and now we have our create

full width and now we have our create
post<02:50:39.279> similar<02:50:39.880> to<02:50:40.120> what<02:50:40.279> we<02:50:40.479> have<02:50:40.840> here<02:50:41.840> but

post similar to what we have here but

post similar to what we have here but
now<02:50:42.640> as<02:50:42.760> you<02:50:42.880> can<02:50:43.160> notice<02:50:44.160> we<02:50:44.319> start<02:50:44.640> start

now as you can notice we start start

now as you can notice we start start
with<02:50:45.040> something<02:50:45.359> known<02:50:45.640> as<02:50:45.760> a<02:50:45.960> form<02:50:46.600> similar

with something known as a form similar

with something known as a form similar
to<02:50:47.200> what<02:50:47.359> we've<02:50:47.600> done<02:50:48.080> with<02:50:48.239> our<02:50:48.479> sign<02:50:48.760> in<02:50:49.279> and

to what we've done with our sign in and

to what we've done with our sign in and
the<02:50:49.680> sign<02:50:49.920> up<02:50:50.880> a<02:50:51.000> form<02:50:51.399> with<02:50:51.560> a<02:50:51.720> couple<02:50:51.960> of

the sign up a form with a couple of

the sign up a form with a couple of
fields<02:50:52.840> a<02:50:53.080> caption<02:50:54.000> photos<02:50:54.880> location<02:50:55.399> and

fields a caption photos location and

fields a caption photos location and
tags<02:50:56.920> so<02:50:57.160> in<02:50:57.359> this<02:50:57.600> case<02:50:58.200> we<02:50:58.319> want<02:50:58.479> to<02:50:58.680> create

tags so in this case we want to create

tags so in this case we want to create
this<02:50:59.439> as<02:50:59.560> a<02:50:59.800> new<02:51:00.239> component<02:51:01.239> it's<02:51:01.399> going<02:51:01.560> to<02:51:01.720> be

this as a new component it's going to be

this as a new component it's going to be
called<02:51:02.319> a<02:51:02.640> post<02:51:03.120> form<02:51:04.120> so<02:51:04.640> let's<02:51:04.840> create<02:51:05.080> a<02:51:05.239> new

called a post form so let's create a new

called a post form so let's create a new
component<02:51:06.399> within<02:51:06.720> the<02:51:06.920> components<02:51:07.439> folder

component within the components folder

component within the components folder
and<02:51:08.279> then<02:51:08.479> not<02:51:08.840> within<02:51:09.120> shared<02:51:09.840> but<02:51:10.080> rather

and then not within shared but rather

and then not within shared but rather
within<02:51:10.560> a<02:51:10.720> new<02:51:10.960> folder<02:51:11.439> called<02:51:12.000> forms<02:51:13.000> finally

within a new folder called forms finally

within a new folder called forms finally
within<02:51:13.800> the<02:51:13.920> form<02:51:14.319> we<02:51:14.640> can<02:51:14.760> create<02:51:15.200> a<02:51:15.560> post

within the form we can create a post

within the form we can create a post
form.<02:51:17.840> TSX<02:51:18.840> inside<02:51:19.200> of<02:51:19.439> which<02:51:19.640> we<02:51:19.760> can<02:51:19.920> run

form. TSX inside of which we can run

form. TSX inside of which we can run
RFC<02:51:22.359> now<02:51:23.000> back<02:51:23.200> in<02:51:23.319> our<02:51:23.560> create<02:51:23.960> post<02:51:24.760> we<02:51:24.880> can

RFC now back in our create post we can

RFC now back in our create post we can
simply<02:51:25.399> render<02:51:26.120> the<02:51:26.359> post<02:51:26.800> form<02:51:27.680> component

simply render the post form component

simply render the post form component
and<02:51:28.920> import<02:51:29.279> it<02:51:29.600> from<02:51:29.880> components<02:51:30.680> form<02:51:31.439> post

and import it from components form post

and import it from components form post
form<02:51:32.960> there<02:51:33.120> we<02:51:33.319> go<02:51:34.239> this<02:51:34.439> now<02:51:34.640> allows<02:51:34.960> us<02:51:35.120> to

form there we go this now allows us to

form there we go this now allows us to
dive<02:51:35.760> into<02:51:36.080> this<02:51:36.239> form<02:51:36.840> which<02:51:36.960> we're<02:51:37.080> going<02:51:37.200> to

dive into this form which we're going to

dive into this form which we're going to
create<02:51:37.800> as<02:51:37.920> a<02:51:38.080> reusable<02:51:38.840> component<02:51:39.600> so<02:51:39.760> we<02:51:39.880> can

create as a reusable component so we can

create as a reusable component so we can
reuse<02:51:40.520> it<02:51:40.760> later<02:51:41.040> on<02:51:41.560> in<02:51:41.800> many<02:51:42.080> different

reuse it later on in many different

reuse it later on in many different
places<02:51:43.279> so<02:51:43.680> how<02:51:43.840> is<02:51:43.920> our<02:51:44.080> form<02:51:44.319> going<02:51:44.680> to<02:51:44.840> look

places so how is our form going to look

places so how is our form going to look
like<02:51:46.000> well<02:51:46.200> it's<02:51:46.359> going<02:51:46.520> to<02:51:46.680> be<02:51:46.920> a<02:51:47.200> typical

like well it's going to be a typical

like well it's going to be a typical
shaten<02:51:48.920> form<02:51:49.600> so<02:51:49.800> immediately<02:51:50.359> we<02:51:50.439> can<02:51:50.680> go

shaten form so immediately we can go

shaten form so immediately we can go
back<02:51:51.239> here<02:51:51.760> and<02:51:51.920> search<02:51:52.239> for<02:51:52.399> our<02:51:52.640> form<02:51:53.279> and

back here and search for our form and

back here and search for our form and
then<02:51:53.680> we<02:51:53.800> can<02:51:53.960> get<02:51:54.120> our<02:51:54.359> example<02:51:55.359> we<02:51:55.520> know<02:51:55.760> how

then we can get our example we know how

then we can get our example we know how
form<02:51:56.279> Fields<02:51:56.760> look<02:51:57.000> like<02:51:57.600> we<02:51:57.760> know<02:51:57.960> that<02:51:58.120> we

form Fields look like we know that we

form Fields look like we know that we
need<02:51:58.359> to<02:51:58.600> have<02:51:58.920> a<02:51:59.120> form<02:51:59.520> schema<02:52:00.080> as<02:52:00.279> well<02:52:00.880> and

need to have a form schema as well and

need to have a form schema as well and
then<02:52:01.200> we<02:52:01.359> need<02:52:01.479> to<02:52:01.680> define<02:52:02.040> a<02:52:02.279> form<02:52:03.279> Define<02:52:03.640> the

then we need to define a form Define the

then we need to define a form Define the
onsubmit<02:52:04.760> and<02:52:04.960> finally<02:52:05.399> build<02:52:05.720> out<02:52:05.960> our<02:52:06.160> form

onsubmit and finally build out our form

onsubmit and finally build out our form
so<02:52:07.279> let's<02:52:07.520> do<02:52:07.720> so<02:52:08.239> step<02:52:08.720> by<02:52:09.080> step<02:52:09.840> first<02:52:10.239> we<02:52:10.359> can

so let's do so step by step first we can

so let's do so step by step first we can
import<02:52:11.439> everything<02:52:11.800> that<02:52:11.920> we<02:52:12.040> need<02:52:12.279> from

import everything that we need from

import everything that we need from
here<02:52:14.680> and<02:52:15.000> paste<02:52:15.319> it<02:52:15.520> right<02:52:15.760> here<02:52:16.120> at<02:52:16.279> the

here and paste it right here at the

here and paste it right here at the
top<02:52:19.319> then<02:52:19.600> we're<02:52:19.760> going<02:52:19.960> to<02:52:20.399> define<02:52:20.880> the<02:52:21.040> form

top then we're going to define the form

top then we're going to define the form
as<02:52:22.120> well<02:52:22.319> as<02:52:22.840> Define<02:52:23.279> the<02:52:23.760> onsubmit<02:52:24.760> that's

as well as Define the onsubmit that's

as well as Define the onsubmit that's
going<02:52:25.120> to<02:52:25.279> be<02:52:25.560> within<02:52:26.080> the<02:52:26.279> post<02:52:26.640> form<02:52:27.479> then<02:52:27.720> we

going to be within the post form then we

going to be within the post form then we
need<02:52:28.000> to<02:52:28.239> import<02:52:28.760> everything<02:52:29.120> we<02:52:29.239> need<02:52:29.600> to

need to import everything we need to

need to import everything we need to
make<02:52:29.920> her<02:52:30.120> form

make her form

make her form
happen<02:52:32.040> so<02:52:32.239> we<02:52:32.319> can<02:52:32.520> put<02:52:32.800> that<02:52:33.080> right<02:52:33.680> here<02:52:34.680> and

happen so we can put that right here and

happen so we can put that right here and
finally<02:52:35.479> we<02:52:35.600> can<02:52:35.840> Define<02:52:36.359> the<02:52:36.520> form<02:52:37.160> within

finally we can Define the form within

finally we can Define the form within
our

our

our
application<02:52:39.239> right

application right

application right
here<02:52:42.560> now<02:52:42.880> if<02:52:43.000> we<02:52:43.200> save<02:52:43.560> this<02:52:43.960> and<02:52:44.120> go<02:52:44.319> back

here now if we save this and go back

here now if we save this and go back
back<02:52:45.080> you<02:52:45.200> can<02:52:45.319> see<02:52:45.640> simple<02:52:46.040> username<02:52:46.600> form

back you can see simple username form

back you can see simple username form
but<02:52:47.840> instead<02:52:48.120> of<02:52:48.239> a<02:52:48.399> simple<02:52:48.720> username<02:52:49.680> let's

but instead of a simple username let's

but instead of a simple username let's
make<02:52:50.080> it<02:52:50.200> a<02:52:50.319> bit<02:52:50.520> more<02:52:51.080> interesting<02:52:52.080> our<02:52:52.399> form

make it a bit more interesting our form

make it a bit more interesting our form
is<02:52:53.120> going<02:52:53.319> to<02:52:53.479> have<02:52:53.640> a<02:52:53.880> class<02:52:54.279> name<02:52:54.960> not<02:52:55.200> of

is going to have a class name not of

is going to have a class name not of
space<02:52:56.160> Y8<02:52:57.160> but<02:52:57.319> of

space Y8 but of

space Y8 but of
flex

flex

flex
flex-all<02:53:01.560> gap<02:53:01.840> of<02:53:02.040> N

flex-all gap of N

flex-all gap of N
w-o<02:53:04.680> and<02:53:04.840> then<02:53:05.439> maxw<02:53:06.920> d5xl<02:53:07.920> within<02:53:08.200> it<02:53:08.560> we<02:53:08.680> have

w-o and then maxw d5xl within it we have

w-o and then maxw d5xl within it we have
a<02:53:08.960> form<02:53:09.319> field<02:53:09.840> of

a form field of

a form field of
caption<02:53:12.000> it's<02:53:12.200> going<02:53:12.359> to<02:53:12.479> be<02:53:12.600> a<02:53:12.720> form<02:53:13.120> item

caption it's going to be a form item

caption it's going to be a form item
with<02:53:13.960> a<02:53:14.080> form<02:53:14.399> form<02:53:14.640> label<02:53:15.439> that's<02:53:15.640> going<02:53:15.800> to

with a form form label that's going to

with a form form label that's going to
have<02:53:16.120> a<02:53:16.359> class

have a class

have a class
name<02:53:18.720> equal<02:53:19.040> to<02:53:19.760> Shad<02:53:20.399> Das<02:53:20.760> formore

name equal to Shad Das formore

name equal to Shad Das formore
label<02:53:23.319> and<02:53:23.600> it's<02:53:23.800> going<02:53:23.960> to<02:53:24.120> say

label and it's going to say

label and it's going to say
caption<02:53:27.479> instead<02:53:27.760> of<02:53:27.880> an<02:53:28.080> input<02:53:28.880> this<02:53:29.000> is

caption instead of an input this is

caption instead of an input this is
going<02:53:29.319> to<02:53:29.479> be<02:53:29.720> a<02:53:30.000> text<02:53:30.880> area<02:53:31.880> so<02:53:32.399> this<02:53:32.520> is

going to be a text area so this is

going to be a text area so this is
another<02:53:33.000> component<02:53:33.439> that<02:53:33.600> we<02:53:33.760> have<02:53:33.920> to

another component that we have to

another component that we have to
install<02:53:35.319> so<02:53:35.600> let's<02:53:35.880> copy<02:53:36.200> it<02:53:37.120> let's<02:53:37.319> go<02:53:37.479> to<02:53:37.600> our

install so let's copy it let's go to our

install so let's copy it let's go to our
second<02:53:38.359> terminal<02:53:39.359> and<02:53:39.600> let's<02:53:39.840> say<02:53:40.279> MPX<02:53:41.080> shaten

second terminal and let's say MPX shaten

second terminal and let's say MPX shaten
UI<02:53:42.680> latest<02:53:43.600> add<02:53:44.439> text<02:53:44.880> area<02:53:45.479> with<02:53:45.640> a<02:53:45.760> lowercase

UI latest add text area with a lowercase

UI latest add text area with a lowercase
T<02:53:47.479> and<02:53:47.800> press<02:53:48.279> enter<02:53:49.279> once<02:53:49.479> it<02:53:49.600> is<02:53:49.800> installed

T and press enter once it is installed

T and press enter once it is installed
we<02:53:50.680> can<02:53:50.880> simply<02:53:51.239> import<02:53:51.600> it<02:53:52.000> from<02:53:52.520> do/<02:53:53.520> UI<02:53:54.239> text

we can simply import it from do/ UI text

we can simply import it from do/ UI text
area<02:53:55.319> we<02:53:55.479> won't<02:53:55.720> be<02:53:55.880> needing<02:53:56.160> a<02:53:56.319> form

area we won't be needing a form

area we won't be needing a form
description<02:53:57.600> but<02:53:57.840> to<02:53:58.000> our<02:53:58.160> form<02:53:58.520> message<02:53:59.160> we

description but to our form message we

description but to our form message we
can<02:53:59.520> provide<02:54:00.000> a<02:54:00.319> class<02:54:00.840> name<02:54:01.840> equal<02:54:02.160> to<02:54:02.680> Shad

can provide a class name equal to Shad

can provide a class name equal to Shad
Das

Das

Das
formore<02:54:05.560> message<02:54:06.560> and<02:54:06.760> we<02:54:06.840> can<02:54:07.080> also<02:54:07.439> style

formore message and we can also style

formore message and we can also style
our<02:54:08.040> text<02:54:08.720> area<02:54:09.720> by<02:54:09.960> giving<02:54:10.200> it<02:54:10.359> a<02:54:10.560> class

our text area by giving it a class

our text area by giving it a class
name<02:54:12.840> equal<02:54:13.160> to<02:54:13.960> sh<02:54:14.359> p-<02:54:15.160> text<02:54:15.600> area<02:54:16.600> and

name equal to sh p- text area and

name equal to sh p- text area and
custom-

custom-

custom-
scrollbar<02:54:20.279> now<02:54:20.560> this<02:54:20.680> is<02:54:20.840> more<02:54:21.120> like<02:54:21.359> it<02:54:22.040> we

scrollbar now this is more like it we

scrollbar now this is more like it we
can<02:54:22.359> now<02:54:22.600> duplicate<02:54:23.080> this<02:54:23.239> form<02:54:23.600> field<02:54:24.439> one

can now duplicate this form field one

can now duplicate this form field one
more<02:54:24.920> time

more time

more time
below<02:54:27.399> this<02:54:27.640> time<02:54:27.920> it's<02:54:28.080> going<02:54:28.279> to<02:54:28.399> say

below this time it's going to say

below this time it's going to say
file<02:54:31.080> it<02:54:31.200> can<02:54:31.399> say<02:54:31.760> add<02:54:32.120> photos<02:54:33.000> right<02:54:33.279> here<02:54:33.800> as

file it can say add photos right here as

file it can say add photos right here as
the<02:54:34.080> form<02:54:34.720> label<02:54:35.720> but<02:54:35.960> this<02:54:36.200> time<02:54:36.520> it's<02:54:36.680> not

the form label but this time it's not

the form label but this time it's not
going<02:54:37.080> to<02:54:37.200> be<02:54:37.359> a<02:54:37.520> text<02:54:37.840> area<02:54:38.720> it's<02:54:38.920> going<02:54:39.080> to<02:54:39.239> be

going to be a text area it's going to be

going to be a text area it's going to be
our<02:54:39.720> own<02:54:40.120> component<02:54:40.640> that<02:54:40.800> we'll<02:54:41.080> create

our own component that we'll create

our own component that we'll create
called<02:54:42.760> file<02:54:43.359> uploader<02:54:44.479> so<02:54:44.680> let's<02:54:44.880> simply

called file uploader so let's simply

called file uploader so let's simply
call<02:54:45.439> it<02:54:45.680> like<02:54:45.960> this<02:54:46.680> and<02:54:46.840> let's<02:54:47.120> define<02:54:47.479> it

call it like this and let's define it

call it like this and let's define it
within<02:54:48.319> our<02:54:48.640> components<02:54:49.640> and<02:54:49.800> then<02:54:49.960> shared

within our components and then shared

within our components and then shared
called<02:54:51.600> file<02:54:52.680> uploader<02:54:54.000> dtsx<02:54:55.000> and<02:54:55.160> we<02:54:55.239> can<02:54:55.399> run

called file uploader dtsx and we can run

called file uploader dtsx and we can run
RFC<02:54:58.040> back<02:54:58.239> in<02:54:58.359> the<02:54:58.560> post<02:54:58.880> form<02:54:59.560> we<02:54:59.680> can<02:54:59.840> import

RFC back in the post form we can import

RFC back in the post form we can import
it<02:55:01.120> right<02:55:01.399> here<02:55:02.200> save<02:55:02.479> it<02:55:03.120> and<02:55:03.239> we<02:55:03.359> can<02:55:03.479> see

it right here save it and we can see

it right here save it and we can see
file<02:55:04.080> uploader<02:55:05.080> soon<02:55:05.520> we're<02:55:05.680> going<02:55:05.800> to<02:55:06.000> make

file uploader soon we're going to make

file uploader soon we're going to make
that<02:55:06.520> happen<02:55:06.960> as<02:55:07.160> well<02:55:07.880> but<02:55:08.040> for<02:55:08.359> now<02:55:08.840> let's

that happen as well but for now let's

that happen as well but for now let's
duplicate<02:55:09.560> our<02:55:09.720> form<02:55:10.040> field<02:55:10.399> one<02:55:10.600> more<02:55:10.840> time

duplicate our form field one more time

duplicate our form field one more time
below<02:55:13.120> this<02:55:13.359> time<02:55:13.760> it's<02:55:13.920> going<02:55:14.080> to<02:55:14.279> to<02:55:14.399> say

below this time it's going to to say

below this time it's going to to say
location<02:55:16.520> and<02:55:16.680> it's<02:55:16.840> going<02:55:17.000> to<02:55:17.160> render<02:55:17.560> a<02:55:17.760> form

location and it's going to render a form

location and it's going to render a form
label<02:55:19.120> that's<02:55:19.319> going<02:55:19.479> to<02:55:19.680> say<02:55:20.160> add<02:55:21.319> location

label that's going to say add location

label that's going to say add location
instead<02:55:22.560> of<02:55:22.680> a<02:55:22.840> file<02:55:23.160> uploader<02:55:24.000> it's<02:55:24.200> going<02:55:24.319> to

instead of a file uploader it's going to

instead of a file uploader it's going to
render<02:55:24.960> a<02:55:25.160> regular<02:55:25.760> input<02:55:26.760> that's<02:55:26.960> going<02:55:27.120> to

render a regular input that's going to

render a regular input that's going to
have<02:55:27.520> a<02:55:27.760> type<02:55:28.160> is<02:55:28.319> equal<02:55:28.560> to<02:55:29.000> text<02:55:30.000> and<02:55:30.279> a<02:55:30.600> class

have a type is equal to text and a class

have a type is equal to text and a class
name<02:55:32.080> equal<02:55:32.399> to<02:55:33.040> Shad

name equal to Shad

name equal to Shad
input<02:55:36.319> there<02:55:36.479> we<02:55:36.680> go<02:55:37.279> if<02:55:37.399> we<02:55:37.560> save<02:55:37.840> it<02:55:38.080> we<02:55:38.279> have

input there we go if we save it we have

input there we go if we save it we have
a<02:55:38.560> location<02:55:39.080> input<02:55:40.080> and<02:55:40.399> finally<02:55:40.960> we<02:55:41.080> can

a location input and finally we can

a location input and finally we can
duplicate<02:55:41.800> this<02:55:41.960> form<02:55:42.319> field<02:55:42.840> one<02:55:43.000> more<02:55:43.279> time

duplicate this form field one more time

duplicate this form field one more time
below<02:55:44.279> for<02:55:44.520> the<02:55:44.720> last<02:55:45.040> time<02:55:45.319> we're<02:55:45.479> going<02:55:45.560> to

below for the last time we're going to

below for the last time we're going to
say<02:55:46.279> tags<02:55:47.279> we<02:55:47.359> can<02:55:47.560> say<02:55:47.920> add<02:55:48.479> tags<02:55:49.399> and<02:55:49.520> then<02:55:49.680> in

say tags we can say add tags and then in

say tags we can say add tags and then in
parentheses

parentheses

parentheses
separated<02:55:53.399> by<02:55:54.279> Comma<02:55:55.279> just<02:55:55.760> like<02:55:56.160> this<02:55:56.800> so

separated by Comma just like this so

separated by Comma just like this so
people<02:55:57.319> know<02:55:57.560> what<02:55:57.720> they<02:55:57.840> have<02:55:58.000> to<02:55:58.160> do<02:55:58.880> we<02:55:59.000> can

people know what they have to do we can

people know what they have to do we can
end<02:55:59.680> parentheses<02:56:00.680> and<02:56:00.800> then<02:56:00.960> we<02:56:01.040> can<02:56:01.200> also

end parentheses and then we can also

end parentheses and then we can also
render<02:56:01.800> an<02:56:02.080> input<02:56:03.080> it's<02:56:03.279> also<02:56:03.479> going<02:56:03.640> to<02:56:03.760> be<02:56:03.880> of

render an input it's also going to be of

render an input it's also going to be of
a<02:56:04.160> type<02:56:04.479> text<02:56:05.359> but<02:56:05.600> this<02:56:05.800> time<02:56:06.439> we<02:56:06.560> can<02:56:06.720> give<02:56:06.840> it

a type text but this time we can give it

a type text but this time we can give it
a

a

a
placeholder<02:56:09.040> something<02:56:09.479> like

placeholder something like

placeholder something like
art

art

art
expression<02:56:13.040> and<02:56:13.239> learn<02:56:14.239> whatever<02:56:14.760> right<02:56:15.200> some

expression and learn whatever right some

expression and learn whatever right some
tags<02:56:15.760> that<02:56:15.920> we<02:56:16.000> can<02:56:16.680> add<02:56:17.680> there<02:56:17.840> we<02:56:18.000> go<02:56:18.479> if

tags that we can add there we go if

tags that we can add there we go if
we're<02:56:18.760> doing<02:56:18.960> a<02:56:19.120> coding<02:56:19.479> application<02:56:20.200> it<02:56:20.319> can

we're doing a coding application it can

we're doing a coding application it can
be

be

be
JS<02:56:22.600> react<02:56:23.600> and

JS react and

JS react and
nextjs<02:56:25.800> there<02:56:25.920> we<02:56:26.120> go<02:56:26.920> so<02:56:27.080> if<02:56:27.200> we<02:56:27.359> save<02:56:27.600> it<02:56:28.279> this

nextjs there we go so if we save it this

nextjs there we go so if we save it this
looks<02:56:29.160> great<02:56:30.120> and<02:56:30.319> finally<02:56:30.840> we<02:56:31.000> have<02:56:31.120> to<02:56:31.399> have

looks great and finally we have to have

looks great and finally we have to have
a<02:56:31.960> button<02:56:32.960> so<02:56:33.359> below<02:56:34.120> all<02:56:34.279> of<02:56:34.439> these<02:56:34.640> form

a button so below all of these form

a button so below all of these form
fields<02:56:35.640> we<02:56:35.760> can<02:56:35.960> create<02:56:36.279> a<02:56:36.479> new<02:56:36.760> div<02:56:37.560> inside<02:56:37.880> of

fields we can create a new div inside of

fields we can create a new div inside of
that<02:56:38.319> div<02:56:38.760> we<02:56:38.880> can<02:56:39.120> have<02:56:39.399> our<02:56:39.880> button<02:56:40.880> and

that div we can have our button and

that div we can have our button and
below<02:56:41.399> it<02:56:41.560> we're<02:56:41.720> going<02:56:41.800> to<02:56:41.920> have<02:56:42.120> another

below it we're going to have another

below it we're going to have another
button<02:56:43.520> the<02:56:43.680> first<02:56:44.239> button<02:56:44.880> is<02:56:45.040> going<02:56:45.200> to<02:56:45.359> be

button the first button is going to be

button the first button is going to be
not<02:56:45.880> of<02:56:46.040> a<02:56:46.200> type<02:56:46.439> submit<02:56:47.279> but<02:56:47.479> of<02:56:47.640> a<02:56:47.840> type

not of a type submit but of a type

not of a type submit but of a type
button<02:56:49.279> it's<02:56:49.439> going<02:56:49.600> to<02:56:49.760> have<02:56:49.880> a<02:56:50.120> class<02:56:50.439> name

button it's going to have a class name

button it's going to have a class name
equal<02:56:51.200> to<02:56:51.479> Shad<02:56:52.279> button<02:56:52.960> unor

equal to Shad button unor

equal to Shad button unor
dark4<02:56:56.399> and<02:56:56.560> it's<02:56:56.720> going<02:56:56.920> to<02:56:57.080> say<02:56:57.399> not<02:56:57.680> submit

dark4 and it's going to say not submit

dark4 and it's going to say not submit
but

but

but
cancel<02:57:00.319> okay<02:57:00.520> so<02:57:00.680> we<02:57:00.800> need<02:57:00.920> to<02:57:01.040> be<02:57:01.120> able<02:57:01.319> to

cancel okay so we need to be able to

cancel okay so we need to be able to
cancel<02:57:01.960> the<02:57:02.120> submit<02:57:02.640> of<02:57:02.800> the<02:57:03.200> form<02:57:04.200> let's<02:57:04.439> put

cancel the submit of the form let's put

cancel the submit of the form let's put
this<02:57:04.720> in<02:57:04.880> multiple<02:57:05.760> lines<02:57:06.760> there<02:57:06.920> we

this in multiple lines there we

this in multiple lines there we
go<02:57:09.600> so<02:57:09.840> this<02:57:09.960> is<02:57:10.160> one<02:57:10.319> of<02:57:10.479> our<02:57:10.800> buttons<02:57:11.800> and

go so this is one of our buttons and

go so this is one of our buttons and
then<02:57:12.080> the<02:57:12.239> second<02:57:12.520> one<02:57:12.840> will<02:57:13.040> be<02:57:13.239> submit<02:57:14.160> it's

then the second one will be submit it's

then the second one will be submit it's
going<02:57:14.520> to<02:57:14.720> say<02:57:15.160> submit<02:57:16.160> it's<02:57:16.319> going<02:57:16.479> to<02:57:16.640> have<02:57:16.800> a

going to say submit it's going to have a

going to say submit it's going to have a
class<02:57:17.399> name<02:57:18.000> equal<02:57:18.319> to<02:57:18.560> Shad<02:57:19.399> button<02:57:20.600> primary

class name equal to Shad button primary

class name equal to Shad button primary
and<02:57:22.040> wh<02:57:22.359> space<02:57:23.040> no<02:57:23.720> wrap<02:57:24.720> there<02:57:24.880> we<02:57:25.080> go<02:57:25.760> now<02:57:25.960> we

and wh space no wrap there we go now we

and wh space no wrap there we go now we
can<02:57:26.239> style<02:57:26.600> this<02:57:26.800> div<02:57:27.120> that's<02:57:27.319> wrapping<02:57:27.760> these

can style this div that's wrapping these

can style this div that's wrapping these
two<02:57:28.160> buttons<02:57:28.800> by<02:57:28.960> giving<02:57:29.200> it<02:57:29.399> a<02:57:29.640> class<02:57:30.120> name

two buttons by giving it a class name

two buttons by giving it a class name
equal<02:57:31.080> to<02:57:31.479> flex<02:57:32.479> Gap<02:57:33.279> D4<02:57:34.279> items<02:57:34.800> D<02:57:35.040> Center<02:57:35.880> and

equal to flex Gap D4 items D Center and

equal to flex Gap D4 items D Center and
justify<02:57:36.840> Das<02:57:37.399> end<02:57:38.399> there<02:57:38.560> we<02:57:38.760> go<02:57:39.399> now<02:57:39.640> they're

justify Das end there we go now they're

justify Das end there we go now they're
nicely<02:57:40.239> aligned<02:57:40.720> at<02:57:40.840> the<02:57:41.160> end<02:57:42.160> now<02:57:42.439> the

nicely aligned at the end now the

nicely aligned at the end now the
majority<02:57:42.960> of<02:57:43.080> the<02:57:43.200> UI<02:57:43.560> is<02:57:43.720> done

majority of the UI is done

majority of the UI is done
but<02:57:45.040> let's<02:57:45.239> go<02:57:45.359> ahead<02:57:45.520> and<02:57:45.680> focus<02:57:45.960> on<02:57:46.120> the<02:57:46.239> file

but let's go ahead and focus on the file

but let's go ahead and focus on the file
uploader<02:57:47.520> that's<02:57:47.800> one<02:57:48.080> component<02:57:48.600> that's

uploader that's one component that's

uploader that's one component that's
going<02:57:48.960> to<02:57:49.080> be<02:57:49.279> one<02:57:49.399> of<02:57:49.560> the<02:57:49.840> most<02:57:50.160> important

going to be one of the most important

going to be one of the most important
components<02:57:51.319> in<02:57:51.439> our<02:57:51.640> entire<02:57:52.040> application<02:57:52.880> we

components in our entire application we

components in our entire application we
are<02:57:53.200> building<02:57:53.600> a<02:57:53.840> snapgram<02:57:54.800> and<02:57:54.960> you<02:57:55.080> have<02:57:55.200> to

are building a snapgram and you have to

are building a snapgram and you have to
snap<02:57:55.840> some<02:57:56.120> photos<02:57:56.760> right<02:57:57.359> and<02:57:57.520> then<02:57:57.720> upload

snap some photos right and then upload

snap some photos right and then upload
them<02:57:58.840> so<02:57:59.080> let's<02:57:59.319> go<02:57:59.439> ahead<02:57:59.720> and<02:58:00.000> Implement<02:58:00.600> our

them so let's go ahead and Implement our

them so let's go ahead and Implement our
file<02:58:01.200> uploader<02:58:01.800> component<02:58:02.760> to<02:58:03.040> implement<02:58:03.520> it

file uploader component to implement it

file uploader component to implement it
we'll<02:58:04.200> use<02:58:04.399> a<02:58:04.720> package<02:58:05.200> called<02:58:05.600> react<02:58:06.239> drop

we'll use a package called react drop

we'll use a package called react drop
zone<02:58:07.160> that<02:58:07.319> allows<02:58:07.600> you<02:58:07.720> to<02:58:07.960> drop<02:58:08.359> some<02:58:08.560> things

zone that allows you to drop some things

zone that allows you to drop some things
in<02:58:09.800> so<02:58:10.000> let's<02:58:10.239> install<02:58:10.600> it<02:58:10.960> by<02:58:11.080> running<02:58:11.479> mpm

in so let's install it by running mpm

in so let's install it by running mpm
install<02:58:12.920> react<02:58:13.640> d<02:58:14.040> drop

install react d drop

install react d drop
zone<02:58:16.920> and<02:58:17.239> while<02:58:17.439> it's<02:58:17.600> getting<02:58:17.880> installed

zone and while it's getting installed

zone and while it's getting installed
let's<02:58:18.920> browse<02:58:19.279> his<02:58:19.800> docs<02:58:20.800> if<02:58:20.960> you<02:58:21.080> Google

let's browse his docs if you Google

let's browse his docs if you Google
react<02:58:21.760> Drop<02:58:22.080> Zone<02:58:22.600> this<02:58:22.720> is<02:58:22.840> the<02:58:23.000> first<02:58:23.239> thing

react Drop Zone this is the first thing

react Drop Zone this is the first thing
that's<02:58:23.560> going<02:58:23.720> to<02:58:23.840> show<02:58:24.120> up<02:58:24.680> and<02:58:24.920> here<02:58:25.120> you<02:58:25.200> can

that's going to show up and here you can

that's going to show up and here you can
see<02:58:25.600> its

see its

see its
usage<02:58:27.720> first<02:58:28.000> we<02:58:28.120> need<02:58:28.279> to<02:58:28.479> import<02:58:29.000> react<02:58:29.439> and

usage first we need to import react and

usage first we need to import react and
use<02:58:29.960> call<02:58:30.239> back<02:58:30.439> from<02:58:30.720> react<02:58:31.560> as<02:58:31.720> well<02:58:31.880> as<02:58:32.040> use

use call back from react as well as use

use call back from react as well as use
drop<02:58:32.760> zone<02:58:33.359> so<02:58:33.600> let's<02:58:33.800> do<02:58:34.080> just<02:58:34.520> that<02:58:35.520> never

drop zone so let's do just that never

drop zone so let's do just that never
reinvent<02:58:36.520> the<02:58:36.640> wheel<02:58:37.479> always<02:58:37.960> just<02:58:38.080> refer<02:58:38.399> to

reinvent the wheel always just refer to

reinvent the wheel always just refer to
documentation<02:58:39.560> when<02:58:39.720> you<02:58:40.200> can<02:58:41.200> then<02:58:41.479> we<02:58:41.600> need

documentation when you can then we need

documentation when you can then we need
to<02:58:41.920> get<02:58:42.040> a<02:58:42.200> function<02:58:42.640> called<02:58:42.960> on<02:58:43.359> drop<02:58:44.200> that<02:58:44.359> we

to get a function called on drop that we

to get a function called on drop that we
can<02:58:44.640> put<02:58:45.040> right

can put right

can put right
here<02:58:47.560> there<02:58:47.760> we<02:58:48.000> go<02:58:48.920> and<02:58:49.120> then<02:58:49.840> our<02:58:50.080> outer<02:58:50.479> div

here there we go and then our outer div

here there we go and then our outer div
needs<02:58:51.520> to<02:58:51.720> include<02:58:52.359> all<02:58:52.600> the<02:58:52.800> get<02:58:53.040> root<02:58:53.479> props

needs to include all the get root props

needs to include all the get root props
and<02:58:54.439> the<02:58:54.600> input<02:58:55.040> needs<02:58:55.279> to<02:58:55.439> include<02:58:55.920> the<02:58:56.080> get

and the input needs to include the get

and the input needs to include the get
input<02:58:56.720> props<02:58:57.680> so<02:58:57.880> let's<02:58:58.200> copy<02:58:58.640> this<02:58:58.840> entire

input props so let's copy this entire

input props so let's copy this entire
div<02:58:59.600> right

div right

div right
here<02:59:01.520> there<02:59:01.680> we<02:59:02.000> go<02:59:03.000> there<02:59:03.120> are<02:59:03.279> multiple<02:59:03.720> ways

here there we go there are multiple ways

here there we go there are multiple ways
of<02:59:04.080> doing<02:59:04.359> it<02:59:04.760> as<02:59:04.880> you<02:59:05.000> can<02:59:05.160> see<02:59:06.000> but<02:59:06.160> for<02:59:06.359> now

of doing it as you can see but for now

of doing it as you can see but for now
we're<02:59:06.800> going<02:59:06.880> to<02:59:07.040> be<02:59:07.239> happy<02:59:07.560> with<02:59:07.720> what<02:59:08.000> we

we're going to be happy with what we

we're going to be happy with what we
have<02:59:08.840> at<02:59:08.960> least<02:59:09.160> I<02:59:09.560> hope<02:59:10.560> let's<02:59:10.800> save<02:59:11.040> it<02:59:11.680> and

have at least I hope let's save it and

have at least I hope let's save it and
it<02:59:12.000> says<02:59:12.319> drag<02:59:12.600> and<02:59:12.800> drop<02:59:13.080> some<02:59:13.359> files<02:59:13.680> but<02:59:13.960> we

it says drag and drop some files but we

it says drag and drop some files but we
can<02:59:14.359> really<02:59:14.560> see<02:59:14.960> where<02:59:15.120> to<02:59:15.359> drag<02:59:15.600> and<02:59:15.800> drop

can really see where to drag and drop

can really see where to drag and drop
them<02:59:16.800> so<02:59:17.120> let's<02:59:17.319> style<02:59:17.640> this<02:59:17.760> a<02:59:17.880> bit<02:59:18.080> further

them so let's style this a bit further

them so let's style this a bit further
let's<02:59:19.239> give<02:59:19.439> this<02:59:19.640> div<02:59:20.040> a<02:59:20.359> class

let's give this div a class

let's give this div a class
name<02:59:22.680> equal<02:59:23.000> to<02:59:23.960> flex<02:59:24.960> Flex<02:59:25.479> D<02:59:25.760> Center

name equal to flex Flex D Center

name equal to flex Flex D Center
flex-all<02:59:28.520> BG<02:59:29.120> D<02:59:29.560> dark<02:59:30.160> D3<02:59:31.160> and<02:59:31.479> rounded<02:59:32.120> d<02:59:32.439> excl

flex-all BG D dark D3 and rounded d excl

flex-all BG D dark D3 and rounded d excl
as<02:59:33.439> well<02:59:33.600> as<02:59:33.840> cursor<02:59:34.439> Das<02:59:34.840> pointer<02:59:35.399> so<02:59:35.600> we<02:59:35.720> know

as well as cursor Das pointer so we know

as well as cursor Das pointer so we know
it's<02:59:36.239> clickable<02:59:37.239> then<02:59:37.680> let's<02:59:38.000> make<02:59:38.279> this

it's clickable then let's make this

it's clickable then let's make this
input<02:59:39.120> a<02:59:39.479> class<02:59:40.040> name<02:59:41.040> equal<02:59:41.359> to<02:59:42.080> cursor<02:59:42.600> Das

input a class name equal to cursor Das

input a class name equal to cursor Das
pointer

pointer

pointer
so<02:59:44.840> we<02:59:44.960> know<02:59:45.200> we<02:59:45.319> can<02:59:45.520> click<02:59:45.760> it<02:59:46.239> as<02:59:46.439> well<02:59:47.160> and

so we know we can click it as well and

so we know we can click it as well and
then<02:59:47.800> let's<02:59:48.040> create<02:59:48.319> a<02:59:48.520> new<02:59:48.800> use<02:59:49.200> state<02:59:49.840> for<02:59:50.239> a

then let's create a new use state for a

then let's create a new use state for a
file<02:59:50.920> URL<02:59:51.920> so<02:59:52.160> right<02:59:52.279> here<02:59:52.439> at<02:59:52.600> the<02:59:52.800> top<02:59:53.160> we<02:59:53.279> can

file URL so right here at the top we can

file URL so right here at the top we can
say<02:59:53.680> use<02:59:54.200> state<02:59:55.200> which<02:59:55.319> is<02:59:55.439> going<02:59:55.600> to<02:59:55.720> be<02:59:55.880> equal

say use state which is going to be equal

say use state which is going to be equal
to<02:59:56.279> use<02:59:56.560> State<02:59:56.800> snippet<02:59:57.760> and<02:59:57.920> let's<02:59:58.160> call<02:59:58.399> it

to use State snippet and let's call it

to use State snippet and let's call it
file

file

file
URL<03:00:03.200> as<03:00:03.359> well<03:00:03.520> as<03:00:03.800> set<03:00:04.160> file<03:00:04.600> URL<03:00:05.600> at<03:00:05.760> the<03:00:05.960> start

URL as well as set file URL at the start

URL as well as set file URL at the start
equal<03:00:06.640> to<03:00:06.760> an<03:00:06.880> empty<03:00:07.359> string<03:00:08.359> we<03:00:08.439> can<03:00:08.680> also

equal to an empty string we can also

equal to an empty string we can also
import<03:00:09.520> use<03:00:09.840> State<03:00:10.479> coming<03:00:10.840> from<03:00:11.399> react<03:00:12.399> right

import use State coming from react right

import use State coming from react right
here<03:00:12.880> at<03:00:13.040> the<03:00:13.239> top<03:00:14.080> use

here at the top use

here at the top use
State<03:00:16.800> great<03:00:17.640> so<03:00:17.920> now<03:00:18.760> instead<03:00:19.080> of<03:00:19.239> saying<03:00:19.640> is

State great so now instead of saying is

State great so now instead of saying is
drag<03:00:20.560> active<03:00:21.319> let's<03:00:21.560> rather<03:00:22.000> check<03:00:22.279> for<03:00:23.239> is<03:00:23.880> a

drag active let's rather check for is a

drag active let's rather check for is a
file<03:00:24.399> URL<03:00:24.960> there<03:00:25.800> has<03:00:25.920> it<03:00:26.080> been<03:00:26.600> uploaded<03:00:27.600> if

file URL there has it been uploaded if

file URL there has it been uploaded if
it<03:00:27.920> has<03:00:28.120> been<03:00:28.319> uploaded<03:00:29.200> we<03:00:29.319> can<03:00:29.600> return<03:00:29.920> some

it has been uploaded we can return some

it has been uploaded we can return some
kind<03:00:30.239> of<03:00:30.359> a<03:00:30.520> div<03:00:30.880> right<03:00:31.040> here<03:00:31.880> else<03:00:32.439> if<03:00:32.600> it

kind of a div right here else if it

kind of a div right here else if it
hasn't<03:00:33.560> we<03:00:33.680> can<03:00:34.000> return<03:00:34.279> something<03:00:34.800> else<03:00:35.800> so

hasn't we can return something else so

hasn't we can return something else so
let's<03:00:36.439> create<03:00:36.800> a<03:00:36.960> new

let's create a new

let's create a new
div<03:00:38.920> let's<03:00:39.080> say<03:00:39.319> test<03:00:39.680> two<03:00:40.680> and<03:00:40.960> here<03:00:41.399> let's

div let's say test two and here let's

div let's say test two and here let's
say<03:00:42.120> a<03:00:42.359> div<03:00:43.359> that's<03:00:43.560> go<03:00:43.760> going<03:00:43.880> to<03:00:44.000> say<03:00:44.680> test

say a div that's go going to say test

say a div that's go going to say test
one<03:00:46.080> we<03:00:46.200> can<03:00:46.359> delete<03:00:46.800> everything<03:00:47.359> else<03:00:48.359> so<03:00:48.640> now

one we can delete everything else so now

one we can delete everything else so now
you<03:00:49.239> can<03:00:49.399> see<03:00:49.640> test<03:00:49.920> two<03:00:50.479> meaning<03:00:51.040> we<03:00:51.239> don't

you can see test two meaning we don't

you can see test two meaning we don't
yet<03:00:51.880> have<03:00:52.080> a<03:00:52.279> file<03:00:52.560> URL<03:00:53.560> so<03:00:53.760> now<03:00:53.960> let's<03:00:54.160> create

yet have a file URL so now let's create

yet have a file URL so now let's create
this<03:00:54.760> nice<03:00:55.359> interface<03:00:56.239> from<03:00:56.439> which<03:00:56.640> it's<03:00:56.760> app

this nice interface from which it's app

this nice interface from which it's app
parent<03:00:57.399> that<03:00:57.560> we<03:00:57.640> can<03:00:57.880> actually<03:00:58.279> upload<03:00:58.680> the

parent that we can actually upload the

parent that we can actually upload the
files<03:01:00.040> to<03:01:00.239> do<03:01:00.399> it<03:01:00.960> we<03:01:01.080> can<03:01:01.279> give<03:01:01.479> this<03:01:01.680> div<03:01:01.960> a

files to do it we can give this div a

files to do it we can give this div a
class<03:01:02.640> name<03:01:03.560> equal<03:01:03.880> to

class name equal to

class name equal to
fileuploader<03:01:07.479> dashbox<03:01:08.479> and<03:01:08.600> we<03:01:08.720> can<03:01:08.880> save<03:01:09.120> it

fileuploader dashbox and we can save it

fileuploader dashbox and we can save it
within<03:01:10.239> it<03:01:10.680> we<03:01:10.800> can<03:01:10.960> create<03:01:11.239> an<03:01:11.920> image<03:01:12.920> that's

within it we can create an image that's

within it we can create an image that's
going<03:01:13.279> to<03:01:13.439> have<03:01:13.760> have<03:01:13.960> a<03:01:14.520> source<03:01:15.520> equal<03:01:15.840> to<03:01:16.840> SL

going to have have a source equal to SL

going to have have a source equal to SL
assets<03:01:18.640> SL<03:01:19.399> ions<03:01:20.399> SL<03:01:20.840> file-<03:01:21.880> upload.

assets SL ions SL file- upload.

assets SL ions SL file- upload.
SVG<03:01:24.560> that's<03:01:24.840> much<03:01:25.080> better<03:01:26.040> the<03:01:26.239> width<03:01:26.640> is

SVG that's much better the width is

SVG that's much better the width is
going<03:01:27.000> to<03:01:27.120> be<03:01:27.359> about<03:01:27.920> 96<03:01:28.920> and<03:01:29.080> the<03:01:29.319> height<03:01:29.800> is

going to be about 96 and the height is

going to be about 96 and the height is
going<03:01:30.120> to<03:01:30.279> be<03:01:30.479> about

going to be about

going to be about
77<03:01:32.560> finally<03:01:33.200> we<03:01:33.319> can<03:01:33.520> give<03:01:33.600> it<03:01:33.720> an<03:01:33.880> Al<03:01:34.239> tag

77 finally we can give it an Al tag

77 finally we can give it an Al tag
equal<03:01:35.000> to<03:01:35.279> file<03:01:36.239> upload<03:01:37.239> below<03:01:37.600> it<03:01:38.080> we<03:01:38.160> can

equal to file upload below it we can

equal to file upload below it we can
create<03:01:38.720> a<03:01:38.960> new

create a new

create a new
H3<03:01:41.000> that's<03:01:41.200> going<03:01:41.359> to<03:01:41.560> say<03:01:42.040> SVG<03:01:43.040> PNG

H3 that's going to say SVG PNG

H3 that's going to say SVG PNG
JPEG<03:01:45.720> and<03:01:46.000> we<03:01:46.120> can<03:01:46.279> give<03:01:46.359> it<03:01:46.520> a<03:01:46.720> class

JPEG and we can give it a class

JPEG and we can give it a class
name<03:01:48.720> that's<03:01:48.920> going<03:01:49.080> to<03:01:49.239> be<03:01:49.439> equal<03:01:49.760> to<03:01:50.439> text-

name that's going to be equal to text-

name that's going to be equal to text-
light

light

light
D4<03:01:53.239> small<03:01:53.920> regular<03:01:54.920> and<03:01:55.120> margin<03:01:55.600> bottom<03:01:55.920> of

D4 small regular and margin bottom of

D4 small regular and margin bottom of
six<03:01:57.479> there<03:01:57.640> we<03:01:57.800> go<03:01:58.319> now<03:01:58.640> instead<03:01:58.960> of<03:01:59.120> making

six there we go now instead of making

six there we go now instead of making
this<03:01:59.600> an<03:01:59.720> H3<03:02:00.600> let's<03:02:00.840> make<03:02:01.040> this<03:02:01.160> a<03:02:01.359> P<03:02:01.640> tag

this an H3 let's make this a P tag

this an H3 let's make this a P tag
because<03:02:02.319> it's<03:02:02.479> small<03:02:03.359> and<03:02:03.520> then<03:02:03.880> Above<03:02:04.359> This<03:02:04.560> P

because it's small and then Above This P

because it's small and then Above This P
tag<03:02:05.239> let's<03:02:05.479> create<03:02:05.840> an

tag let's create an

tag let's create an
H3<03:02:07.760> this<03:02:07.960> H3<03:02:08.479> is<03:02:08.600> going<03:02:08.760> to<03:02:08.960> say

H3 this H3 is going to say

H3 this H3 is going to say
drag<03:02:11.160> photo<03:02:12.279> here<03:02:13.279> we<03:02:13.399> can<03:02:13.680> give<03:02:13.800> it<03:02:13.880> a<03:02:14.080> class

drag photo here we can give it a class

drag photo here we can give it a class
name<03:02:16.399> equal<03:02:16.720> to<03:02:17.000> base-<03:02:18.080> medium<03:02:19.080> as<03:02:19.200> well<03:02:19.359> as

name equal to base- medium as well as

name equal to base- medium as well as
text-

text-

text-
light-2<03:02:22.000> margin<03:02:22.479> bottom<03:02:22.840> of<03:02:23.040> two<03:02:23.760> and<03:02:23.920> margin

light-2 margin bottom of two and margin

light-2 margin bottom of two and margin
top<03:02:24.680> of<03:02:25.200> six<03:02:26.200> there<03:02:26.359> we<03:02:26.600> go<03:02:27.160> that's<03:02:27.359> more<03:02:27.640> like

top of six there we go that's more like

top of six there we go that's more like
it<03:02:28.720> and<03:02:28.880> we<03:02:28.960> can<03:02:29.160> also<03:02:29.439> add<03:02:29.680> a<03:02:29.880> button<03:02:30.399> in<03:02:30.560> case

it and we can also add a button in case

it and we can also add a button in case
people<03:02:31.040> want<03:02:31.160> to<03:02:31.399> click<03:02:31.800> and<03:02:31.960> not<03:02:32.239> drag<03:02:33.040> so<03:02:33.239> we

people want to click and not drag so we

people want to click and not drag so we
can<03:02:33.560> add<03:02:33.760> a<03:02:34.399> button<03:02:35.399> that's<03:02:35.600> going<03:02:35.760> to<03:02:35.920> say

can add a button that's going to say

can add a button that's going to say
select<03:02:37.399> from

select from

select from
computer<03:02:39.479> we<03:02:39.600> can<03:02:39.880> then<03:02:40.359> import<03:02:40.800> this<03:02:41.040> from<03:02:41.319> UI

computer we can then import this from UI

computer we can then import this from UI
button<03:02:42.920> and<03:02:43.200> give<03:02:43.319> it<03:02:43.399> a<03:02:43.760> class<03:02:44.080> name<03:02:45.080> equal<03:02:45.439> to

button and give it a class name equal to

button and give it a class name equal to
Shad

Shad

Shad
button<03:02:49.080> undor

button undor

button undor
dark4<03:02:51.319> and<03:02:51.640> save<03:02:51.920> it<03:02:52.920> there<03:02:53.080> we<03:02:53.279> go<03:02:53.760> this<03:02:53.880> is

dark4 and save it there we go this is

dark4 and save it there we go this is
more<03:02:54.319> like<03:02:54.520> it<03:02:55.359> now<03:02:55.560> the<03:02:55.760> last<03:02:55.960> thing<03:02:56.120> we<03:02:56.239> have

more like it now the last thing we have

more like it now the last thing we have
to<03:02:56.520> do<03:02:57.160> is<03:02:57.439> implement<03:02:58.160> the

to do is implement the

to do is implement the
functionality<03:03:00.239> so<03:03:00.479> how<03:03:00.600> are<03:03:00.720> we<03:03:00.840> going<03:03:00.920> to

functionality so how are we going to

functionality so how are we going to
figure<03:03:01.399> out<03:03:02.040> when<03:03:02.399> something<03:03:02.720> gets<03:03:03.120> uploaded

figure out when something gets uploaded

figure out when something gets uploaded
well<03:03:04.319> in<03:03:04.560> this<03:03:04.760> case<03:03:05.279> we<03:03:05.439> have<03:03:05.640> the<03:03:05.840> get<03:03:06.040> root

well in this case we have the get root

well in this case we have the get root
props<03:03:06.920> and<03:03:07.080> get<03:03:07.279> input<03:03:07.680> props<03:03:08.520> we<03:03:08.680> won't<03:03:08.880> be

props and get input props we won't be

props and get input props we won't be
needing<03:03:09.359> is<03:03:09.640> drag<03:03:10.080> active<03:03:11.080> from<03:03:11.520> use<03:03:11.920> Drop

needing is drag active from use Drop

needing is drag active from use Drop
Zone<03:03:12.920> on<03:03:13.200> drop

Zone on drop

Zone on drop
to<03:03:15.080> the<03:03:15.239> second<03:03:15.560> parameter<03:03:16.080> to<03:03:16.279> this<03:03:16.439> used

to the second parameter to this used

to the second parameter to this used
drop<03:03:17.120> zone<03:03:18.040> is<03:03:18.239> going<03:03:18.399> to<03:03:18.640> be<03:03:19.560> what<03:03:19.720> do<03:03:19.880> we

drop zone is going to be what do we

drop zone is going to be what do we
accept<03:03:20.800> so<03:03:20.960> we<03:03:21.080> can<03:03:21.200> say<03:03:21.760> accept<03:03:22.760> an<03:03:23.120> object<03:03:24.120> of

accept so we can say accept an object of

accept so we can say accept an object of
image<03:03:25.760> everything<03:03:26.439> and<03:03:26.560> we<03:03:26.680> can<03:03:26.880> Define<03:03:27.239> that

image everything and we can Define that

image everything and we can Define that
right<03:03:27.960> here<03:03:28.960> that's<03:03:29.160> going<03:03:29.319> to<03:03:29.520> be<03:03:29.600> an<03:03:29.760> array

right here that's going to be an array

right here that's going to be an array
of

of

of
PNG<03:03:32.680> we<03:03:32.800> can<03:03:32.960> also<03:03:33.239> do<03:03:33.520> a<03:03:34.279> JPEG<03:03:35.279> and<03:03:35.439> we<03:03:35.520> can

PNG we can also do a JPEG and we can

PNG we can also do a JPEG and we can
also<03:03:36.040> do<03:03:36.479> a<03:03:36.960> DOT<03:03:37.720> jpeg<03:03:38.600> like<03:03:38.920> this<03:03:39.920> also<03:03:40.319> maybe

also do a DOT jpeg like this also maybe

also do a DOT jpeg like this also maybe
an<03:03:41.000> SVG<03:03:41.800> who<03:03:41.960> knows<03:03:42.840> why<03:03:43.000> not<03:03:43.840> there<03:03:44.000> we<03:03:44.160> go<03:03:44.760> so

an SVG who knows why not there we go so

an SVG who knows why not there we go so
now<03:03:45.120> we're<03:03:45.319> defining<03:03:45.920> what<03:03:46.120> can<03:03:46.279> we<03:03:46.479> use<03:03:47.160> but

now we're defining what can we use but

now we're defining what can we use but
now<03:03:47.560> let's<03:03:47.800> define<03:03:48.080> a<03:03:48.279> function<03:03:48.720> on<03:03:49.080> drop<03:03:49.920> what

now let's define a function on drop what

now let's define a function on drop what
happens<03:03:50.960> once<03:03:51.200> we<03:03:51.560> actually<03:03:51.920> drop<03:03:52.279> some<03:03:52.640> files

happens once we actually drop some files

happens once we actually drop some files
well<03:03:53.920> let's<03:03:54.160> also<03:03:54.399> create<03:03:54.760> another<03:03:55.120> use<03:03:55.479> state

well let's also create another use state

well let's also create another use state
right<03:03:56.200> here<03:03:57.200> and<03:03:57.359> this<03:03:57.520> use<03:03:57.840> state<03:03:58.120> is<03:03:58.239> going

right here and this use state is going

right here and this use state is going
to<03:03:58.520> be<03:03:58.640> for<03:03:58.840> the<03:03:59.120> file<03:03:59.560> itself<03:04:00.439> so<03:04:00.760> file<03:04:01.520> and

to be for the file itself so file and

to be for the file itself so file and
then<03:04:01.880> set<03:04:02.319> file<03:04:03.040> at<03:04:03.160> the<03:04:03.359> start<03:04:03.800> equal<03:04:04.120> to<03:04:04.279> an

then set file at the start equal to an

then set file at the start equal to an
empty<03:04:04.720> array<03:04:05.279> because<03:04:05.520> we<03:04:05.640> can<03:04:05.880> pass<03:04:06.160> multiple

empty array because we can pass multiple

empty array because we can pass multiple
files<03:04:08.439> and<03:04:08.600> the<03:04:08.720> file<03:04:08.960> URL<03:04:09.640> is<03:04:09.760> of<03:04:09.920> course<03:04:10.160> only

files and the file URL is of course only

files and the file URL is of course only
the<03:04:10.600> URL<03:04:11.359> of<03:04:11.479> the<03:04:11.640> file<03:04:11.920> we<03:04:12.399> pass<03:04:13.439> so<03:04:13.760> what<03:04:13.880> do

the URL of the file we pass so what do

the URL of the file we pass so what do
we<03:04:14.160> do<03:04:14.359> once<03:04:14.560> we<03:04:14.720> drop<03:04:15.080> it<03:04:15.560> we<03:04:15.760> set<03:04:16.200> file<03:04:17.200> to<03:04:17.359> be

we do once we drop it we set file to be

we do once we drop it we set file to be
equal<03:04:17.840> to<03:04:18.560> accepted<03:04:19.560> files<03:04:20.479> and<03:04:20.720> then<03:04:21.200> as

equal to accepted files and then as

equal to accepted files and then as
props<03:04:22.120> to<03:04:22.359> this<03:04:22.560> component<03:04:23.200> we're<03:04:23.359> going<03:04:23.439> to

props to this component we're going to

props to this component we're going to
pass<03:04:23.960> two<03:04:24.239> additional<03:04:24.720> things<03:04:25.560> so<03:04:25.760> going<03:04:26.120> back

pass two additional things so going back

pass two additional things so going back
to<03:04:26.439> our<03:04:26.640> post<03:04:27.279> form<03:04:28.279> Finding<03:04:28.680> where<03:04:28.840> we<03:04:28.960> have

to our post form Finding where we have

to our post form Finding where we have
the<03:04:29.200> file<03:04:29.520> uploader<03:04:30.479> we<03:04:30.560> can<03:04:30.840> pass<03:04:31.120> two<03:04:31.399> things

the file uploader we can pass two things

the file uploader we can pass two things
we<03:04:32.279> can<03:04:32.479> pass<03:04:32.720> the<03:04:32.840> field

we can pass the field

we can pass the field
change<03:04:35.239> and<03:04:35.359> we<03:04:35.439> can<03:04:35.640> also<03:04:36.000> pass<03:04:36.840> the<03:04:37.000> media

change and we can also pass the media

change and we can also pass the media
URL<03:04:39.600> the<03:04:39.720> field<03:04:40.080> change<03:04:40.760> is<03:04:40.920> coming<03:04:41.359> right

URL the field change is coming right

URL the field change is coming right
here<03:04:41.720> from<03:04:41.920> the<03:04:42.080> field<03:04:42.720> of<03:04:42.880> this<03:04:43.040> form<03:04:43.520> field

here from the field of this form field

here from the field of this form field
so<03:04:44.160> that's<03:04:44.319> going<03:04:44.399> to<03:04:44.520> be<03:04:44.760> field.on

so that's going to be field.on

so that's going to be field.on
change<03:04:48.000> but<03:04:48.359> the<03:04:48.520> media<03:04:48.960> URL<03:04:49.960> how<03:04:50.120> do<03:04:50.239> we<03:04:50.399> know

change but the media URL how do we know

change but the media URL how do we know
what<03:04:50.880> is<03:04:51.000> the<03:04:51.120> URL<03:04:51.600> of<03:04:51.760> this<03:04:52.279> media<03:04:53.279> well

what is the URL of this media well

what is the URL of this media well
that's<03:04:53.920> going<03:04:54.040> to<03:04:54.160> be<03:04:54.279> coming<03:04:54.600> through<03:04:54.920> props

that's going to be coming through props

that's going to be coming through props
so<03:04:56.160> right<03:04:56.399> here<03:04:57.120> we<03:04:57.239> can<03:04:57.439> say<03:04:57.960> the<03:04:58.160> post<03:04:58.479> form

so right here we can say the post form

so right here we can say the post form
is<03:04:59.319> going<03:04:59.520> to<03:04:59.760> accept<03:05:00.760> a<03:05:01.040> post<03:05:01.880> but<03:05:02.080> this<03:05:02.200> is

is going to accept a post but this is

is going to accept a post but this is
only<03:05:02.840> if<03:05:02.960> we're<03:05:03.239> updating<03:05:03.760> it<03:05:04.120> right<03:05:04.359> if<03:05:04.439> we're

only if we're updating it right if we're

only if we're updating it right if we're
updating<03:05:05.239> the<03:05:05.439> post<03:05:06.040> then<03:05:06.279> we<03:05:06.399> need<03:05:06.560> to<03:05:06.680> have

updating the post then we need to have

updating the post then we need to have
an<03:05:07.000> existing<03:05:07.560> post<03:05:08.279> otherwise<03:05:09.040> we<03:05:09.200> don't<03:05:09.479> have

an existing post otherwise we don't have

an existing post otherwise we don't have
anything<03:05:10.600> so<03:05:10.760> in<03:05:10.960> this<03:05:11.120> case<03:05:11.359> if<03:05:11.520> we<03:05:11.640> do<03:05:11.880> have<03:05:12.000> a

anything so in this case if we do have a

anything so in this case if we do have a
post<03:05:13.040> then<03:05:13.479> we<03:05:13.600> can<03:05:13.880> pass<03:05:14.880> post<03:05:15.600> question

post then we can pass post question

post then we can pass post question
mark.<03:05:16.640> image

mark. image

mark. image
URL<03:05:18.880> and<03:05:19.080> now<03:05:19.279> we<03:05:19.399> can<03:05:19.600> dive<03:05:19.960> into<03:05:20.279> the<03:05:20.399> file

URL and now we can dive into the file

URL and now we can dive into the file
uploader<03:05:21.680> and<03:05:22.000> accept<03:05:22.399> those<03:05:22.640> props<03:05:23.600> so<03:05:23.800> we're

uploader and accept those props so we're

uploader and accept those props so we're
getting<03:05:24.239> the<03:05:24.359> field<03:05:25.120> change<03:05:26.120> as<03:05:26.359> well<03:05:27.160> as

getting the field change as well as

getting the field change as well as
media<03:05:28.239> URL<03:05:29.120> and<03:05:29.319> for<03:05:29.520> now<03:05:29.760> we<03:05:29.840> can<03:05:30.000> put<03:05:30.239> these

media URL and for now we can put these

media URL and for now we can put these
as<03:05:30.600> a<03:05:30.840> type<03:05:31.160> any<03:05:32.160> and<03:05:32.479> alongside<03:05:33.000> setting<03:05:33.319> the

as a type any and alongside setting the

as a type any and alongside setting the
file<03:05:34.160> we<03:05:34.239> can<03:05:34.479> also<03:05:34.840> set<03:05:35.160> field<03:05:35.640> change<03:05:36.439> like

file we can also set field change like

file we can also set field change like
this<03:05:37.399> to<03:05:37.760> accepted<03:05:38.439> files<03:05:39.439> and<03:05:39.560> then<03:05:39.720> we<03:05:39.840> can

this to accepted files and then we can

this to accepted files and then we can
set<03:05:40.359> file<03:05:40.800> URL<03:05:41.800> to<03:05:42.000> be<03:05:42.200> equal<03:05:42.479> to

set file URL to be equal to

set file URL to be equal to
URL<03:05:46.120> dot<03:05:47.120> create<03:05:48.120> object<03:05:48.880> URL<03:05:49.880> and<03:05:50.040> then<03:05:50.160> we

URL dot create object URL and then we

URL dot create object URL and then we
pass<03:05:50.640> in<03:05:50.840> the<03:05:51.040> accepted<03:05:51.840> files<03:05:52.840> zero<03:05:53.479> so<03:05:53.720> the

pass in the accepted files zero so the

pass in the accepted files zero so the
first<03:05:54.200> file<03:05:54.439> that<03:05:54.600> we<03:05:54.800> have<03:05:55.080> there<03:05:56.000> and<03:05:56.200> that's

first file that we have there and that's

first file that we have there and that's
going<03:05:56.520> to<03:05:56.680> give<03:05:56.840> us<03:05:56.960> the<03:05:57.279> URL<03:05:58.279> as<03:05:58.439> the<03:05:58.560> Callback

going to give us the URL as the Callback

going to give us the URL as the Callback
we<03:05:59.080> want<03:05:59.239> to<03:05:59.359> add<03:05:59.560> the<03:05:59.720> file<03:06:00.120> right<03:06:00.720> here<03:06:01.720> here

we want to add the file right here here

we want to add the file right here here
we<03:06:02.160> need<03:06:02.319> to<03:06:02.520> define<03:06:02.880> the<03:06:03.120> type<03:06:03.840> and<03:06:04.040> this<03:06:04.239> type

we need to define the type and this type

we need to define the type and this type
has<03:06:04.680> already<03:06:04.920> been<03:06:05.160> defined<03:06:05.720> by<03:06:05.920> react<03:06:06.399> drop

has already been defined by react drop

has already been defined by react drop
zone<03:06:07.359> so<03:06:07.479> we<03:06:07.600> just<03:06:07.720> need<03:06:07.880> to<03:06:08.040> import<03:06:08.359> it<03:06:08.479> at<03:06:08.600> the

zone so we just need to import it at the

zone so we just need to import it at the
top<03:06:09.479> by<03:06:09.640> saying<03:06:10.800> file<03:06:11.800> with<03:06:12.800> path

top by saying file with path

top by saying file with path
and<03:06:14.359> now<03:06:14.560> we<03:06:14.680> can<03:06:14.840> say<03:06:15.200> this<03:06:15.359> is<03:06:15.479> of<03:06:15.680> a<03:06:16.000> type

and now we can say this is of a type

and now we can say this is of a type
right<03:06:17.880> here<03:06:18.880> file<03:06:19.600> with

right here file with

right here file with
path<03:06:21.960> we<03:06:22.080> can<03:06:22.239> also<03:06:22.479> Define<03:06:23.000> these<03:06:23.439> two<03:06:23.840> props

path we can also Define these two props

path we can also Define these two props
by<03:06:24.920> saying<03:06:25.439> file

by saying file

by saying file
uploader<03:06:27.760> props<03:06:28.760> and<03:06:28.880> then<03:06:29.000> we<03:06:29.120> can<03:06:29.760> Define

uploader props and then we can Define

uploader props and then we can Define
this<03:06:31.000> interface<03:06:31.439> or<03:06:31.640> the<03:06:31.880> type<03:06:32.239> right<03:06:32.479> above

this interface or the type right above

this interface or the type right above
by<03:06:33.319> saying<03:06:33.680> type<03:06:34.520> file<03:06:35.040> uploader<03:06:36.040> props<03:06:36.880> is

by saying type file uploader props is

by saying type file uploader props is
equal

equal

equal
to<03:06:39.279> we<03:06:39.479> first<03:06:39.760> have<03:06:39.920> the<03:06:40.040> field

to we first have the field

to we first have the field
change<03:06:42.920> which<03:06:43.279> is<03:06:43.439> a

change which is a

change which is a
function<03:06:45.359> that<03:06:45.720> accepts<03:06:46.560> files<03:06:47.520> which<03:06:47.680> is<03:06:47.800> of

function that accepts files which is of

function that accepts files which is of
a<03:06:48.439> type<03:06:49.439> an<03:06:49.640> array<03:06:50.080> of<03:06:50.680> files<03:06:51.680> and<03:06:51.920> it<03:06:52.040> doesn't

a type an array of files and it doesn't

a type an array of files and it doesn't
return<03:06:52.800> anything<03:06:53.560> so<03:06:53.960> void<03:06:54.960> and<03:06:55.080> then<03:06:55.239> the

return anything so void and then the

return anything so void and then the
media<03:06:55.800> URL<03:06:56.760> which<03:06:56.880> is<03:06:57.000> going<03:06:57.160> to<03:06:57.279> be<03:06:57.399> of<03:06:57.560> a<03:06:57.760> type

media URL which is going to be of a type

media URL which is going to be of a type
string<03:07:00.319> great<03:07:00.920> so<03:07:01.160> now<03:07:01.359> it's<03:07:01.600> complaining<03:07:02.080> a

string great so now it's complaining a

string great so now it's complaining a
bit<03:07:02.520> about<03:07:02.840> these<03:07:03.080> accepted<03:07:03.600> files<03:07:04.600> that's

bit about these accepted files that's

bit about these accepted files that's
because<03:07:05.560> here<03:07:05.800> we<03:07:05.920> can<03:07:06.120> Define<03:07:06.680> what<03:07:06.800> a<03:07:07.000> file

because here we can Define what a file

because here we can Define what a file
is<03:07:08.319> a<03:07:08.600> file<03:07:09.120> is<03:07:09.239> an<03:07:09.439> array<03:07:10.000> of<03:07:10.279> files<03:07:11.200> so<03:07:11.359> we<03:07:11.479> can

is a file is an array of files so we can

is a file is an array of files so we can
Define<03:07:12.000> it<03:07:12.439> like<03:07:12.640> so

Define it like so

Define it like so
and<03:07:13.920> we<03:07:14.000> can<03:07:14.160> put<03:07:14.279> it<03:07:14.399> in<03:07:14.479> a<03:07:14.640> new<03:07:14.840> line<03:07:15.239> so<03:07:15.439> it's

and we can put it in a new line so it's

and we can put it in a new line so it's
easier<03:07:15.920> to<03:07:16.040> see<03:07:16.279> what's<03:07:16.600> happening<03:07:17.600> there<03:07:17.800> we

easier to see what's happening there we

easier to see what's happening there we
go<03:07:18.680> we<03:07:18.880> have<03:07:19.080> the<03:07:19.239> used<03:07:19.560> callback<03:07:20.399> where<03:07:20.600> we

go we have the used callback where we

go we have the used callback where we
have<03:07:21.200> accepted<03:07:21.720> files<03:07:22.600> and<03:07:22.720> this<03:07:22.840> is<03:07:23.040> actually

have accepted files and this is actually

have accepted files and this is actually
going<03:07:23.439> to<03:07:23.560> be<03:07:23.720> an<03:07:23.880> array<03:07:24.560> of<03:07:24.800> file<03:07:25.160> width<03:07:25.479> paths

going to be an array of file width paths

going to be an array of file width paths
and<03:07:26.479> then<03:07:26.760> everything<03:07:27.160> is<03:07:27.399> good<03:07:28.239> once<03:07:28.439> we<03:07:28.600> do

and then everything is good once we do

and then everything is good once we do
that<03:07:29.399> we're<03:07:29.760> actually<03:07:30.200> ready<03:07:30.720> to<03:07:31.000> set<03:07:31.439> all<03:07:31.640> of

that we're actually ready to set all of

that we're actually ready to set all of
our<03:07:32.000> states<03:07:32.720> to<03:07:32.920> the<03:07:33.120> file<03:07:33.399> that<03:07:33.600> gets

our states to the file that gets

our states to the file that gets
uploaded<03:07:34.920> so<03:07:35.120> let's<03:07:35.319> try<03:07:35.479> to<03:07:35.680> upload<03:07:36.040> a<03:07:36.239> file

uploaded so let's try to upload a file

uploaded so let's try to upload a file
I'm<03:07:37.160> going<03:07:37.239> to<03:07:37.439> grab<03:07:37.760> one<03:07:37.920> from<03:07:38.120> our<03:07:38.279> finished

I'm going to grab one from our finished

I'm going to grab one from our finished
application<03:07:40.359> let's<03:07:40.640> do<03:07:41.120> this<03:07:41.560> one<03:07:42.560> I'm<03:07:42.640> going

application let's do this one I'm going

application let's do this one I'm going
to<03:07:42.880> save<03:07:43.120> save<03:07:43.680> it<03:07:44.680> and<03:07:44.960> now<03:07:45.479> I<03:07:45.560> can<03:07:45.760> add<03:07:45.960> it

to save save it and now I can add it

to save save it and now I can add it
right

right

right
here<03:07:48.600> and<03:07:48.760> there<03:07:48.880> we<03:07:49.080> go<03:07:49.479> it<03:07:49.640> gets<03:07:49.920> back<03:07:50.040> to

here and there we go it gets back to

here and there we go it gets back to
test<03:07:50.560> one<03:07:51.279> but<03:07:51.520> hey<03:07:51.920> let's<03:07:52.239> actually<03:07:52.560> show<03:07:53.000> the

test one but hey let's actually show the

test one but hey let's actually show the
file<03:07:53.479> that's<03:07:53.840> there<03:07:54.840> so<03:07:55.439> this<03:07:55.640> div<03:07:56.200> can<03:07:56.399> have<03:07:56.600> a

file that's there so this div can have a

file that's there so this div can have a
class<03:07:57.279> name<03:07:58.120> equal<03:07:58.479> to<03:07:59.439> flex<03:08:00.439> Flex<03:08:01.439> D1<03:08:02.439> justify

class name equal to flex Flex D1 justify

class name equal to flex Flex D1 justify
Das<03:08:03.600> Center<03:08:04.600> w-<03:08:05.359> full<03:08:05.640> for<03:08:05.840> full<03:08:06.239> width

Das Center w- full for full width

Das Center w- full for full width
padding<03:08:07.720> five<03:08:08.399> and<03:08:08.560> en<03:08:08.800> large<03:08:09.120> devices

padding five and en large devices

padding five and en large devices
padding

padding

padding
10<03:08:12.399> okay<03:08:12.800> that<03:08:13.080> just<03:08:13.239> gave<03:08:13.359> it<03:08:13.479> some<03:08:13.680> padding

10 okay that just gave it some padding

10 okay that just gave it some padding
but<03:08:14.600> now<03:08:15.080> let's<03:08:15.399> actually<03:08:15.720> render<03:08:16.200> the<03:08:16.680> image

but now let's actually render the image

but now let's actually render the image
it's<03:08:17.840> going<03:08:18.040> to<03:08:18.120> be<03:08:18.239> a<03:08:18.359> self-closing<03:08:19.120> image

it's going to be a self-closing image

it's going to be a self-closing image
that's<03:08:20.080> going<03:08:20.239> to<03:08:20.399> have<03:08:20.560> a<03:08:20.720> source<03:08:21.520> equal<03:08:21.800> to

that's going to have a source equal to

that's going to have a source equal to
file<03:08:22.720> URL<03:08:23.720> it's<03:08:23.880> going<03:08:24.040> to<03:08:24.200> have<03:08:24.319> an<03:08:24.479> Al<03:08:24.840> tag<03:08:25.200> of

file URL it's going to have an Al tag of

file URL it's going to have an Al tag of
image<03:08:26.560> it's<03:08:26.720> going<03:08:26.880> to<03:08:27.040> have<03:08:27.160> a<03:08:27.399> class<03:08:27.760> name

image it's going to have a class name

image it's going to have a class name
equal<03:08:28.479> to

equal to

equal to
fileuploader<03:08:31.359> das

fileuploader das

fileuploader das
IMG<03:08:33.439> and<03:08:33.640> there<03:08:33.800> we<03:08:33.960> go<03:08:34.640> finally<03:08:35.399> let's<03:08:35.680> add<03:08:35.840> a

IMG and there we go finally let's add a

IMG and there we go finally let's add a
P<03:08:36.319> tag<03:08:36.640> right<03:08:36.800> below<03:08:37.640> that's<03:08:37.880> going<03:08:38.040> to<03:08:38.200> say

P tag right below that's going to say

P tag right below that's going to say
click<03:08:39.520> or<03:08:40.080> drag<03:08:40.960> photo<03:08:41.720> to<03:08:42.080> replace

click or drag photo to replace

click or drag photo to replace
and<03:08:44.359> let's<03:08:44.600> style<03:08:44.880> it<03:08:45.000> a<03:08:45.160> bit<03:08:45.520> by<03:08:45.680> giving<03:08:45.920> it<03:08:46.080> a

and let's style it a bit by giving it a

and let's style it a bit by giving it a
class<03:08:46.640> name<03:08:47.399> equal<03:08:47.720> to

class name equal to

class name equal to
fileuploader<03:08:50.640> das<03:08:51.239> label<03:08:52.239> and<03:08:52.439> we<03:08:52.560> have<03:08:52.680> to

fileuploader das label and we have to

fileuploader das label and we have to
put<03:08:53.040> this<03:08:53.319> outside<03:08:53.920> of<03:08:54.120> this<03:08:54.319> div<03:08:54.720> right<03:08:54.920> here

put this outside of this div right here

put this outside of this div right here
but<03:08:55.800> within<03:08:56.040> a<03:08:56.239> react<03:08:56.680> fragment<03:08:57.560> so<03:08:57.840> here<03:08:58.000> we

but within a react fragment so here we

but within a react fragment so here we
can<03:08:58.279> put<03:08:58.399> a<03:08:58.560> react<03:08:59.319> fragment<03:09:00.359> close<03:09:01.359> the<03:09:01.560> div

can put a react fragment close the div

can put a react fragment close the div
and<03:09:02.680> then<03:09:02.840> put<03:09:03.040> the<03:09:03.200> P<03:09:03.479> tag<03:09:03.880> outside<03:09:04.239> of<03:09:04.359> the

and then put the P tag outside of the

and then put the P tag outside of the
div<03:09:05.200> but<03:09:05.520> inside<03:09:05.920> of<03:09:06.040> the

div but inside of the

div but inside of the
fragment<03:09:07.840> if<03:09:08.000> we<03:09:08.120> save<03:09:08.399> it<03:09:09.200> that's<03:09:09.439> looking

fragment if we save it that's looking

fragment if we save it that's looking
much<03:09:10.120> better<03:09:10.760> so<03:09:11.040> now<03:09:11.560> we<03:09:11.680> can<03:09:11.920> add<03:09:12.120> a<03:09:12.319> caption

much better so now we can add a caption

much better so now we can add a caption
we<03:09:13.640> can<03:09:13.800> add<03:09:13.960> a<03:09:14.200> photo<03:09:14.840> location<03:09:15.720> and<03:09:16.000> the<03:09:16.200> tags

we can add a photo location and the tags

we can add a photo location and the tags
and<03:09:17.120> click<03:09:17.359> submit<03:09:18.279> the<03:09:18.479> file<03:09:18.800> uploader<03:09:19.600> is

and click submit the file uploader is

and click submit the file uploader is
done<03:09:20.800> but<03:09:21.200> let's<03:09:21.520> actually<03:09:21.920> implement<03:09:22.319> the

done but let's actually implement the

done but let's actually implement the
logic<03:09:22.960> for<03:09:23.239> adding<03:09:23.720> all<03:09:23.920> of<03:09:24.160> these<03:09:24.439> other

logic for adding all of these other

logic for adding all of these other
fields<03:09:25.880> first<03:09:26.080> of<03:09:26.279> all<03:09:26.720> the<03:09:26.840> form<03:09:27.200> fields<03:09:27.520> are

fields first of all the form fields are

fields first of all the form fields are
complaining<03:09:28.479> that<03:09:28.960> this<03:09:29.120> doesn't<03:09:29.479> exist<03:09:30.479> file

complaining that this doesn't exist file

complaining that this doesn't exist file
doesn't<03:09:31.160> exist<03:09:31.640> caption<03:09:32.040> doesn't<03:09:32.520> exist<03:09:33.520> and

doesn't exist caption doesn't exist and

doesn't exist caption doesn't exist and
that's<03:09:34.000> because<03:09:34.640> we<03:09:34.840> haven't<03:09:35.120> yet<03:09:35.399> validated

that's because we haven't yet validated

that's because we haven't yet validated
our<03:09:36.399> form<03:09:37.000> using<03:09:37.479> Zod<03:09:38.479> so<03:09:38.800> right<03:09:39.000> here<03:09:39.319> we<03:09:39.439> can

our form using Zod so right here we can

our form using Zod so right here we can
Define<03:09:40.439> what<03:09:40.560> our<03:09:40.760> form<03:09:41.120> should<03:09:41.439> accept<03:09:42.399> this

Define what our form should accept this

Define what our form should accept this
form<03:09:43.120> should<03:09:43.399> accept<03:09:43.800> a<03:09:44.040> caption<03:09:45.040> which<03:09:45.160> is

form should accept a caption which is

form should accept a caption which is
going<03:09:45.479> to<03:09:45.640> be<03:09:46.160> if<03:09:46.319> the<03:09:46.479> post<03:09:46.880> exists<03:09:47.880> then<03:09:48.279> post

going to be if the post exists then post

going to be if the post exists then post
question<03:09:49.040> mark.<03:09:49.600> Caption<03:09:50.239> This<03:09:50.359> is<03:09:50.479> for<03:09:50.720> when

question mark. Caption This is for when

question mark. Caption This is for when
we're<03:09:51.120> editing<03:09:52.080> else<03:09:52.520> it's<03:09:52.640> going<03:09:52.800> to<03:09:52.920> be<03:09:53.000> an

we're editing else it's going to be an

we're editing else it's going to be an
empty

empty

empty
string<03:09:55.000> the<03:09:55.239> file<03:09:55.880> is<03:09:56.080> going<03:09:56.239> to<03:09:56.439> be<03:09:56.760> an<03:09:56.920> array

string the file is going to be an array

string the file is going to be an array
of<03:09:58.279> files<03:09:59.279> location<03:09:59.960> is<03:10:00.120> going<03:10:00.279> to<03:10:00.520> be<03:10:01.160> if<03:10:01.319> we

of files location is going to be if we

of files location is going to be if we
already<03:10:01.840> have<03:10:02.000> a<03:10:02.160> post<03:10:02.479> location<03:10:03.439> then<03:10:03.800> post

already have a post location then post

already have a post location then post
location<03:10:04.920> else<03:10:05.239> an<03:10:05.399> empty<03:10:05.720> string<03:10:06.720> and<03:10:07.200> tags

location else an empty string and tags

location else an empty string and tags
is<03:10:08.359> going<03:10:08.560> to<03:10:08.720> be<03:10:09.120> if<03:10:09.239> we<03:10:09.439> have<03:10:09.560> a<03:10:09.800> post<03:10:10.560> then

is going to be if we have a post then

is going to be if we have a post then
post.<03:10:12.000> tags.<03:10:12.920> join<03:10:13.680> by<03:10:13.840> a<03:10:14.239> comma<03:10:15.239> else<03:10:15.920> it's

post. tags. join by a comma else it's

post. tags. join by a comma else it's
simply<03:10:16.319> going<03:10:16.479> to<03:10:16.600> be<03:10:16.720> an<03:10:16.840> empty<03:10:17.560> string<03:10:18.560> now

simply going to be an empty string now

simply going to be an empty string now
you<03:10:18.880> can<03:10:19.000> see<03:10:19.160> that<03:10:19.279> it's<03:10:19.439> complaining<03:10:20.040> that

you can see that it's complaining that

you can see that it's complaining that
this<03:10:20.439> caption<03:10:20.800> does<03:10:21.000> not<03:10:21.399> exist<03:10:22.399> that's

this caption does not exist that's

this caption does not exist that's
because<03:10:23.239> we<03:10:23.359> are<03:10:23.560> now<03:10:23.840> using<03:10:24.239> a<03:10:24.520> default<03:10:24.960> form

because we are now using a default form

because we are now using a default form
schema<03:10:26.479> but<03:10:26.800> we<03:10:27.080> actually<03:10:27.439> want<03:10:27.600> to<03:10:27.840> turn<03:10:28.239> this

schema but we actually want to turn this

schema but we actually want to turn this
into<03:10:28.920> post<03:10:29.720> validation<03:10:30.720> so<03:10:31.239> let's<03:10:31.560> head<03:10:31.880> into

into post validation so let's head into

into post validation so let's head into
our

our

our
validations<03:10:34.200> right<03:10:34.439> here<03:10:35.040> and<03:10:35.239> we<03:10:35.319> can

validations right here and we can

validations right here and we can
duplicate<03:10:36.200> this<03:10:36.479> sign<03:10:36.960> inv<03:10:37.239> validation<03:10:38.200> right

duplicate this sign inv validation right

duplicate this sign inv validation right
below<03:10:39.800> we<03:10:39.920> can<03:10:40.120> call<03:10:40.520> this<03:10:41.239> something<03:10:41.760> like

below we can call this something like

below we can call this something like
post

post

post
validation<03:10:44.800> it's<03:10:45.000> not<03:10:45.200> going<03:10:45.279> to<03:10:45.439> have<03:10:45.560> an

validation it's not going to have an

validation it's not going to have an
email<03:10:46.680> not<03:10:46.880> a<03:10:47.120> password<03:10:47.960> but<03:10:48.120> it's<03:10:48.279> going<03:10:48.359> to

email not a password but it's going to

email not a password but it's going to
have<03:10:48.640> a<03:10:48.880> caption<03:10:49.800> of<03:10:49.960> a<03:10:50.160> type<03:10:50.399> z.

have a caption of a type z.

have a caption of a type z.
string<03:10:52.680> it's<03:10:52.840> going<03:10:53.000> to<03:10:53.120> be<03:10:53.319> a<03:10:53.479> minimum<03:10:54.080> of

string it's going to be a minimum of

string it's going to be a minimum of
about<03:10:54.760> five<03:10:55.640> characters<03:10:56.640> and<03:10:56.880> a<03:10:57.160> maximum<03:10:57.880> of

about five characters and a maximum of

about five characters and a maximum of
about<03:10:59.000> 2,200<03:11:00.120> characters<03:11:01.120> let's<03:11:01.359> also<03:11:01.640> have<03:11:01.800> a

about 2,200 characters let's also have a

about 2,200 characters let's also have a
file<03:11:02.720> which<03:11:02.840> is<03:11:03.000> going<03:11:03.160> to<03:11:03.279> be<03:11:03.479> z.<03:11:04.399> custom<03:11:05.399> and

file which is going to be z. custom and

file which is going to be z. custom and
we<03:11:05.640> can<03:11:05.840> Define<03:11:06.200> the<03:11:06.439> value<03:11:07.279> right<03:11:07.640> here<03:11:08.640> of

we can Define the value right here of

we can Define the value right here of
file<03:11:09.880> or<03:11:10.080> rather<03:11:10.319> an<03:11:10.479> array<03:11:10.880> of<03:11:11.479> files<03:11:12.479> there

file or rather an array of files there

file or rather an array of files there
we<03:11:13.200> go<03:11:14.200> it's<03:11:14.359> so<03:11:14.640> handy<03:11:14.920> how<03:11:15.040> we<03:11:15.120> can<03:11:15.319> Define

we go it's so handy how we can Define

we go it's so handy how we can Define
custom<03:11:16.080> types<03:11:17.080> it's<03:11:17.239> going<03:11:17.399> to<03:11:17.560> have<03:11:17.680> a

custom types it's going to have a

custom types it's going to have a
location<03:11:19.239> which<03:11:19.359> is<03:11:19.479> going<03:11:19.640> to<03:11:19.800> be<03:11:19.960> of<03:11:20.160> a<03:11:20.399> type

location which is going to be of a type

location which is going to be of a type
z.<03:11:21.960> string<03:11:22.960> let's<03:11:23.200> do<03:11:24.040> Min<03:11:24.319> of<03:11:24.479> two<03:11:25.040> Max<03:11:25.680> 100

z. string let's do Min of two Max 100

z. string let's do Min of two Max 100
and<03:11:26.680> then<03:11:26.920> tags<03:11:27.520> is<03:11:27.640> going<03:11:27.840> to<03:11:27.960> be<03:11:28.200> a<03:11:28.399> z.<03:11:29.600> string

and then tags is going to be a z. string

and then tags is going to be a z. string
there<03:11:30.760> we<03:11:30.960> go<03:11:31.800> so<03:11:32.000> now<03:11:32.200> we<03:11:32.319> have<03:11:32.520> this<03:11:32.720> custom

there we go so now we have this custom

there we go so now we have this custom
post<03:11:33.520> validation<03:11:34.520> and<03:11:34.640> we<03:11:34.760> can<03:11:34.960> use<03:11:35.200> it<03:11:35.760> right

post validation and we can use it right

post validation and we can use it right
here<03:11:36.800> three<03:11:37.120> times<03:11:37.760> where<03:11:38.040> mentioned<03:11:38.399> the

here three times where mentioned the

here three times where mentioned the
form<03:11:39.239> schema<03:11:40.239> and<03:11:40.359> then<03:11:40.479> you<03:11:40.600> have<03:11:40.720> to<03:11:40.920> import

form schema and then you have to import

form schema and then you have to import
it<03:11:41.680> from<03:11:42.080> lib<03:11:43.000> validation<03:11:44.000> there<03:11:44.160> we<03:11:44.359> go<03:11:45.319> so

it from lib validation there we go so

it from lib validation there we go so
now<03:11:45.880> our<03:11:46.160> post<03:11:46.560> knows<03:11:47.279> what<03:11:47.399> we're<03:11:47.600> trying<03:11:47.880> to

now our post knows what we're trying to

now our post knows what we're trying to
render<03:11:49.040> oh<03:11:49.319> I<03:11:49.439> just<03:11:49.600> noticed<03:11:50.080> here<03:11:50.239> we're

render oh I just noticed here we're

render oh I just noticed here we're
using<03:11:50.800> the<03:11:50.960> input<03:11:51.479> we<03:11:51.640> have<03:11:51.760> to<03:11:51.960> spread<03:11:52.600> the

using the input we have to spread the

using the input we have to spread the
field<03:11:53.520> so<03:11:53.680> we<03:11:53.840> have<03:11:53.960> to<03:11:54.160> say<03:11:54.760> do<03:11:55.080> do<03:11:55.359> dot<03:11:55.880> field

field so we have to say do do dot field

field so we have to say do do dot field
like<03:11:56.880> so<03:11:57.600> and<03:11:57.760> also<03:11:58.000> we<03:11:58.120> have<03:11:58.239> to<03:11:58.359> do<03:11:58.520> the<03:11:58.720> same

like so and also we have to do the same

like so and also we have to do the same
for<03:11:59.560> the<03:11:59.840> last<03:12:00.279> one<03:12:00.680> right<03:12:01.160> here<03:12:02.160> do<03:12:02.439> dot<03:12:02.720> dot

for the last one right here do dot dot

for the last one right here do dot dot
field<03:12:04.319> there<03:12:04.479> we<03:12:04.640> go<03:12:05.160> we're<03:12:05.359> getting<03:12:05.680> there<03:12:05.960> we

field there we go we're getting there we

field there we go we're getting there we
have<03:12:06.239> a<03:12:06.359> couple<03:12:06.680> more<03:12:06.920> errors<03:12:07.720> as<03:12:07.800> you<03:12:07.920> can<03:12:08.120> see

have a couple more errors as you can see

have a couple more errors as you can see
we<03:12:09.000> don't<03:12:09.239> need<03:12:09.439> this<03:12:09.600> form<03:12:09.920> schema<03:12:10.520> as<03:12:10.720> we

we don't need this form schema as we

we don't need this form schema as we
have<03:12:11.040> created<03:12:11.439> it<03:12:11.840> in<03:12:12.080> another<03:12:12.399> file

have created it in another file

have created it in another file
file<03:12:14.200> it's<03:12:14.399> also<03:12:14.640> complaining<03:12:15.200> about<03:12:15.680> what

file it's also complaining about what

file it's also complaining about what
we're<03:12:16.399> receiving<03:12:16.800> here<03:12:17.800> typescript<03:12:18.520> is<03:12:18.680> also

we're receiving here typescript is also

we're receiving here typescript is also
complaining<03:12:19.560> about<03:12:19.840> the<03:12:20.080> type<03:12:20.720> of<03:12:21.000> our<03:12:21.399> props

complaining about the type of our props

complaining about the type of our props
here<03:12:22.399> so<03:12:22.560> we<03:12:22.680> can<03:12:22.800> say<03:12:23.080> this<03:12:23.200> is<03:12:23.319> going<03:12:23.479> to<03:12:23.640> be

here so we can say this is going to be

here so we can say this is going to be
of<03:12:24.279> post<03:12:25.080> form<03:12:26.040> props<03:12:27.040> and<03:12:27.160> we<03:12:27.279> can<03:12:27.479> Define<03:12:27.760> it

of post form props and we can Define it

of post form props and we can Define it
right<03:12:28.239> here<03:12:28.960> by<03:12:29.080> saying<03:12:29.600> type<03:12:30.600> post<03:12:31.120> form

right here by saying type post form

right here by saying type post form
props<03:12:32.520> is<03:12:32.720> equal<03:12:33.479> to<03:12:34.479> where<03:12:34.640> we<03:12:34.800> have<03:12:34.960> a<03:12:35.160> post

props is equal to where we have a post

props is equal to where we have a post
question<03:12:36.279> mark<03:12:36.800> meaning<03:12:37.399> sometimes<03:12:37.600> it's

question mark meaning sometimes it's

question mark meaning sometimes it's
going<03:12:37.880> to<03:12:38.040> be<03:12:38.279> here<03:12:38.960> sometimes<03:12:39.239> it<03:12:39.359> will<03:12:39.600> not

going to be here sometimes it will not

going to be here sometimes it will not
and<03:12:40.479> this<03:12:40.600> is<03:12:40.760> of<03:12:40.920> a<03:12:41.120> type<03:12:41.479> models<03:12:42.359> do<03:12:43.120> document

and this is of a type models do document

and this is of a type models do document
and<03:12:44.279> this<03:12:44.479> models<03:12:45.040> is<03:12:45.160> going<03:12:45.239> to<03:12:45.359> be<03:12:45.520> coming

and this models is going to be coming

and this models is going to be coming
from

from

from
aight<03:12:48.439> we<03:12:48.600> also<03:12:48.800> are<03:12:48.960> never<03:12:49.239> using<03:12:49.520> a<03:12:49.640> form

aight we also are never using a form

aight we also are never using a form
description<03:12:51.760> and<03:12:52.080> we<03:12:52.200> can<03:12:52.399> now<03:12:52.920> structure

description and we can now structure

description and we can now structure
this<03:12:53.600> more<03:12:53.960> nicely<03:12:54.760> by<03:12:55.000> putting<03:12:55.279> it<03:12:55.680> in<03:12:55.840> a

this more nicely by putting it in a

this more nicely by putting it in a
single

single

single
line<03:12:58.479> there<03:12:58.720> we<03:12:58.920> go<03:12:59.560> so<03:12:59.800> now<03:13:00.000> we<03:13:00.160> have<03:13:00.279> our<03:13:00.479> form

line there we go so now we have our form

line there we go so now we have our form
which<03:13:01.920> we're<03:13:02.200> almost<03:13:02.640> there<03:13:03.319> we<03:13:03.439> can<03:13:03.680> actually

which we're almost there we can actually

which we're almost there we can actually
put<03:13:04.239> the<03:13:04.399> values<03:13:04.720> in<03:13:05.399> the<03:13:05.560> validation<03:13:06.120> is

put the values in the validation is

put the values in the validation is
working<03:13:06.760> as<03:13:06.840> you<03:13:06.960> can<03:13:07.120> see<03:13:07.880> we<03:13:08.000> can<03:13:08.200> upload

working as you can see we can upload

working as you can see we can upload
images<03:13:09.560> add<03:13:09.720> a<03:13:09.960> location<03:13:10.720> and<03:13:10.960> add<03:13:11.279> tags<03:13:12.239> the

images add a location and add tags the

images add a location and add tags the
last<03:13:12.840> thing<03:13:13.000> we<03:13:13.120> have<03:13:13.239> to<03:13:13.399> do<03:13:14.040> is<03:13:14.279> implement

last thing we have to do is implement

last thing we have to do is implement
the<03:13:15.040> logic<03:13:16.040> what<03:13:16.319> happens<03:13:17.120> once<03:13:17.359> we<03:13:17.560> click

the logic what happens once we click

the logic what happens once we click
submit<03:13:18.960> and<03:13:19.200> this<03:13:19.359> is<03:13:19.600> where<03:13:19.760> we're<03:13:19.920> going<03:13:20.040> to

submit and this is where we're going to

submit and this is where we're going to
connect<03:13:20.680> with<03:13:20.960> aite<03:13:21.960> and<03:13:22.239> create<03:13:22.479> a<03:13:22.640> new<03:13:22.920> post

connect with aite and create a new post

connect with aite and create a new post
based<03:13:24.080> off<03:13:24.279> of<03:13:24.479> these<03:13:25.040> values<03:13:26.040> within<03:13:26.600> here<03:13:27.239> we

based off of these values within here we

based off of these values within here we
can<03:13:27.560> now<03:13:27.840> use<03:13:28.239> this<03:13:28.439> new<03:13:29.080> hook<03:13:29.600> coming<03:13:29.880> from

can now use this new hook coming from

can now use this new hook coming from
react<03:13:30.640> query<03:13:31.600> so<03:13:31.800> let's<03:13:32.040> define<03:13:32.359> it<03:13:32.640> right

react query so let's define it right

react query so let's define it right
here<03:13:33.000> at<03:13:33.160> the<03:13:33.439> top<03:13:34.439> by<03:13:34.960> saying

here at the top by saying

here at the top by saying
const<03:13:37.840> mutate

const mutate

const mutate
async<03:13:40.399> which<03:13:40.560> we<03:13:40.680> can<03:13:40.880> call<03:13:41.239> create<03:13:41.760> post<03:13:42.960> and

async which we can call create post and

async which we can call create post and
is<03:13:44.399> pending<03:13:45.399> which<03:13:45.560> we<03:13:45.680> can<03:13:45.920> call<03:13:46.359> is<03:13:47.000> loading

is pending which we can call is loading

is pending which we can call is loading
create<03:13:50.319> that<03:13:50.520> is<03:13:50.760> equal<03:13:51.040> to<03:13:51.680> use<03:13:52.439> create<03:13:53.640> post

create that is equal to use create post

create that is equal to use create post
and<03:13:54.760> we<03:13:54.880> can<03:13:55.120> import<03:13:55.560> use<03:13:55.880> create<03:13:56.239> post<03:13:56.920> coming

and we can import use create post coming

and we can import use create post coming
from<03:13:57.760> queries<03:13:58.239> and

from queries and

from queries and
mutations<03:14:00.520> now<03:14:00.720> that<03:14:00.880> we<03:14:01.080> have<03:14:01.239> it<03:14:01.880> we<03:14:02.000> can

mutations now that we have it we can

mutations now that we have it we can
simply<03:14:02.560> call<03:14:03.000> this<03:14:03.200> create<03:14:03.640> post<03:14:04.359> right

simply call this create post right

simply call this create post right
within

within

within
onsubmit<03:14:06.840> the<03:14:07.000> way<03:14:07.200> in<03:14:07.359> which<03:14:07.479> we're<03:14:07.640> going<03:14:07.720> to

onsubmit the way in which we're going to

onsubmit the way in which we're going to
call<03:14:08.160> it<03:14:08.760> is<03:14:09.600> const<03:14:10.479> new<03:14:10.880> post<03:14:11.680> is<03:14:11.960> equal<03:14:12.279> to<03:14:12.560> to

call it is const new post is equal to to

call it is const new post is equal to to
await<03:14:14.279> create<03:14:14.760> post<03:14:15.680> to<03:14:16.000> which<03:14:16.600> we<03:14:16.880> pass<03:14:17.279> an

await create post to which we pass an

await create post to which we pass an
object<03:14:18.359> where<03:14:18.560> we<03:14:18.800> spread<03:14:19.560> all<03:14:20.000> values<03:14:20.960> of<03:14:21.120> a

object where we spread all values of a

object where we spread all values of a
post<03:14:22.359> and<03:14:22.479> then<03:14:22.760> pass<03:14:23.080> the<03:14:23.319> user<03:14:24.279> ID<03:14:25.200> of<03:14:25.399> a<03:14:25.640> type

post and then pass the user ID of a type

post and then pass the user ID of a type
user.

user.

user.
ID<03:14:29.279> of<03:14:29.560> a<03:14:29.760> user<03:14:30.319> that<03:14:30.520> has<03:14:30.720> created<03:14:31.080> the<03:14:31.359> post

ID of a user that has created the post

ID of a user that has created the post
once<03:14:32.640> again<03:14:33.439> how<03:14:33.600> are<03:14:33.720> we<03:14:33.840> going<03:14:34.000> to<03:14:34.160> get<03:14:34.359> the

once again how are we going to get the

once again how are we going to get the
user<03:14:34.840> that's<03:14:35.000> creating<03:14:35.359> the<03:14:35.560> post<03:14:36.359> well

user that's creating the post well

user that's creating the post well
that's<03:14:36.920> pretty<03:14:37.239> simple<03:14:38.040> we<03:14:38.200> have<03:14:38.399> created<03:14:38.880> our

that's pretty simple we have created our

that's pretty simple we have created our
context<03:14:40.279> so<03:14:40.560> now<03:14:40.960> at<03:14:41.080> the<03:14:41.319> top<03:14:41.800> we<03:14:41.880> can<03:14:42.000> say

context so now at the top we can say

context so now at the top we can say
cont

cont

cont
user<03:14:44.920> is<03:14:45.279> equal<03:14:45.640> to<03:14:46.680> use<03:14:47.760> user

user is equal to use user

user is equal to use user
context<03:14:50.279> and<03:14:50.439> we<03:14:50.560> can<03:14:50.760> import<03:14:51.200> this<03:14:51.359> from

context and we can import this from

context and we can import this from
Context<03:14:52.279> o

Context o

Context o
context<03:14:54.319> and<03:14:54.800> immediately<03:14:55.640> you<03:14:55.840> get<03:14:56.000> the<03:14:56.399> ID

context and immediately you get the ID

context and immediately you get the ID
so<03:14:57.640> now<03:14:57.880> we<03:14:58.000> have<03:14:58.200> this<03:14:58.439> new<03:14:58.920> post<03:14:59.920> and<03:15:00.160> what<03:15:00.279> do

so now we have this new post and what do

so now we have this new post and what do
we<03:15:00.479> want<03:15:00.560> to<03:15:00.720> do<03:15:00.920> once<03:15:01.120> we<03:15:01.279> create<03:15:01.680> it<03:15:02.680> well<03:15:03.040> we

we want to do once we create it well we

we want to do once we create it well we
can<03:15:03.279> say<03:15:03.640> if<03:15:04.399> there<03:15:04.600> is<03:15:04.880> no<03:15:05.479> new<03:15:05.920> Post<03:15:06.920> in<03:15:07.160> that

can say if there is no new Post in that

can say if there is no new Post in that
case<03:15:07.880> we<03:15:08.000> can<03:15:08.319> return<03:15:08.600> a

case we can return a

case we can return a
toast<03:15:10.359> that's<03:15:10.560> going<03:15:10.720> to<03:15:10.960> have<03:15:11.160> a<03:15:11.399> title<03:15:12.520> of

toast that's going to have a title of

toast that's going to have a title of
something<03:15:13.720> like

something like

something like
please<03:15:16.279> try<03:15:17.200> again<03:15:18.160> and<03:15:18.399> this<03:15:18.640> toast<03:15:19.319> is

please try again and this toast is

please try again and this toast is
coming<03:15:19.880> from<03:15:20.760> const<03:15:21.720> toast<03:15:22.720> is<03:15:22.960> equal<03:15:23.279> to<03:15:24.000> use

coming from const toast is equal to use

coming from const toast is equal to use
toast<03:15:25.319> coming<03:15:25.600> from<03:15:25.880> UI<03:15:26.760> use<03:15:27.640> toast<03:15:28.640> there<03:15:28.800> we

toast coming from UI use toast there we

toast coming from UI use toast there we
go<03:15:29.680> what<03:15:29.880> happens<03:15:30.199> if<03:15:30.359> we<03:15:30.560> successfully

go what happens if we successfully

go what happens if we successfully
created<03:15:31.520> a<03:15:31.680> new<03:15:32.000> post<03:15:33.000> well<03:15:33.160> in<03:15:33.399> that<03:15:33.640> case<03:15:33.960> we

created a new post well in that case we

created a new post well in that case we
simply<03:15:34.399> want<03:15:34.560> to<03:15:34.840> navigate<03:15:35.600> to<03:15:35.800> the<03:15:36.080> homepage

simply want to navigate to the homepage

simply want to navigate to the homepage
so<03:15:37.319> to<03:15:37.479> be<03:15:37.600> able<03:15:37.800> to<03:15:38.000> navigate<03:15:38.680> we<03:15:38.800> have<03:15:38.920> to

so to be able to navigate we have to

so to be able to navigate we have to
import<03:15:39.600> use<03:15:40.000> navigate<03:15:40.920> from<03:15:41.439> react<03:15:42.000> router

import use navigate from react router

import use navigate from react router
Dom<03:15:43.439> let's<03:15:43.640> do<03:15:43.800> it<03:15:44.000> right<03:15:44.399> here<03:15:45.760> import<03:15:46.760> use

navigate from react router Dom and then

navigate from react router Dom and then
we<03:15:55.439> can<03:15:55.680> simply<03:15:56.080> Define<03:15:56.359> it<03:15:56.520> as<03:15:56.640> a<03:15:56.800> hook<03:15:57.760> cons

we can simply Define it as a hook cons

we can simply Define it as a hook cons
navigate<03:15:59.319> is<03:15:59.600> equal<03:15:59.920> to<03:16:00.720> use<03:16:01.160> navigate<03:16:02.040> and

navigate is equal to use navigate and

navigate is equal to use navigate and
then<03:16:02.800> we<03:16:02.960> call<03:16:03.239> it<03:16:03.800> right<03:16:04.120> here<03:16:05.560> navigate<03:16:06.560> to

then we call it right here navigate to

then we call it right here navigate to
forward<03:16:07.880> slash<03:16:08.880> make<03:16:09.040> sure<03:16:09.239> to<03:16:09.479> make<03:16:09.760> the

forward slash make sure to make the

forward slash make sure to make the
onsubmit<03:16:10.920> an<03:16:11.239> async<03:16:12.000> function

onsubmit an async function

onsubmit an async function
because<03:16:13.199> we're<03:16:13.399> using<03:16:13.720> the<03:16:13.880> await<03:16:14.359> action<03:16:14.960> of

because we're using the await action of

because we're using the await action of
create<03:16:15.880> post<03:16:16.880> so<03:16:17.120> with<03:16:17.319> all<03:16:17.520> of<03:16:17.800> this<03:16:18.640> I'm

create post so with all of this I'm

create post so with all of this I'm
hoping<03:16:19.560> we're<03:16:19.840> successfully<03:16:20.560> creating<03:16:20.920> our

hoping we're successfully creating our

hoping we're successfully creating our
post<03:16:22.319> if<03:16:22.479> we<03:16:22.600> get<03:16:22.800> redirected<03:16:23.640> to<03:16:23.840> the

post if we get redirected to the

post if we get redirected to the
homepage<03:16:24.920> it<03:16:25.040> means<03:16:25.520> we're<03:16:25.840> good<03:16:26.560> so<03:16:26.760> let's

homepage it means we're good so let's

homepage it means we're good so let's
expand<03:16:27.479> it<03:16:27.880> to<03:16:28.040> see<03:16:28.319> it<03:16:28.439> in<03:16:28.640> full<03:16:29.000> glory<03:16:29.960> and

expand it to see it in full glory and

expand it to see it in full glory and
let's<03:16:30.439> create<03:16:31.000> our<03:16:31.239> first<03:16:31.840> post<03:16:32.840> I'm<03:16:32.960> going<03:16:33.040> to

let's create our first post I'm going to

let's create our first post I'm going to
add<03:16:33.760> our<03:16:33.960> photo<03:16:34.439> right<03:16:34.680> here<03:16:35.640> I'm<03:16:35.760> going<03:16:35.880> to

add our photo right here I'm going to

add our photo right here I'm going to
say<03:16:36.439> something<03:16:36.840> like<03:16:37.680> nice<03:16:38.720> Greenery<03:16:39.720> on<03:16:40.160> a

say something like nice Greenery on a

say something like nice Greenery on a
nice<03:16:41.279> River

nice River

nice River
not<03:16:43.439> as<03:16:43.720> thoughtful<03:16:44.279> as<03:16:44.479> Chad<03:16:44.800> jpt<03:16:45.600> but<03:16:45.880> what

not as thoughtful as Chad jpt but what

not as thoughtful as Chad jpt but what
can<03:16:46.199> you<03:16:46.359> do<03:16:47.319> and<03:16:47.520> we<03:16:47.640> have<03:16:47.760> a<03:16:47.920> location<03:16:48.760> I'm

can you do and we have a location I'm

can you do and we have a location I'm
not<03:16:49.160> sure<03:16:49.439> where<03:16:49.720> this<03:16:49.960> is<03:16:50.880> let's<03:16:51.120> do

not sure where this is let's do

not sure where this is let's do
something<03:16:51.960> like<03:16:53.080> River<03:16:54.080> and<03:16:54.319> we<03:16:54.439> can<03:16:54.720> add

something like River and we can add

something like River and we can add
something<03:16:55.600> like

something like

something like
nature<03:16:58.359> finally<03:16:58.880> let's<03:16:59.160> click

nature finally let's click

nature finally let's click
submit<03:17:01.880> we<03:17:02.880> got<03:17:03.160> redirected<03:17:04.040> but<03:17:04.199> it<03:17:04.359> does<03:17:04.600> say

submit we got redirected but it does say

submit we got redirected but it does say
please<03:17:05.279> try<03:17:05.720> again<03:17:06.439> so<03:17:06.680> I'm<03:17:06.880> guessing<03:17:07.439> it

please try again so I'm guessing it

please try again so I'm guessing it
broke<03:17:08.439> somewhere<03:17:09.439> let's<03:17:09.720> open<03:17:09.960> up<03:17:10.160> the

broke somewhere let's open up the

broke somewhere let's open up the
inspect<03:17:10.880> element<03:17:11.760> and<03:17:11.920> then<03:17:12.319> let's<03:17:12.560> go<03:17:12.800> to<03:17:12.960> our

inspect element and then let's go to our

inspect element and then let's go to our
console<03:17:14.720> and<03:17:14.920> it<03:17:15.000> says<03:17:15.279> the<03:17:15.399> current<03:17:15.720> user<03:17:16.040> is

console and it says the current user is

console and it says the current user is
not<03:17:16.600> authorized<03:17:17.199> to<03:17:17.439> perform<03:17:17.840> the<03:17:18.040> requested

not authorized to perform the requested

not authorized to perform the requested
action<03:17:20.680> okay<03:17:21.319> that's<03:17:22.000> interesting<03:17:23.000> that

action okay that's interesting that

action okay that's interesting that
could<03:17:23.600> be<03:17:24.600> because<03:17:25.000> we<03:17:25.160> haven't<03:17:25.479> set<03:17:25.720> up<03:17:25.960> the

could be because we haven't set up the

could be because we haven't set up the
permissions<03:17:27.080> for<03:17:27.319> us<03:17:27.520> to<03:17:27.840> upload<03:17:28.399> new<03:17:28.960> items

permissions for us to upload new items

permissions for us to upload new items
so<03:17:30.160> let's<03:17:30.399> go<03:17:30.520> to<03:17:30.800> app<03:17:31.199> right<03:17:32.199> let's<03:17:32.439> go<03:17:32.600> to

so let's go to app right let's go to

so let's go to app right let's go to
storage

storage

storage
media<03:17:36.479> and<03:17:36.640> then<03:17:36.960> here

media and then here

media and then here
settings<03:17:39.040> and<03:17:39.199> we<03:17:39.319> can<03:17:39.560> add<03:17:39.760> a<03:17:39.920> new<03:17:40.160> role<03:17:40.880> for

settings and we can add a new role for

settings and we can add a new role for
any<03:17:42.199> to<03:17:42.399> create<03:17:42.960> read<03:17:43.520> update<03:17:44.000> and<03:17:44.199> delete

any to create read update and delete

any to create read update and delete
different<03:17:45.640> assets<03:17:46.319> from<03:17:46.479> our<03:17:46.760> storage<03:17:47.760> just

different assets from our storage just

different assets from our storage just
to<03:17:48.040> be<03:17:48.199> sure<03:17:48.680> let's<03:17:48.880> go<03:17:49.000> to<03:17:49.479> database

to be sure let's go to database

to be sure let's go to database
snapgram<03:17:52.520> post<03:17:53.520> and<03:17:53.920> it's<03:17:54.160> good<03:17:54.520> it<03:17:54.680> wasn't

snapgram post and it's good it wasn't

snapgram post and it's good it wasn't
actually<03:17:55.439> created<03:17:56.120> so<03:17:56.359> that's<03:17:56.560> what<03:17:56.760> matters

actually created so that's what matters

actually created so that's what matters
so<03:17:57.960> now<03:17:58.600> let's<03:17:58.800> give<03:17:58.920> it<03:17:59.120> one<03:17:59.319> more<03:17:59.680> shot<03:18:00.680> I'm

so now let's give it one more shot I'm

so now let's give it one more shot I'm
going<03:18:00.880> to<03:18:01.040> do<03:18:01.359> something<03:18:01.800> like<03:18:02.399> River<03:18:03.399> and

going to do something like River and

going to do something like River and
nature<03:18:05.239> I'm<03:18:05.359> going<03:18:05.439> to<03:18:05.680> upload<03:18:06.080> the<03:18:06.239> post<03:18:06.600> one

nature I'm going to upload the post one

nature I'm going to upload the post one
more

more

more
time<03:18:09.120> I'm<03:18:09.239> going<03:18:09.359> to<03:18:09.560> add<03:18:09.760> a<03:18:09.920> location

time I'm going to add a location

time I'm going to add a location
something<03:18:11.160> like<03:18:11.279> a<03:18:11.479> river<03:18:12.479> and<03:18:12.600> I'm<03:18:12.720> going<03:18:12.840> to

something like a river and I'm going to

something like a river and I'm going to
say<03:18:13.199> nature<03:18:14.120> right<03:18:14.399> here<03:18:15.000> as<03:18:15.239> well<03:18:16.239> and<03:18:16.520> I'm

say nature right here as well and I'm

say nature right here as well and I'm
going<03:18:16.760> to<03:18:16.960> click

going to click

going to click
submit<03:18:20.399> we<03:18:20.640> indeed<03:18:21.120> get<03:18:21.760> redirected<03:18:22.760> this

submit we indeed get redirected this

submit we indeed get redirected this
time<03:18:23.600> without<03:18:24.160> any<03:18:24.920> errors<03:18:25.920> but<03:18:26.160> we<03:18:26.319> still

time without any errors but we still

time without any errors but we still
cannot<03:18:26.960> know<03:18:27.319> whether<03:18:27.520> the<03:18:27.680> post<03:18:27.960> was

cannot know whether the post was

cannot know whether the post was
actually<03:18:28.640> created<03:18:29.640> or<03:18:30.000> can<03:18:30.279> we<03:18:31.080> if<03:18:31.239> we<03:18:31.399> go<03:18:31.560> to

actually created or can we if we go to

actually created or can we if we go to
aite<03:18:32.960> and<03:18:33.199> go<03:18:33.399> to<03:18:33.920> posts<03:18:34.920> and

aite and go to posts and

aite and go to posts and
reload<03:18:37.199> we<03:18:37.319> can<03:18:37.520> see<03:18:38.040> our<03:18:38.359> first<03:18:38.800> post<03:18:39.399> appear

reload we can see our first post appear

reload we can see our first post appear
right<03:18:40.920> here<03:18:41.560> it<03:18:41.720> was<03:18:41.880> created<03:18:42.080> created<03:18:42.399> on

right here it was created created on

right here it was created created on
this<03:18:42.800> date<03:18:43.800> and<03:18:44.080> it<03:18:44.319> has<03:18:44.880> this<03:18:45.279> data<03:18:46.080> liked

this date and it has this data liked

this date and it has this data liked
posts<03:18:47.840> name<03:18:48.760> username<03:18:49.760> account<03:18:50.160> ID<03:18:50.920> email<03:18:51.600> bio

posts name username account ID email bio

posts name username account ID email bio
image<03:18:52.439> ID<03:18:52.920> image<03:18:53.199> URL<03:18:53.840> save<03:18:54.439> everything<03:18:54.920> is

image ID image URL save everything is

image ID image URL save everything is
here<03:18:56.479> so<03:18:56.680> we<03:18:56.800> know<03:18:57.040> that<03:18:57.199> the<03:18:57.399> post<03:18:57.800> was

here so we know that the post was

here so we know that the post was
created<03:18:59.120> in<03:18:59.279> the<03:18:59.720> database<03:19:00.720> but<03:19:01.080> was<03:19:01.359> the

created in the database but was the

created in the database but was the
image<03:19:02.239> created<03:19:02.680> in<03:19:03.120> storage<03:19:04.120> let's<03:19:04.359> check

image created in storage let's check

image created in storage let's check
that<03:19:04.800> out<03:19:05.600> under<03:19:05.880> media<03:19:06.760> we<03:19:06.920> have<03:19:07.080> our

that out under media we have our

that out under media we have our
preview.png<03:19:08.319> and<03:19:09.199> we<03:19:09.319> can<03:19:09.479> see<03:19:10.080> this<03:19:10.319> image<03:19:10.880> on

preview.png and we can see this image on

preview.png and we can see this image on
aight<03:19:11.760> server

aight server

aight server
this<03:19:13.640> is<03:19:14.199> amazing<03:19:15.199> so<03:19:15.520> now<03:19:16.040> the<03:19:16.239> last<03:19:16.479> thing

this is amazing so now the last thing

this is amazing so now the last thing
we'll<03:19:16.840> have<03:19:16.960> to<03:19:17.120> do<03:19:18.040> is<03:19:18.399> implement<03:19:19.000> the

we'll have to do is implement the

we'll have to do is implement the
homepage<03:19:20.239> and<03:19:20.479> fetch<03:19:21.120> this<03:19:21.359> phenomenal<03:19:22.040> post

homepage and fetch this phenomenal post

homepage and fetch this phenomenal post
we've<03:19:23.080> created<03:19:24.080> so<03:19:24.680> let's<03:19:24.920> do<03:19:25.160> that<03:19:25.439> next<03:19:26.279> to

we've created so let's do that next to

we've created so let's do that next to
create<03:19:26.920> a<03:19:27.080> new<03:19:27.359> post<03:19:27.920> we<03:19:28.120> first<03:19:28.399> have<03:19:28.520> to

create a new post we first have to

create a new post we first have to
create<03:19:28.920> a<03:19:29.120> function<03:19:29.680> that's<03:19:29.880> going<03:19:30.080> to<03:19:30.319> do<03:19:30.560> so

create a function that's going to do so

create a function that's going to do so
in<03:19:31.279> aite<03:19:32.040> before<03:19:32.359> we<03:19:32.479> can<03:19:32.640> call<03:19:32.920> it<03:19:33.760> so<03:19:34.319> let's

in aite before we can call it so let's

in aite before we can call it so let's
go<03:19:34.680> ahead<03:19:35.160> and<03:19:35.399> let's<03:19:35.640> go<03:19:35.960> to<03:19:36.439> our<03:19:36.880> source<03:19:37.960> lib

go ahead and let's go to our source lib

go ahead and let's go to our source lib
aight<03:19:40.160> API<03:19:41.160> and<03:19:41.439> right<03:19:41.600> here<03:19:42.080> below<03:19:42.520> sign<03:19:42.880> out

aight API and right here below sign out

aight API and right here below sign out
account<03:19:44.359> let's<03:19:45.120> export<03:19:46.399> async<03:19:47.399> function

account let's export async function

account let's export async function
create<03:19:49.399> post<03:19:50.359> that's<03:19:50.560> going<03:19:50.760> to<03:19:51.000> receive<03:19:51.479> a

create post that's going to receive a

create post that's going to receive a
post<03:19:52.359> of<03:19:52.520> a<03:19:52.760> type<03:19:53.479> I<03:19:54.479> as<03:19:54.640> an<03:19:54.840> interface<03:19:55.840> new

post of a type I as an interface new

post of a type I as an interface new
post<03:19:57.160> coming<03:19:57.439> from<03:19:57.720> add<03:19:58.040> for/<03:19:59.080> types<03:20:00.080> make

post coming from add for/ types make

post coming from add for/ types make
sure<03:20:00.399> to<03:20:00.600> import<03:20:00.960> it<03:20:01.920> and<03:20:02.120> then<03:20:02.520> we<03:20:02.640> can<03:20:02.880> open

sure to import it and then we can open

sure to import it and then we can open
up<03:20:03.359> a<03:20:03.560> new<03:20:03.920> try<03:20:04.319> and<03:20:04.680> catch<03:20:05.160> block<03:20:06.120> you<03:20:06.199> know

up a new try and catch block you know

up a new try and catch block you know
the<03:20:06.520> drill<03:20:07.199> right<03:20:08.199> in<03:20:08.399> the<03:20:08.640> catch<03:20:09.120> we<03:20:09.239> can

the drill right in the catch we can

the drill right in the catch we can
simply<03:20:09.840> conso<03:20:10.319> log<03:20:10.600> the<03:20:10.720> error<03:20:11.720> but<03:20:12.160> in<03:20:12.399> the

simply conso log the error but in the

simply conso log the error but in the
try<03:20:13.040> is<03:20:13.239> where<03:20:13.439> the<03:20:13.640> magic<03:20:14.160> happens<03:20:15.160> here

try is where the magic happens here

try is where the magic happens here
first<03:20:16.600> we<03:20:16.720> need<03:20:16.920> to<03:20:17.239> upload<03:20:17.800> our<03:20:18.120> file<03:20:18.640> to

first we need to upload our file to

first we need to upload our file to
aight<03:20:19.479> storage<03:20:20.359> let's<03:20:20.600> write<03:20:20.800> that<03:20:21.000> down

aight storage let's write that down

aight storage let's write that down
upload<03:20:22.239> image<03:20:22.720> to<03:20:23.319> storage<03:20:24.319> so<03:20:24.479> we<03:20:24.560> can<03:20:24.680> say

upload image to storage so we can say

upload image to storage so we can say
const

const

const
uploaded<03:20:27.439> file<03:20:28.439> is<03:20:28.720> equal<03:20:29.040> to<03:20:29.479> a<03:20:30.080> wait<03:20:31.239> upload

uploaded file is equal to a wait upload

uploaded file is equal to a wait upload
file<03:20:33.080> where<03:20:33.279> we<03:20:33.560> pass<03:20:33.920> the<03:20:34.199> post.<03:20:35.600> file0

file where we pass the post. file0

file where we pass the post. file0
meaning<03:20:36.920> the<03:20:37.080> first

meaning the first

meaning the first
post<03:20:39.000> now<03:20:39.439> this<03:20:39.720> upload<03:20:40.160> file<03:20:40.520> function<03:20:41.279> is

post now this upload file function is

post now this upload file function is
another<03:20:42.040> function<03:20:42.359> we'll<03:20:42.640> create<03:20:43.520> let's<03:20:43.720> do

another function we'll create let's do

another function we'll create let's do
it<03:20:44.040> right<03:20:44.359> below<03:20:45.359> export<03:20:46.279> a<03:20:46.600> sync<03:20:47.720> function

it right below export a sync function

it right below export a sync function
upload<03:20:49.640> file<03:20:50.640> that<03:20:50.840> accepts<03:20:51.279> a<03:20:51.520> file<03:20:52.000> of<03:20:52.160> a

upload file that accepts a file of a

upload file that accepts a file of a
type<03:20:53.080> file<03:20:54.080> it's<03:20:54.279> going<03:20:54.439> to<03:20:54.680> have<03:20:54.840> a<03:20:55.040> try<03:20:55.399> and

type file it's going to have a try and

type file it's going to have a try and
catch<03:20:56.520> block<03:20:57.520> within<03:20:57.880> the<03:20:58.040> catch<03:20:58.399> we're<03:20:58.520> going

catch block within the catch we're going

catch block within the catch we're going
to<03:20:58.800> consol<03:20:59.279> log<03:20:59.680> the<03:21:00.080> error<03:21:01.080> but<03:21:01.359> within<03:21:01.640> the

to consol log the error but within the

to consol log the error but within the
catch<03:21:02.800> we<03:21:02.920> can<03:21:03.040> say<03:21:03.399> con<03:21:04.000> uploaded<03:21:05.120> file<03:21:06.120> is

catch we can say con uploaded file is

catch we can say con uploaded file is
equal<03:21:06.920> to

equal to

equal to
await

await

await
storage.<03:21:11.160> create<03:21:12.040> file<03:21:12.800> so<03:21:13.040> the<03:21:13.199> first<03:21:13.520> time

storage. create file so the first time

storage. create file so the first time
in<03:21:13.960> this<03:21:14.160> application<03:21:14.720> we're<03:21:15.000> diving<03:21:15.359> into

in this application we're diving into

in this application we're diving into
the<03:21:15.880> storage<03:21:16.840> functionality<03:21:17.840> remember<03:21:18.720> we

the storage functionality remember we

the storage functionality remember we
had<03:21:19.319> account<03:21:20.399> databases<03:21:21.479> avatars<03:21:22.479> but<03:21:22.680> now

had account databases avatars but now

had account databases avatars but now
also

also

also
storage<03:21:25.520> this<03:21:25.640> is<03:21:25.800> used<03:21:26.040> for<03:21:26.279> saving<03:21:27.239> media<03:21:28.239> we

storage this is used for saving media we

storage this is used for saving media we
want<03:21:28.479> to<03:21:28.720> pass<03:21:28.960> a<03:21:29.080> couple<03:21:29.319> of<03:21:29.520> things<03:21:30.120> we<03:21:30.319> first

want to pass a couple of things we first

want to pass a couple of things we first
want<03:21:30.680> to<03:21:30.880> pass<03:21:31.120> the<03:21:31.279> storage<03:21:31.720> ID<03:21:32.439> by<03:21:32.560> saying

want to pass the storage ID by saying

want to pass the storage ID by saying
upright<03:21:33.560> config<03:21:34.479> do<03:21:34.800> storage<03:21:35.319> ID<03:21:36.319> then<03:21:36.600> we

upright config do storage ID then we

upright config do storage ID then we
want<03:21:36.840> to<03:21:37.000> make<03:21:37.160> a<03:21:37.359> unique<03:21:37.880> ID<03:21:38.520> by<03:21:38.640> saying<03:21:39.080> id.

want to make a unique ID by saying id.

want to make a unique ID by saying id.
unique<03:21:41.359> and<03:21:41.479> then<03:21:41.680> want<03:21:41.840> want<03:21:41.920> to<03:21:42.040> pass<03:21:42.279> the

unique and then want want to pass the

unique and then want want to pass the
file<03:21:43.040> which<03:21:43.199> we<03:21:43.439> actually<03:21:43.760> want<03:21:43.960> to<03:21:44.640> upload

file which we actually want to upload

file which we actually want to upload
finally<03:21:46.319> we<03:21:46.439> want<03:21:46.600> to<03:21:46.920> return<03:21:47.479> the<03:21:47.920> uploaded

finally we want to return the uploaded

finally we want to return the uploaded
file<03:21:49.920> so<03:21:50.160> now<03:21:50.720> from<03:21:50.920> the<03:21:51.080> function<03:21:51.520> above<03:21:52.239> we

file so now from the function above we

file so now from the function above we
get<03:21:52.640> this<03:21:52.840> file<03:21:53.199> back<03:21:53.640> and<03:21:53.800> we<03:21:53.880> are<03:21:54.080> ready<03:21:54.439> to

get this file back and we are ready to

get this file back and we are ready to
attach<03:21:55.239> it<03:21:55.640> to<03:21:55.960> a<03:21:56.279> post<03:21:56.960> that<03:21:57.080> we're<03:21:57.319> about<03:21:57.520> to

attach it to a post that we're about to

attach it to a post that we're about to
create<03:21:58.120> in<03:21:58.239> a<03:21:58.520> database<03:21:59.520> just<03:21:59.680> to<03:21:59.840> be<03:21:59.960> sure<03:22:00.359> we

create in a database just to be sure we

create in a database just to be sure we
can<03:22:00.600> do<03:22:00.800> one<03:22:01.040> check<03:22:01.720> if<03:22:02.000> there<03:22:02.120> is<03:22:02.359> no<03:22:02.880> uploaded

can do one check if there is no uploaded

can do one check if there is no uploaded
file<03:22:04.080> throw<03:22:04.439> an<03:22:04.800> error<03:22:05.800> else<03:22:06.279> we<03:22:06.399> need<03:22:06.560> to<03:22:06.920> get

file throw an error else we need to get

file throw an error else we need to get
the<03:22:07.920> file<03:22:08.439> URL<03:22:09.439> so<03:22:09.600> we<03:22:09.720> can<03:22:09.840> say<03:22:10.120> const<03:22:10.640> file

the file URL so we can say const file

the file URL so we can say const file
URL<03:22:11.960> is<03:22:12.199> equal<03:22:12.520> to<03:22:13.520> get<03:22:14.600> file

URL is equal to get file

URL is equal to get file
preview<03:22:18.080> to<03:22:18.319> which<03:22:18.479> we<03:22:18.600> have<03:22:18.720> to<03:22:18.960> pass<03:22:19.239> the

preview to which we have to pass the

preview to which we have to pass the
uploaded

uploaded

uploaded
file.<03:22:21.640> dollar<03:22:22.080> sign

file. dollar sign

file. dollar sign
ID<03:22:24.040> and<03:22:24.279> this<03:22:24.479> get<03:22:24.800> file<03:22:25.080> preview<03:22:25.840> is<03:22:26.120> another

ID and this get file preview is another

ID and this get file preview is another
function<03:22:26.920> we'll<03:22:27.239> create<03:22:27.960> because<03:22:28.199> we'll<03:22:28.359> want

function we'll create because we'll want

function we'll create because we'll want
to<03:22:28.680> reuse<03:22:29.120> it<03:22:29.319> multiple<03:22:29.840> times<03:22:30.560> across<03:22:30.920> this

to reuse it multiple times across this

to reuse it multiple times across this
application<03:22:32.359> so<03:22:32.560> let's<03:22:32.760> create<03:22:33.000> a<03:22:33.120> new<03:22:33.439> export

application so let's create a new export

application so let's create a new export
async<03:22:35.000> function<03:22:36.000> get<03:22:36.520> file<03:22:37.199> preview<03:22:38.199> it's

async function get file preview it's

async function get file preview it's
going<03:22:38.560> to<03:22:38.680> get<03:22:38.920> one<03:22:39.160> program<03:22:39.800> of<03:22:40.120> file<03:22:40.520> ID<03:22:41.199> of<03:22:41.319> a

going to get one program of file ID of a

going to get one program of file ID of a
type<03:22:41.880> string<03:22:42.199> into<03:22:42.600> it<03:22:43.600> it's<03:22:43.800> going<03:22:43.960> to<03:22:44.120> have<03:22:44.279> a

type string into it it's going to have a

type string into it it's going to have a
try<03:22:44.840> and<03:22:45.319> catch<03:22:46.279> where<03:22:46.439> we<03:22:46.640> consel<03:22:47.120> Lo<03:22:47.359> the

try and catch where we consel Lo the

try and catch where we consel Lo the
error<03:22:48.120> in<03:22:48.279> the

error in the

error in the
catch<03:22:50.040> and<03:22:50.239> in<03:22:50.399> the<03:22:50.560> try<03:22:51.520> we<03:22:51.640> need<03:22:51.800> to<03:22:52.560> get<03:22:52.840> the

catch and in the try we need to get the

catch and in the try we need to get the
preview<03:22:53.720> so<03:22:53.880> we<03:22:54.000> can<03:22:54.120> say<03:22:54.399> const<03:22:54.880> file<03:22:55.279> URL<03:22:56.279> is

preview so we can say const file URL is

preview so we can say const file URL is
equal<03:22:56.800> to

equal to

equal to
storage.<03:22:59.520> getet<03:23:00.239> file

storage. getet file

storage. getet file
preview<03:23:02.560> here<03:23:02.960> we<03:23:03.120> first<03:23:03.399> need<03:23:03.560> to<03:23:03.840> pass<03:23:04.239> the

preview here we first need to pass the

preview here we first need to pass the
app<03:23:06.520> config<03:23:07.520> do<03:23:07.880> storage<03:23:08.640> ID<03:23:09.640> we<03:23:09.840> pass<03:23:10.160> the

app config do storage ID we pass the

app config do storage ID we pass the
file<03:23:10.680> ID<03:23:10.960> we<03:23:11.080> want<03:23:11.199> to<03:23:11.399> get

file ID we want to get

file ID we want to get
and<03:23:12.560> then<03:23:12.720> we<03:23:12.880> specify<03:23:13.399> the<03:23:13.600> width<03:23:14.199> and<03:23:14.359> the

and then we specify the width and the

and then we specify the width and the
height<03:23:15.239> which<03:23:15.399> in<03:23:15.560> this<03:23:15.760> case<03:23:16.000> I'm<03:23:16.120> going<03:23:16.239> to

height which in this case I'm going to

height which in this case I'm going to
set<03:23:16.560> to

set to

set to
2,000<03:23:18.399> then<03:23:18.640> we<03:23:18.840> specify<03:23:19.279> the<03:23:19.439> gravity

2,000 then we specify the gravity

2,000 then we specify the gravity
meaning<03:23:20.560> where<03:23:20.720> is<03:23:20.840> it<03:23:21.000> going<03:23:21.160> to<03:23:21.319> show<03:23:21.960> in

meaning where is it going to show in

meaning where is it going to show in
this<03:23:22.319> case<03:23:22.479> we're<03:23:22.600> going<03:23:22.720> to<03:23:22.840> say<03:23:23.160> top<03:23:24.160> and

this case we're going to say top and

this case we're going to say top and
finally<03:23:24.880> you<03:23:25.160> specify<03:23:25.960> the<03:23:26.160> quality<03:23:27.000> in<03:23:27.160> this

finally you specify the quality in this

finally you specify the quality in this
case<03:23:27.479> we're<03:23:27.600> going<03:23:27.760> to<03:23:27.880> get<03:23:28.279> 100<03:23:28.960> the<03:23:29.160> top

case we're going to get 100 the top

case we're going to get 100 the top
quality<03:23:31.239> finally<03:23:31.880> once<03:23:32.080> we<03:23:32.239> get<03:23:32.399> it<03:23:33.359> we<03:23:33.479> can

quality finally once we get it we can

quality finally once we get it we can
simply<03:23:34.520> return<03:23:35.160> a<03:23:35.439> file

simply return a file

simply return a file
URL<03:23:37.640> now<03:23:38.040> we<03:23:38.160> can<03:23:38.359> go<03:23:38.560> back<03:23:38.720> to<03:23:38.880> the<03:23:39.040> function

URL now we can go back to the function

URL now we can go back to the function
above<03:23:40.600> we<03:23:40.760> now<03:23:41.120> have<03:23:41.439> our<03:23:41.680> our<03:23:41.840> file<03:23:42.560> URL<03:23:43.560> and

above we now have our our file URL and

above we now have our our file URL and
just<03:23:44.120> to<03:23:44.279> be<03:23:44.399> sure<03:23:44.840> we<03:23:44.960> can<03:23:45.120> add<03:23:45.279> an<03:23:45.479> if<03:23:45.680> check

just to be sure we can add an if check

just to be sure we can add an if check
if<03:23:46.520> no<03:23:46.800> file<03:23:47.080> URL<03:23:47.880> throw<03:23:48.160> a<03:23:48.319> new<03:23:48.920> error<03:23:49.920> but

if no file URL throw a new error but

if no file URL throw a new error but
also<03:23:51.000> not<03:23:51.199> only<03:23:51.439> do<03:23:51.560> we<03:23:51.680> want<03:23:51.800> to<03:23:51.920> throw<03:23:52.160> an

also not only do we want to throw an

also not only do we want to throw an
error<03:23:53.279> we<03:23:53.520> also<03:23:53.800> want<03:23:53.960> to<03:23:54.520> delete<03:23:55.120> a<03:23:55.399> file

error we also want to delete a file

error we also want to delete a file
because<03:23:56.520> something<03:23:56.920> was<03:23:57.160> corrupted

because something was corrupted

because something was corrupted
something<03:23:58.399> wasn't<03:23:58.840> right<03:23:59.080> with<03:23:59.199> it<03:24:00.160> so<03:24:00.359> let's

something wasn't right with it so let's

something wasn't right with it so let's
create<03:24:01.040> a<03:24:01.239> new

create a new

create a new
function<03:24:03.239> delete<03:24:04.399> file<03:24:05.399> to<03:24:05.840> which<03:24:06.239> we're

function delete file to which we're

function delete file to which we're
going<03:24:06.479> to<03:24:06.760> pass<03:24:07.199> the<03:24:07.640> uploaded

file do dollar sign

file do dollar sign
ID<03:24:15.960> there<03:24:16.120> we<03:24:16.319> go<03:24:16.600> so<03:24:16.760> we're<03:24:17.000> thinking<03:24:17.279> up

ID there we go so we're thinking up

ID there we go so we're thinking up
front<03:24:18.000> if<03:24:18.160> something<03:24:18.479> was<03:24:18.680> corrupted<03:24:19.439> we<03:24:19.640> want

front if something was corrupted we want

front if something was corrupted we want
to<03:24:19.920> delete<03:24:20.359> the<03:24:20.520> previous<03:24:21.239> file<03:24:22.239> and<03:24:22.560> let's

to delete the previous file and let's

to delete the previous file and let's
create<03:24:23.120> this<03:24:23.520> function<03:24:24.520> export<03:24:25.120> async

create this function export async

create this function export async
function<03:24:27.199> delete

function delete

function delete
file<03:24:30.880> which<03:24:31.120> once<03:24:31.399> again<03:24:31.840> accepts<03:24:32.199> a<03:24:32.399> file<03:24:32.760> ID

file which once again accepts a file ID

file which once again accepts a file ID
of<03:24:34.000> a<03:24:34.160> type<03:24:34.439> string<03:24:35.399> of<03:24:35.640> a<03:24:35.840> file<03:24:36.080> we<03:24:36.199> want<03:24:36.319> to

of a type string of a file we want to

of a type string of a file we want to
create<03:24:38.760> it's<03:24:38.920> going<03:24:39.040> to<03:24:39.160> be<03:24:39.279> a<03:24:39.439> try<03:24:39.680> and<03:24:39.960> catch

create it's going to be a try and catch

create it's going to be a try and catch
block<03:24:41.120> with<03:24:41.600> the<03:24:41.760> Consol<03:24:42.199> log<03:24:42.439> of<03:24:42.560> the<03:24:42.680> error

block with the Consol log of the error

block with the Consol log of the error
right<03:24:43.479> here

below error and then here we can say

below error and then here we can say
await<03:24:53.160> storage.<03:24:54.160> delete<03:24:54.960> file<03:24:55.960> to<03:24:56.199> which<03:24:56.359> we

await storage. delete file to which we

await storage. delete file to which we
pass<03:24:56.840> the<03:24:57.000> upright<03:24:58.199> config<03:24:59.199> storage<03:24:59.640> ID<03:25:00.439> and

pass the upright config storage ID and

pass the upright config storage ID and
the<03:25:00.760> file<03:25:01.040> ID<03:25:01.439> of<03:25:01.600> the<03:25:01.760> file<03:25:01.960> we<03:25:02.080> want<03:25:02.199> to

the file ID of the file we want to

the file ID of the file we want to
delete<03:25:03.439> and<03:25:03.560> we<03:25:03.680> can<03:25:04.000> return<03:25:04.520> an<03:25:04.840> object<03:25:05.520> with

delete and we can return an object with

delete and we can return an object with
a<03:25:06.120> status<03:25:07.120> of

a status of

a status of
okay<03:25:09.439> there<03:25:09.600> we<03:25:09.800> go<03:25:10.399> so<03:25:10.600> now<03:25:10.720> we're<03:25:10.920> also<03:25:11.160> dele

okay there we go so now we're also dele

okay there we go so now we're also dele
deleting<03:25:11.840> a<03:25:12.359> file<03:25:13.359> and<03:25:13.560> now<03:25:13.920> if<03:25:14.120> we<03:25:14.279> have

deleting a file and now if we have

deleting a file and now if we have
successfully<03:25:15.080> created<03:25:15.439> a<03:25:15.640> file<03:25:16.319> if<03:25:16.439> it<03:25:16.600> isn't

successfully created a file if it isn't

successfully created a file if it isn't
corrupted<03:25:18.560> then<03:25:19.000> we<03:25:19.120> are<03:25:19.520> almost<03:25:19.960> ready<03:25:20.199> to

corrupted then we are almost ready to

corrupted then we are almost ready to
create<03:25:20.680> a<03:25:20.920> post<03:25:21.560> but<03:25:21.800> first<03:25:22.279> we<03:25:22.399> have<03:25:22.520> to<03:25:22.760> deal

create a post but first we have to deal

create a post but first we have to deal
with<03:25:23.479> the<03:25:23.800> tags<03:25:24.800> so<03:25:24.960> we<03:25:25.080> need<03:25:25.239> to

convert tags into an array we can do

convert tags into an array we can do
that<03:25:32.520> by<03:25:32.640> saying<03:25:33.000> cons<03:25:33.479> tags<03:25:34.199> is<03:25:34.439> equal<03:25:34.760> to

that by saying cons tags is equal to

that by saying cons tags is equal to
post.<03:25:36.359> tags<03:25:37.080> question<03:25:37.479> mark.

post. tags question mark.

post. tags question mark.
replace<03:25:40.279> we<03:25:40.399> want<03:25:40.520> to<03:25:40.680> replace<03:25:41.520> all<03:25:41.640> of<03:25:41.800> the

replace we want to replace all of the

replace we want to replace all of the
empty<03:25:42.399> strings<03:25:43.399> so<03:25:43.560> we<03:25:43.680> can<03:25:43.840> do<03:25:44.160> a<03:25:44.359> regular

empty strings so we can do a regular

empty strings so we can do a regular
expression<03:25:45.720> like<03:25:46.160> so<03:25:47.160> so<03:25:47.399> globally<03:25:47.840> we're

expression like so so globally we're

expression like so so globally we're
looking<03:25:48.239> for<03:25:48.439> all<03:25:48.680> the<03:25:48.960> spaces<03:25:49.960> and<03:25:50.120> we

looking for all the spaces and we

looking for all the spaces and we
replace<03:25:50.680> it<03:25:50.880> with<03:25:51.000> an<03:25:51.160> empty<03:25:51.640> space<03:25:52.640> and<03:25:52.800> then

replace it with an empty space and then

replace it with an empty space and then
we<03:25:53.120> split<03:25:53.520> them<03:25:53.960> by<03:25:54.120> a<03:25:54.359> comma<03:25:55.120> so<03:25:55.359> this<03:25:55.439> will

we split them by a comma so this will

we split them by a comma so this will
ensure<03:25:56.359> to<03:25:56.600> then<03:25:56.840> split<03:25:57.439> all<03:25:57.600> of<03:25:57.720> our<03:25:57.960> tags<03:25:58.920> or

ensure to then split all of our tags or

ensure to then split all of our tags or
we<03:25:59.439> can<03:25:59.560> say<03:25:59.880> just<03:26:00.000> an<03:26:00.160> empty

we can say just an empty

we can say just an empty
string<03:26:02.199> and<03:26:02.479> finally<03:26:03.040> we<03:26:03.199> are<03:26:03.439> ready<03:26:04.000> to<03:26:04.680> save

string and finally we are ready to save

string and finally we are ready to save
the<03:26:05.199> new<03:26:05.479> post<03:26:06.080> database<03:26:07.000> by<03:26:07.160> saying<03:26:07.520> const

the new post database by saying const

the new post database by saying const
new<03:26:08.760> post<03:26:09.760> is<03:26:10.160> equal<03:26:10.520> to

new post is equal to

new post is equal to
await

await

await
databases.<03:26:14.880> create

databases. create

databases. create
document<03:26:17.520> first<03:26:17.880> we<03:26:18.080> pass<03:26:18.479> the<03:26:18.760> database<03:26:19.319> ID

document first we pass the database ID

document first we pass the database ID
we<03:26:19.800> want<03:26:19.920> to<03:26:20.120> update<03:26:20.760> so<03:26:21.040> ight<03:26:21.560> config

we want to update so ight config

we want to update so ight config
database<03:26:22.840> ID<03:26:23.800> then<03:26:24.120> we<03:26:24.359> pass<03:26:24.680> which

database ID then we pass which

database ID then we pass which
collection<03:26:25.399> do<03:26:25.560> we<03:26:25.680> want<03:26:25.760> to<03:26:25.960> update<03:26:26.680> by

collection do we want to update by

collection do we want to update by
passing<03:26:27.199> the<03:26:27.520> upright<03:26:28.040> config<03:26:28.960> do

passing the upright config do

passing the upright config do
postcollection

postcollection

postcollection
ID<03:26:31.600> we<03:26:31.800> Define<03:26:32.279> the<03:26:32.560> unique<03:26:33.560> ID<03:26:34.560> that<03:26:34.680> we<03:26:34.800> want

ID we Define the unique ID that we want

ID we Define the unique ID that we want
to<03:26:35.479> create<03:26:36.479> meaning<03:26:36.840> the<03:26:37.199> post<03:26:38.199> like<03:26:38.520> so<03:26:39.520> and

to create meaning the post like so and

to create meaning the post like so and
then<03:26:39.800> we<03:26:39.880> need<03:26:40.040> to<03:26:40.239> pass<03:26:40.520> the<03:26:40.640> entire<03:26:41.040> object

then we need to pass the entire object

then we need to pass the entire object
object<03:26:41.720> containing<03:26:42.239> all<03:26:42.439> the<03:26:42.640> data<03:26:43.359> about<03:26:43.640> the

object containing all the data about the

object containing all the data about the
post<03:26:44.640> such<03:26:44.840> as<03:26:45.080> creator<03:26:46.040> of<03:26:46.199> a<03:26:46.439> type<03:26:46.680> post.

post such as creator of a type post.

post such as creator of a type post.
user<03:26:48.000> ID<03:26:49.000> the<03:26:49.640> caption<03:26:50.640> which<03:26:50.800> is<03:26:50.920> going<03:26:51.120> to<03:26:51.279> be

user ID the caption which is going to be

user ID the caption which is going to be
of<03:26:51.800> a<03:26:52.040> post.

of a post.

of a post.
caption<03:26:54.960> image<03:26:55.279> URL<03:26:56.160> which<03:26:56.279> is<03:26:56.439> going<03:26:56.600> to<03:26:56.760> be<03:26:57.000> a

caption image URL which is going to be a

caption image URL which is going to be a
file

file

file
URL<03:26:59.439> image<03:26:59.880> ID<03:27:00.640> which<03:27:00.760> is<03:27:00.880> going<03:27:01.080> to<03:27:01.199> be

URL image ID which is going to be

URL image ID which is going to be
uploaded<03:27:02.239> file.<03:27:03.239> doar<03:27:03.560> Sun

uploaded file. doar Sun

uploaded file. doar Sun
ID<03:27:05.520> location<03:27:06.520> which<03:27:06.640> is<03:27:06.760> going<03:27:06.960> to<03:27:07.120> be<03:27:07.600> post.

ID location which is going to be post.

ID location which is going to be post.
location<03:27:10.239> and<03:27:10.399> then<03:27:10.680> tags<03:27:11.640> which<03:27:11.760> is<03:27:11.920> going<03:27:12.120> to

location and then tags which is going to

location and then tags which is going to
be<03:27:12.399> set<03:27:13.000> to

be set to

be set to
tags<03:27:14.880> and<03:27:15.120> now<03:27:16.120> this<03:27:16.560> is<03:27:16.720> saving<03:27:17.279> this<03:27:17.439> new

tags and now this is saving this new

tags and now this is saving this new
Post<03:27:18.000> in<03:27:18.160> the

Post in the

Post in the
database<03:27:19.920> finally<03:27:20.880> we<03:27:21.000> want<03:27:21.160> to<03:27:21.359> check<03:27:21.760> if<03:27:21.920> the

database finally we want to check if the

database finally we want to check if the
new<03:27:22.279> post<03:27:22.640> was<03:27:22.880> created<03:27:23.640> so<03:27:24.000> if<03:27:24.560> no<03:27:24.880> new<03:27:25.279> Post

new post was created so if no new Post

new post was created so if no new Post
in<03:27:26.560> that<03:27:26.840> case<03:27:27.279> we<03:27:27.560> again<03:27:28.080> want<03:27:28.239> to<03:27:28.520> delete

in that case we again want to delete

in that case we again want to delete
this<03:27:29.399> file<03:27:30.160> so<03:27:30.319> we<03:27:30.399> can<03:27:30.560> call<03:27:30.800> a<03:27:31.040> wait<03:27:31.359> delete

this file so we can call a wait delete

this file so we can call a wait delete
file<03:27:32.680> and<03:27:32.800> we<03:27:32.920> want<03:27:33.040> to<03:27:33.279> pass<03:27:33.560> the<03:27:33.720> uploaded

file and we want to pass the uploaded

file and we want to pass the uploaded
file.<03:27:35.439> doar<03:27:35.760> sign<03:27:36.000> ID<03:27:36.560> because<03:27:36.800> something

file. doar sign ID because something

file. doar sign ID because something
went<03:27:37.359> wrong<03:27:38.359> and<03:27:38.479> we<03:27:38.600> want<03:27:38.680> to<03:27:38.880> throw<03:27:39.399> a<03:27:39.600> new

went wrong and we want to throw a new

went wrong and we want to throw a new
error<03:27:40.960> finally<03:27:41.279> finally<03:27:41.840> if<03:27:42.080> all<03:27:42.279> of<03:27:42.479> that

error finally finally if all of that

error finally finally if all of that
succeeded<03:27:43.640> we<03:27:43.760> can<03:27:44.160> return<03:27:44.840> a<03:27:45.040> new<03:27:46.160> post<03:27:47.160> and

succeeded we can return a new post and

succeeded we can return a new post and
with<03:27:47.600> this<03:27:48.120> we're<03:27:48.399> done<03:27:48.800> with<03:27:48.960> the<03:27:49.160> creation

with this we're done with the creation

with this we're done with the creation
of<03:27:50.160> our<03:27:50.399> post<03:27:51.239> we're<03:27:51.439> building<03:27:51.760> a<03:27:51.960> production

of our post we're building a production

of our post we're building a production
ready<03:27:52.720> application<03:27:53.479> so<03:27:53.680> we<03:27:53.800> have<03:27:53.920> a<03:27:54.080> lot<03:27:54.279> of

ready application so we have a lot of

ready application so we have a lot of
checks<03:27:55.120> we<03:27:55.239> need<03:27:55.359> to<03:27:55.600> ensure<03:27:56.000> that<03:27:56.239> everything

checks we need to ensure that everything

checks we need to ensure that everything
is<03:27:56.680> going<03:27:57.000> well<03:27:57.720> if<03:27:57.880> it<03:27:58.000> doesn't<03:27:58.319> go<03:27:58.520> well<03:27:58.760> we

is going well if it doesn't go well we

is going well if it doesn't go well we
have<03:27:58.960> to<03:27:59.120> delete<03:27:59.520> our<03:27:59.720> file<03:28:00.160> not<03:28:00.359> to<03:28:00.560> overload

have to delete our file not to overload

have to delete our file not to overload
our<03:28:01.199> storage<03:28:02.120> right<03:28:02.920> so<03:28:03.279> this<03:28:03.560> is<03:28:03.800> now<03:28:04.239> our

our storage right so this is now our

our storage right so this is now our
function<03:28:05.160> that<03:28:05.319> will<03:28:05.560> create<03:28:05.840> a<03:28:06.239> post<03:28:07.239> now<03:28:07.399> we

function that will create a post now we

function that will create a post now we
have<03:28:07.640> to<03:28:07.840> call<03:28:08.199> this<03:28:08.359> create<03:28:08.760> post<03:28:09.239> as<03:28:09.359> a

have to call this create post as a

have to call this create post as a
mutation<03:28:10.560> so<03:28:10.760> we<03:28:10.920> go<03:28:11.359> back<03:28:11.560> to<03:28:11.720> our<03:28:11.920> react

mutation so we go back to our react

mutation so we go back to our react
query<03:28:13.279> queries<03:28:13.760> and

query queries and

query queries and
mutations<03:28:15.680> we<03:28:15.800> can<03:28:16.000> collapse<03:28:16.479> the<03:28:16.640> existing

mutations we can collapse the existing

mutations we can collapse the existing
ones<03:28:17.720> and<03:28:17.960> create<03:28:18.359> a<03:28:18.560> new<03:28:18.760> one<03:28:19.239> right<03:28:19.479> here

ones and create a new one right here

ones and create a new one right here
below<03:28:21.160> we<03:28:21.279> can<03:28:21.640> export<03:28:22.560> const<03:28:23.560> use<03:28:24.239> create

below we can export const use create

below we can export const use create
post<03:28:26.319> then<03:28:26.680> we<03:28:26.840> want<03:28:27.000> to<03:28:27.239> say<03:28:27.560> as<03:28:27.920> before

post then we want to say as before

post then we want to say as before
return<03:28:29.760> use<03:28:30.640> mutation<03:28:31.640> to<03:28:32.000> which<03:28:32.479> we<03:28:32.720> pass<03:28:33.000> the

return use mutation to which we pass the

return use mutation to which we pass the
mutation<03:28:33.840> FN<03:28:34.520> as<03:28:34.680> in<03:28:35.000> function<03:28:36.000> that's<03:28:36.239> going

mutation FN as in function that's going

mutation FN as in function that's going
to<03:28:36.840> get<03:28:37.040> in<03:28:37.199> a<03:28:37.399> post<03:28:38.239> of<03:28:38.399> a<03:28:38.640> type<03:28:39.080> I<03:28:39.439> new<03:28:40.199> post

to get in a post of a type I new post

to get in a post of a type I new post
and<03:28:42.239> we<03:28:42.359> want<03:28:42.479> to<03:28:42.680> call<03:28:43.319> a<03:28:43.600> create<03:28:44.160> post<03:28:44.840> to

and we want to call a create post to

and we want to call a create post to
which<03:28:45.319> we<03:28:45.520> pass<03:28:45.840> that<03:28:46.120> post<03:28:46.880> of<03:28:47.040> course<03:28:47.239> we

which we pass that post of course we

which we pass that post of course we
have<03:28:47.520> to<03:28:47.680> import<03:28:48.040> the<03:28:48.199> create<03:28:48.600> post<03:28:49.239> from

have to import the create post from

have to import the create post from
where<03:28:49.600> we<03:28:49.760> just<03:28:49.960> created<03:28:50.359> it<03:28:50.880> at<03:28:51.319> upright

where we just created it at upright

where we just created it at upright
API<03:28:53.920> and<03:28:54.080> also<03:28:54.359> the<03:28:54.560> I<03:28:54.800> new<03:28:55.080> post<03:28:55.600> from<03:28:55.840> at/

API and also the I new post from at/

API and also the I new post from at/
types<03:28:57.800> but<03:28:58.000> now<03:28:58.359> this<03:28:58.479> is<03:28:58.680> not<03:28:58.880> the<03:28:59.000> only<03:28:59.199> thing

types but now this is not the only thing

types but now this is not the only thing
we<03:28:59.439> want<03:28:59.560> to<03:28:59.720> do<03:29:00.080> once<03:29:00.239> we<03:29:00.399> create<03:29:00.640> a<03:29:00.840> post<03:29:01.640> we

we want to do once we create a post we

we want to do once we create a post we
also<03:29:02.080> want<03:29:02.199> to<03:29:02.439> query<03:29:03.000> all<03:29:03.279> the<03:29:03.479> existing

also want to query all the existing

also want to query all the existing
posts<03:29:04.520> so<03:29:04.680> we<03:29:04.800> can<03:29:04.920> show<03:29:05.239> them<03:29:05.359> on<03:29:05.479> the

posts so we can show them on the

posts so we can show them on the
homepage<03:29:06.800> so<03:29:07.000> let's<03:29:07.160> say<03:29:07.439> const<03:29:08.399> query<03:29:09.160> client

homepage so let's say const query client

homepage so let's say const query client
is<03:29:10.439> equal<03:29:10.760> to<03:29:11.520> use<03:29:12.080> Query<03:29:12.600> client<03:29:13.560> and<03:29:13.800> then

is equal to use Query client and then

is equal to use Query client and then
right<03:29:14.840> here<03:29:15.279> after<03:29:15.560> the<03:29:15.720> mutation<03:29:16.279> function

right here after the mutation function

right here after the mutation function
we<03:29:17.160> can<03:29:17.319> say<03:29:17.640> on<03:29:18.600> success<03:29:19.600> so<03:29:19.880> what's<03:29:20.080> going<03:29:20.279> to

we can say on success so what's going to

we can say on success so what's going to
happen<03:29:21.199> on<03:29:21.520> success<03:29:22.479> we<03:29:22.640> create<03:29:22.920> this

happen on success we create this

happen on success we create this
callback<03:29:23.560> function<03:29:24.439> and<03:29:24.600> say<03:29:24.920> query

callback function and say query

callback function and say query
client.

client.

client.
invalidate

invalidate

invalidate
queries<03:29:30.760> and<03:29:30.960> here<03:29:31.120> we<03:29:31.239> can<03:29:31.479> pass<03:29:31.720> the<03:29:31.880> filters

queries and here we can pass the filters

queries and here we can pass the filters
based<03:29:33.160> off<03:29:33.359> of<03:29:33.600> which<03:29:34.080> we<03:29:34.199> want<03:29:34.319> to<03:29:34.600> invalidate

based off of which we want to invalidate

based off of which we want to invalidate
the<03:29:35.920> query<03:29:36.920> specifically<03:29:37.720> we<03:29:37.880> want<03:29:38.000> to<03:29:38.199> choose

the query specifically we want to choose

the query specifically we want to choose
a<03:29:38.880> query<03:29:39.359> key<03:29:40.279> which<03:29:40.399> is<03:29:40.520> going<03:29:40.680> to<03:29:40.800> be

a query key which is going to be

a query key which is going to be
something<03:29:41.520> like

something like

something like
posts<03:29:44.000> or<03:29:44.359> rather<03:29:44.920> in<03:29:45.160> this<03:29:45.359> case<03:29:45.680> not<03:29:46.040> posts

posts or rather in this case not posts

posts or rather in this case not posts
but<03:29:47.560> get<03:29:48.920> recent<03:29:50.319> posts<03:29:51.319> why<03:29:51.600> is<03:29:51.840> that<03:29:52.279> and<03:29:52.479> why

but get recent posts why is that and why

but get recent posts why is that and why
do<03:29:52.720> we<03:29:52.840> need<03:29:52.960> to<03:29:53.120> invalidate<03:29:53.720> it<03:29:54.399> well<03:29:54.640> that's

do we need to invalidate it well that's

do we need to invalidate it well that's
the<03:29:55.080> beauty<03:29:55.680> of<03:29:56.120> react<03:29:56.680> query<03:29:57.520> it<03:29:57.680> allows<03:29:58.040> us

the beauty of react query it allows us

the beauty of react query it allows us
to<03:29:58.399> fetch<03:29:59.080> new<03:29:59.720> fresh<03:30:00.319> data<03:30:01.000> and<03:30:01.199> not<03:30:01.479> let<03:30:01.680> the

to fetch new fresh data and not let the

to fetch new fresh data and not let the
data<03:30:02.080> go<03:30:02.399> stale<03:30:03.359> so<03:30:03.680> the<03:30:03.800> next<03:30:04.040> time<03:30:04.199> we<03:30:04.359> try<03:30:04.600> to

data go stale so the next time we try to

data go stale so the next time we try to
get<03:30:05.080> recent<03:30:05.479> posts<03:30:06.279> it<03:30:06.560> actually<03:30:07.040> invalidated

get recent posts it actually invalidated

get recent posts it actually invalidated
this<03:30:07.960> query<03:30:08.680> which<03:30:08.840> means<03:30:09.120> that<03:30:09.279> it<03:30:09.399> will<03:30:09.680> not

this query which means that it will not

this query which means that it will not
be<03:30:10.120> able<03:30:10.359> to<03:30:10.560> get<03:30:11.359> post<03:30:11.680> from<03:30:12.120> cash<03:30:13.120> rather<03:30:13.840> it

be able to get post from cash rather it

be able to get post from cash rather it
will<03:30:14.160> need<03:30:14.319> to<03:30:14.560> recall<03:30:15.080> it<03:30:15.319> again<03:30:15.800> from<03:30:16.000> the

will need to recall it again from the

will need to recall it again from the
server<03:30:17.040> so<03:30:17.279> that's<03:30:17.479> why<03:30:17.600> we<03:30:17.760> have<03:30:17.880> to<03:30:18.000> do<03:30:18.160> it

server so that's why we have to do it

server so that's why we have to do it
this<03:30:18.680> way<03:30:19.199> and<03:30:19.439> invalidate<03:30:20.399> the<03:30:20.560> query<03:30:20.880> for

this way and invalidate the query for

this way and invalidate the query for
the<03:30:21.199> recent<03:30:21.560> posts<03:30:22.359> after<03:30:22.600> we<03:30:22.760> create<03:30:23.040> a<03:30:23.160> new

the recent posts after we create a new

the recent posts after we create a new
post<03:30:24.120> I<03:30:24.279> hope<03:30:24.800> that<03:30:24.960> makes<03:30:25.359> sense<03:30:26.359> now<03:30:26.680> later

post I hope that makes sense now later

post I hope that makes sense now later
on<03:30:27.279> we're<03:30:27.399> going<03:30:27.520> to<03:30:27.680> have<03:30:28.000> many<03:30:28.479> of<03:30:28.760> these

on we're going to have many of these

on we're going to have many of these
query<03:30:29.680> keys<03:30:30.680> and<03:30:30.880> it's<03:30:31.000> a<03:30:31.160> good<03:30:31.319> idea<03:30:31.600> to<03:30:31.800> keep

query keys and it's a good idea to keep

query keys and it's a good idea to keep
them<03:30:32.319> somewhere<03:30:32.920> and<03:30:33.160> keep<03:30:33.399> them<03:30:33.720> safe<03:30:34.680> so

them somewhere and keep them safe so

them somewhere and keep them safe so
what<03:30:35.239> we<03:30:35.319> can<03:30:35.479> do<03:30:35.920> is<03:30:36.160> create<03:30:36.479> a<03:30:36.680> new<03:30:37.000> file

what we can do is create a new file

what we can do is create a new file
right<03:30:37.800> here<03:30:38.000> in<03:30:38.239> react<03:30:38.720> query<03:30:39.479> called<03:30:40.040> query

right here in react query called query

right here in react query called query
keys.<03:30:43.160> TS<03:30:44.160> and<03:30:44.479> there<03:30:44.960> we<03:30:45.080> can<03:30:45.359> define

keys. TS and there we can define

keys. TS and there we can define
something<03:30:46.199> known<03:30:46.520> as<03:30:46.640> an<03:30:46.840> enum<03:30:47.479> so<03:30:47.640> we<03:30:47.760> can<03:30:47.920> say

something known as an enum so we can say

something known as an enum so we can say
export<03:30:49.120> enam<03:30:50.000> query<03:30:51.040> keys<03:30:52.040> this<03:30:52.160> is<03:30:52.279> an

export enam query keys this is an

export enam query keys this is an
enumeration<03:30:53.920> what<03:30:54.040> it<03:30:54.199> means<03:30:54.520> that<03:30:54.720> we<03:30:54.800> can

enumeration what it means that we can

enumeration what it means that we can
Define<03:30:55.720> or<03:30:56.040> connect<03:30:56.840> one<03:30:57.239> key<03:30:57.720> with<03:30:57.920> one

Define or connect one key with one

Define or connect one key with one
string<03:30:59.199> for<03:30:59.439> example<03:31:00.439> get<03:31:01.160> recent<03:31:02.160> posts<03:31:03.080> is

string for example get recent posts is

string for example get recent posts is
going<03:31:03.439> to<03:31:03.640> be<03:31:04.000> a<03:31:04.199> string<03:31:05.000> of<03:31:05.239> get<03:31:05.640> recent<03:31:06.239> posts

going to be a string of get recent posts

going to be a string of get recent posts
now<03:31:07.840> why<03:31:08.279> do<03:31:08.439> we<03:31:08.600> have<03:31:08.720> to<03:31:08.880> do<03:31:09.160> this<03:31:10.080> well

now why do we have to do this well

now why do we have to do this well
that's<03:31:10.560> because<03:31:11.120> if<03:31:11.239> you<03:31:11.359> just<03:31:11.600> misspell

that's because if you just misspell

that's because if you just misspell
something<03:31:12.600> here<03:31:13.279> like<03:31:13.720> get<03:31:14.479> posts<03:31:15.439> like<03:31:15.720> this

something here like get posts like this

something here like get posts like this
or<03:31:16.800> get<03:31:17.000> recent<03:31:17.399> post<03:31:17.760> maybe<03:31:18.160> that's<03:31:18.359> even<03:31:18.560> a

or get recent post maybe that's even a

or get recent post maybe that's even a
bigger<03:31:19.239> misspelling<03:31:20.239> it<03:31:20.439> might<03:31:20.640> be<03:31:21.160> really

bigger misspelling it might be really

bigger misspelling it might be really
really<03:31:22.239> hard<03:31:22.479> to<03:31:22.680> notice<03:31:23.520> almost<03:31:24.120> impossible

really hard to notice almost impossible

really hard to notice almost impossible
and<03:31:25.319> you<03:31:25.439> can<03:31:25.600> spend<03:31:26.080> hours<03:31:26.760> looking<03:31:27.120> for<03:31:27.359> this

and you can spend hours looking for this

and you can spend hours looking for this
bug<03:31:28.199> but<03:31:28.399> on<03:31:28.560> the<03:31:28.720> other<03:31:29.040> hand<03:31:30.040> if<03:31:30.160> you<03:31:30.319> do

bug but on the other hand if you do

bug but on the other hand if you do
something<03:31:30.880> like<03:31:31.399> this<03:31:32.800> array<03:31:34.080> query<03:31:35.080> unor

something like this array query unor

something like this array query unor
keys.<03:31:38.120> getet<03:31:38.640> recent<03:31:39.279> posts<03:31:40.279> it's<03:31:40.479> impossible

keys. getet recent posts it's impossible

keys. getet recent posts it's impossible
to<03:31:41.279> miss<03:31:41.439> it<03:31:41.880> because<03:31:42.080> you<03:31:42.160> can<03:31:42.399> import<03:31:42.760> it

to miss it because you can import it

to miss it because you can import it
specifically<03:31:43.920> from<03:31:44.160> query<03:31:44.600> keys<03:31:45.359> and<03:31:45.479> then

specifically from query keys and then

specifically from query keys and then
you<03:31:45.800> know<03:31:46.399> it's<03:31:46.600> going<03:31:46.760> to<03:31:46.920> be<03:31:47.199> right<03:31:48.199> and<03:31:48.399> now

you know it's going to be right and now

you know it's going to be right and now
if<03:31:48.720> I<03:31:48.920> misspell<03:31:49.319> it<03:31:49.560> here<03:31:50.160> it's<03:31:50.319> going<03:31:50.479> to

if I misspell it here it's going to

if I misspell it here it's going to
immediately<03:31:51.160> complain<03:31:52.160> so<03:31:52.479> this<03:31:52.720> is<03:31:52.840> a<03:31:53.120> pro

immediately complain so this is a pro

immediately complain so this is a pro
tip<03:31:53.760> when<03:31:53.960> building<03:31:54.319> large<03:31:54.760> applications<03:31:55.760> how

tip when building large applications how

tip when building large applications how
to<03:31:56.160> save<03:31:56.479> yourself<03:31:57.120> from<03:31:57.520> typos<03:31:58.520> create<03:31:59.120> an

to save yourself from typos create an

to save yourself from typos create an
enam<03:32:00.040> where<03:32:00.199> you'll<03:32:00.359> be<03:32:00.479> able<03:32:00.640> to<03:32:00.800> create<03:32:01.120> more

enam where you'll be able to create more

enam where you'll be able to create more
different<03:32:01.760> versions<03:32:02.160> of<03:32:02.520> this<03:32:03.520> so<03:32:03.840> in<03:32:03.960> the

different versions of this so in the

different versions of this so in the
description<03:32:04.600> down<03:32:04.760> below<03:32:05.439> you<03:32:05.560> can<03:32:05.760> find<03:32:06.120> all

description down below you can find all

description down below you can find all
query<03:32:06.960> keys.<03:32:07.560> TS<03:32:08.359> it's<03:32:08.520> going<03:32:08.680> to<03:32:08.840> be<03:32:09.080> just<03:32:09.239> a

query keys. TS it's going to be just a

query keys. TS it's going to be just a
couple<03:32:09.680> more<03:32:10.399> and<03:32:10.520> we'll<03:32:10.680> use<03:32:10.920> use<03:32:11.120> these

couple more and we'll use use these

couple more and we'll use use these
later<03:32:11.640> on<03:32:12.160> to<03:32:12.479> invalidate<03:32:13.439> specific<03:32:13.880> queries

later on to invalidate specific queries

later on to invalidate specific queries
so<03:32:14.800> we<03:32:14.920> can<03:32:15.199> always<03:32:15.680> keep<03:32:15.920> our<03:32:16.160> data<03:32:16.720> fresh

so we can always keep our data fresh

so we can always keep our data fresh
great<03:32:18.399> so<03:32:18.600> now<03:32:18.880> we<03:32:19.000> have<03:32:19.120> our<03:32:19.319> use<03:32:19.680> create<03:32:20.080> post

great so now we have our use create post

great so now we have our use create post
mutation<03:32:21.520> and<03:32:21.680> we<03:32:21.760> can<03:32:21.960> call<03:32:22.279> it<03:32:23.040> within<03:32:24.040> can

mutation and we can call it within can

mutation and we can call it within can
you<03:32:24.359> guess<03:32:24.680> where<03:32:25.680> within<03:32:26.399> post<03:32:27.080> form<03:32:28.040> yep<03:32:28.520> we

you guess where within post form yep we

you guess where within post form yep we
finally<03:32:29.160> got<03:32:29.479> there<03:32:30.359> we<03:32:30.479> can<03:32:30.720> start<03:32:31.199> by

finally got there we can start by

finally got there we can start by
creating<03:32:31.800> the<03:32:32.080> structure<03:32:32.760> for<03:32:33.040> our<03:32:33.359> homepage

creating the structure for our homepage

creating the structure for our homepage
we're<03:32:34.520> going<03:32:34.680> to<03:32:34.880> have<03:32:35.080> a<03:32:35.239> div<03:32:35.680> that's<03:32:35.880> going

we're going to have a div that's going

we're going to have a div that's going
to<03:32:36.279> have<03:32:36.600> a<03:32:36.920> class<03:32:37.560> name<03:32:38.560> equal<03:32:38.880> to<03:32:39.520> flex<03:32:40.239> and

to have a class name equal to flex and

to have a class name equal to flex and
flex<03:32:40.840> x<03:32:41.040> one<03:32:41.399> so<03:32:41.600> it<03:32:42.160> expands<03:32:43.160> within<03:32:43.439> it<03:32:43.640> we're

flex x one so it expands within it we're

flex x one so it expands within it we're
going<03:32:43.880> to<03:32:44.000> have<03:32:44.199> another<03:32:44.520> div<03:32:44.960> that's<03:32:45.160> going

going to have another div that's going

going to have another div that's going
to<03:32:45.520> have<03:32:45.840> a<03:32:46.120> class<03:32:46.520> name<03:32:47.199> is<03:32:47.439> equal<03:32:47.760> to<03:32:48.600> home

to have a class name is equal to home

to have a class name is equal to home
Das<03:32:50.199> container<03:32:51.199> if<03:32:51.319> we<03:32:51.479> save<03:32:51.800> this<03:32:52.160> we<03:32:52.279> cannot

Das container if we save this we cannot

Das container if we save this we cannot
see<03:32:52.680> a<03:32:52.800> lot<03:32:53.359> but<03:32:53.600> it's<03:32:53.920> there<03:32:54.560> let's<03:32:54.720> go<03:32:54.840> ahead

see a lot but it's there let's go ahead

see a lot but it's there let's go ahead
and<03:32:55.120> move<03:32:55.399> this<03:32:55.560> over<03:32:55.800> to<03:32:56.000> the<03:32:56.199> side<03:32:56.920> so<03:32:57.080> now

and move this over to the side so now

and move this over to the side so now
it's<03:32:57.359> easier<03:32:57.680> to<03:32:57.960> develop<03:32:58.960> right<03:32:59.160> within<03:32:59.399> our

it's easier to develop right within our

it's easier to develop right within our
home<03:32:59.880> container<03:33:00.640> we<03:33:00.760> can<03:33:00.960> create<03:33:01.279> another<03:33:01.640> div

home container we can create another div

home container we can create another div
that's<03:33:02.640> going<03:33:02.760> to<03:33:02.920> have<03:33:03.080> a<03:33:03.279> class<03:33:03.640> name<03:33:04.279> equal

that's going to have a class name equal

that's going to have a class name equal
to<03:33:05.279> home-

to home-

to home-
poost<03:33:08.520> and<03:33:08.800> within<03:33:09.080> it<03:33:09.359> we<03:33:09.479> can<03:33:09.640> create<03:33:09.960> an<03:33:10.160> H2

poost and within it we can create an H2

poost and within it we can create an H2
that's<03:33:11.680> going<03:33:11.840> to<03:33:12.040> say<03:33:12.600> home

that's going to say home

that's going to say home
feed<03:33:14.720> there<03:33:14.880> we<03:33:15.040> go<03:33:15.359> the<03:33:15.479> first<03:33:15.720> thing<03:33:15.880> we<03:33:15.960> can

feed there we go the first thing we can

feed there we go the first thing we can
see<03:33:16.399> here<03:33:17.160> let's<03:33:17.359> give<03:33:17.479> it<03:33:17.600> a<03:33:17.800> class<03:33:18.120> name

see here let's give it a class name

see here let's give it a class name
equal<03:33:19.359> to<03:33:19.760> H3

equal to H3

equal to H3
dasb<03:33:22.479> on<03:33:22.680> medium<03:33:23.199> devices<03:33:24.279> H2<03:33:25.640> dasb<03:33:26.640> text-

dasb on medium devices H2 dasb text-

dasb on medium devices H2 dasb text-
left<03:33:28.399> and<03:33:28.720> w-<03:33:29.479> full<03:33:30.359> so<03:33:30.600> now<03:33:31.199> we<03:33:31.319> can<03:33:31.439> see<03:33:31.600> it<03:33:31.720> on

left and w- full so now we can see it on

left and w- full so now we can see it on
the<03:33:32.040> top<03:33:32.680> left<03:33:33.680> now<03:33:34.000> immediately<03:33:34.520> below<03:33:35.239> we

the top left now immediately below we

the top left now immediately below we
want<03:33:35.439> to<03:33:35.600> show<03:33:35.880> some<03:33:36.080> kind<03:33:36.199> of<03:33:36.319> a<03:33:36.439> loader

want to show some kind of a loader

want to show some kind of a loader
component<03:33:37.680> if<03:33:37.920> posts<03:33:38.239> are<03:33:38.439> loading<03:33:39.160> so<03:33:39.359> let's

component if posts are loading so let's

component if posts are loading so let's
create<03:33:39.840> a<03:33:40.080> fake<03:33:40.760> const<03:33:41.560> is<03:33:42.160> post<03:33:42.760> loading

create a fake const is post loading

create a fake const is post loading
which<03:33:43.880> is<03:33:44.040> going<03:33:44.160> to<03:33:44.279> be<03:33:44.439> set<03:33:44.760> to<03:33:45.399> let's<03:33:45.560> do

which is going to be set to let's do

which is going to be set to let's do
true<03:33:46.040> for<03:33:46.520> now<03:33:47.520> immediately<03:33:48.080> below<03:33:48.720> we<03:33:48.800> can

true for now immediately below we can

true for now immediately below we can
say<03:33:49.239> if<03:33:49.680> is<03:33:50.040> post<03:33:50.840> loading<03:33:51.840> and<03:33:52.160> if<03:33:52.319> there's<03:33:52.640> no

say if is post loading and if there's no

say if is post loading and if there's no
posts<03:33:54.120> and<03:33:54.520> post<03:33:55.160> is<03:33:55.279> going<03:33:55.479> to<03:33:55.680> be<03:33:56.080> set<03:33:56.359> to

posts and post is going to be set to

posts and post is going to be set to
null<03:33:57.040> for<03:33:57.640> now<03:33:58.640> if<03:33:58.800> there's<03:33:59.040> no<03:33:59.399> that<03:34:00.120> then<03:34:00.479> we

null for now if there's no that then we

null for now if there's no that then we
can<03:34:00.760> show<03:34:01.560> the<03:34:02.199> loading<03:34:03.199> right<03:34:03.920> here<03:34:04.920> or

can show the loading right here or

can show the loading right here or
rather<03:34:05.319> a<03:34:05.479> loader<03:34:06.160> I<03:34:06.239> believe<03:34:06.520> we<03:34:06.680> called<03:34:06.960> it

rather a loader I believe we called it

rather a loader I believe we called it
we<03:34:07.479> can<03:34:07.680> import<03:34:08.000> it<03:34:08.520> immediately<03:34:09.520> and<03:34:09.840> else<03:34:10.800> we

we can import it immediately and else we

we can import it immediately and else we
can<03:34:11.160> actually<03:34:11.720> create<03:34:12.080> a<03:34:12.399> UL<03:34:13.399> that's<03:34:13.560> going<03:34:13.720> to

can actually create a UL that's going to

can actually create a UL that's going to
allow<03:34:14.120> us<03:34:14.239> to<03:34:14.399> Loop<03:34:14.840> over<03:34:15.319> all<03:34:15.479> of<03:34:15.600> our

allow us to Loop over all of our

allow us to Loop over all of our
posts<03:34:17.880> so<03:34:18.040> for<03:34:18.279> now<03:34:18.560> we<03:34:18.720> can<03:34:18.840> see<03:34:19.040> this<03:34:19.160> great

posts so for now we can see this great

posts so for now we can see this great
loading<03:34:20.279> but<03:34:20.479> now<03:34:20.800> let's<03:34:21.080> focus<03:34:21.399> on<03:34:21.680> what

loading but now let's focus on what

loading but now let's focus on what
matters<03:34:22.399> more<03:34:23.199> and<03:34:23.439> that<03:34:23.600> is<03:34:23.960> fetching<03:34:24.640> all<03:34:25.000> of

matters more and that is fetching all of

matters more and that is fetching all of
the<03:34:25.560> posts<03:34:26.560> to<03:34:26.800> fetch<03:34:27.040> the<03:34:27.199> posts<03:34:27.640> we'll<03:34:27.840> have

the posts to fetch the posts we'll have

the posts to fetch the posts we'll have
to<03:34:28.040> go<03:34:28.160> to<03:34:28.319> our

to go to our

to go to our
queries<03:34:30.399> and<03:34:30.720> here<03:34:31.160> we'll<03:34:31.359> have<03:34:31.479> to<03:34:31.640> create<03:34:31.960> a

queries and here we'll have to create a

queries and here we'll have to create a
new<03:34:32.359> query<03:34:32.800> to<03:34:33.080> get<03:34:33.399> recent<03:34:33.880> posts<03:34:34.800> by<03:34:34.960> saying

new query to get recent posts by saying

new query to get recent posts by saying
export

export

export
const<03:34:37.920> use<03:34:38.760> get<03:34:39.680> recent

const use get recent

const use get recent
posts<03:34:42.680> this<03:34:42.760> is<03:34:42.920> going<03:34:43.080> to<03:34:43.199> be<03:34:43.319> a<03:34:43.479> function

posts this is going to be a function

posts this is going to be a function
that's<03:34:44.399> going<03:34:44.560> to<03:34:44.880> return<03:34:45.479> a<03:34:45.720> use<03:34:46.279> Query<03:34:47.000> no

that's going to return a use Query no

that's going to return a use Query no
longer<03:34:47.520> a<03:34:47.680> Ed<03:34:48.000> mutation<03:34:49.000> rather<03:34:49.520> a<03:34:49.680> used<03:34:50.080> query

longer a Ed mutation rather a used query

longer a Ed mutation rather a used query
where<03:34:51.199> the<03:34:51.399> query<03:34:51.880> key<03:34:52.399> of<03:34:52.640> what<03:34:52.760> we<03:34:52.880> want<03:34:53.000> to

where the query key of what we want to

where the query key of what we want to
get<03:34:53.840> is<03:34:54.000> going<03:34:54.160> to<03:34:54.279> be<03:34:54.439> an<03:34:54.600> array<03:34:55.399> of<03:34:55.720> query

get is going to be an array of query

get is going to be an array of query
keys.<03:34:58.760> getor

keys. getor

keys. getor
recentposts

recentposts

recentposts
and<03:35:03.160> a<03:35:03.359> query<03:35:03.760> function<03:35:04.359> meaning<03:35:04.920> what<03:35:05.040> will

and a query function meaning what will

and a query function meaning what will
get<03:35:05.920> executed<03:35:06.920> once<03:35:07.120> we<03:35:07.279> try<03:35:07.520> to<03:35:07.720> fetch<03:35:08.199> this

get executed once we try to fetch this

get executed once we try to fetch this
this<03:35:09.640> will<03:35:09.840> have<03:35:09.960> to<03:35:10.080> be<03:35:10.199> a<03:35:10.279> function<03:35:10.800> coming

this will have to be a function coming

this will have to be a function coming
from<03:35:11.399> aight<03:35:12.399> so<03:35:12.680> now<03:35:13.080> we<03:35:13.199> have<03:35:13.319> to<03:35:13.520> move<03:35:13.760> to<03:35:13.960> the

from aight so now we have to move to the

from aight so now we have to move to the
aight<03:35:14.760> API<03:35:15.760> and<03:35:15.960> create<03:35:16.239> a<03:35:16.399> new

aight API and create a new

aight API and create a new
function<03:35:18.319> export<03:35:19.520> async<03:35:20.520> function<03:35:21.479> get

function export async function get

function export async function get
recent

recent

recent
posts<03:35:24.560> where<03:35:24.920> we<03:35:25.040> can<03:35:25.160> set<03:35:25.439> the<03:35:25.880> posts<03:35:26.880> to<03:35:27.040> be

posts where we can set the posts to be

posts where we can set the posts to be
equal<03:35:27.560> to<03:35:28.520> await

equal to await

equal to await
databases.<03:35:31.359> list

databases. list

databases. list
documents<03:35:33.920> to<03:35:34.239> that<03:35:34.520> we<03:35:34.720> have<03:35:34.840> to<03:35:35.040> provide<03:35:35.399> the

documents to that we have to provide the

documents to that we have to provide the
aight

aight

aight
config<03:35:37.720> database<03:35:38.640> ID<03:35:39.640> aright<03:35:40.120> config

config database ID aright config

config database ID aright config
dopost<03:35:42.760> collection<03:35:43.560> ID<03:35:44.199> as<03:35:44.359> the<03:35:44.520> second

dopost collection ID as the second

dopost collection ID as the second
parameter<03:35:46.040> and<03:35:46.160> then<03:35:46.319> we<03:35:46.439> can<03:35:46.680> Define<03:35:47.160> in

parameter and then we can Define in

parameter and then we can Define in
which<03:35:47.680> order<03:35:48.160> do<03:35:48.319> we<03:35:48.439> want<03:35:48.640> to<03:35:48.800> get<03:35:48.960> it<03:35:49.479> so<03:35:49.640> we

which order do we want to get it so we

which order do we want to get it so we
can<03:35:49.840> say

can say

can say
query.

query.

query.
orderes<03:35:53.199> as<03:35:53.319> in<03:35:53.560> descending

orderes as in descending

orderes as in descending
DEC<03:35:56.040> based<03:35:56.680> off<03:35:56.880> of<03:35:57.080> the<03:35:57.520> created<03:35:58.479> at<03:35:59.000> criteria

DEC based off of the created at criteria

DEC based off of the created at criteria
so<03:36:00.199> the<03:36:00.359> latest<03:36:00.760> ones<03:36:01.000> are<03:36:01.160> going<03:36:01.319> to<03:36:01.520> appear

so the latest ones are going to appear

so the latest ones are going to appear
on<03:36:02.120> top<03:36:02.920> and<03:36:03.040> then<03:36:03.199> we<03:36:03.279> can<03:36:03.520> also<03:36:03.760> do<03:36:03.960> another

on top and then we can also do another

on top and then we can also do another
query.<03:36:05.640> limit<03:36:06.359> to<03:36:06.720> 20<03:36:07.239> post<03:36:08.120> tops<03:36:09.120> and<03:36:09.279> this

query. limit to 20 post tops and this

query. limit to 20 post tops and this
has<03:36:09.600> to<03:36:09.760> be<03:36:10.040> as<03:36:10.160> the<03:36:10.279> second<03:36:10.680> parameter<03:36:11.279> to<03:36:11.479> our

has to be as the second parameter to our

has to be as the second parameter to our
query<03:36:12.279> just<03:36:12.520> like<03:36:12.800> this<03:36:13.640> then<03:36:13.920> we<03:36:14.040> can<03:36:14.279> fix

query just like this then we can fix

query just like this then we can fix
this<03:36:14.880> right<03:36:15.120> here<03:36:15.720> and<03:36:15.840> we<03:36:15.960> can<03:36:16.120> say<03:36:16.600> if

this right here and we can say if

this right here and we can say if
there's<03:36:17.479> no<03:36:17.880> posts<03:36:18.880> then<03:36:19.080> we<03:36:19.199> can<03:36:19.359> throw<03:36:19.640> an

there's no posts then we can throw an

there's no posts then we can throw an
error<03:36:21.439> that's<03:36:21.640> going<03:36:21.840> to<03:36:22.000> look<03:36:22.239> like<03:36:22.439> this

error that's going to look like this

error that's going to look like this
else<03:36:23.760> we<03:36:23.880> can<03:36:24.080> simply<03:36:24.600> return<03:36:24.960> posts<03:36:25.960> so<03:36:26.199> now

else we can simply return posts so now

else we can simply return posts so now
we<03:36:26.720> can<03:36:26.880> go<03:36:27.080> back<03:36:27.239> to<03:36:27.359> our<03:36:27.520> queries<03:36:27.880> and

we can go back to our queries and

we can go back to our queries and
mutations<03:36:29.319> and<03:36:29.520> we<03:36:29.600> can<03:36:29.760> simply<03:36:30.080> say<03:36:30.479> get

mutations and we can simply say get

mutations and we can simply say get
recent<03:36:32.239> posts<03:36:33.239> import<03:36:33.600> it<03:36:33.760> at<03:36:33.880> the<03:36:34.080> top<03:36:34.840> and

recent posts import it at the top and

recent posts import it at the top and
now<03:36:35.960> this<03:36:36.319> use<03:36:36.720> get<03:36:36.960> recent<03:36:37.319> posts<03:36:37.840> is<03:36:38.000> going

now this use get recent posts is going

now this use get recent posts is going
to<03:36:38.399> expose<03:36:39.239> this<03:36:39.439> function<03:36:39.920> to<03:36:40.160> get<03:36:40.600> called<03:36:41.600> so

to expose this function to get called so

to expose this function to get called so
let's<03:36:42.439> now<03:36:42.680> go<03:36:43.000> back<03:36:43.439> right<03:36:43.720> here<03:36:44.560> and<03:36:44.880> let's

let's now go back right here and let's

let's now go back right here and let's
declare<03:36:45.640> a<03:36:45.840> hook<03:36:46.279> that<03:36:46.399> we<03:36:46.520> can<03:36:47.120> call<03:36:48.600> Con

declare a hook that we can call Con

declare a hook that we can call Con
where<03:36:49.760> we<03:36:49.960> get<03:36:50.239> data<03:36:51.080> so<03:36:51.319> with<03:36:51.520> every<03:36:51.800> query

where we get data so with every query

where we get data so with every query
you<03:36:52.359> get<03:36:52.520> something<03:36:52.800> known<03:36:53.000> as<03:36:53.120> a<03:36:53.319> data<03:36:53.680> object

you get something known as a data object

you get something known as a data object
and<03:36:54.439> you<03:36:54.560> can<03:36:54.720> rename<03:36:55.120> it<03:36:55.319> to<03:36:55.520> in<03:36:55.720> this<03:36:55.920> case

and you can rename it to in this case

and you can rename it to in this case
post<03:36:57.439> we<03:36:57.600> get<03:36:57.800> the<03:36:58.080> not<03:36:58.399> is<03:36:58.640> loading<03:36:59.080> anymore

post we get the not is loading anymore

post we get the not is loading anymore
it's<03:36:59.880> going<03:37:00.000> to<03:37:00.199> be<03:37:01.080> is<03:37:01.800> pending<03:37:02.800> and<03:37:02.920> that's

it's going to be is pending and that's

it's going to be is pending and that's
going<03:37:03.239> to<03:37:03.359> be<03:37:03.600> is<03:37:03.920> post<03:37:04.640> loading<03:37:05.640> and<03:37:05.760> then

going to be is post loading and then

going to be is post loading and then
finally<03:37:06.399> is<03:37:06.680> error<03:37:07.359> you<03:37:07.560> also<03:37:07.880> get<03:37:08.120> that<03:37:08.439> we

finally is error you also get that we

finally is error you also get that we
can<03:37:08.680> say<03:37:08.960> is<03:37:09.560> error<03:37:10.560> posts<03:37:11.560> and<03:37:11.720> that's<03:37:11.880> going

can say is error posts and that's going

can say is error posts and that's going
to<03:37:12.120> be<03:37:12.319> equal<03:37:12.600> to<03:37:12.760> a<03:37:12.960> hook<03:37:13.479> of<03:37:13.760> use<03:37:14.399> get<03:37:14.760> recent

to be equal to a hook of use get recent

to be equal to a hook of use get recent
posts<03:37:15.960> which<03:37:16.120> we<03:37:16.239> can<03:37:16.399> simply<03:37:16.800> import<03:37:17.640> and

posts which we can simply import and

posts which we can simply import and
call<03:37:19.359> now<03:37:19.600> if<03:37:19.720> we<03:37:19.880> save<03:37:20.279> this<03:37:21.000> it's<03:37:21.160> going<03:37:21.319> to

call now if we save this it's going to

call now if we save this it's going to
automatically<03:37:22.199> know<03:37:22.760> whether<03:37:23.000> we<03:37:23.120> have<03:37:23.239> to

automatically know whether we have to

automatically know whether we have to
load<03:37:23.760> something<03:37:24.160> or<03:37:24.399> not<03:37:25.239> and<03:37:25.359> as<03:37:25.479> you<03:37:25.560> can<03:37:25.680> see

load something or not and as you can see

load something or not and as you can see
the<03:37:26.040> loading<03:37:26.760> was<03:37:26.960> immediately<03:37:27.520> switched<03:37:28.439> off

the loading was immediately switched off

the loading was immediately switched off
and<03:37:29.800> we<03:37:29.920> can<03:37:30.080> render<03:37:31.040> test<03:37:32.040> and<03:37:32.160> as<03:37:32.279> you<03:37:32.359> can

and we can render test and as you can

and we can render test and as you can
see<03:37:32.680> we<03:37:32.760> can<03:37:32.920> see<03:37:33.160> it<03:37:33.720> that<03:37:33.880> means<03:37:34.279> that<03:37:34.600> we

see we can see it that means that we

see we can see it that means that we
indeed<03:37:35.720> have<03:37:35.960> some<03:37:36.239> posts<03:37:36.800> to<03:37:37.040> load<03:37:38.000> so<03:37:38.319> let's

indeed have some posts to load so let's

indeed have some posts to load so let's
create<03:37:38.840> the<03:37:39.000> UI<03:37:39.560> for<03:37:39.920> loading<03:37:40.479> a<03:37:40.880> post<03:37:41.880> we<03:37:42.000> can

create the UI for loading a post we can

create the UI for loading a post we can
give<03:37:42.399> this<03:37:42.600> UL<03:37:43.160> a<03:37:43.479> class<03:37:43.880> name<03:37:44.560> equal<03:37:44.880> to<03:37:45.279> flex

give this UL a class name equal to flex

give this UL a class name equal to flex
flex-all<03:37:48.000> so<03:37:48.239> they<03:37:48.399> appear<03:37:48.720> one<03:37:48.920> below

flex-all so they appear one below

flex-all so they appear one below
another<03:37:50.000> Flex<03:37:50.720> D1<03:37:51.720> a<03:37:51.920> gap<03:37:52.160> of<03:37:52.359> nine<03:37:52.720> for<03:37:52.880> some

another Flex D1 a gap of nine for some

another Flex D1 a gap of nine for some
spacing<03:37:54.199> and<03:37:54.479> a<03:37:54.720> w-<03:37:55.520> full<03:37:55.960> for<03:37:56.120> full<03:37:56.800> width<03:37:57.800> now

spacing and a w- full for full width now

spacing and a w- full for full width now
here<03:37:58.479> we<03:37:58.600> want<03:37:58.720> to<03:37:58.960> map<03:37:59.239> over<03:37:59.479> the<03:37:59.680> posts<03:38:00.359> by

here we want to map over the posts by

here we want to map over the posts by
saying<03:38:00.920> posts<03:38:01.439> question<03:38:01.800> mark.

saying posts question mark.

saying posts question mark.
documents.<03:38:04.040> map<03:38:04.960> where<03:38:05.160> we<03:38:05.279> get<03:38:05.560> each

documents. map where we get each

documents. map where we get each
individual<03:38:06.520> post<03:38:07.199> of<03:38:07.359> a<03:38:07.600> type

individual post of a type

individual post of a type
models.<03:38:09.880> document

models. document

models. document
and<03:38:11.239> the<03:38:11.359> models<03:38:11.880> has<03:38:12.040> to<03:38:12.199> be<03:38:12.359> imported<03:38:12.920> from

and the models has to be imported from

and the models has to be imported from
aite<03:38:14.319> and<03:38:14.560> then<03:38:14.920> we<03:38:15.040> can<03:38:15.279> instantly<03:38:15.880> return<03:38:16.319> An

aite and then we can instantly return An

aite and then we can instantly return An
Li<03:38:17.319> which<03:38:17.479> is<03:38:17.560> a<03:38:17.760> list<03:38:18.080> item<03:38:19.000> that<03:38:19.120> for<03:38:19.319> now<03:38:19.600> can

Li which is a list item that for now can

Li which is a list item that for now can
render<03:38:20.120> something<03:38:20.399> like<03:38:20.600> post.<03:38:21.520> tile<03:38:22.520> if<03:38:22.640> we

render something like post. tile if we

render something like post. tile if we
save<03:38:23.040> it<03:38:23.920> we<03:38:24.120> cannot<03:38:24.439> see<03:38:24.920> anything<03:38:25.920> let's<03:38:26.080> see

save it we cannot see anything let's see

save it we cannot see anything let's see
if<03:38:26.399> I<03:38:26.520> properly<03:38:26.880> called<03:38:27.160> it<03:38:27.439> is<03:38:27.520> it<03:38:27.680> a<03:38:27.920> title<03:38:28.520> or

if I properly called it is it a title or

if I properly called it is it a title or
is<03:38:28.840> it<03:38:29.000> something<03:38:29.359> else<03:38:30.199> well<03:38:30.399> if<03:38:30.520> I<03:38:30.680> go<03:38:30.800> to<03:38:31.040> app

is it something else well if I go to app

is it something else well if I go to app
right<03:38:32.120> we<03:38:32.239> can<03:38:32.399> see<03:38:32.680> we<03:38:32.840> have<03:38:33.000> the<03:38:33.160> preview

right we can see we have the preview

right we can see we have the preview
image<03:38:34.199> this<03:38:34.439> is<03:38:34.600> under<03:38:35.000> storage<03:38:36.000> but<03:38:36.199> if<03:38:36.319> I<03:38:36.560> go

image this is under storage but if I go

image this is under storage but if I go
to

to

to
databases<03:38:39.319> database<03:38:40.359> posts<03:38:41.359> and<03:38:41.560> here<03:38:41.800> we<03:38:41.880> can

databases database posts and here we can

databases database posts and here we can
see<03:38:42.279> all<03:38:42.479> the<03:38:42.720> attributes<03:38:43.479> that<03:38:43.640> this

see all the attributes that this

see all the attributes that this
document<03:38:44.399> has<03:38:45.000> under<03:38:45.479> data<03:38:46.479> so<03:38:46.640> we<03:38:46.800> have<03:38:47.000> likes

document has under data so we have likes

document has under data so we have likes
caption<03:38:48.560> yeah<03:38:48.680> let's<03:38:48.880> do<03:38:49.080> caption<03:38:49.840> post.

caption yeah let's do caption post.

caption yeah let's do caption post.
caption<03:38:52.199> now<03:38:52.359> if<03:38:52.479> we<03:38:52.640> do<03:38:52.800> it<03:38:53.160> we<03:38:53.239> can<03:38:53.359> see<03:38:53.600> River

caption now if we do it we can see River

caption now if we do it we can see River
and<03:38:54.279> nature<03:38:54.880> which<03:38:55.000> means<03:38:55.239> we're<03:38:55.479> getting<03:38:55.800> it

and nature which means we're getting it

and nature which means we're getting it
right<03:38:56.560> here<03:38:56.720> from<03:38:57.000> aite<03:38:57.680> from<03:38:57.840> our<03:38:58.080> own<03:38:58.560> server

right here from aite from our own server

right here from aite from our own server
database<03:39:00.399> how<03:39:00.760> cool<03:39:01.199> is<03:39:01.439> that<03:39:02.319> but<03:39:02.560> instead<03:39:02.840> of

database how cool is that but instead of

database how cool is that but instead of
Simply<03:39:03.199> showing<03:39:03.520> the<03:39:03.720> caption<03:39:04.520> let's<03:39:04.720> show

Simply showing the caption let's show

Simply showing the caption let's show
something<03:39:05.399> more<03:39:06.040> a<03:39:06.279> nice<03:39:06.600> looking<03:39:07.000> post<03:39:07.920> so<03:39:08.239> to

something more a nice looking post so to

something more a nice looking post so to
do<03:39:08.640> it<03:39:09.120> we<03:39:09.239> can<03:39:09.439> render<03:39:09.880> a<03:39:10.040> new<03:39:10.479> component

do it we can render a new component

do it we can render a new component
called<03:39:11.840> post

called post

called post
card<03:39:15.279> this<03:39:15.399> is<03:39:15.520> going<03:39:15.680> to<03:39:15.800> be<03:39:15.920> a<03:39:16.080> self-closing

card this is going to be a self-closing

card this is going to be a self-closing
component<03:39:17.640> to<03:39:17.960> which<03:39:18.399> we're<03:39:18.520> going<03:39:18.640> to<03:39:18.960> pass

component to which we're going to pass

component to which we're going to pass
the<03:39:19.760> post<03:39:20.479> as<03:39:20.640> the<03:39:20.840> first<03:39:21.120> and<03:39:21.359> only

the post as the first and only

the post as the first and only
prop<03:39:23.760> there<03:39:23.920> we<03:39:24.120> go<03:39:25.000> now<03:39:25.199> this<03:39:25.399> postcard<03:39:26.399> of

prop there we go now this postcard of

prop there we go now this postcard of
course<03:39:26.960> is<03:39:27.120> something<03:39:27.439> we<03:39:27.600> have<03:39:27.720> to<03:39:27.880> create<03:39:28.680> So

course is something we have to create So

course is something we have to create So
within<03:39:29.680> components<03:39:30.680> and<03:39:30.840> then<03:39:31.160> shared<03:39:32.000> we<03:39:32.080> can

within components and then shared we can

within components and then shared we can
create<03:39:32.560> a<03:39:32.840> new<03:39:33.840> post<03:39:34.479> card.<03:39:35.680> TSX<03:39:36.680> run

create a new post card. TSX run

create a new post card. TSX run
RFC<03:39:38.760> and<03:39:38.960> we<03:39:39.040> can<03:39:39.239> import<03:39:39.600> it<03:39:40.000> right<03:39:40.279> right

RFC and we can import it right right

RFC and we can import it right right
here<03:39:40.880> within<03:39:41.160> the<03:39:41.680> homepage<03:39:42.680> once<03:39:42.840> you<03:39:43.000> do

here within the homepage once you do

here within the homepage once you do
that<03:39:43.760> you<03:39:43.880> can<03:39:44.000> see<03:39:44.199> the<03:39:44.680> postcard<03:39:45.680> and<03:39:45.800> now

that you can see the postcard and now

that you can see the postcard and now
within<03:39:46.920> the<03:39:47.080> postcard<03:39:47.960> we<03:39:48.080> are<03:39:48.279> ready<03:39:48.520> to

within the postcard we are ready to

within the postcard we are ready to
implement<03:39:49.439> the<03:39:49.680> UI<03:39:50.520> of<03:39:50.640> the

implement the UI of the

implement the UI of the
postcard<03:39:53.000> first<03:39:53.239> of<03:39:53.439> all<03:39:53.960> we<03:39:54.199> know<03:39:54.960> that<03:39:55.199> it's

postcard first of all we know that it's

postcard first of all we know that it's
going<03:39:55.640> to<03:39:56.080> accept<03:39:56.960> posts<03:39:57.560> as<03:39:57.720> the<03:39:57.920> prop<03:39:58.520> so<03:39:58.680> we

going to accept posts as the prop so we

going to accept posts as the prop so we
can<03:39:58.920> say<03:39:59.239> post<03:40:00.199> did<03:40:00.399> we<03:40:00.560> pass<03:40:00.720> it<03:40:00.840> as<03:40:00.960> a<03:40:01.160> post<03:40:01.439> or

can say post did we pass it as a post or

can say post did we pass it as a post or
posts<03:40:02.840> yeah<03:40:03.000> it's<03:40:03.160> definitely<03:40:03.520> going<03:40:03.680> to<03:40:03.800> be

posts yeah it's definitely going to be

posts yeah it's definitely going to be
post<03:40:04.640> because<03:40:04.840> it's<03:40:05.040> singular<03:40:05.560> one<03:40:06.359> so<03:40:06.680> we<03:40:06.760> can

post because it's singular one so we can

post because it's singular one so we can
say<03:40:07.199> post<03:40:07.720> is<03:40:07.880> going<03:40:08.040> to<03:40:08.199> be<03:40:08.359> of<03:40:08.520> a<03:40:08.800> type<03:40:09.800> post

say post is going to be of a type post

say post is going to be of a type post
post<03:40:10.479> card<03:40:11.120> props<03:40:12.120> where<03:40:12.399> we<03:40:12.520> can<03:40:12.720> Define<03:40:12.960> it

post card props where we can Define it

post card props where we can Define it
right<03:40:13.319> here<03:40:13.439> at<03:40:13.560> the<03:40:13.760> top<03:40:14.520> type<03:40:15.359> postcard

right here at the top type postcard

right here at the top type postcard
props<03:40:17.560> is<03:40:17.720> going<03:40:17.880> to<03:40:18.040> be<03:40:18.720> post<03:40:19.640> of

props is going to be post of

props is going to be post of
models.<03:40:21.640> document<03:40:22.640> and<03:40:22.840> this<03:40:23.000> models<03:40:23.680> is

models. document and this models is

models. document and this models is
coming<03:40:24.239> from<03:40:24.640> app<03:40:25.000> right<03:40:25.279> so<03:40:25.560> immediately

coming from app right so immediately

coming from app right so immediately
know<03:40:26.399> the<03:40:26.560> structure<03:40:27.199> of<03:40:27.399> this<03:40:27.880> document<03:40:28.880> once

know the structure of this document once

know the structure of this document once
we<03:40:29.199> get<03:40:29.359> it<03:40:29.720> we<03:40:29.840> can<03:40:30.000> use<03:40:30.279> its<03:40:30.520> data<03:40:31.000> and<03:40:31.160> then

we get it we can use its data and then

we get it we can use its data and then
render<03:40:31.680> it<03:40:32.279> so<03:40:32.479> let's<03:40:32.640> create<03:40:32.880> a<03:40:33.040> new<03:40:33.239> div

render it so let's create a new div

render it so let's create a new div
that's<03:40:34.080> going<03:40:34.279> to<03:40:34.520> have<03:40:34.880> a<03:40:35.199> class<03:40:35.760> name<03:40:36.560> equal

that's going to have a class name equal

that's going to have a class name equal
to<03:40:38.000> post-c<03:40:39.120> card<03:40:40.520> that's<03:40:40.760> going<03:40:40.920> to<03:40:41.120> create

to post-c card that's going to create

to post-c card that's going to create
this<03:40:41.720> nice<03:40:42.319> rectangle<03:40:43.319> we<03:40:43.439> can<03:40:43.640> also<03:40:43.880> do

this nice rectangle we can also do

this nice rectangle we can also do
another<03:40:44.399> one<03:40:45.120> right<03:40:45.359> below<03:40:46.080> that's<03:40:46.279> going<03:40:46.439> to

another one right below that's going to

another one right below that's going to
have<03:40:46.760> a<03:40:47.000> class<03:40:47.359> name<03:40:48.080> equal<03:40:48.359> to<03:40:48.920> flex

have a class name equal to flex

have a class name equal to flex
between<03:40:51.520> within<03:40:51.800> it<03:40:52.160> we<03:40:52.239> can<03:40:52.439> create<03:40:52.800> another

between within it we can create another

between within it we can create another
div<03:40:53.800> that's<03:40:54.000> going<03:40:54.160> to<03:40:54.439> have<03:40:54.800> a<03:40:55.120> class<03:40:55.560> name

div that's going to have a class name

div that's going to have a class name
equal<03:40:56.760> to<03:40:57.560> flex<03:40:58.560> items<03:40:59.040> Das<03:40:59.399> Center<03:41:00.399> and<03:41:00.680> a<03:41:00.920> gap

equal to flex items Das Center and a gap

equal to flex items Das Center and a gap
of<03:41:01.439> three<03:41:02.439> and<03:41:02.640> then<03:41:02.920> there<03:41:03.279> we<03:41:03.399> can<03:41:03.520> render

of three and then there we can render

of three and then there we can render
who<03:41:04.239> created<03:41:04.640> it<03:41:04.960> so<03:41:05.160> that's<03:41:05.359> going<03:41:05.520> to<03:41:05.720> be

who created it so that's going to be

who created it so that's going to be
this<03:41:06.840> right<03:41:07.080> here<03:41:07.800> Hobbit<03:41:08.439> with<03:41:08.600> a<03:41:08.760> photo<03:41:09.279> two

this right here Hobbit with a photo two

this right here Hobbit with a photo two
days<03:41:09.720> ago<03:41:10.399> and<03:41:10.560> then<03:41:10.840> tags<03:41:11.399> that<03:41:11.520> were<03:41:12.040> added

days ago and then tags that were added

days ago and then tags that were added
so<03:41:13.279> let's<03:41:13.479> create<03:41:13.720> a<03:41:13.880> new<03:41:14.359> link<03:41:15.359> and<03:41:15.600> this<03:41:15.800> link

so let's create a new link and this link

so let's create a new link and this link
has<03:41:16.520> to<03:41:16.680> be<03:41:16.840> imported<03:41:17.560> so<03:41:17.720> we<03:41:17.840> can<03:41:18.000> say<03:41:18.279> import

has to be imported so we can say import

has to be imported so we can say import
link<03:41:19.840> from<03:41:20.359> react<03:41:21.160> router

link from react router

link from react router
Dom<03:41:24.359> that<03:41:24.600> link<03:41:25.040> is<03:41:25.199> going<03:41:25.359> to<03:41:25.600> point<03:41:26.159> to<03:41:26.399> the

Dom that link is going to point to the

Dom that link is going to point to the
Creator<03:41:27.080> who<03:41:27.279> created<03:41:27.680> it<03:41:28.040> so<03:41:28.199> we<03:41:28.279> can<03:41:28.439> say

Creator who created it so we can say

Creator who created it so we can say
two<03:41:30.239> that's<03:41:30.399> going<03:41:30.560> to<03:41:30.640> be

two that's going to be

two that's going to be
dynamic<03:41:32.560> forward<03:41:33.000> SL

dynamic forward SL

dynamic forward SL
profile

profile

profile
slost<03:41:37.319> doc<03:41:38.120> creator.<03:41:39.120> dollar<03:41:39.560> sign

slost doc creator. dollar sign

slost doc creator. dollar sign
ID<03:41:42.159> here<03:41:42.479> we<03:41:42.560> can<03:41:42.720> show<03:41:43.040> the<03:41:43.239> Creator's<03:41:43.760> image

ID here we can show the Creator's image

ID here we can show the Creator's image
by<03:41:44.399> saying<03:41:44.760> image<03:41:45.680> has<03:41:45.840> a<03:41:46.120> source<03:41:46.640> of<03:41:46.880> equal<03:41:47.239> to

by saying image has a source of equal to

by saying image has a source of equal to
post<03:41:48.640> question<03:41:49.040> mark.

post question mark.

post question mark.
Creator<03:41:51.880> question<03:41:52.279> mark.<03:41:52.840> image<03:41:53.359> URL<03:41:54.359> or<03:41:54.720> we

Creator question mark. image URL or we

Creator question mark. image URL or we
can<03:41:54.960> do<03:41:55.080> a<03:41:55.279> default<03:41:56.120> of<03:41:56.760> SL<03:41:57.319> assets<03:41:58.319> SL<03:41:59.000> ions<03:42:00.000> SL

can do a default of SL assets SL ions SL

can do a default of SL assets SL ions SL
profile<03:42:01.040> dplace<03:42:01.840> holder.<03:42:03.279> SVG<03:42:04.279> there<03:42:04.439> we<03:42:04.640> go

profile dplace holder. SVG there we go

profile dplace holder. SVG there we go
that's<03:42:05.040> a<03:42:05.239> huge<03:42:05.680> the<03:42:05.840> real<03:42:06.399> JSM<03:42:07.399> we<03:42:07.520> can<03:42:07.680> also

that's a huge the real JSM we can also

that's a huge the real JSM we can also
give<03:42:08.080> it<03:42:08.199> an<03:42:08.319> ALT<03:42:08.680> tag<03:42:08.920> of<03:42:09.159> creator

give it an ALT tag of creator

give it an ALT tag of creator
and<03:42:11.040> a<03:42:11.279> class<03:42:11.640> name<03:42:12.159> of<03:42:12.600> rounded<03:42:13.399> D

and a class name of rounded D

and a class name of rounded D
full<03:42:15.520> W<03:42:16.120> of<03:42:16.840> 12<03:42:17.840> and<03:42:18.040> then<03:42:18.159> on<03:42:18.359> large<03:42:18.720> devices<03:42:19.239> h

full W of 12 and then on large devices h

full W of 12 and then on large devices h
of<03:42:19.760> 12<03:42:20.439> as<03:42:20.640> well<03:42:21.399> below<03:42:21.800> that<03:42:21.960> link<03:42:22.479> we<03:42:22.600> can

of 12 as well below that link we can

of 12 as well below that link we can
render<03:42:23.120> a<03:42:23.359> div<03:42:24.120> that's<03:42:24.319> going<03:42:24.479> to<03:42:24.720> have<03:42:24.960> a

render a div that's going to have a

render a div that's going to have a
class<03:42:25.600> name<03:42:26.359> equal<03:42:26.680> to<03:42:27.600> flex

class name equal to flex

class name equal to flex
flex-all<03:42:31.159> and<03:42:31.680> within<03:42:31.960> it<03:42:32.359> we<03:42:32.479> can<03:42:32.640> render<03:42:33.199> a<03:42:33.439> P

flex-all and within it we can render a P

flex-all and within it we can render a P
tag<03:42:34.920> that's<03:42:35.120> going<03:42:35.279> to<03:42:35.399> render<03:42:35.840> the<03:42:36.120> post.

tag that's going to render the post.

tag that's going to render the post.
creator.<03:42:38.560> name<03:42:39.560> okay<03:42:40.040> that's<03:42:40.399> better<03:42:41.399> below

creator. name okay that's better below

creator. name okay that's better below
this<03:42:42.000> P<03:42:42.279> tag<03:42:42.640> we<03:42:42.760> can<03:42:42.880> render<03:42:43.199> a<03:42:43.439> div<03:42:44.439> that's

this P tag we can render a div that's

this P tag we can render a div that's
going<03:42:44.760> to<03:42:44.880> render<03:42:45.279> a<03:42:45.479> new<03:42:45.760> P<03:42:46.040> tag<03:42:47.000> and<03:42:47.159> within

going to render a new P tag and within

going to render a new P tag and within
here<03:42:48.000> we<03:42:48.080> can<03:42:48.199> show<03:42:48.439> the<03:42:49.159> post.<03:42:50.159> dollar<03:42:50.560> sign

here we can show the post. dollar sign

here we can show the post. dollar sign
created<03:42:52.520> at<03:42:53.520> there<03:42:53.640> we<03:42:53.800> go<03:42:53.960> so<03:42:54.120> now<03:42:54.239> we<03:42:54.359> have

created at there we go so now we have

created at there we go so now we have
the<03:42:54.600> full<03:42:55.080> date<03:42:56.080> below<03:42:56.399> it<03:42:56.680> we<03:42:56.800> can<03:42:56.960> add<03:42:57.159> some

the full date below it we can add some

the full date below it we can add some
kind<03:42:57.439> of<03:42:57.560> a<03:42:57.720> dash<03:42:58.399> and<03:42:58.560> then<03:42:58.800> add<03:42:59.080> another<03:42:59.439> one

kind of a dash and then add another one

kind of a dash and then add another one
that's<03:43:00.000> going<03:43:00.159> to<03:43:00.279> say<03:43:00.640> post.

that's going to say post.

that's going to say post.
location<03:43:03.040> there<03:43:03.199> we<03:43:03.359> go<03:43:03.560> so<03:43:03.760> now<03:43:03.960> we<03:43:04.120> have

location there we go so now we have

location there we go so now we have
almost<03:43:04.800> everything<03:43:05.439> we<03:43:05.760> need<03:43:06.640> but<03:43:06.880> let's<03:43:07.080> go

almost everything we need but let's go

almost everything we need but let's go
ahead<03:43:07.399> and<03:43:07.640> style<03:43:07.960> it<03:43:08.080> a<03:43:08.239> bit<03:43:08.880> better<03:43:10.000> this

ahead and style it a bit better this

ahead and style it a bit better this
first<03:43:10.520> P<03:43:10.800> tag<03:43:11.199> is<03:43:11.359> going<03:43:11.560> to<03:43:11.800> have<03:43:12.080> a<03:43:12.359> class

first P tag is going to have a class

first P tag is going to have a class
name<03:43:13.359> equal<03:43:13.680> to<03:43:14.359> base-

name equal to base-

name equal to base-
medium<03:43:17.120> this<03:43:17.239> is<03:43:17.359> going<03:43:17.520> to<03:43:17.640> make<03:43:17.760> it<03:43:17.960> Bolder

medium this is going to make it Bolder

medium this is going to make it Bolder
on<03:43:18.960> large<03:43:19.359> devices<03:43:19.880> it's<03:43:20.040> going<03:43:20.199> to<03:43:20.319> be<03:43:20.560> body

on large devices it's going to be body

on large devices it's going to be body
bold<03:43:22.439> and<03:43:22.600> it's<03:43:22.760> going<03:43:22.920> to<03:43:23.040> be<03:43:23.239> text-

bold and it's going to be text-

bold and it's going to be text-
light-1<03:43:25.720> the<03:43:25.960> div<03:43:26.359> below<03:43:26.920> is<03:43:27.040> going<03:43:27.239> to<03:43:27.399> have<03:43:27.520> a

light-1 the div below is going to have a

light-1 the div below is going to have a
class<03:43:28.080> name<03:43:28.600> of<03:43:28.840> flex<03:43:29.359> Das<03:43:30.040> Center<03:43:31.040> that's

class name of flex Das Center that's

class name of flex Das Center that's
going<03:43:31.399> to<03:43:31.560> center<03:43:31.920> it<03:43:32.800> a<03:43:33.040> gap<03:43:33.319> of<03:43:33.479> Two<03:43:34.199> and<03:43:34.399> a

going to center it a gap of Two and a

going to center it a gap of Two and a
text<03:43:35.040> of<03:43:35.359> light<03:43:35.920> three<03:43:36.439> because<03:43:36.680> it's<03:43:36.920> not<03:43:37.239> so

text of light three because it's not so

text of light three because it's not so
important<03:43:38.439> as<03:43:38.600> the<03:43:38.760> Creator<03:43:39.159> name<03:43:40.319> the<03:43:40.479> P<03:43:40.720> tag

important as the Creator name the P tag

important as the Creator name the P tag
below<03:43:41.479> can<03:43:41.680> have<03:43:41.840> a<03:43:42.040> class<03:43:42.399> name<03:43:42.960> of<03:43:43.680> subtle

below can have a class name of subtle

below can have a class name of subtle
semi<03:43:45.080> bold<03:43:45.880> so<03:43:46.040> it's<03:43:46.159> a<03:43:46.279> bit<03:43:46.479> less<03:43:47.000> important

semi bold so it's a bit less important

semi bold so it's a bit less important
and<03:43:48.319> a<03:43:48.600> large<03:43:48.960> devices<03:43:49.680> small

and a large devices small

and a large devices small
regular<03:43:53.120> finally<03:43:53.760> the<03:43:53.960> last<03:43:54.239> btag<03:43:54.760> is<03:43:54.920> going

regular finally the last btag is going

regular finally the last btag is going
to<03:43:55.239> have<03:43:55.399> a<03:43:55.560> class<03:43:56.000> name<03:43:56.680> of<03:43:57.080> subtle<03:43:58.040> D<03:43:58.319> semi

to have a class name of subtle D semi

to have a class name of subtle D semi
bold<03:43:59.840> and<03:44:00.000> a<03:44:00.159> large<03:44:00.479> devices<03:44:01.279> small<03:44:02.040> regular

bold and a large devices small regular

bold and a large devices small regular
so<03:44:03.239> same<03:44:03.760> thing<03:44:04.760> now<03:44:04.920> the<03:44:05.080> last<03:44:05.239> thing<03:44:05.399> we<03:44:05.520> have

so same thing now the last thing we have

so same thing now the last thing we have
to<03:44:05.760> figure<03:44:06.040> out<03:44:06.600> is<03:44:06.960> how<03:44:07.120> to<03:44:07.399> actually<03:44:07.840> format

to figure out is how to actually format

to figure out is how to actually format
this<03:44:08.800> dat<03:44:09.199> string<03:44:09.880> into<03:44:10.159> something<03:44:10.479> that

this dat string into something that

this dat string into something that
makes<03:44:10.920> sense<03:44:11.600> like<03:44:11.760> on<03:44:12.080> here<03:44:12.479> we<03:44:12.600> say<03:44:12.880> two<03:44:13.279> days

makes sense like on here we say two days

makes sense like on here we say two days
ago<03:44:14.439> and<03:44:14.760> this<03:44:15.000> my<03:44:15.159> friends<03:44:15.760> is<03:44:15.960> the<03:44:16.199> job<03:44:16.520> for

ago and this my friends is the job for

ago and this my friends is the job for
Chad<03:44:17.279> GPT<03:44:18.279> no<03:44:18.520> longer<03:44:18.840> do<03:44:18.960> you<03:44:19.080> have<03:44:19.199> to<03:44:19.359> create

Chad GPT no longer do you have to create

Chad GPT no longer do you have to create
these<03:44:19.880> functions<03:44:20.279> on<03:44:20.439> your<03:44:20.600> own<03:44:21.159> you<03:44:21.279> can

these functions on your own you can

these functions on your own you can
Google<03:44:21.760> it<03:44:22.040> or<03:44:22.159> you<03:44:22.239> can<03:44:22.439> simply<03:44:22.840> ask<03:44:23.120> Chad<03:44:23.399> GPT

Google it or you can simply ask Chad GPT

Google it or you can simply ask Chad GPT
to<03:44:23.960> do<03:44:24.120> it<03:44:24.239> for<03:44:24.800> you<03:44:25.800> so<03:44:26.080> if<03:44:26.199> you<03:44:26.359> go<03:44:26.479> to<03:44:26.640> chat

to do it for you so if you go to chat

to do it for you so if you go to chat
GPT<03:44:27.800> say<03:44:28.120> something<03:44:28.560> like<03:44:29.199> I<03:44:29.439> have<03:44:29.680> this<03:44:29.880> date

GPT say something like I have this date

GPT say something like I have this date
string<03:44:31.279> literally<03:44:31.840> like<03:44:32.040> that<03:44:32.520> I<03:44:32.720> have<03:44:33.080> this

string literally like that I have this

string literally like that I have this
date

date

date
string<03:44:36.040> I'm

string I'm

string I'm
building<03:44:38.199> a<03:44:38.760> social

building a social

building a social
media<03:44:41.319> app<03:44:41.720> in

media app in

media app in
JavaScript<03:44:43.640> and<03:44:44.040> I<03:44:44.239> want<03:44:45.239> to<03:44:45.600> convert<03:44:46.520> that

JavaScript and I want to convert that

JavaScript and I want to convert that
date<03:44:47.359> string<03:44:48.359> into<03:44:48.920> a<03:44:49.199> more

date string into a more

date string into a more
meaningful<03:44:51.359> format<03:44:52.479> like<03:44:53.479> two<03:44:54.080> days<03:44:54.359> ago<03:44:55.120> or

meaningful format like two days ago or

meaningful format like two days ago or
two<03:44:55.920> hours

two hours

two hours
ago<03:44:58.479> create<03:44:59.000> a

ago create a

ago create a
JavaScript<03:45:01.080> function<03:45:02.000> that<03:45:02.319> does<03:45:02.680> that<03:45:03.600> okay

JavaScript function that does that okay

JavaScript function that does that okay
I<03:45:04.040> could<03:45:04.159> have<03:45:04.279> been<03:45:04.399> a<03:45:04.520> bit<03:45:04.680> more<03:45:04.920> precise<03:45:05.640> but

I could have been a bit more precise but

I could have been a bit more precise but
this<03:45:06.159> is<03:45:06.279> how<03:45:06.399> we<03:45:06.520> can<03:45:06.640> do<03:45:06.760> it<03:45:06.960> as<03:45:07.120> well

this is how we can do it as well

this is how we can do it as well
hopefully<03:45:08.319> it's<03:45:08.479> going<03:45:08.640> to<03:45:08.800> give<03:45:08.920> us

hopefully it's going to give us

hopefully it's going to give us
something<03:45:09.319> we<03:45:09.399> can<03:45:09.760> work<03:45:10.040> with<03:45:11.040> it<03:45:11.199> created<03:45:11.560> a

something we can work with it created a

something we can work with it created a
function<03:45:12.080> called<03:45:12.319> format<03:45:12.840> date<03:45:13.560> and<03:45:13.800> it

function called format date and it

function called format date and it
showed<03:45:14.279> us<03:45:14.720> how<03:45:14.920> we<03:45:15.040> can<03:45:15.239> use<03:45:15.399> it<03:45:16.279> so<03:45:16.720> let's

showed us how we can use it so let's

showed us how we can use it so let's
simply<03:45:17.399> copy<03:45:18.080> this<03:45:18.560> function<03:45:19.560> and<03:45:19.720> let's<03:45:20.479> go

simply copy this function and let's go

simply copy this function and let's go
right<03:45:21.720> here<03:45:22.080> to<03:45:22.319> our<03:45:22.760> source<03:45:23.760> lib<03:45:24.720> and<03:45:24.840> then

right here to our source lib and then

right here to our source lib and then
utils<03:45:25.920> dots<03:45:26.920> within<03:45:27.319> here<03:45:27.800> you<03:45:27.920> can<03:45:28.159> paste

utils dots within here you can paste

utils dots within here you can paste
this<03:45:29.040> function<03:45:30.000> and<03:45:30.120> we<03:45:30.239> can<03:45:30.439> also<03:45:30.680> say<03:45:31.439> export

this function and we can also say export

this function and we can also say export
function<03:45:32.840> format<03:45:33.880> date<03:45:34.880> here<03:45:35.159> our<03:45:35.399> typescript

function format date here our typescript

function format date here our typescript
is<03:45:35.960> complaining<03:45:36.359> a<03:45:36.520> bit<03:45:36.920> because<03:45:37.120> I<03:45:37.239> forgot<03:45:37.600> to

is complaining a bit because I forgot to

is complaining a bit because I forgot to
tell<03:45:38.279> chat<03:45:38.560> GPT<03:45:39.000> to<03:45:39.080> make<03:45:39.199> it<03:45:39.279> in<03:45:39.399> typ<03:45:39.800> script

tell chat GPT to make it in typ script

tell chat GPT to make it in typ script
so<03:45:40.239> I<03:45:40.319> can<03:45:40.479> simply<03:45:40.760> say<03:45:41.000> make<03:45:41.239> it<03:45:42.080> typescript

so I can simply say make it typescript

so I can simply say make it typescript
that<03:45:43.199> should<03:45:43.359> do<03:45:43.520> the<03:45:43.640> trick<03:45:44.359> right<03:45:45.359> um<03:45:45.680> let's

that should do the trick right um let's

that should do the trick right um let's
see<03:45:46.479> there<03:45:46.600> we<03:45:46.760> go<03:45:46.960> certainly<03:45:47.800> that's<03:45:48.080> great

see there we go certainly that's great

see there we go certainly that's great
so<03:45:48.840> we<03:45:48.920> can<03:45:49.120> simply<03:45:49.479> copy<03:45:49.760> it<03:45:50.000> again<03:45:50.680> and<03:45:50.960> it

so we can simply copy it again and it

so we can simply copy it again and it
should<03:45:51.399> have<03:45:51.840> no<03:45:52.359> problems<03:45:53.159> at<03:45:53.359> all<03:45:54.199> we<03:45:54.359> just

should have no problems at all we just

should have no problems at all we just
have<03:45:54.720> to<03:45:55.359> export<03:45:55.800> it<03:45:56.600> there<03:45:56.720> we<03:45:56.880> go<03:45:57.239> export

have to export it there we go export

have to export it there we go export
format<03:45:58.399> date<03:45:59.399> now<03:45:59.840> we<03:45:59.960> can<03:46:00.279> import<03:46:00.800> this<03:46:01.239> right

format date now we can import this right

format date now we can import this right
here<03:46:01.760> and<03:46:02.000> wrap<03:46:02.439> the<03:46:02.600> post<03:46:02.920> created<03:46:03.319> at<03:46:03.760> so<03:46:03.920> we

here and wrap the post created at so we

here and wrap the post created at so we
can<03:46:04.159> say<03:46:04.479> format<03:46:04.960> date

can say format date

can say format date
wrapid<03:46:07.439> and<03:46:07.560> then<03:46:07.720> we<03:46:07.840> can<03:46:08.040> simply<03:46:08.600> import<03:46:08.960> it

wrapid and then we can simply import it

wrapid and then we can simply import it
from<03:46:09.319> l

from l

from l
utils<03:46:11.159> if<03:46:11.279> we<03:46:11.439> do<03:46:11.640> that<03:46:11.840> and<03:46:12.000> go<03:46:12.279> back<03:46:12.640> you<03:46:12.760> can

utils if we do that and go back you can

utils if we do that and go back you can
see<03:46:13.239> one<03:46:13.560> day<03:46:13.720> ago<03:46:14.199> which<03:46:14.319> is<03:46:14.520> exactly<03:46:14.920> when<03:46:15.040> I

see one day ago which is exactly when I

see one day ago which is exactly when I
posted<03:46:15.920> it<03:46:16.920> sometimes<03:46:17.319> it's<03:46:17.640> possible<03:46:18.120> that

posted it sometimes it's possible that

posted it sometimes it's possible that
Chad<03:46:18.560> GPT<03:46:19.000> is<03:46:19.120> going<03:46:19.279> to<03:46:19.479> imagine<03:46:19.880> something

Chad GPT is going to imagine something

Chad GPT is going to imagine something
and<03:46:20.359> give<03:46:20.479> you<03:46:20.680> wrong<03:46:21.000> code<03:46:21.800> so<03:46:22.040> for<03:46:22.319> that

and give you wrong code so for that

and give you wrong code so for that
reason<03:46:23.359> and<03:46:23.560> for<03:46:23.720> some<03:46:23.920> other<03:46:24.120> functions<03:46:24.479> that

reason and for some other functions that

reason and for some other functions that
we're<03:46:24.760> going<03:46:24.840> to<03:46:24.960> use<03:46:25.199> later<03:46:25.479> on<03:46:26.359> the<03:46:26.520> full

we're going to use later on the full

we're going to use later on the full
utils<03:46:27.560> thats<03:46:28.159> file<03:46:28.520> is<03:46:28.680> going<03:46:28.840> to<03:46:29.000> be<03:46:29.199> in<03:46:29.359> the

utils thats file is going to be in the

utils thats file is going to be in the
GitHub<03:46:29.880> gist<03:46:30.159> down<03:46:30.359> below<03:46:31.080> it<03:46:31.239> contains<03:46:31.640> the

GitHub gist down below it contains the

GitHub gist down below it contains the
function<03:46:32.159> we<03:46:32.319> just<03:46:32.640> created<03:46:33.640> as<03:46:33.800> well<03:46:33.920> as<03:46:34.040> the

function we just created as well as the

function we just created as well as the
check<03:46:34.439> is<03:46:34.720> liked<03:46:35.199> which<03:46:35.279> is<03:46:35.399> going<03:46:35.560> to<03:46:35.720> help<03:46:35.920> us

check is liked which is going to help us

check is liked which is going to help us
later<03:46:36.359> on<03:46:37.239> and<03:46:37.439> then<03:46:37.760> another<03:46:38.680> function

later on and then another function

later on and then another function
called<03:46:39.720> format<03:46:40.239> date<03:46:40.760> string<03:46:41.760> but<03:46:42.080> that's

called format date string but that's

called format date string but that's
more<03:46:42.439> or<03:46:42.600> less<03:46:42.880> it<03:46:43.640> so<03:46:43.920> now<03:46:44.399> we<03:46:44.520> can<03:46:44.720> go<03:46:45.080> back<03:46:45.520> to

more or less it so now we can go back to

more or less it so now we can go back to
our<03:46:46.279> function<03:46:46.920> it<03:46:47.080> still<03:46:47.319> works<03:46:47.920> exactly<03:46:48.359> as

our function it still works exactly as

our function it still works exactly as
it<03:46:48.640> should<03:46:49.040> one<03:46:49.319> day<03:46:49.479> ago<03:46:50.319> and<03:46:50.520> now<03:46:50.800> let's

it should one day ago and now let's

it should one day ago and now let's
focus<03:46:51.359> on<03:46:51.560> the<03:46:51.760> most<03:46:52.080> important<03:46:52.600> part<03:46:53.399> which

focus on the most important part which

focus on the most important part which
is<03:46:53.880> showing<03:46:54.279> some<03:46:54.479> more<03:46:54.720> details<03:46:55.279> like<03:46:55.560> the

is showing some more details like the

is showing some more details like the
caption<03:46:56.080> and<03:46:56.239> the<03:46:56.720> tags<03:46:57.720> and<03:46:57.880> then<03:46:58.159> finally

caption and the tags and then finally

caption and the tags and then finally
the<03:46:59.080> image<03:47:00.080> so<03:47:00.279> we<03:47:00.359> can<03:47:00.520> go<03:47:00.800> three<03:47:01.080> devs<03:47:01.560> down<03:47:02.080> 1

the image so we can go three devs down 1

the image so we can go three devs down 1
2<03:47:03.000> 3<03:47:03.880> and<03:47:04.040> then<03:47:04.319> here<03:47:04.720> we<03:47:04.840> can<03:47:05.040> create<03:47:05.439> a<03:47:05.680> new

2 3 and then here we can create a new

2 3 and then here we can create a new
link<03:47:07.920> this<03:47:08.159> link<03:47:08.560> will<03:47:08.800> only<03:47:09.080> be<03:47:09.199> shown<03:47:09.960> if<03:47:10.239> we

link this link will only be shown if we

link this link will only be shown if we
are<03:47:10.720> the<03:47:10.840> ones<03:47:11.120> that<03:47:11.319> created<03:47:11.680> the<03:47:11.880> post

are the ones that created the post

are the ones that created the post
because<03:47:13.239> then<03:47:13.560> we'll<03:47:13.800> be<03:47:13.960> able<03:47:14.199> to<03:47:14.439> update<03:47:14.840> it

because then we'll be able to update it

because then we'll be able to update it
so<03:47:15.880> here<03:47:16.319> we<03:47:16.439> can<03:47:16.600> say<03:47:16.880> this<03:47:17.000> is<03:47:17.120> going<03:47:17.319> to

so here we can say this is going to

so here we can say this is going to
point2

point2

point2
slash<03:47:21.399> update

slash update

slash update
dpost

dpost

dpost
slost<03:47:25.840> dollar<03:47:26.239> sign<03:47:26.760> ID<03:47:27.760> so<03:47:27.880> it's<03:47:28.040> going<03:47:28.199> to

slost dollar sign ID so it's going to

slost dollar sign ID so it's going to
point<03:47:28.520> us<03:47:28.680> to<03:47:28.840> the<03:47:29.000> update<03:47:29.680> page<03:47:30.680> and<03:47:30.880> there<03:47:31.080> we

point us to the update page and there we

point us to the update page and there we
can<03:47:31.319> render<03:47:31.640> an<03:47:31.840> image<03:47:32.600> that's<03:47:32.760> going<03:47:32.920> to<03:47:33.080> have

can render an image that's going to have

can render an image that's going to have
a<03:47:33.319> source<03:47:34.199> equal<03:47:34.520> to<03:47:35.159> SL<03:47:35.720> assets<03:47:36.720> SL<03:47:37.120> ions<03:47:38.120> SL

a source equal to SL assets SL ions SL

a source equal to SL assets SL ions SL
edit.

edit.

edit.
SVG<03:47:41.199> of<03:47:41.359> course<03:47:41.520> we<03:47:41.640> want<03:47:41.760> to<03:47:41.840> make<03:47:41.960> it<03:47:42.080> a<03:47:42.159> bit

SVG of course we want to make it a bit

SVG of course we want to make it a bit
smaller<03:47:43.000> so<03:47:43.199> let's<03:47:43.399> give<03:47:43.479> it<03:47:43.600> an<03:47:43.760> ALT<03:47:44.120> tag<03:47:44.399> of

smaller so let's give it an ALT tag of

smaller so let's give it an ALT tag of
edit<03:47:45.600> and<03:47:45.840> a<03:47:46.080> width<03:47:46.560> of<03:47:46.800> 20<03:47:47.600> as<03:47:47.720> well<03:47:47.880> as<03:47:48.000> a

edit and a width of 20 as well as a

edit and a width of 20 as well as a
height<03:47:48.640> of

height of

height of
20<03:47:50.840> there<03:47:51.000> we<03:47:51.159> go<03:47:51.479> that's<03:47:51.720> better<03:47:52.359> now<03:47:52.600> how<03:47:52.760> can

20 there we go that's better now how can

20 there we go that's better now how can
we<03:47:53.080> hide<03:47:53.359> this<03:47:53.600> if<03:47:53.680> we're<03:47:53.920> not<03:47:54.159> the<03:47:54.319> Creator

we hide this if we're not the Creator

we hide this if we're not the Creator
well<03:47:55.479> first<03:47:55.920> we<03:47:56.040> have<03:47:56.159> to<03:47:56.319> know<03:47:56.800> what<03:47:56.920> is<03:47:57.080> the

well first we have to know what is the

well first we have to know what is the
ID<03:47:57.880> of<03:47:58.080> the<03:47:58.279> Creator<03:47:59.000> and<03:47:59.159> then<03:47:59.359> the<03:47:59.520> ID<03:47:59.880> of<03:48:00.040> the

ID of the Creator and then the ID of the

ID of the Creator and then the ID of the
currently<03:48:00.560> logged<03:48:00.840> in<03:48:01.040> user<03:48:01.920> how<03:48:02.080> can<03:48:02.239> we<03:48:02.359> know

currently logged in user how can we know

currently logged in user how can we know
that<03:48:03.399> well<03:48:03.800> we<03:48:03.920> have<03:48:04.080> done<03:48:04.199> it<03:48:04.359> a<03:48:04.479> couple<03:48:04.680> of

that well we have done it a couple of

that well we have done it a couple of
times<03:48:05.640> we<03:48:05.760> can<03:48:05.920> simply<03:48:06.199> use<03:48:06.399> the<03:48:06.600> context<03:48:07.479> so

times we can simply use the context so

times we can simply use the context so
here<03:48:08.199> we<03:48:08.319> can<03:48:08.520> say<03:48:09.080> con

here we can say con

here we can say con
user<03:48:11.920> is<03:48:12.279> equal<03:48:12.600> to<03:48:13.600> use<03:48:14.960> user<03:48:16.080> context<03:48:17.080> and<03:48:17.199> we

user is equal to use user context and we

user is equal to use user context and we
can<03:48:17.520> import<03:48:17.840> it<03:48:18.239> right<03:48:18.880> here<03:48:19.880> we<03:48:20.000> can<03:48:20.199> also<03:48:20.439> say

can import it right here we can also say

can import it right here we can also say
if<03:48:20.880> there's<03:48:21.159> no<03:48:21.640> post.<03:48:22.319> Creator<03:48:23.199> then<03:48:23.359> we<03:48:23.439> want

if there's no post. Creator then we want

if there's no post. Creator then we want
to<03:48:23.880> return<03:48:24.640> because<03:48:24.920> something<03:48:25.199> went<03:48:25.479> wrong

to return because something went wrong

to return because something went wrong
here<03:48:26.399> but<03:48:26.560> in<03:48:26.720> this<03:48:26.920> case<03:48:27.159> we<03:48:27.239> should<03:48:27.479> have<03:48:27.640> a

here but in this case we should have a

here but in this case we should have a
user<03:48:28.399> so<03:48:28.680> right<03:48:28.960> below<03:48:29.960> we<03:48:30.080> can<03:48:30.239> add<03:48:30.399> a<03:48:30.640> class

user so right below we can add a class

user so right below we can add a class
name<03:48:31.239> to<03:48:31.479> this

name to this

name to this
link<03:48:33.319> and<03:48:33.560> this<03:48:33.800> class<03:48:34.080> name<03:48:34.760> is<03:48:34.920> going<03:48:35.040> to<03:48:35.159> be

link and this class name is going to be

link and this class name is going to be
dynamic<03:48:36.560> and<03:48:36.680> it's<03:48:36.840> going<03:48:37.000> to<03:48:37.199> check<03:48:38.000> if<03:48:39.000> user

dynamic and it's going to check if user

dynamic and it's going to check if user
us<03:48:39.520> er.<03:48:40.319> ID<03:48:41.080> is<03:48:41.359> not<03:48:41.760> equal<03:48:42.080> to<03:48:42.720> post.

us er. ID is not equal to post.

us er. ID is not equal to post.
creator.<03:48:45.000> dollar<03:48:45.399> sign<03:48:45.840> ID<03:48:46.560> and<03:48:46.720> if<03:48:46.880> that<03:48:47.000> is

creator. dollar sign ID and if that is

creator. dollar sign ID and if that is
true<03:48:47.960> it's<03:48:48.120> going<03:48:48.279> to<03:48:48.680> render<03:48:49.920> hidden<03:48:50.920> and<03:48:51.080> as

true it's going to render hidden and as

true it's going to render hidden and as
you<03:48:51.279> can<03:48:51.439> see<03:48:51.800> in<03:48:51.960> this<03:48:52.159> case<03:48:52.439> it

you can see in this case it

you can see in this case it
disappears<03:48:54.159> although<03:48:54.439> I'm<03:48:54.560> not<03:48:54.680> sure<03:48:55.080> why<03:48:55.439> did

disappears although I'm not sure why did

disappears although I'm not sure why did
it<03:48:55.720> disappear<03:48:56.560> because<03:48:56.880> we<03:48:57.120> indeed<03:48:57.560> are<03:48:58.000> the

it disappear because we indeed are the

it disappear because we indeed are the
real<03:48:58.920> Creator<03:48:59.920> oh<03:49:00.199> it<03:49:00.399> disappeared<03:49:01.120> because

real Creator oh it disappeared because

real Creator oh it disappeared because
this<03:49:02.239> and<03:49:02.520> and<03:49:02.880> hidden<03:49:03.399> should<03:49:03.600> have<03:49:03.800> also

this and and hidden should have also

this and and hidden should have also
been<03:49:04.560> within<03:49:04.960> these<03:49:05.520> brackets<03:49:06.520> and<03:49:06.680> then

been within these brackets and then

been within these brackets and then
within<03:49:08.159> double<03:49:08.520> quoted<03:49:08.840> strings

within double quoted strings

within double quoted strings
there<03:49:09.960> we<03:49:10.159> go<03:49:10.359> so<03:49:10.560> now<03:49:10.800> if<03:49:10.960> we<03:49:11.080> are<03:49:11.520> it's<03:49:11.840> there

there we go so now if we are it's there

there we go so now if we are it's there
if<03:49:12.479> we're<03:49:12.720> not<03:49:13.159> it's<03:49:13.359> not<03:49:13.720> there<03:49:14.720> great<03:49:15.720> now

if we're not it's not there great now

if we're not it's not there great now
let's<03:49:16.359> focus<03:49:16.600> in<03:49:16.840> more<03:49:17.359> post<03:49:17.640> details<03:49:18.199> by

let's focus in more post details by

let's focus in more post details by
going<03:49:18.680> below<03:49:19.199> the<03:49:19.399> link<03:49:19.920> and<03:49:20.120> below<03:49:20.479> this<03:49:21.000> div

going below the link and below this div

going below the link and below this div
we<03:49:22.080> can<03:49:22.279> create<03:49:22.640> another<03:49:23.359> link<03:49:24.359> that's<03:49:24.560> going

we can create another link that's going

we can create another link that's going
to<03:49:24.920> point<03:49:25.359> to<03:49:26.239> for<03:49:26.720> slash<03:49:27.520> let's<03:49:27.680> make<03:49:27.800> it

to point to for slash let's make it

to point to for slash let's make it
Dynamic<03:49:29.479> slost<03:49:30.560> slash<03:49:31.560> post.<03:49:32.279> dooll<03:49:32.600> sign<03:49:32.880> ID

Dynamic slost slash post. dooll sign ID

Dynamic slost slash post. dooll sign ID
so<03:49:34.720> if<03:49:34.800> you<03:49:34.960> click<03:49:35.319> this<03:49:35.800> it's<03:49:35.960> going<03:49:36.080> to<03:49:36.239> point

so if you click this it's going to point

so if you click this it's going to point
to<03:49:36.600> edit<03:49:37.239> if<03:49:37.319> you<03:49:37.479> click<03:49:37.760> anything<03:49:38.159> above<03:49:38.680> it's

to edit if you click anything above it's

to edit if you click anything above it's
going<03:49:38.960> to<03:49:39.080> point<03:49:39.319> point<03:49:39.520> you<03:49:39.600> to<03:49:39.720> the<03:49:39.840> real

going to point point you to the real

going to point point you to the real
user<03:49:41.359> or<03:49:41.520> at<03:49:41.640> least<03:49:41.840> if<03:49:41.960> you<03:49:42.080> click<03:49:42.319> the<03:49:42.439> image

user or at least if you click the image

user or at least if you click the image
but<03:49:43.479> now<03:49:44.120> everything<03:49:44.479> that<03:49:44.600> is<03:49:44.800> within<03:49:45.279> this

but now everything that is within this

but now everything that is within this
link<03:49:45.960> is<03:49:46.080> going<03:49:46.239> to<03:49:46.439> point<03:49:46.680> you<03:49:46.800> to<03:49:46.960> the<03:49:47.159> post

link is going to point you to the post

link is going to point you to the post
itself<03:49:48.319> or<03:49:48.479> the<03:49:48.640> post<03:49:48.960> Details<03:49:49.520> page<03:49:50.520> so<03:49:50.880> here

itself or the post Details page so here

itself or the post Details page so here
we<03:49:51.399> can<03:49:51.520> say<03:49:52.000> div<03:49:53.000> is<03:49:53.199> a<03:49:53.479> class<03:49:53.840> name<03:49:54.760> of

small-medium on large devices base-

small-medium on large devices base-
medium<03:50:02.479> and<03:50:02.760> padding<03:50:03.120> y<03:50:03.560> off

medium and padding y off

medium and padding y off
five<03:50:05.680> there<03:50:06.319> within<03:50:06.560> a<03:50:06.760> P<03:50:07.040> tag<03:50:07.520> we<03:50:07.640> can<03:50:07.800> render

five there within a P tag we can render

five there within a P tag we can render
a<03:50:08.560> post.<03:50:09.680> caption<03:50:10.680> of<03:50:10.880> course<03:50:11.319> this<03:50:11.520> has<03:50:11.680> to<03:50:11.840> be

a post. caption of course this has to be

a post. caption of course this has to be
wrapped<03:50:12.680> in<03:50:13.520> curly

wrapped in curly

wrapped in curly
strings<03:50:15.439> River<03:50:15.920> and<03:50:16.399> nature<03:50:17.399> and<03:50:17.600> Below<03:50:18.000> we

strings River and nature and Below we

strings River and nature and Below we
can<03:50:18.239> have<03:50:18.359> a<03:50:18.479> UL<03:50:19.040> to<03:50:19.199> render<03:50:19.520> the<03:50:19.720> tags<03:50:20.680> so<03:50:20.840> we

can have a UL to render the tags so we

can have a UL to render the tags so we
can<03:50:21.120> give<03:50:21.319> them<03:50:21.560> a<03:50:21.840> class<03:50:22.199> name<03:50:22.880> of<03:50:23.640> flex<03:50:25.120> gap-1

can give them a class name of flex gap-1

can give them a class name of flex gap-1
and<03:50:26.319> margin<03:50:26.760> top<03:50:27.040> of<03:50:27.399> two<03:50:28.399> there<03:50:28.720> we<03:50:28.840> can

and margin top of two there we can

and margin top of two there we can
render<03:50:29.399> the<03:50:29.840> post.<03:50:31.040> tags.<03:50:32.040> map<03:50:32.800> where<03:50:33.040> each

render the post. tags. map where each

render the post. tags. map where each
tag<03:50:33.920> is<03:50:34.040> of<03:50:34.239> a<03:50:34.439> type<03:50:34.680> string<03:50:35.680> and<03:50:35.840> for<03:50:36.199> each<03:50:36.600> tag

tag is of a type string and for each tag

tag is of a type string and for each tag
we<03:50:37.239> want<03:50:37.399> to<03:50:37.640> instantly<03:50:38.279> return<03:50:38.880> an

we want to instantly return an

we want to instantly return an
Li<03:50:41.040> that's<03:50:41.239> going<03:50:41.399> to<03:50:41.640> have<03:50:41.920> a<03:50:42.159> key<03:50:43.080> equal<03:50:43.399> to

Li that's going to have a key equal to

Li that's going to have a key equal to
it's<03:50:44.159> going<03:50:44.319> to<03:50:44.439> be<03:50:44.800> tag<03:50:45.800> and<03:50:45.960> a<03:50:46.199> class<03:50:46.560> name<03:50:47.000> of

it's going to be tag and a class name of

it's going to be tag and a class name of
text-

text-

text-
light-3<03:50:49.960> and<03:50:50.080> we<03:50:50.159> can<03:50:50.319> simply<03:50:50.600> render<03:50:51.680> hashtag

light-3 and we can simply render hashtag

light-3 and we can simply render hashtag
and<03:50:52.840> then<03:50:53.640> the<03:50:53.880> tag<03:50:54.880> in<03:50:55.080> this<03:50:55.359> case<03:50:55.680> it<03:50:55.760> is

and then the tag in this case it is

and then the tag in this case it is
simply<03:50:56.840> nature<03:50:57.840> and<03:50:58.239> finally<03:50:58.880> we<03:50:59.000> can<03:50:59.199> go

simply nature and finally we can go

simply nature and finally we can go
below<03:51:00.319> this<03:51:00.760> div<03:51:01.760> and<03:51:01.880> render<03:51:02.239> an<03:51:02.640> image<03:51:03.640> this

below this div and render an image this

below this div and render an image this
image<03:51:04.239> is<03:51:04.399> going<03:51:04.560> to<03:51:04.720> have<03:51:04.840> a<03:51:05.040> source<03:51:05.640> equal<03:51:05.960> to

image is going to have a source equal to

image is going to have a source equal to
post.<03:51:07.199> image<03:51:08.159> URL<03:51:09.239> of<03:51:09.399> course<03:51:09.680> image<03:51:10.000> with<03:51:10.159> a

post. image URL of course image with a

post. image URL of course image with a
lowercased<03:51:11.000> eye<03:51:11.960> or<03:51:12.600> we<03:51:12.720> can<03:51:12.920> render<03:51:13.720> for/

assets SL ions SL profile Das

assets SL ions SL profile Das
placeholder.svg

placeholder.svg

placeholder.svg
and<03:51:25.720> it's<03:51:25.880> going<03:51:26.040> to<03:51:26.199> have<03:51:26.319> a<03:51:26.560> class<03:51:27.040> name

and it's going to have a class name

and it's going to have a class name
equal<03:51:28.359> to<03:51:29.359> post-c<03:51:30.479> cardor<03:51:31.479> IMG<03:51:32.439> and<03:51:32.600> an<03:51:32.760> Al<03:51:33.080> tag

equal to post-c cardor IMG and an Al tag

equal to post-c cardor IMG and an Al tag
of<03:51:33.720> post

of post

of post
image<03:51:35.760> if<03:51:35.880> we<03:51:36.040> save<03:51:36.319> it<03:51:36.920> we<03:51:37.120> cannot<03:51:37.439> seem<03:51:37.640> to

image if we save it we cannot seem to

image if we save it we cannot seem to
see<03:51:38.000> it<03:51:38.640> so<03:51:38.920> it's<03:51:39.159> it's<03:51:39.359> like<03:51:39.800> the<03:51:39.960> image<03:51:40.279> URL

see it so it's it's like the image URL

see it so it's it's like the image URL
is<03:51:41.040> not<03:51:41.439> there<03:51:42.439> let's<03:51:42.640> consol<03:51:43.040> log<03:51:43.239> our<03:51:43.520> post

is not there let's consol log our post

is not there let's consol log our post
to<03:51:44.199> see<03:51:44.640> what<03:51:44.840> does<03:51:44.960> it<03:51:45.199> contain<03:51:46.159> so<03:51:46.439> here<03:51:46.720> we

to see what does it contain so here we

to see what does it contain so here we
can<03:51:47.120> consal<03:51:47.680> log<03:51:48.680> the<03:51:48.920> entire

can consal log the entire

can consal log the entire
post<03:51:52.760> we<03:51:52.880> can<03:51:53.120> then<03:51:53.479> go<03:51:53.680> to<03:51:53.840> our<03:51:54.159> inspect

post we can then go to our inspect

post we can then go to our inspect
element<03:51:55.600> and<03:51:55.800> go<03:51:55.960> to<03:51:56.120> the

element and go to the

element and go to the
console<03:51:58.159> and<03:51:58.520> here<03:51:58.960> if<03:51:59.120> we

console and here if we

console and here if we
reload<03:52:01.040> you<03:52:01.159> can<03:52:01.319> see<03:52:01.640> that<03:52:01.760> we<03:52:01.920> have<03:52:02.080> a<03:52:02.279> key

reload you can see that we have a key

reload you can see that we have a key
error<03:52:03.159> on<03:52:03.399> home<03:52:03.880> 17<03:52:04.680> so<03:52:04.840> let's<03:52:05.040> quickly<03:52:05.399> fix

error on home 17 so let's quickly fix

error on home 17 so let's quickly fix
that<03:52:06.359> here<03:52:06.520> we're<03:52:06.760> mapping<03:52:07.080> over<03:52:07.319> the<03:52:07.520> posts

that here we're mapping over the posts

that here we're mapping over the posts
but<03:52:08.279> we're<03:52:08.439> not<03:52:08.720> passing<03:52:09.159> a<03:52:09.319> key<03:52:10.239> so<03:52:11.120> let's<03:52:11.319> say

but we're not passing a key so let's say

but we're not passing a key so let's say
key<03:52:12.319> is<03:52:12.520> equal<03:52:12.840> to<03:52:13.760> post.<03:52:14.760> let's<03:52:14.960> do

key is equal to post. let's do

key is equal to post. let's do
caption<03:52:16.760> if<03:52:16.880> we<03:52:17.120> reload<03:52:18.040> it<03:52:18.159> is<03:52:18.359> gone<03:52:19.239> and<03:52:19.479> now

caption if we reload it is gone and now

caption if we reload it is gone and now
we<03:52:20.399> have<03:52:21.040> this<03:52:21.319> post<03:52:22.120> but<03:52:22.399> the<03:52:22.600> image<03:52:22.920> URL<03:52:23.640> is

we have this post but the image URL is

we have this post but the image URL is
simply<03:52:24.399> an<03:52:24.600> empty<03:52:25.319> array<03:52:26.319> that's<03:52:26.600> not<03:52:26.920> good

simply an empty array that's not good

simply an empty array that's not good
right<03:52:28.479> same<03:52:28.800> thing<03:52:29.159> here<03:52:29.520> the<03:52:29.720> image<03:52:30.040> ID<03:52:30.439> is

right same thing here the image ID is

right same thing here the image ID is
here<03:52:31.359> but<03:52:31.600> the<03:52:31.840> image<03:52:32.439> URL<03:52:33.359> is<03:52:33.800> empty<03:52:34.800> so<03:52:35.080> now

here but the image URL is empty so now

here but the image URL is empty so now
we<03:52:35.560> have<03:52:35.680> to<03:52:35.840> figure<03:52:36.120> out<03:52:36.520> where<03:52:36.840> are<03:52:37.000> we

we have to figure out where are we

we have to figure out where are we
updating<03:52:37.880> the<03:52:38.080> image<03:52:38.359> URL<03:52:38.800> in<03:52:39.040> in<03:52:39.120> the<03:52:39.279> first

updating the image URL in in the first

updating the image URL in in the first
place<03:52:40.760> apparently<03:52:41.359> it's<03:52:41.520> getting<03:52:41.760> set<03:52:42.000> to<03:52:42.120> an

place apparently it's getting set to an

place apparently it's getting set to an
empty<03:52:42.600> array<03:52:43.600> so<03:52:44.000> let's<03:52:44.279> search<03:52:45.120> and<03:52:45.319> let's

empty array so let's search and let's

empty array so let's search and let's
search<03:52:45.840> for<03:52:46.319> image<03:52:47.199> URL<03:52:48.199> specifically<03:52:48.880> we

search for image URL specifically we

search for image URL specifically we
want<03:52:49.120> to<03:52:49.279> search<03:52:49.720> where<03:52:49.880> we're<03:52:50.239> updating<03:52:50.800> it

want to search where we're updating it

want to search where we're updating it
not<03:52:51.439> using<03:52:51.920> it<03:52:52.920> so<03:52:53.279> here<03:52:53.600> in<03:52:53.760> the<03:52:53.920> URL<03:52:54.680> we're

not using it so here in the URL we're

not using it so here in the URL we're
setting<03:52:55.319> the<03:52:55.479> image<03:52:55.760> URL<03:52:56.120> to<03:52:56.359> Avatar<03:52:56.760> URL<03:52:57.600> but

setting the image URL to Avatar URL but

setting the image URL to Avatar URL but
this<03:52:57.880> is<03:52:58.040> regarding<03:52:58.439> the<03:52:58.600> users<03:52:59.239> we're

this is regarding the users we're

this is regarding the users we're
wondering<03:52:59.880> about<03:53:00.120> the<03:53:00.319> posts<03:53:01.279> so<03:53:01.560> most<03:53:01.880> likely

wondering about the posts so most likely

wondering about the posts so most likely
it's<03:53:02.479> going<03:53:02.640> to<03:53:02.800> be<03:53:03.159> would<03:53:03.359> then<03:53:03.600> create<03:53:04.199> post

it's going to be would then create post

it's going to be would then create post
and<03:53:05.359> there<03:53:05.479> we<03:53:05.680> go<03:53:06.439> here<03:53:06.600> we<03:53:06.760> say<03:53:07.000> the<03:53:07.159> image

and there we go here we say the image

and there we go here we say the image
URL<03:53:08.120> is<03:53:08.279> equal<03:53:08.520> to<03:53:09.080> file

URL is equal to file

URL is equal to file
URL<03:53:10.960> and<03:53:11.120> the<03:53:11.239> file<03:53:11.520> URL<03:53:12.080> should<03:53:12.399> come<03:53:12.720> from

URL and the file URL should come from

URL and the file URL should come from
the<03:53:13.120> get<03:53:13.439> file<03:53:13.960> preview<03:53:14.960> and<03:53:15.239> then<03:53:15.680> it's

the get file preview and then it's

the get file preview and then it's
uploaded<03:53:16.600> file

uploaded file

uploaded file
ID<03:53:19.399> so<03:53:19.880> the<03:53:20.080> first<03:53:20.319> thing<03:53:20.479> we<03:53:20.640> can<03:53:20.800> do<03:53:21.399> is<03:53:21.840> just

ID so the first thing we can do is just

ID so the first thing we can do is just
conso<03:53:22.600> lock<03:53:22.800> the<03:53:22.920> file<03:53:23.199> URL<03:53:23.800> to<03:53:23.960> see<03:53:24.239> what<03:53:24.359> are

conso lock the file URL to see what are

conso lock the file URL to see what are
we<03:53:24.600> getting<03:53:24.840> back<03:53:25.520> so<03:53:25.800> conso<03:53:26.279> log<03:53:27.279> I<03:53:27.399> can<03:53:27.560> put

we getting back so conso log I can put

we getting back so conso log I can put
it<03:53:27.840> inside<03:53:28.080> of<03:53:28.199> an<03:53:28.439> object<03:53:28.920> that<03:53:29.080> way<03:53:29.279> it's

it inside of an object that way it's

it inside of an object that way it's
going<03:53:29.560> to<03:53:29.720> tell<03:53:29.920> us<03:53:30.159> what<03:53:30.279> they<03:53:30.640> conso<03:53:31.040> logging

going to tell us what they conso logging

going to tell us what they conso logging
so<03:53:32.199> just<03:53:32.399> like<03:53:33.080> this<03:53:34.080> and<03:53:34.720> then<03:53:34.960> we<03:53:35.080> can<03:53:35.319> try<03:53:35.520> to

so just like this and then we can try to

so just like this and then we can try to
create<03:53:36.159> one<03:53:36.600> another<03:53:37.080> post<03:53:37.920> so<03:53:38.159> let's<03:53:38.399> go<03:53:38.640> back

create one another post so let's go back

create one another post so let's go back
let's<03:53:39.840> increase<03:53:40.399> the<03:53:40.560> width<03:53:41.000> of<03:53:41.159> the<03:53:41.279> browser

let's increase the width of the browser

let's increase the width of the browser
just<03:53:41.960> a<03:53:42.239> bit<03:53:43.239> and<03:53:43.399> then<03:53:43.600> let's<03:53:43.800> go<03:53:43.920> to<03:53:44.120> create

just a bit and then let's go to create

just a bit and then let's go to create
post<03:53:45.399> let's<03:53:45.600> write<03:53:45.760> a<03:53:45.920> new<03:53:46.159> caption<03:53:47.080> say

post let's write a new caption say

post let's write a new caption say
something<03:53:47.840> like<03:53:48.560> this<03:53:48.800> time<03:53:49.640> it<03:53:49.800> will

something like this time it will

something like this time it will
work<03:53:51.760> I<03:53:51.920> added<03:53:52.199> the<03:53:52.319> JavaScript<03:53:52.800> Mastery<03:53:53.239> logo

work I added the JavaScript Mastery logo

work I added the JavaScript Mastery logo
right<03:53:53.840> here<03:53:54.479> and<03:53:54.680> I<03:53:54.760> can<03:53:55.000> give<03:53:55.199> location

right here and I can give location

right here and I can give location
something<03:53:56.159> like<03:53:56.640> JSM<03:53:57.640> and<03:53:57.880> we<03:53:58.000> can<03:53:58.239> add

something like JSM and we can add

something like JSM and we can add
nextjs<03:54:00.840> as<03:54:01.040> well<03:54:01.279> as<03:54:02.040> react<03:54:03.040> and<03:54:03.199> let's<03:54:03.399> click

nextjs as well as react and let's click

nextjs as well as react and let's click
submit<03:54:05.159> you<03:54:05.279> can<03:54:05.399> see<03:54:05.600> the<03:54:05.760> file<03:54:06.040> URL<03:54:06.640> first

submit you can see the file URL first

submit you can see the file URL first
was<03:54:07.080> a<03:54:07.279> promise<03:54:08.199> and<03:54:08.359> then<03:54:09.000> fortunately<03:54:09.479> the

was a promise and then fortunately the

was a promise and then fortunately the
same<03:54:09.880> thing<03:54:10.279> even<03:54:10.479> for<03:54:10.680> the<03:54:10.800> second<03:54:11.120> image<03:54:11.439> the

same thing even for the second image the

same thing even for the second image the
image<03:54:11.800> URL<03:54:12.319> is<03:54:12.560> empty<03:54:13.439> but<03:54:13.640> it's<03:54:13.840> good<03:54:13.960> to<03:54:14.120> know

image URL is empty but it's good to know

image URL is empty but it's good to know
that<03:54:14.520> we<03:54:14.640> got<03:54:14.800> a<03:54:15.040> promise<03:54:15.640> right<03:54:15.840> here<03:54:16.159> as<03:54:16.279> a

that we got a promise right here as a

that we got a promise right here as a
file<03:54:17.080> URL<03:54:18.080> that's<03:54:18.319> because<03:54:18.720> if<03:54:18.840> you<03:54:18.960> go<03:54:19.120> to<03:54:19.239> the

file URL that's because if you go to the

file URL that's because if you go to the
get<03:54:19.640> file<03:54:19.840> URL<03:54:20.640> we<03:54:20.800> made<03:54:21.120> this<03:54:21.359> function<03:54:21.800> an

get file URL we made this function an

get file URL we made this function an
async<03:54:22.560> function<03:54:23.239> and<03:54:23.479> it<03:54:23.600> shouldn't<03:54:23.960> have

async function and it shouldn't have

async function and it shouldn't have
been<03:54:24.359> one<03:54:24.920> because<03:54:25.279> nowhere<03:54:25.880> is<03:54:26.000> it<03:54:26.159> awaiting

been one because nowhere is it awaiting

been one because nowhere is it awaiting
something<03:54:27.439> so<03:54:27.720> now<03:54:28.120> we<03:54:28.319> have<03:54:28.439> to<03:54:28.720> fix<03:54:29.080> this<03:54:29.520> by

something so now we have to fix this by

something so now we have to fix this by
removing<03:54:30.080> the<03:54:30.239> async<03:54:30.760> from<03:54:30.920> the

removing the async from the

removing the async from the
function<03:54:33.120> and<03:54:33.279> then<03:54:33.520> we'll<03:54:33.720> have<03:54:33.840> to<03:54:34.000> delete

function and then we'll have to delete

function and then we'll have to delete
what<03:54:34.560> we<03:54:34.680> have<03:54:34.840> already<03:54:35.120> in<03:54:35.199> the<03:54:35.359> database<03:54:36.040> as

what we have already in the database as

what we have already in the database as
those<03:54:36.439> posts<03:54:36.720> are<03:54:36.840> going<03:54:37.000> to<03:54:37.120> be<03:54:37.279> broken<03:54:38.040> so

those posts are going to be broken so

those posts are going to be broken so
let's<03:54:38.439> go<03:54:38.640> back<03:54:39.080> to<03:54:39.359> our<03:54:39.760> app

let's go back to our app

let's go back to our app
right<03:54:41.920> go<03:54:42.279> right<03:54:42.520> here<03:54:43.199> we're<03:54:43.359> going<03:54:43.439> to<03:54:43.600> have

right go right here we're going to have

right go right here we're going to have
two<03:54:44.040> different<03:54:44.319> media<03:54:44.760> files<03:54:45.199> right<03:54:45.359> now

two different media files right now

two different media files right now
which<03:54:46.159> I<03:54:46.279> can<03:54:46.479> completely

which I can completely

which I can completely
delete<03:54:49.120> there<03:54:49.319> we<03:54:49.680> go<03:54:50.680> but<03:54:50.840> we<03:54:50.960> know<03:54:51.159> that<03:54:51.319> the

delete there we go but we know that the

delete there we go but we know that the
storage<03:54:51.800> worked<03:54:52.439> so<03:54:52.760> now<03:54:53.239> I<03:54:53.319> can<03:54:53.520> go<03:54:53.760> back<03:54:53.960> to

storage worked so now I can go back to

storage worked so now I can go back to
databases<03:54:55.439> snapgram<03:54:56.399> and<03:54:56.520> then<03:54:56.800> posts<03:54:57.600> and<03:54:57.720> I

databases snapgram and then posts and I

databases snapgram and then posts and I
can<03:54:58.000> also<03:54:58.239> delete<03:54:58.800> all<03:54:58.960> of<03:54:59.120> these<03:54:59.359> posts<03:54:59.840> right

can also delete all of these posts right

can also delete all of these posts right
here<03:55:02.120> there<03:55:02.279> we<03:55:02.479> go<03:55:03.159> so<03:55:03.399> now<03:55:03.640> if<03:55:03.760> we<03:55:03.920> go<03:55:04.199> back

here there we go so now if we go back

here there we go so now if we go back
and

and

and
reload<03:55:06.680> and<03:55:06.960> now<03:55:07.359> back<03:55:07.520> on<03:55:07.640> the<03:55:07.800> homepage<03:55:08.279> we

reload and now back on the homepage we

reload and now back on the homepage we
have<03:55:08.560> no<03:55:09.000> posts<03:55:09.600> we<03:55:09.720> do<03:55:10.000> have<03:55:10.199> one<03:55:10.439> error

have no posts we do have one error

have no posts we do have one error
saying<03:55:11.199> that<03:55:11.319> it<03:55:11.479> cannot<03:55:11.840> find<03:55:12.359> assets<03:55:13.000> images

saying that it cannot find assets images

saying that it cannot find assets images
profile<03:55:14.439> placeholder.svg<03:55:15.520> so<03:55:16.520> let's<03:55:16.680> see

profile placeholder.svg so let's see

profile placeholder.svg so let's see
what<03:55:17.199> that<03:55:17.359> is<03:55:17.520> about<03:55:18.279> let's<03:55:18.520> try<03:55:18.720> to<03:55:19.000> go<03:55:19.399> to

what that is about let's try to go to

what that is about let's try to go to
profile<03:55:20.359> dplace<03:55:21.040> holder.<03:55:22.000> SVG<03:55:23.000> and<03:55:23.120> we<03:55:23.239> can

profile dplace holder. SVG and we can

profile dplace holder. SVG and we can
see<03:55:23.600> that<03:55:23.840> indeed<03:55:24.319> it<03:55:24.439> is<03:55:24.760> there<03:55:25.520> so<03:55:25.920> where<03:55:26.159> are

see that indeed it is there so where are

see that indeed it is there so where are
we<03:55:26.479> trying<03:55:26.760> to<03:55:26.920> call<03:55:27.199> it<03:55:27.439> from<03:55:28.319> let's<03:55:28.560> try<03:55:28.720> to

we trying to call it from let's try to

we trying to call it from let's try to
search<03:55:29.199> for<03:55:30.239> profile<03:55:31.239> Das

search for profile Das

search for profile Das
placeholder.svg<03:55:33.520> it<03:55:34.520> seems<03:55:34.760> like<03:55:34.880> we're

placeholder.svg it seems like we're

placeholder.svg it seems like we're
calling<03:55:35.319> it<03:55:35.439> in<03:55:35.520> a<03:55:35.640> couple<03:55:35.880> of<03:55:36.279> places<03:55:37.279> assets

calling it in a couple of places assets

calling it in a couple of places assets
here<03:55:38.640> is<03:55:38.800> it's<03:55:39.080> icons<03:55:40.000> but<03:55:40.159> we<03:55:40.279> have<03:55:40.359> to<03:55:40.520> verify

here is it's icons but we have to verify

here is it's icons but we have to verify
is<03:55:40.960> it<03:55:41.120> icons<03:55:41.479> or<03:55:41.600> is<03:55:41.720> it<03:55:41.880> images<03:55:42.720> so<03:55:43.000> it<03:55:43.080> seems

is it icons or is it images so it seems

is it icons or is it images so it seems
like<03:55:43.479> it's<03:55:43.720> icons<03:55:44.399> so<03:55:44.680> here<03:55:45.040> it's<03:55:45.359> okay<03:55:45.880> icons

like it's icons so here it's okay icons

like it's icons so here it's okay icons
here<03:55:47.040> it's<03:55:47.319> okay<03:55:48.120> icons<03:55:49.359> icons<03:55:50.359> and<03:55:50.560> finally

here it's okay icons icons and finally

here it's okay icons icons and finally
in<03:55:51.080> top<03:55:51.359> bar<03:55:51.560> its<03:55:51.760> images<03:55:52.359> it<03:55:52.479> should<03:55:52.680> have

in top bar its images it should have

in top bar its images it should have
been<03:55:53.479> icons<03:55:54.479> so<03:55:54.640> if<03:55:54.760> we<03:55:54.920> save<03:55:55.239> this<03:55:55.479> and<03:55:55.720> reload

been icons so if we save this and reload

been icons so if we save this and reload
you<03:55:56.840> can<03:55:56.960> see<03:55:57.159> that<03:55:57.319> we<03:55:57.479> have<03:55:57.760> no<03:55:58.080> errors<03:55:58.720> and

you can see that we have no errors and

you can see that we have no errors and
we<03:55:59.279> have<03:55:59.720> no<03:56:00.040> posts<03:56:00.880> so<03:56:01.159> now<03:56:01.439> that<03:56:01.600> we<03:56:01.720> have

we have no posts so now that we have

we have no posts so now that we have
fixed<03:56:02.199> the<03:56:02.319> issue<03:56:02.600> with<03:56:02.760> the<03:56:02.920> post<03:56:03.199> creation

fixed the issue with the post creation

fixed the issue with the post creation
we<03:56:04.279> removed<03:56:04.880> the<03:56:05.040> async<03:56:06.040> from<03:56:06.399> our<03:56:07.199> upload

we removed the async from our upload

we removed the async from our upload
file<03:56:08.120> or<03:56:08.359> rather<03:56:08.880> get<03:56:09.040> file<03:56:09.319> preview<03:56:10.000> now<03:56:10.199> it's

file or rather get file preview now it's

file or rather get file preview now it's
going<03:56:10.520> to<03:56:10.720> immediately<03:56:11.359> return<03:56:11.720> exactly<03:56:12.159> what

going to immediately return exactly what

going to immediately return exactly what
it<03:56:12.399> should<03:56:13.040> which<03:56:13.159> is<03:56:13.279> the<03:56:13.600> URL<03:56:14.600> so<03:56:14.960> let's

it should which is the URL so let's

it should which is the URL so let's
close<03:56:15.479> all<03:56:15.680> the<03:56:15.800> files<03:56:16.080> that<03:56:16.199> we<03:56:16.319> don't

close all the files that we don't

close all the files that we don't
need<03:56:18.680> and<03:56:19.000> let's<03:56:19.239> simply<03:56:19.560> create<03:56:19.880> another

need and let's simply create another

need and let's simply create another
post<03:56:20.720> and<03:56:20.920> hopefully<03:56:21.359> this<03:56:21.560> time<03:56:21.880> we'll<03:56:22.120> be

post and hopefully this time we'll be

post and hopefully this time we'll be
able<03:56:22.439> to<03:56:22.600> see<03:56:22.840> it<03:56:23.120> on<03:56:23.279> our<03:56:23.479> homepage<03:56:24.439> so<03:56:24.840> I'll

able to see it on our homepage so I'll

able to see it on our homepage so I'll
do<03:56:25.279> something<03:56:25.640> like<03:56:25.920> ultimate<03:56:26.760> nextjs<03:56:28.159> 13.5

do something like ultimate nextjs 13.5

do something like ultimate nextjs 13.5
course<03:56:30.439> I<03:56:30.600> uploaded<03:56:31.279> this<03:56:31.520> great<03:56:31.880> Dev

course I uploaded this great Dev

course I uploaded this great Dev
overflow<03:56:32.720> image<03:56:33.239> which<03:56:33.359> is<03:56:33.479> the<03:56:33.680> project

overflow image which is the project

overflow image which is the project
we're<03:56:34.239> building<03:56:34.560> in<03:56:34.680> our<03:56:34.840> nextjs<03:56:35.439> course<03:56:36.439> I'm

we're building in our nextjs course I'm

we're building in our nextjs course I'm
going<03:56:36.680> to<03:56:36.840> add<03:56:37.040> the<03:56:37.199> location<03:56:37.800> of<03:56:38.040> JSM<03:56:38.680> Mastery

going to add the location of JSM Mastery

going to add the location of JSM Mastery
Pro

Pro

Pro
platform<03:56:41.920> and<03:56:42.120> we<03:56:42.239> can<03:56:42.439> add<03:56:42.680> something<03:56:43.040> like

platform and we can add something like

platform and we can add something like
nextjs<03:56:44.960> and<03:56:45.359> maybe

nextjs and maybe

nextjs and maybe
course<03:56:47.720> and<03:56:47.920> let's<03:56:48.159> click

course and let's click

course and let's click
submit<03:56:51.120> there<03:56:51.279> we<03:56:51.479> go<03:56:52.080> it<03:56:52.239> got<03:56:52.439> submitted<03:56:53.199> and

submit there we go it got submitted and

submit there we go it got submitted and
we<03:56:53.560> can<03:56:53.680> see<03:56:53.880> it<03:56:54.040> on<03:56:54.199> our<03:56:54.399> homepage<03:56:55.399> that<03:56:55.640> is

we can see it on our homepage that is

we can see it on our homepage that is
great<03:56:56.760> we<03:56:56.960> finally<03:56:57.439> have<03:56:57.880> the<03:56:58.080> real<03:56:58.560> profile

great we finally have the real profile

great we finally have the real profile
right<03:56:59.439> here<03:56:59.960> it<03:57:00.080> says<03:57:00.359> just<03:57:00.720> now<03:57:01.080> which<03:57:01.199> is

right here it says just now which is

right here it says just now which is
amazing<03:57:02.279> we<03:57:02.439> have<03:57:02.640> the<03:57:02.760> full<03:57:03.159> caption<03:57:03.920> the

amazing we have the full caption the

amazing we have the full caption the
tags<03:57:04.800> as<03:57:05.000> well<03:57:05.239> as<03:57:05.399> the<03:57:05.560> photo<03:57:06.479> this<03:57:06.720> is

tags as well as the photo this is

tags as well as the photo this is
phenomenal<03:57:07.760> and<03:57:07.920> the<03:57:08.040> last<03:57:08.199> thing<03:57:08.359> we<03:57:08.439> need

phenomenal and the last thing we need

phenomenal and the last thing we need
need<03:57:09.000> is<03:57:09.159> going<03:57:09.319> to<03:57:09.439> be<03:57:09.600> the<03:57:09.800> actions<03:57:10.399> such<03:57:10.560> as

need is going to be the actions such as

need is going to be the actions such as
the<03:57:10.880> heart<03:57:11.439> and<03:57:11.680> the<03:57:11.840> save<03:57:12.640> so<03:57:13.000> let's<03:57:13.239> go<03:57:13.399> back

the heart and the save so let's go back

the heart and the save so let's go back
to<03:57:13.800> application<03:57:14.600> let's<03:57:14.840> collapse<03:57:15.239> it<03:57:15.359> to

to application let's collapse it to

to application let's collapse it to
check<03:57:15.720> it<03:57:15.840> out<03:57:16.000> on<03:57:16.199> mobile<03:57:16.640> devices<03:57:17.640> it's

check it out on mobile devices it's

check it out on mobile devices it's
looking<03:57:18.239> great<03:57:19.239> maybe<03:57:19.520> this<03:57:19.680> image<03:57:19.920> is<03:57:20.040> not<03:57:20.199> in

looking great maybe this image is not in

looking great maybe this image is not in
the<03:57:20.520> right<03:57:20.760> format<03:57:21.359> but<03:57:21.560> still<03:57:21.920> it<03:57:22.080> gets

the right format but still it gets

the right format but still it gets
cropped<03:57:22.800> properly<03:57:23.720> so<03:57:23.960> now<03:57:24.239> let's<03:57:24.399> go<03:57:24.680> back<03:57:24.840> to

cropped properly so now let's go back to

cropped properly so now let's go back to
the<03:57:25.120> postcard<03:57:25.920> to<03:57:26.199> finalize<03:57:26.920> the<03:57:27.159> last<03:57:27.600> post

the postcard to finalize the last post

the postcard to finalize the last post
actions<03:57:29.279> So<03:57:29.640> Below<03:57:30.080> this<03:57:30.279> link<03:57:30.680> containing

actions So Below this link containing

actions So Below this link containing
the<03:57:31.239> image<03:57:31.800> let's<03:57:32.040> create<03:57:32.319> a<03:57:32.439> new<03:57:32.800> component

the image let's create a new component

the image let's create a new component
called<03:57:33.920> post<03:57:34.800> stats<03:57:35.760> like<03:57:36.000> this<03:57:37.000> we're<03:57:37.120> going

called post stats like this we're going

called post stats like this we're going
to<03:57:37.439> pass<03:57:37.720> two<03:57:37.960> things<03:57:38.359> we're<03:57:38.560> we're<03:57:38.680> going<03:57:38.760> to

to pass two things we're we're going to

to pass two things we're we're going to
pass<03:57:39.120> the<03:57:39.319> post<03:57:39.800> equal<03:57:40.120> to<03:57:40.319> post<03:57:41.120> as<03:57:41.239> well<03:57:41.399> as

pass the post equal to post as well as

pass the post equal to post as well as
the<03:57:41.680> user<03:57:42.040> ID<03:57:42.640> equal<03:57:43.000> to<03:57:43.800> user.

the user ID equal to user.

the user ID equal to user.
ID<03:57:46.920> then<03:57:47.279> we<03:57:47.399> can<03:57:47.560> create<03:57:47.880> a<03:57:48.080> new<03:57:48.319> component<03:57:48.960> in

ID then we can create a new component in

ID then we can create a new component in
the<03:57:49.199> shared<03:57:49.600> components<03:57:50.080> folder<03:57:50.800> called<03:57:51.520> post

the shared components folder called post

the shared components folder called post
stats.<03:57:53.720> TSX<03:57:54.720> and<03:57:54.920> run

stats. TSX and run

stats. TSX and run
RFC<03:57:57.399> immediately<03:57:58.279> back<03:57:58.479> in<03:57:58.600> the<03:57:58.800> postcard<03:57:59.720> we

RFC immediately back in the postcard we

RFC immediately back in the postcard we
can<03:58:00.040> import<03:58:00.520> post<03:58:00.880> stats<03:58:01.760> right<03:58:02.359> here<03:58:03.359> and

can import post stats right here and

can import post stats right here and
then<03:58:04.120> we<03:58:04.239> can<03:58:04.399> focus<03:58:04.680> on<03:58:04.840> the<03:58:04.960> post<03:58:05.239> stats

then we can focus on the post stats

then we can focus on the post stats
component<03:58:06.600> by<03:58:06.960> first<03:58:07.359> declaring<03:58:08.279> which<03:58:08.720> props

component by first declaring which props

component by first declaring which props
do<03:58:09.120> we<03:58:09.239> want<03:58:09.319> to<03:58:09.720> pass<03:58:10.720> we<03:58:10.880> immediately<03:58:11.439> know

do we want to pass we immediately know

do we want to pass we immediately know
that's<03:58:12.239> going<03:58:12.399> to<03:58:12.560> be<03:58:12.840> the<03:58:13.040> post<03:58:13.920> as<03:58:14.080> well<03:58:14.319> as

that's going to be the post as well as

that's going to be the post as well as
the<03:58:14.600> user<03:58:14.920> ID<03:58:15.600> which<03:58:15.720> are<03:58:15.880> going<03:58:16.040> to<03:58:16.159> be<03:58:16.359> of<03:58:16.560> a

the user ID which are going to be of a

the user ID which are going to be of a
type<03:58:17.680> post<03:58:18.560> stats<03:58:20.000> props<03:58:21.000> we<03:58:21.120> can<03:58:21.279> declare

type post stats props we can declare

type post stats props we can declare
those<03:58:22.120> right<03:58:22.359> above<03:58:23.279> by<03:58:23.439> saying<03:58:24.080> type<03:58:25.040> post

those right above by saying type post

those right above by saying type post
stats<03:58:27.000> props<03:58:28.000> is<03:58:28.239> equal<03:58:28.520> to<03:58:29.279> a<03:58:29.520> post<03:58:29.880> is<03:58:30.000> of<03:58:30.159> a

stats props is equal to a post is of a

stats props is equal to a post is of a
type<03:58:30.600> models<03:58:31.399> which<03:58:31.520> is<03:58:31.640> coming<03:58:31.920> from<03:58:32.239> app

type models which is coming from app

type models which is coming from app
right<03:58:33.479> dot<03:58:34.399> document<03:58:35.399> and<03:58:35.560> the<03:58:35.720> user<03:58:36.000> ID<03:58:36.520> is<03:58:36.680> of

right dot document and the user ID is of

right dot document and the user ID is of
a<03:58:37.080> type<03:58:37.520> string<03:58:38.840> now<03:58:39.040> that<03:58:39.159> we<03:58:39.279> know<03:58:39.439> what

a type string now that we know what

a type string now that we know what
we're<03:58:39.760> getting<03:58:40.319> let's<03:58:40.520> focus<03:58:40.760> on<03:58:40.920> the<03:58:41.040> UI<03:58:41.439> and

we're getting let's focus on the UI and

we're getting let's focus on the UI and
the<03:58:41.720> ux<03:58:42.239> of<03:58:42.399> our<03:58:42.640> heart<03:58:43.120> and<03:58:43.439> save<03:58:44.560> stats<03:58:45.560> first

the ux of our heart and save stats first

the ux of our heart and save stats first
we<03:58:46.040> can<03:58:46.199> wrap<03:58:46.680> everything<03:58:47.040> in<03:58:47.199> a<03:58:47.399> div<03:58:48.120> and<03:58:48.359> that

we can wrap everything in a div and that

we can wrap everything in a div and that
div<03:58:48.920> can<03:58:49.120> have<03:58:49.279> a<03:58:49.479> class<03:58:50.239> name<03:58:51.239> that<03:58:51.520> class

div can have a class name that class

div can have a class name that class
name<03:58:52.040> is<03:58:52.199> going<03:58:52.359> to<03:58:52.600> have<03:58:52.800> a<03:58:53.159> flex<03:58:54.159> justify

name is going to have a flex justify

name is going to have a flex justify
between<03:58:56.520> items<03:58:57.000> Das<03:58:57.479> Center<03:58:58.479> and<03:58:58.760> a<03:58:58.960> zindex<03:58:59.600> of

between items Das Center and a zindex of

between items Das Center and a zindex of
20<03:59:00.239> to<03:59:00.439> appear<03:59:00.760> on<03:59:01.080> top<03:59:02.040> right<03:59:02.319> inside<03:59:02.760> it

20 to appear on top right inside it

20 to appear on top right inside it
we're<03:59:03.239> going<03:59:03.319> to<03:59:03.479> give<03:59:03.560> it<03:59:03.680> a<03:59:03.880> div<03:59:04.560> that's

we're going to give it a div that's

we're going to give it a div that's
going<03:59:04.960> to<03:59:05.120> have<03:59:05.239> a<03:59:05.479> class<03:59:05.840> name<03:59:06.600> equal<03:59:06.920> to<03:59:07.199> flex

going to have a class name equal to flex

going to have a class name equal to flex
Gap<03:59:08.680> of<03:59:08.800> two<03:59:09.319> and<03:59:09.479> margin<03:59:09.880> right<03:59:10.239> of

Gap of two and margin right of

Gap of two and margin right of
five<03:59:12.439> finally<03:59:12.880> right<03:59:13.159> within<03:59:13.760> we<03:59:13.880> can<03:59:14.040> show

five finally right within we can show

five finally right within we can show
the<03:59:14.720> heart<03:59:15.080> icon<03:59:15.760> so<03:59:15.960> let's<03:59:16.120> say<03:59:16.439> image<03:59:17.439> that's

the heart icon so let's say image that's

the heart icon so let's say image that's
going<03:59:17.800> to<03:59:18.000> have<03:59:18.239> a<03:59:18.479> source<03:59:19.199> is<03:59:19.439> equal<03:59:19.880> to<03:59:20.880> and

going to have a source is equal to and

going to have a source is equal to and
let's<03:59:21.279> do<03:59:21.520> for<03:59:21.760> now<03:59:22.199> for<03:59:22.600> SL<03:59:23.040> assets<03:59:23.960> SL<03:59:24.359> ions

let's do for now for SL assets SL ions

let's do for now for SL assets SL ions
SL<03:59:25.960> liked.<03:59:27.239> SVG<03:59:28.239> and<03:59:28.399> there<03:59:28.560> we<03:59:28.720> go<03:59:29.399> but<03:59:29.560> of

SL liked. SVG and there we go but of

SL liked. SVG and there we go but of
course<03:59:29.880> it's<03:59:30.000> going<03:59:30.159> to<03:59:30.359> depend<03:59:30.840> whether<03:59:31.120> it

course it's going to depend whether it

course it's going to depend whether it
has<03:59:31.479> already<03:59:31.760> been<03:59:31.960> liked<03:59:32.279> or<03:59:32.680> not<03:59:33.680> so<03:59:34.000> if<03:59:34.120> it

has already been liked or not so if it

has already been liked or not so if it
has<03:59:34.479> been<03:59:34.720> liked<03:59:35.319> then<03:59:35.479> it's<03:59:35.640> going<03:59:35.760> to<03:59:35.880> say

has been liked then it's going to say

has been liked then it's going to say
liked<03:59:36.880> otherwise<03:59:37.279> it's<03:59:37.439> going<03:59:37.600> to<03:59:37.680> say<03:59:37.960> like

liked otherwise it's going to say like

liked otherwise it's going to say like
which<03:59:38.600> is<03:59:38.720> going<03:59:38.880> to<03:59:38.960> show<03:59:39.359> this<03:59:39.760> different

which is going to show this different

which is going to show this different
kind<03:59:40.159> of<03:59:40.279> an<03:59:40.840> icon<03:59:41.840> so<03:59:42.080> we'll<03:59:42.239> have<03:59:42.359> to

kind of an icon so we'll have to

kind of an icon so we'll have to
dynamically<03:59:43.199> change<03:59:43.800> this<03:59:44.040> property<03:59:44.720> for<03:59:44.920> now

dynamically change this property for now

dynamically change this property for now
let's<03:59:45.359> leave<03:59:45.600> it<03:59:45.800> statically<03:59:46.479> as<03:59:46.960> like<03:59:47.960> let's

let's leave it statically as like let's

let's leave it statically as like let's
give<03:59:48.279> it<03:59:48.399> an<03:59:48.520> Al<03:59:48.880> tag<03:59:49.239> of<03:59:49.840> like<03:59:50.840> let's<03:59:51.040> give<03:59:51.159> it

give it an Al tag of like let's give it

give it an Al tag of like let's give it
a<03:59:51.479> width<03:59:52.000> of<03:59:52.239> 20<03:59:53.159> as<03:59:53.279> well<03:59:53.439> as<03:59:53.560> a<03:59:53.800> height<03:59:54.199> of<03:59:54.880> 20

a width of 20 as well as a height of 20

a width of 20 as well as a height of 20
let's<03:59:56.080> give<03:59:56.199> it<03:59:56.279> an<03:59:56.439> on<03:59:56.800> click<03:59:57.520> which<03:59:57.680> for<03:59:57.840> now

let's give it an on click which for now

let's give it an on click which for now
is<03:59:58.239> going<03:59:58.399> to<03:59:58.520> be<03:59:58.640> set<03:59:58.880> to<03:59:59.159> an<03:59:59.319> empty<03:59:59.640> callback

is going to be set to an empty callback

is going to be set to an empty callback
function<04:00:01.279> and<04:00:01.479> let's<04:00:01.680> give<04:00:01.760> it<04:00:01.880> a<04:00:02.040> class<04:00:02.399> name

function and let's give it a class name

function and let's give it a class name
equal<04:00:03.359> to

equal to

equal to
cursor<04:00:05.439> Das<04:00:06.159> pointer<04:00:07.159> finally<04:00:07.720> right<04:00:07.960> below

cursor Das pointer finally right below

cursor Das pointer finally right below
it<04:00:08.640> we<04:00:08.760> can<04:00:08.880> create<04:00:09.120> a<04:00:09.239> new<04:00:09.439> P<04:00:09.680> tag<04:00:10.080> that's

it we can create a new P tag that's

it we can create a new P tag that's
going<04:00:10.359> to<04:00:10.479> render<04:00:10.840> the<04:00:10.960> number<04:00:11.199> of<04:00:11.439> likes<04:00:12.040> for

going to render the number of likes for

going to render the number of likes for
now<04:00:12.479> we<04:00:12.600> can<04:00:12.720> do<04:00:12.840> it<04:00:13.040> statically<04:00:13.720> as

now we can do it statically as

now we can do it statically as
zero<04:00:16.120> and<04:00:16.359> we<04:00:16.439> can<04:00:16.560> give<04:00:16.680> it<04:00:16.800> a<04:00:16.960> class<04:00:17.640> name

zero and we can give it a class name

zero and we can give it a class name
equal<04:00:18.960> to<04:00:19.640> small-

equal to small-

equal to small-
medium<04:00:22.399> and<04:00:22.560> on<04:00:22.760> large<04:00:23.080> devices<04:00:23.680> base-<04:00:24.399> medium

medium and on large devices base- medium

medium and on large devices base- medium
there<04:00:25.560> we<04:00:25.720> go<04:00:26.520> and<04:00:26.720> we<04:00:26.800> can<04:00:26.960> do<04:00:27.120> the<04:00:27.279> same<04:00:27.600> exact

there we go and we can do the same exact

there we go and we can do the same exact
thing<04:00:28.080> for<04:00:28.279> saved<04:00:28.880> so<04:00:29.080> let's<04:00:29.359> copy<04:00:29.640> this

thing for saved so let's copy this

thing for saved so let's copy this
entire<04:00:30.159> div<04:00:31.080> paste<04:00:31.359> it<04:00:31.880> below<04:00:32.880> this<04:00:33.040> time<04:00:33.239> we

entire div paste it below this time we

entire div paste it below this time we
don't<04:00:33.600> need<04:00:33.800> margin<04:00:34.239> right<04:00:34.760> as<04:00:34.880> it's<04:00:35.120> already

don't need margin right as it's already

don't need margin right as it's already
on<04:00:35.560> the<04:00:35.760> right

on the right

on the right
side<04:00:37.520> and<04:00:37.720> we<04:00:37.800> need<04:00:37.960> to<04:00:38.080> change<04:00:38.319> change<04:00:38.640> this

side and we need to change change this

side and we need to change change this
from<04:00:39.199> like<04:00:39.800> to<04:00:40.560> save<04:00:41.560> and<04:00:41.800> everything<04:00:42.120> else<04:00:42.319> is

from like to save and everything else is

from like to save and everything else is
going<04:00:42.640> to<04:00:42.800> be<04:00:43.279> exactly<04:00:44.120> the<04:00:44.279> same<04:00:44.680> so<04:00:44.880> now<04:00:45.000> we

going to be exactly the same so now we

going to be exactly the same so now we
have<04:00:45.359> likes<04:00:46.040> and<04:00:46.319> we<04:00:46.479> have<04:00:46.840> saves<04:00:47.720> in<04:00:47.880> this

have likes and we have saves in this

have likes and we have saves in this
case<04:00:48.239> we<04:00:48.359> don't<04:00:48.560> need<04:00:48.720> to<04:00:48.840> show<04:00:49.159> the<04:00:49.319> number<04:00:49.560> of

case we don't need to show the number of

case we don't need to show the number of
saves<04:00:50.319> so<04:00:50.479> we<04:00:50.600> can<04:00:50.760> remove<04:00:51.319> the<04:00:51.479> P<04:00:51.720> tag<04:00:52.680> there

saves so we can remove the P tag there

saves so we can remove the P tag there
we<04:00:53.040> go<04:00:53.800> this<04:00:54.080> is<04:00:54.600> great<04:00:55.600> so<04:00:56.080> now<04:00:56.319> that<04:00:56.479> we've

we go this is great so now that we've

we go this is great so now that we've
implemented<04:00:57.159> the<04:00:57.279> UI<04:00:58.040> what<04:00:58.159> do<04:00:58.279> you<04:00:58.439> say<04:00:58.800> that

implemented the UI what do you say that

implemented the UI what do you say that
we<04:00:59.159> implement<04:00:59.560> the<04:00:59.800> logic<04:01:00.199> for<04:01:00.560> liking<04:01:01.319> saving

we implement the logic for liking saving

we implement the logic for liking saving
and<04:01:02.359> unsaving<04:01:03.239> as<04:01:03.439> well<04:01:04.080> we<04:01:04.159> can<04:01:04.319> do<04:01:04.560> that

and unsaving as well we can do that

and unsaving as well we can do that
quite<04:01:05.120> easily<04:01:05.840> by<04:01:06.000> heading<04:01:06.319> to<04:01:06.560> our<04:01:06.880> API<04:01:07.479> file

quite easily by heading to our API file

quite easily by heading to our API file
by<04:01:08.640> the<04:01:08.760> way<04:01:09.000> I<04:01:09.080> just<04:01:09.279> press<04:01:09.560> control<04:01:10.000> or

by the way I just press control or

by the way I just press control or
command<04:01:10.640> p<04:01:11.199> and<04:01:11.359> I<04:01:11.520> started<04:01:11.960> typing<04:01:12.319> the<04:01:12.439> file

command p and I started typing the file

command p and I started typing the file
name<04:01:13.439> this<04:01:13.560> is<04:01:13.680> going<04:01:13.840> to<04:01:14.040> immediately<04:01:14.640> move

name this is going to immediately move

name this is going to immediately move
you<04:01:15.159> to<04:01:15.319> the<04:01:15.479> correct<04:01:15.920> file<04:01:16.680> here<04:01:17.080> we<04:01:17.159> can

you to the correct file here we can

you to the correct file here we can
create<04:01:17.640> a<04:01:17.800> new<04:01:18.040> function<04:01:19.000> export<04:01:19.640> async

create a new function export async

create a new function export async
function<04:01:21.680> like<04:01:22.359> post<04:01:23.359> we<04:01:23.520> have<04:01:23.680> to<04:01:23.840> get<04:01:24.040> a<04:01:24.319> post

function like post we have to get a post

function like post we have to get a post
ID<04:01:25.600> which<04:01:25.720> is<04:01:25.840> of<04:01:26.000> a<04:01:26.159> type

ID which is of a type

ID which is of a type
string<04:01:28.600> as<04:01:28.800> well<04:01:29.080> as<04:01:29.239> a<04:01:29.439> likes<04:01:29.960> array<04:01:30.960> that's

string as well as a likes array that's

string as well as a likes array that's
going<04:01:31.319> to<04:01:31.520> be<04:01:31.920> of<04:01:32.080> a<04:01:32.359> type<04:01:32.800> string<04:01:33.359> array<04:01:34.319> we

going to be of a type string array we

going to be of a type string array we
need<04:01:34.680> this<04:01:34.840> to<04:01:35.000> know<04:01:35.319> the<04:01:35.560> IDS<04:01:36.199> of<04:01:36.359> the<04:01:36.560> people

need this to know the IDS of the people

need this to know the IDS of the people
that<04:01:37.159> have<04:01:37.319> liked<04:01:37.600> the<04:01:37.760> post

that have liked the post

that have liked the post
as<04:01:39.120> usual<04:01:39.560> we're<04:01:39.760> going<04:01:39.920> to<04:01:40.120> open<04:01:40.359> up<04:01:40.600> a<04:01:40.760> new

as usual we're going to open up a new

as usual we're going to open up a new
try<04:01:41.439> and<04:01:41.800> catch<04:01:42.159> Block<04:01:43.120> in<04:01:43.279> the<04:01:43.479> catch<04:01:43.760> we're

try and catch Block in the catch we're

try and catch Block in the catch we're
going<04:01:44.000> to<04:01:44.159> Simply<04:01:44.479> consel<04:01:45.000> Lo<04:01:45.199> the<04:01:45.600> error<04:01:46.600> and

going to Simply consel Lo the error and

going to Simply consel Lo the error and
in<04:01:47.080> the<04:01:47.399> try<04:01:48.040> we'll<04:01:48.279> try<04:01:48.439> to<04:01:48.640> like<04:01:48.840> it<04:01:49.560> by

in the try we'll try to like it by

in the try we'll try to like it by
updating<04:01:50.680> the<04:01:50.840> record<04:01:51.439> of<04:01:51.600> the<04:01:51.760> post<04:01:52.439> so<04:01:52.600> we

updating the record of the post so we

updating the record of the post so we
can<04:01:52.840> say<04:01:53.120> const<04:01:53.760> updated<04:01:54.720> post<04:01:55.720> is<04:01:55.920> equal<04:01:56.279> to

can say const updated post is equal to

can say const updated post is equal to
await

await

await
databases.<04:01:59.880> update

databases. update

databases. update
document<04:02:02.359> and<04:02:02.720> as<04:02:02.920> usual<04:02:03.520> we<04:02:03.680> have<04:02:03.800> to<04:02:04.080> pass<04:02:04.359> a

document and as usual we have to pass a

document and as usual we have to pass a
couple<04:02:04.760> of<04:02:04.920> things<04:02:05.159> to<04:02:05.319> it<04:02:06.040> you<04:02:06.159> can<04:02:06.319> see<04:02:06.479> it

couple of things to it you can see it

couple of things to it you can see it
right<04:02:06.840> here<04:02:07.080> as<04:02:07.199> well<04:02:07.640> aight<04:02:08.040> has<04:02:08.199> is<04:02:08.319> really

right here as well aight has is really

right here as well aight has is really
nicely<04:02:08.920> documented<04:02:09.680> their<04:02:10.000> SDK<04:02:11.000> so<04:02:11.159> you<04:02:11.359> have

nicely documented their SDK so you have

nicely documented their SDK so you have
to<04:02:11.800> pass<04:02:12.120> the<04:02:12.319> database<04:02:12.840> ID<04:02:13.479> collection<04:02:13.960> ID

to pass the database ID collection ID

to pass the database ID collection ID
document<04:02:15.159> ID<04:02:15.840> and<04:02:16.000> then<04:02:16.199> the<04:02:16.359> data<04:02:16.600> you<04:02:16.720> want

document ID and then the data you want

document ID and then the data you want
to<04:02:17.080> update<04:02:18.000> so<04:02:18.439> let's<04:02:18.640> do<04:02:18.880> that<04:02:19.800> first<04:02:20.239> let's

to update so let's do that first let's

to update so let's do that first let's
pass<04:02:20.720> the<04:02:20.920> database<04:02:21.399> ID<04:02:22.000> by<04:02:22.120> saying<04:02:22.520> app

pass the database ID by saying app

pass the database ID by saying app
config<04:02:23.680> that<04:02:23.920> database<04:02:24.479> ID<04:02:25.359> then<04:02:25.680> we<04:02:25.840> have<04:02:25.960> to

config that database ID then we have to

config that database ID then we have to
pass<04:02:26.439> the<04:02:26.680> collection<04:02:27.199> ID<04:02:27.640> of<04:02:27.800> the<04:02:27.920> collection

pass the collection ID of the collection

pass the collection ID of the collection
we<04:02:28.399> want<04:02:28.520> to<04:02:28.720> update<04:02:29.439> in<04:02:29.640> this<04:02:29.880> case<04:02:30.199> app

we want to update in this case app

we want to update in this case app
config<04:02:31.279> that<04:02:31.640> postcollection

config that postcollection

config that postcollection
ID<04:02:33.760> then<04:02:34.040> you<04:02:34.120> need<04:02:34.279> to<04:02:34.479> pass<04:02:34.720> the<04:02:34.920> ID<04:02:35.239> of<04:02:35.399> the

ID then you need to pass the ID of the

ID then you need to pass the ID of the
post<04:02:35.920> you<04:02:36.000> want<04:02:36.120> to<04:02:36.359> update<04:02:37.359> and<04:02:37.520> then<04:02:37.640> you

post you want to update and then you

post you want to update and then you
want<04:02:37.880> to<04:02:38.000> pass<04:02:38.199> has<04:02:38.520> the<04:02:39.000> data<04:02:40.000> in<04:02:40.159> this<04:02:40.359> case

want to pass has the data in this case

want to pass has the data in this case
likes<04:02:41.239> of<04:02:41.439> the<04:02:41.600> new<04:02:41.840> likes<04:02:42.159> array<04:02:42.760> so<04:02:42.960> we<04:02:43.120> know

likes of the new likes array so we know

likes of the new likes array so we know
what<04:02:43.439> is<04:02:43.560> the<04:02:43.680> new<04:02:43.920> like<04:02:44.319> count<04:02:45.319> finally<04:02:45.960> if

what is the new like count finally if

what is the new like count finally if
there<04:02:46.399> is<04:02:46.720> no<04:02:47.239> updated<04:02:47.760> post<04:02:48.319> there<04:02:48.479> must<04:02:48.680> be

there is no updated post there must be

there is no updated post there must be
some<04:02:49.040> kind<04:02:49.159> of<04:02:49.239> an<04:02:49.399> error<04:02:49.800> so<04:02:50.000> we<04:02:50.080> can<04:02:50.279> throw<04:02:50.520> it

some kind of an error so we can throw it

some kind of an error so we can throw it
and<04:02:51.800> we<04:02:51.920> can<04:02:52.120> then<04:02:52.880> return<04:02:53.880> the<04:02:54.120> updated

and we can then return the updated

and we can then return the updated
post<04:02:56.520> and<04:02:56.720> this<04:02:56.800> is<04:02:56.920> it<04:02:57.080> for<04:02:57.199> the<04:02:57.359> like

post and this is it for the like

post and this is it for the like
functionality<04:02:58.520> of<04:02:58.680> course<04:02:58.920> we'll<04:02:59.120> have<04:02:59.239> to

functionality of course we'll have to

functionality of course we'll have to
consume<04:02:59.880> this<04:03:00.040> function<04:03:00.439> within<04:03:00.680> our<04:03:00.880> react

consume this function within our react

consume this function within our react
query<04:03:01.720> as<04:03:01.880> well<04:03:02.319> and<04:03:02.479> make<04:03:02.640> it<04:03:02.760> a<04:03:03.000> mutation<04:03:04.000> but

query as well and make it a mutation but

query as well and make it a mutation but
we're<04:03:04.279> going<04:03:04.359> to<04:03:04.520> do<04:03:04.720> that<04:03:04.920> soon<04:03:05.640> for<04:03:05.920> now

we're going to do that soon for now

we're going to do that soon for now
believe<04:03:06.680> it<04:03:06.800> or<04:03:06.960> not<04:03:07.279> the<04:03:07.439> save<04:03:07.760> post

believe it or not the save post

believe it or not the save post
functionality<04:03:08.840> is<04:03:09.120> quite<04:03:09.399> similar<04:03:10.120> so<04:03:10.279> we<04:03:10.399> can

functionality is quite similar so we can

functionality is quite similar so we can
simply<04:03:10.960> duplicate<04:03:11.600> this<04:03:11.800> function<04:03:12.399> below<04:03:13.399> and

simply duplicate this function below and

simply duplicate this function below and
call<04:03:14.080> it<04:03:14.560> save<04:03:15.600> post<04:03:16.600> to<04:03:16.800> save<04:03:17.040> a<04:03:17.199> post<04:03:17.680> we<04:03:17.840> do

call it save post to save a post we do

call it save post to save a post we do
need<04:03:18.439> a<04:03:18.680> post<04:03:19.000> ID<04:03:19.800> but<04:03:19.960> we<04:03:20.120> also<04:03:20.359> need<04:03:20.640> a<04:03:20.840> user

need a post ID but we also need a user

need a post ID but we also need a user
ID<04:03:22.120> of<04:03:22.279> the<04:03:22.439> user<04:03:23.159> that's<04:03:23.399> saving<04:03:23.800> that<04:03:24.000> post

ID of the user that's saving that post

ID of the user that's saving that post
of<04:03:24.720> a<04:03:24.920> type<04:03:25.199> string<04:03:26.120> then<04:03:26.520> instead<04:03:26.800> of

of a type string then instead of

of a type string then instead of
updating<04:03:27.439> the<04:03:27.600> post<04:03:28.040> we're<04:03:28.239> going<04:03:28.399> to<04:03:28.680> create

updating the post we're going to create

updating the post we're going to create
a<04:03:29.520> new<04:03:29.800> document<04:03:30.479> so<04:03:30.640> we<04:03:30.720> can<04:03:30.880> say<04:03:31.239> do<04:03:31.680> create

a new document so we can say do create

a new document so we can say do create
document<04:03:33.520> we<04:03:33.720> pass<04:03:34.040> the<04:03:34.199> database<04:03:34.720> ID<04:03:35.720> but

document we pass the database ID but

document we pass the database ID but
it's<04:03:36.159> not<04:03:36.359> going<04:03:36.520> to<04:03:36.600> be<04:03:36.760> a<04:03:36.920> post<04:03:37.279> collection

it's not going to be a post collection

it's not going to be a post collection
it's<04:03:38.239> going<04:03:38.399> to<04:03:38.520> be<04:03:38.720> a<04:03:39.000> saves<04:03:39.840> collection<04:03:40.319> ID

it's going to be a saves collection ID

it's going to be a saves collection ID
in<04:03:41.439> this<04:03:41.640> case<04:03:41.840> we<04:03:41.960> don't<04:03:42.239> already<04:03:42.520> have<04:03:42.640> an

in this case we don't already have an

in this case we don't already have an
existing<04:03:43.359> record<04:03:43.920> of<04:03:44.120> that<04:03:44.359> save<04:03:44.960> so<04:03:45.120> we<04:03:45.239> can

existing record of that save so we can

existing record of that save so we can
create<04:03:45.640> a<04:03:45.760> new<04:03:45.920> one<04:03:46.359> by<04:03:46.479> running<04:03:46.920> id.

create a new one by running id.

create a new one by running id.
unique<04:03:49.920> and<04:03:50.120> then<04:03:50.399> we<04:03:50.560> simply<04:03:50.840> want<04:03:50.960> to<04:03:51.279> pass

unique and then we simply want to pass

unique and then we simply want to pass
the<04:03:52.239> user<04:03:53.239> as<04:03:53.439> the<04:03:53.560> user<04:03:53.920> ID<04:03:54.560> that's<04:03:54.800> actually

the user as the user ID that's actually

the user as the user ID that's actually
saving<04:03:55.479> the<04:03:55.680> post<04:03:56.479> and<04:03:56.680> we<04:03:56.760> want<04:03:56.880> to<04:03:57.080> pass<04:03:57.319> the

saving the post and we want to pass the

saving the post and we want to pass the
post<04:03:58.399> of<04:03:58.560> the<04:03:58.720> post<04:03:59.040> ID<04:03:59.600> so<04:03:59.800> we<04:03:59.920> know<04:04:00.279> which

post of the post ID so we know which

post of the post ID so we know which
post<04:04:00.880> is<04:04:01.040> getting

post is getting

post is getting
saved<04:04:02.880> and<04:04:03.040> this<04:04:03.159> is<04:04:03.359> it<04:04:03.720> we<04:04:03.840> just<04:04:04.159> return<04:04:04.439> the

saved and this is it we just return the

saved and this is it we just return the
updated<04:04:05.040> post<04:04:06.000> and<04:04:06.239> finally<04:04:06.680> we're<04:04:06.840> going<04:04:06.960> to

updated post and finally we're going to

updated post and finally we're going to
also<04:04:07.319> need<04:04:07.479> to<04:04:07.600> be<04:04:07.680> able<04:04:08.120> delete<04:04:08.640> that<04:04:08.800> saved

also need to be able delete that saved

also need to be able delete that saved
post<04:04:09.479> from<04:04:09.600> the<04:04:09.760> database<04:04:10.479> so<04:04:10.640> let's

post from the database so let's

post from the database so let's
duplicate<04:04:11.399> this<04:04:11.720> one<04:04:12.040> final<04:04:12.520> time<04:04:13.319> and<04:04:13.479> let's

duplicate this one final time and let's

duplicate this one final time and let's
recall<04:04:14.239> it<04:04:14.560> or<04:04:14.800> rename<04:04:15.199> it<04:04:15.600> as

recall it or rename it as

recall it or rename it as
delete<04:04:17.920> saved<04:04:19.040> post<04:04:20.040> the<04:04:20.159> only<04:04:20.399> thing<04:04:20.520> we<04:04:20.680> need

delete saved post the only thing we need

delete saved post the only thing we need
is<04:04:21.399> the<04:04:21.640> saved<04:04:22.159> record<04:04:22.560> ID<04:04:23.279> so<04:04:23.399> we<04:04:23.520> can<04:04:23.640> say

is the saved record ID so we can say

is the saved record ID so we can say
saved<04:04:24.720> record<04:04:25.439> ID<04:04:26.000> of<04:04:26.159> a<04:04:26.359> type

saved record ID of a type

saved record ID of a type
string<04:04:28.399> in<04:04:28.640> this<04:04:28.840> case<04:04:29.120> we<04:04:29.239> want<04:04:29.399> to<04:04:29.840> remove<04:04:30.600> or

string in this case we want to remove or

string in this case we want to remove or
delete<04:04:31.359> a<04:04:31.600> document<04:04:32.239> so<04:04:32.399> we<04:04:32.479> can<04:04:32.600> say

delete a document so we can say

delete a document so we can say
databases.<04:04:33.880> delete<04:04:34.760> document<04:04:35.760> when<04:04:35.880> you

databases. delete document when you

databases. delete document when you
delete<04:04:36.319> a<04:04:36.520> document<04:04:37.040> you<04:04:37.199> get<04:04:37.439> back<04:04:37.640> a<04:04:38.040> status

delete a document you get back a status

delete a document you get back a status
code<04:04:39.560> and<04:04:39.680> to<04:04:39.880> delete<04:04:40.199> it<04:04:40.520> you<04:04:40.680> simply<04:04:40.960> have<04:04:41.120> to

code and to delete it you simply have to

code and to delete it you simply have to
pass<04:04:42.000> the<04:04:42.239> saved<04:04:43.000> record<04:04:43.720> ID<04:04:44.560> as<04:04:44.680> the<04:04:44.840> third

pass the saved record ID as the third

pass the saved record ID as the third
parameter<04:04:46.600> then<04:04:46.960> we<04:04:47.080> can<04:04:47.279> check<04:04:47.720> if<04:04:47.880> there's

parameter then we can check if there's

parameter then we can check if there's
no<04:04:48.760> status<04:04:49.159> code<04:04:49.600> we<04:04:49.720> can<04:04:49.880> throw<04:04:50.080> an<04:04:50.239> error

no status code we can throw an error

no status code we can throw an error
else<04:04:51.560> we<04:04:51.680> can<04:04:52.000> return<04:04:52.520> something<04:04:52.840> like<04:04:52.960> a

else we can return something like a

else we can return something like a
status<04:04:53.920> of

status of

status of
okay<04:04:56.439> and<04:04:56.680> now<04:04:57.120> we<04:04:57.319> have<04:04:57.560> these<04:04:57.920> three

okay and now we have these three

okay and now we have these three
functions<04:04:58.960> or<04:04:59.120> we<04:04:59.239> can<04:04:59.399> call<04:04:59.600> them<04:04:59.800> mutations

functions or we can call them mutations

functions or we can call them mutations
that<04:05:00.840> we<04:05:00.960> can<04:05:01.159> use<04:05:01.640> within<04:05:01.960> our<04:05:02.159> react<04:05:02.560> query

that we can use within our react query

that we can use within our react query
to<04:05:03.520> then<04:05:03.720> use<04:05:04.000> them<04:05:04.319> within<04:05:04.640> our<04:05:04.920> post<04:05:05.319> stats

to then use them within our post stats

to then use them within our post stats
component<04:05:06.960> so<04:05:07.479> let's<04:05:07.720> go<04:05:08.000> go<04:05:08.159> to<04:05:08.439> our<04:05:09.080> queries

component so let's go go to our queries

component so let's go go to our queries
and<04:05:10.439> mutations<04:05:11.439> and<04:05:11.720> go<04:05:12.000> right<04:05:12.199> below<04:05:12.640> our<04:05:12.960> use

and mutations and go right below our use

and mutations and go right below our use
create<04:05:13.760> post<04:05:14.120> and<04:05:14.279> use<04:05:14.600> get<04:05:14.840> recent<04:05:15.399> posts

create post and use get recent posts

create post and use get recent posts
here<04:05:16.800> we<04:05:16.920> can<04:05:17.239> export<04:05:18.040> const<04:05:18.840> use<04:05:19.479> like<04:05:20.000> post

here we can export const use like post

here we can export const use like post
which<04:05:21.120> is<04:05:21.239> going<04:05:21.399> to<04:05:21.520> be<04:05:21.720> equal<04:05:21.960> to<04:05:22.120> an<04:05:22.239> eror

which is going to be equal to an eror

which is going to be equal to an eror
function<04:05:24.520> there<04:05:24.880> we<04:05:25.000> can<04:05:25.199> define<04:05:25.680> a<04:05:25.920> query

function there we can define a query

function there we can define a query
client<04:05:27.680> by<04:05:27.800> saying<04:05:28.159> con<04:05:28.560> query<04:05:28.880> client<04:05:29.479> is

client by saying con query client is

client by saying con query client is
equal<04:05:30.000> to<04:05:30.479> use<04:05:31.080> Query<04:05:31.920> client<04:05:32.920> and<04:05:33.120> then<04:05:33.359> we

equal to use Query client and then we

equal to use Query client and then we
want<04:05:33.640> to<04:05:33.960> return<04:05:34.520> the<04:05:34.720> use<04:05:35.640> mutation<04:05:36.640> we<04:05:36.760> need

want to return the use mutation we need

want to return the use mutation we need
to<04:05:37.159> pass<04:05:37.399> a<04:05:37.520> mutation<04:05:38.239> function<04:05:39.080> like<04:05:39.319> so

to pass a mutation function like so

to pass a mutation function like so
that's<04:05:40.359> going<04:05:40.520> to<04:05:40.680> get<04:05:40.880> as<04:05:40.960> a<04:05:41.159> parameter<04:05:42.040> one

that's going to get as a parameter one

that's going to get as a parameter one
object<04:05:42.920> of<04:05:43.279> post<04:05:43.720> ID<04:05:44.640> as<04:05:44.760> well<04:05:44.880> as<04:05:45.040> the<04:05:45.199> likes

object of post ID as well as the likes

object of post ID as well as the likes
array<04:05:46.960> that's<04:05:47.199> going<04:05:47.359> to<04:05:47.520> be<04:05:47.760> of<04:05:47.920> a<04:05:48.199> type<04:05:49.040> post

array that's going to be of a type post

array that's going to be of a type post
ID<04:05:50.640> is<04:05:50.800> of<04:05:50.960> a<04:05:51.120> type<04:05:51.399> string<04:05:52.399> and<04:05:52.720> likes<04:05:53.239> array

ID is of a type string and likes array

ID is of a type string and likes array
is<04:05:54.520> of<04:05:54.640> a<04:05:54.880> type<04:05:55.359> array<04:05:55.760> of<04:05:56.080> strings<04:05:57.080> and<04:05:57.199> then

is of a type array of strings and then

is of a type array of strings and then
we<04:05:57.439> can<04:05:57.600> have<04:05:57.720> a<04:05:57.880> function<04:05:58.199> that<04:05:58.359> we<04:05:58.439> can<04:05:58.600> call

we can have a function that we can call

we can have a function that we can call
the<04:05:59.640> function<04:05:59.920> we're<04:06:00.080> going<04:06:00.159> to<04:06:00.319> call<04:06:00.920> is<04:06:01.159> the

the function we're going to call is the

the function we're going to call is the
like<04:06:02.040> post<04:06:02.760> coming<04:06:03.080> from<04:06:03.439> aight<04:06:04.319> API<04:06:05.319> and<04:06:05.520> to

like post coming from aight API and to

like post coming from aight API and to
it<04:06:06.040> we<04:06:06.159> can<04:06:06.319> simply<04:06:06.640> pass<04:06:06.920> the<04:06:07.080> post<04:06:07.439> ID

it we can simply pass the post ID

it we can simply pass the post ID
as<04:06:08.560> well<04:06:08.800> as<04:06:08.960> the<04:06:09.159> likes<04:06:09.640> array<04:06:10.640> and<04:06:10.840> now<04:06:11.080> it's

as well as the likes array and now it's

as well as the likes array and now it's
no<04:06:11.439> longer<04:06:11.720> complaining<04:06:12.399> because<04:06:12.600> it<04:06:12.760> gets

no longer complaining because it gets

no longer complaining because it gets
exactly<04:06:13.680> what<04:06:13.800> it<04:06:14.000> needs<04:06:15.000> so<04:06:15.239> now<04:06:15.399> we<04:06:15.520> have<04:06:15.680> our

exactly what it needs so now we have our

exactly what it needs so now we have our
used<04:06:16.640> mutation<04:06:17.640> but<04:06:17.920> the<04:06:18.080> second<04:06:18.319> thing<04:06:18.479> we

used mutation but the second thing we

used mutation but the second thing we
can<04:06:18.800> pass<04:06:19.040> to<04:06:19.159> our<04:06:19.279> use<04:06:19.560> mutation<04:06:20.479> which<04:06:20.680> goes

can pass to our use mutation which goes

can pass to our use mutation which goes
right<04:06:21.279> here<04:06:21.880> after<04:06:22.239> our<04:06:22.680> like<04:06:23.000> post<04:06:23.640> after<04:06:23.920> our

right here after our like post after our

right here after our like post after our
comma<04:06:24.880> is<04:06:25.159> on<04:06:25.520> success<04:06:26.520> so<04:06:26.720> the<04:06:26.920> question<04:06:27.239> is

comma is on success so the question is

comma is on success so the question is
what<04:06:27.960> do<04:06:28.120> we<04:06:28.279> want<04:06:28.439> to<04:06:28.640> do<04:06:29.040> on<04:06:29.479> success<04:06:30.479> where

what do we want to do on success where

what do we want to do on success where
we<04:06:30.840> get<04:06:31.000> some<04:06:31.199> data<04:06:31.520> back<04:06:31.840> once<04:06:32.000> we

we get some data back once we

we get some data back once we
successfully<04:06:32.680> do<04:06:32.840> an<04:06:33.080> action<04:06:34.080> well<04:06:34.359> we<04:06:34.479> want

successfully do an action well we want

successfully do an action well we want
to<04:06:35.000> invalidate<04:06:35.840> some<04:06:36.080> queries<04:06:36.840> so<04:06:36.960> we<04:06:37.080> can<04:06:37.159> say

to invalidate some queries so we can say

to invalidate some queries so we can say
query

query

query
client<04:06:39.840> do

client do

client do
invalidate<04:06:42.319> queries<04:06:43.319> in<04:06:43.520> this<04:06:43.760> case<04:06:44.279> it's

invalidate queries in this case it's

invalidate queries in this case it's
going<04:06:44.640> to<04:06:44.840> be<04:06:45.120> a<04:06:45.319> query<04:06:46.199> key<04:06:47.279> of

going to be a query key of

going to be a query key of
query<04:06:50.080> unor

query unor

query unor
keys.<04:06:52.319> getet<04:06:53.120> poost<04:06:53.880> by<04:06:54.359> ID<04:06:55.359> with<04:06:55.640> a<04:06:55.880> data<04:06:56.399> of

keys. getet poost by ID with a data of

keys. getet poost by ID with a data of
that<04:06:56.960> specific<04:06:57.479> post<04:06:58.199> that<04:06:58.359> we<04:06:58.600> updated<04:06:59.479> like

that specific post that we updated like

that specific post that we updated like
this<04:07:00.680> so<04:07:00.960> what<04:07:01.080> does<04:07:01.319> this<04:07:01.439> mean<04:07:02.439> well<04:07:02.720> as<04:07:02.840> I

this so what does this mean well as I

this so what does this mean well as I
said<04:07:03.239> before<04:07:04.040> every<04:07:04.399> single<04:07:04.880> post<04:07:05.439> that<04:07:05.600> we

said before every single post that we

said before every single post that we
get<04:07:06.239> or<04:07:06.479> fetch<04:07:06.880> using<04:07:07.239> react

get or fetch using react

get or fetch using react
is<04:07:08.479> going<04:07:08.640> to<04:07:08.760> be<04:07:09.000> cached<04:07:09.800> which<04:07:09.920> is<04:07:10.159> amazing

is going to be cached which is amazing

is going to be cached which is amazing
because<04:07:11.159> on<04:07:11.439> subsequent<04:07:12.120> reloads<04:07:12.960> it<04:07:13.080> will

because on subsequent reloads it will

because on subsequent reloads it will
already<04:07:13.640> have<04:07:13.800> them<04:07:14.040> saved<04:07:14.640> and<04:07:14.760> it's<04:07:14.920> going

already have them saved and it's going

already have them saved and it's going
to<04:07:15.199> take<04:07:15.399> so<04:07:15.680> much<04:07:15.960> less<04:07:16.239> time<04:07:16.600> to<04:07:16.760> load<04:07:17.040> them

to take so much less time to load them

to take so much less time to load them
on<04:07:17.319> the<04:07:17.479> screen<04:07:18.479> but<04:07:19.239> if<04:07:19.359> you<04:07:19.600> update

on the screen but if you update

on the screen but if you update
something<04:07:20.279> about<04:07:20.560> that<04:07:20.800> post<04:07:21.319> such<04:07:21.479> as<04:07:21.680> the

something about that post such as the

something about that post such as the
like<04:07:22.359> count<04:07:23.159> and<04:07:23.319> then<04:07:23.439> if<04:07:23.560> you<04:07:23.760> go<04:07:24.040> into<04:07:24.720> the

like count and then if you go into the

like count and then if you go into the
post<04:07:25.239> details<04:07:26.239> it's<04:07:26.399> still<04:07:26.600> going<04:07:26.800> to<04:07:27.000> have

post details it's still going to have

post details it's still going to have
the<04:07:27.439> same<04:07:27.800> old<04:07:28.199> like<04:07:28.560> count<04:07:29.239> the<04:07:29.399> one<04:07:29.600> it<04:07:29.840> had

the same old like count the one it had

the same old like count the one it had
before<04:07:30.840> you<04:07:31.159> actually<04:07:31.520> updated<04:07:32.560> it<04:07:33.560> so<04:07:33.920> to<04:07:34.119> fix

before you actually updated it so to fix

before you actually updated it so to fix
this<04:07:34.720> we<04:07:34.880> have<04:07:34.960> to<04:07:35.239> invalidate<04:07:36.159> the<04:07:36.319> fetch<04:07:36.800> to

this we have to invalidate the fetch to

this we have to invalidate the fetch to
theose<04:07:37.439> detail<04:07:37.680> details<04:07:38.439> and<04:07:38.600> say<04:07:39.000> hey<04:07:39.880> if

theose detail details and say hey if

theose detail details and say hey if
this<04:07:40.239> changes<04:07:40.960> if<04:07:41.080> you<04:07:41.239> like<04:07:41.439> the<04:07:41.640> post<04:07:42.319> the

this changes if you like the post the

this changes if you like the post the
next<04:07:42.840> time<04:07:43.000> you<04:07:43.199> open<04:07:43.479> up<04:07:43.680> the<04:07:43.880> post<04:07:44.560> please

next time you open up the post please

next time you open up the post please
update<04:07:45.720> the<04:07:45.960> like<04:07:46.199> count<04:07:47.000> that<04:07:47.159> way<04:07:47.319> it's

update the like count that way it's

update the like count that way it's
going<04:07:47.640> to<04:07:47.760> be<04:07:48.159> reflected<04:07:49.159> and<04:07:49.359> we<04:07:49.479> have<04:07:49.600> to

going to be reflected and we have to

going to be reflected and we have to
invalidate<04:07:50.439> a<04:07:50.560> couple<04:07:50.800> of<04:07:50.960> other<04:07:51.159> queries<04:07:51.680> as

invalidate a couple of other queries as

invalidate a couple of other queries as
well<04:07:52.319> so<04:07:52.520> let's<04:07:52.800> copy<04:07:53.119> this<04:07:53.359> one<04:07:53.760> two<04:07:54.199> three

well so let's copy this one two three

well so let's copy this one two three
more<04:07:54.920> times<04:07:55.920> the<04:07:56.080> second<04:07:56.399> one<04:07:56.680> is<04:07:56.840> going<04:07:57.040> to<04:07:57.239> be

more times the second one is going to be

more times the second one is going to be
get<04:07:58.520> recent<04:07:59.319> posts<04:08:00.199> so<04:08:00.319> if<04:08:00.439> you<04:08:00.520> just<04:08:00.680> reload

get recent posts so if you just reload

get recent posts so if you just reload
the<04:08:01.199> home<04:08:01.560> you<04:08:01.720> need<04:08:01.880> to<04:08:02.000> be<04:08:02.119> able<04:08:02.319> to<04:08:02.439> see<04:08:02.800> a

the home you need to be able to see a

the home you need to be able to see a
new<04:08:03.199> updated<04:08:03.680> like<04:08:04.000> count<04:08:05.000> then<04:08:05.720> get<04:08:06.080> posts

new updated like count then get posts

new updated like count then get posts
just<04:08:06.960> in<04:08:07.119> general<04:08:08.040> and<04:08:08.199> then<04:08:08.840> get<04:08:09.520> current

just in general and then get current

just in general and then get current
user<04:08:10.920> because<04:08:11.119> if<04:08:11.239> you<04:08:11.359> go<04:08:11.479> to<04:08:11.600> your<04:08:11.840> profile

user because if you go to your profile

user because if you go to your profile
you<04:08:12.479> need<04:08:12.640> to<04:08:12.760> be<04:08:12.880> able<04:08:13.080> to<04:08:13.279> see<04:08:13.880> the<04:08:14.040> updated

you need to be able to see the updated

you need to be able to see the updated
like<04:08:14.880> count<04:08:15.880> and<04:08:16.080> in<04:08:16.239> other<04:08:16.520> cases<04:08:16.840> we<04:08:16.960> don't

like count and in other cases we don't

like count and in other cases we don't
have<04:08:17.279> to<04:08:17.479> pass<04:08:17.720> the<04:08:17.880> ID<04:08:18.239> of<04:08:18.359> a<04:08:18.600> specific<04:08:19.000> post

have to pass the ID of a specific post

have to pass the ID of a specific post
because<04:08:19.760> we're<04:08:19.920> fetching<04:08:20.319> many<04:08:20.640> posts<04:08:21.359> so<04:08:21.800> it

because we're fetching many posts so it

because we're fetching many posts so it
doesn't<04:08:22.279> really<04:08:22.520> matter<04:08:23.359> great<04:08:24.159> so<04:08:24.359> this<04:08:24.439> is

doesn't really matter great so this is

doesn't really matter great so this is
the<04:08:24.720> mutation<04:08:25.159> for<04:08:25.359> the<04:08:25.560> use<04:08:26.119> like<04:08:26.920> count<04:08:27.920> now

the mutation for the use like count now

the mutation for the use like count now
as<04:08:28.800> before<04:08:29.399> with<04:08:29.560> the<04:08:29.720> API<04:08:30.279> actions<04:08:31.239> this<04:08:31.439> time

as before with the API actions this time

as before with the API actions this time
the<04:08:32.080> use<04:08:32.600> Save<04:08:33.000> post<04:08:33.399> is<04:08:33.560> going<04:08:33.720> to<04:08:33.840> be<04:08:34.040> similar

the use Save post is going to be similar

the use Save post is going to be similar
to<04:08:34.680> the<04:08:34.840> use<04:08:35.319> like<04:08:35.680> post<04:08:36.239> so<04:08:36.399> we<04:08:36.479> can<04:08:36.720> simply

to the use like post so we can simply

to the use like post so we can simply
dup<04:08:37.560> duplicate<04:08:38.199> this<04:08:38.760> below<04:08:39.760> we<04:08:39.880> can<04:08:40.119> rename

dup duplicate this below we can rename

dup duplicate this below we can rename
it<04:08:41.040> to<04:08:41.560> use<04:08:42.279> Save<04:08:43.279> post<04:08:44.279> and<04:08:44.479> then<04:08:44.760> we're

it to use Save post and then we're

it to use Save post and then we're
getting<04:08:45.319> the<04:08:45.720> post<04:08:46.080> ID<04:08:46.600> as<04:08:46.720> well<04:08:46.840> as<04:08:46.960> the<04:08:47.119> user

getting the post ID as well as the user

getting the post ID as well as the user
ID<04:08:47.920> not<04:08:48.159> the<04:08:48.279> likes<04:08:48.560> array<04:08:49.080> so<04:08:49.239> we<04:08:49.319> can<04:08:49.479> modify

ID not the likes array so we can modify

ID not the likes array so we can modify
right<04:08:50.199> here<04:08:51.119> the<04:08:51.359> type<04:08:51.680> to<04:08:51.880> user<04:08:52.159> ID<04:08:52.560> of<04:08:52.680> a<04:08:52.880> type

right here the type to user ID of a type

right here the type to user ID of a type
string<04:08:54.080> instead<04:08:54.359> of<04:08:54.479> calling<04:08:54.800> like<04:08:55.119> post

string instead of calling like post

string instead of calling like post
we're<04:08:55.520> going<04:08:55.640> to<04:08:55.760> call<04:08:56.040> Save

we're going to call Save

we're going to call Save
post<04:08:58.040> and<04:08:58.279> we<04:08:58.439> have<04:08:58.520> to<04:08:58.720> import<04:08:59.040> it<04:08:59.199> from<04:08:59.399> aight

post and we have to import it from aight

post and we have to import it from aight
API<04:09:01.319> and<04:09:01.600> we<04:09:01.720> want<04:09:01.800> to<04:09:02.040> pass<04:09:02.319> the<04:09:02.520> user<04:09:02.840> ID<04:09:03.760> as

API and we want to pass the user ID as

API and we want to pass the user ID as
the<04:09:04.119> second<04:09:04.479> parameter<04:09:05.239> or<04:09:05.560> let's<04:09:05.760> be<04:09:05.920> careful

the second parameter or let's be careful

the second parameter or let's be careful
if<04:09:06.880> we<04:09:07.000> have<04:09:07.119> a<04:09:07.239> r<04:09:07.880> it<04:09:07.960> says<04:09:08.239> post<04:09:08.520> ID<04:09:09.040> and<04:09:09.199> then

if we have a r it says post ID and then

if we have a r it says post ID and then
user<04:09:09.840> ID<04:09:10.840> and<04:09:11.040> here<04:09:11.199> it's<04:09:11.399> post<04:09:11.680> ID<04:09:11.960> user<04:09:12.239> ID<04:09:12.640> so

user ID and here it's post ID user ID so

user ID and here it's post ID user ID so
you<04:09:12.880> have<04:09:13.000> to<04:09:13.199> pass<04:09:13.439> them<04:09:13.600> in<04:09:13.720> the<04:09:13.880> same<04:09:14.159> order

you have to pass them in the same order

you have to pass them in the same order
in<04:09:15.040> this<04:09:15.239> case<04:09:15.760> I<04:09:15.880> truly<04:09:16.239> did<04:09:16.520> call<04:09:16.720> it<04:09:16.920> post<04:09:17.199> ID

in this case I truly did call it post ID

in this case I truly did call it post ID
and<04:09:17.560> then<04:09:17.680> the<04:09:17.800> user<04:09:18.080> ID<04:09:18.560> so<04:09:18.760> that's<04:09:19.000> great<04:09:19.880> on

and then the user ID so that's great on

and then the user ID so that's great on
success<04:09:20.800> we<04:09:20.960> don't<04:09:21.159> need<04:09:21.279> to<04:09:21.560> update<04:09:22.239> the

success we don't need to update the

success we don't need to update the
specific<04:09:22.960> post<04:09:23.319> get<04:09:23.560> post<04:09:23.840> by<04:09:23.960> ID<04:09:24.800> but<04:09:25.000> we<04:09:25.119> need

specific post get post by ID but we need

specific post get post by ID but we need
to<04:09:25.439> update<04:09:25.840> all<04:09:26.080> the<04:09:26.199> other<04:09:26.479> three<04:09:27.080> so<04:09:27.439> we<04:09:27.560> can

to update all the other three so we can

to update all the other three so we can
just<04:09:27.880> do<04:09:28.040> it<04:09:28.439> like<04:09:28.720> this<04:09:29.720> and<04:09:30.000> finally<04:09:30.720> the

just do it like this and finally the

just do it like this and finally the
last<04:09:31.199> one<04:09:31.600> use<04:09:31.880> delete<04:09:32.439> saved<04:09:32.880> post<04:09:33.399> is<04:09:33.520> going

last one use delete saved post is going

last one use delete saved post is going
to<04:09:33.840> be<04:09:34.040> the<04:09:34.199> same<04:09:34.680> so<04:09:34.880> we<04:09:34.960> can<04:09:35.159> duplicate<04:09:35.640> it

to be the same so we can duplicate it

to be the same so we can duplicate it
one<04:09:36.560> more<04:09:36.840> time<04:09:37.640> right

one more time right

one more time right
below<04:09:39.600> it's<04:09:39.760> going<04:09:39.920> to<04:09:40.080> be<04:09:40.239> called<04:09:40.760> use

below it's going to be called use

below it's going to be called use
delete<04:09:43.279> saved

delete saved

delete saved
post<04:09:46.279> the<04:09:46.399> only<04:09:46.640> thing<04:09:46.800> we<04:09:46.960> need<04:09:47.560> is<04:09:47.800> one

post the only thing we need is one

post the only thing we need is one
simple<04:09:48.439> parameter<04:09:49.239> right<04:09:49.439> here<04:09:49.840> of<04:09:50.199> Saved

simple parameter right here of Saved

simple parameter right here of Saved
record<04:09:52.399> ID<04:09:53.399> and<04:09:53.760> then<04:09:54.040> we<04:09:54.159> can<04:09:54.399> call<04:09:55.239> a

record ID and then we can call a

record ID and then we can call a
function<04:09:55.960> called<04:09:56.279> delete<04:09:57.239> saved<04:09:57.760> post<04:09:58.359> which

function called delete saved post which

function called delete saved post which
we<04:09:58.600> can<04:09:58.800> import<04:09:59.199> from<04:09:59.800> aite<04:10:00.800> and<04:10:01.040> pass<04:10:01.279> in<04:10:01.800> the

we can import from aite and pass in the

we can import from aite and pass in the
saved<04:10:02.520> record

saved record

saved record
ID<04:10:05.000> this<04:10:05.239> has<04:10:05.359> to<04:10:05.520> be<04:10:05.720> of<04:10:05.880> a<04:10:06.080> type<04:10:06.479> string<04:10:07.840> there

ID this has to be of a type string there

ID this has to be of a type string there
we<04:10:08.239> go<04:10:08.840> and<04:10:08.960> then<04:10:09.080> we're<04:10:09.239> going<04:10:09.319> to<04:10:09.520> invalidate

we go and then we're going to invalidate

we go and then we're going to invalidate
the<04:10:10.439> same<04:10:10.760> queries<04:10:11.680> so<04:10:11.920> now<04:10:12.239> we<04:10:12.399> have<04:10:12.680> three

the same queries so now we have three

the same queries so now we have three
phenomenal<04:10:13.520> functions<04:10:14.239> which<04:10:14.399> we<04:10:14.520> can<04:10:14.720> use<04:10:15.199> to

phenomenal functions which we can use to

phenomenal functions which we can use to
make<04:10:15.640> the<04:10:15.840> logic<04:10:16.119> of<04:10:16.239> our<04:10:16.439> application<04:10:17.040> work

make the logic of our application work

make the logic of our application work
so<04:10:18.040> let's<04:10:18.239> save<04:10:18.520> the<04:10:18.680> file<04:10:19.399> go<04:10:19.720> back<04:10:19.920> to<04:10:20.080> the

so let's save the file go back to the

so let's save the file go back to the
post<04:10:20.560> stats<04:10:21.319> and<04:10:21.479> let's<04:10:21.680> retrieve<04:10:22.399> all<04:10:22.560> of

post stats and let's retrieve all of

post stats and let's retrieve all of
these<04:10:22.920> phenomenal<04:10:23.479> mutations<04:10:24.199> and<04:10:24.920> queries

these phenomenal mutations and queries

these phenomenal mutations and queries
by<04:10:26.119> using<04:10:26.439> the<04:10:26.600> hooks<04:10:27.159> provided<04:10:27.560> to<04:10:27.800> us<04:10:28.520> by

by using the hooks provided to us by

by using the hooks provided to us by
react<04:10:29.560> query<04:10:30.560> that<04:10:30.760> are<04:10:31.119> by<04:10:31.479> consequence

react query that are by consequence

react query that are by consequence
using<04:10:32.920> aite<04:10:33.880> functions<04:10:34.880> so<04:10:35.279> back<04:10:35.479> in<04:10:35.640> the<04:10:35.760> post

using aite functions so back in the post

using aite functions so back in the post
stats<04:10:36.680> we<04:10:36.800> can<04:10:36.880> see<04:10:37.159> con

stats we can see con

stats we can see con
mutate<04:10:39.479> which<04:10:39.600> we're<04:10:39.760> going<04:10:39.840> to<04:10:40.000> rename<04:10:40.399> to

mutate which we're going to rename to

mutate which we're going to rename to
like<04:10:41.279> post<04:10:42.279> is<04:10:42.439> going<04:10:42.520> to<04:10:42.680> be<04:10:42.880> equal<04:10:43.159> to<04:10:43.479> use

like post is going to be equal to use

like post is going to be equal to use
like<04:10:44.840> post<04:10:45.479> which<04:10:45.600> we<04:10:45.720> have<04:10:45.840> to<04:10:46.000> import<04:10:46.399> from

like post which we have to import from

like post which we have to import from
queries<04:10:46.960> and

queries and

queries and
mutations<04:10:49.239> we<04:10:49.359> can<04:10:49.520> duplicate<04:10:50.040> this<04:10:50.279> three

mutations we can duplicate this three

mutations we can duplicate this three
more<04:10:50.840> times<04:10:51.680> the<04:10:51.840> second<04:10:52.199> time<04:10:52.439> the<04:10:52.600> mutate

more times the second time the mutate

more times the second time the mutate
function<04:10:53.680> is<04:10:53.840> going<04:10:54.000> to<04:10:54.159> be<04:10:54.319> called<04:10:54.840> save<04:10:55.319> post

function is going to be called save post

function is going to be called save post
and<04:10:56.119> the<04:10:56.319> third<04:10:56.600> time<04:10:56.880> it's<04:10:57.040> going<04:10:57.199> to<04:10:57.359> be

and the third time it's going to be

and the third time it's going to be
delete<04:10:59.000> saved

delete saved

delete saved
post<04:11:02.080> of<04:11:02.239> course<04:11:02.560> we<04:11:02.680> have<04:11:02.840> to<04:11:02.960> call<04:11:03.279> this<04:11:03.600> use

post of course we have to call this use

post of course we have to call this use
Save<04:11:05.119> post<04:11:05.600> which<04:11:05.720> we<04:11:05.840> also<04:11:06.080> have<04:11:06.199> to<04:11:06.439> import

Save post which we also have to import

Save post which we also have to import
and<04:11:07.840> use

and use

and use
delete<04:11:11.000> saved<04:11:12.159> post<04:11:13.159> which<04:11:13.319> we<04:11:13.439> can<04:11:13.640> also

delete saved post which we can also

delete saved post which we can also
import<04:11:14.640> right<04:11:15.319> here<04:11:16.319> we<04:11:16.479> also<04:11:16.720> need<04:11:16.880> to<04:11:17.000> know

import right here we also need to know

import right here we also need to know
who<04:11:17.399> is<04:11:17.520> the<04:11:17.680> currently<04:11:18.040> logged<04:11:18.319> in<04:11:18.479> user

who is the currently logged in user

who is the currently logged in user
which<04:11:19.239> we<04:11:19.319> can<04:11:19.479> get<04:11:19.680> pretty<04:11:19.920> easily<04:11:20.520> by<04:11:20.640> saying

which we can get pretty easily by saying

which we can get pretty easily by saying
cons<04:11:21.439> data<04:11:22.439> rename<04:11:22.880> it<04:11:23.080> to<04:11:23.399> current<04:11:23.800> user<04:11:24.800> is

cons data rename it to current user is

cons data rename it to current user is
equal<04:11:25.319> to<04:11:25.920> use<04:11:26.439> user<04:11:26.920> context<04:11:27.600> which<04:11:27.760> we<04:11:27.880> can

equal to use user context which we can

equal to use user context which we can
import<04:11:28.479> from<04:11:28.720> o

import from o

import from o
context<04:11:31.680> then<04:11:32.000> we<04:11:32.159> have<04:11:32.279> to<04:11:32.439> figure<04:11:32.720> out<04:11:33.080> what

context then we have to figure out what

context then we have to figure out what
are<04:11:33.319> the<04:11:33.479> current<04:11:33.880> likes<04:11:34.439> on<04:11:34.680> a<04:11:34.920> specific<04:11:35.439> post

are the current likes on a specific post

are the current likes on a specific post
and<04:11:36.119> we<04:11:36.239> can<04:11:36.359> do<04:11:36.520> that<04:11:36.720> right<04:11:36.840> here<04:11:37.000> at<04:11:37.080> the<04:11:37.199> top

and we can do that right here at the top

and we can do that right here at the top
Top<04:11:37.840> by<04:11:37.960> saying

Top by saying

Top by saying
const<04:11:39.920> likes<04:11:40.680> list<04:11:41.479> is<04:11:41.720> equal<04:11:42.040> to<04:11:42.800> post<04:11:43.560> which

const likes list is equal to post which

const likes list is equal to post which
is<04:11:43.840> coming<04:11:44.159> from<04:11:44.479> props<04:11:44.960> right<04:11:45.520> here<04:11:46.920> likes.

is coming from props right here likes.

is coming from props right here likes.
map<04:11:48.840> where<04:11:49.000> we<04:11:49.159> get<04:11:49.399> each<04:11:49.680> individual<04:11:50.319> user

map where we get each individual user

map where we get each individual user
why<04:11:51.600> user<04:11:52.479> because<04:11:52.800> we're<04:11:52.960> saving<04:11:53.359> a

why user because we're saving a

why user because we're saving a
reference<04:11:53.880> to<04:11:54.000> the<04:11:54.159> user<04:11:54.640> whenever<04:11:55.000> somebody

reference to the user whenever somebody

reference to the user whenever somebody
likes<04:11:55.600> it<04:11:56.119> which<04:11:56.239> is<04:11:56.359> going<04:11:56.479> to<04:11:56.600> be<04:11:56.840> type<04:11:57.279> of<04:11:57.520> a

likes it which is going to be type of a

likes it which is going to be type of a
models.<04:11:59.239> document<04:12:00.239> and<04:12:00.479> we<04:12:00.600> want<04:12:00.720> to<04:12:01.000> return

models. document and we want to return

models. document and we want to return
just<04:12:01.680> their<04:12:01.960> ID<04:12:02.479> so<04:12:02.720> user.<04:12:03.640> dollar<04:12:04.000> sign<04:12:04.560> ID

just their ID so user. dollar sign ID

just their ID so user. dollar sign ID
and<04:12:05.720> that<04:12:05.880> gives<04:12:06.080> us<04:12:06.239> the<04:12:06.359> likes<04:12:06.720> list

and that gives us the likes list

and that gives us the likes list
then<04:12:08.239> we<04:12:08.359> want<04:12:08.439> to<04:12:08.640> create<04:12:08.960> two<04:12:09.279> Ed<04:12:09.680> States<04:12:10.279> so

then we want to create two Ed States so

then we want to create two Ed States so
the<04:12:10.640> first<04:12:10.920> used<04:12:11.520> state<04:12:12.520> is<04:12:12.680> going<04:12:12.840> to<04:12:13.040> say

the first used state is going to say

the first used state is going to say
likes<04:12:14.680> as<04:12:14.840> well<04:12:15.000> as<04:12:15.319> set<04:12:16.000> likes<04:12:17.000> right<04:12:17.319> here

likes as well as set likes right here

likes as well as set likes right here
and<04:12:18.560> at<04:12:18.680> the<04:12:18.880> start<04:12:19.359> it's<04:12:19.560> going<04:12:19.720> to<04:12:19.840> be<04:12:20.000> set<04:12:20.840> to

and at the start it's going to be set to

and at the start it's going to be set to
the<04:12:22.000> likes<04:12:22.399> list<04:12:23.000> so<04:12:23.279> immediately<04:12:23.800> we<04:12:23.960> know

the likes list so immediately we know

the likes list so immediately we know
it's<04:12:24.319> going<04:12:24.479> to<04:12:24.640> be<04:12:24.840> an<04:12:25.119> array<04:12:26.119> and<04:12:26.279> we<04:12:26.399> also

it's going to be an array and we also

it's going to be an array and we also
have<04:12:26.720> to<04:12:26.880> import<04:12:27.279> use<04:12:27.600> state<04:12:28.000> from<04:12:28.279> react

have to import use state from react

have to import use state from react
which<04:12:29.199> we<04:12:29.319> can<04:12:29.439> do<04:12:29.560> at<04:12:29.680> the<04:12:29.880> top<04:12:30.279> by<04:12:30.399> saying

which we can do at the top by saying

which we can do at the top by saying
import<04:12:31.399> use<04:12:31.760> State<04:12:32.399> we<04:12:32.520> can<04:12:32.680> also<04:12:32.960> get<04:12:33.199> use

import use State we can also get use

import use State we can also get use
effect<04:12:34.920> coming<04:12:35.399> from<04:12:36.399> react

effect coming from react

effect coming from react
and<04:12:38.479> in<04:12:38.640> the<04:12:38.800> same<04:12:39.080> way<04:12:39.520> we<04:12:39.640> want<04:12:39.760> to<04:12:39.920> know<04:12:40.239> if

and in the same way we want to know if

and in the same way we want to know if
the<04:12:40.560> post<04:12:40.960> has<04:12:41.119> been<04:12:41.399> saved<04:12:42.000> so<04:12:42.159> we<04:12:42.239> can<04:12:42.399> say<04:12:42.680> is

the post has been saved so we can say is

the post has been saved so we can say is
saved<04:12:44.439> set<04:12:45.439> is

saved and that's going to be equal to

saved and that's going to be equal to
false<04:12:50.600> at<04:12:50.720> the<04:12:50.960> beginning<04:12:51.960> so<04:12:52.199> now<04:12:52.399> we<04:12:52.520> have<04:12:52.680> a

false at the beginning so now we have a

false at the beginning so now we have a
lot<04:12:52.960> of<04:12:53.199> things<04:12:53.399> we<04:12:53.520> need<04:12:54.000> to<04:12:54.399> enable<04:12:54.920> this

lot of things we need to enable this

lot of things we need to enable this
functionality<04:12:56.159> so<04:12:56.319> let's<04:12:56.520> create<04:12:56.800> two

functionality so let's create two

functionality so let's create two
functions<04:12:57.439> we're<04:12:57.560> going<04:12:57.680> to<04:12:57.800> use<04:12:57.960> to<04:12:58.319> like

functions we're going to use to like

functions we're going to use to like
dislike<04:12:59.520> and<04:12:59.800> save<04:13:00.119> and<04:13:00.279> unsave<04:13:01.080> posts<04:13:02.080> const

dislike and save and unsave posts const

dislike and save and unsave posts const
handle<04:13:03.800> like<04:13:04.439> post<04:13:05.199> is<04:13:05.399> going<04:13:05.560> to<04:13:05.760> be<04:13:06.560> a

handle like post is going to be a

handle like post is going to be a
function

function

function
as<04:13:08.399> well<04:13:08.800> as<04:13:09.399> const<04:13:10.399> handle<04:13:11.279> save<04:13:12.199> post<04:13:12.720> which

as well as const handle save post which

as well as const handle save post which
is<04:13:12.960> going<04:13:13.080> to<04:13:13.199> be<04:13:13.359> another<04:13:13.720> function<04:13:14.239> for<04:13:14.479> now

is going to be another function for now

is going to be another function for now
now<04:13:15.600> we<04:13:15.760> have<04:13:16.000> all<04:13:16.119> of<04:13:16.319> these<04:13:16.560> properties<04:13:17.119> we

now we have all of these properties we

now we have all of these properties we
can<04:13:17.439> work<04:13:17.760> with<04:13:18.159> right<04:13:18.359> here<04:13:18.600> Below<04:13:19.080> in<04:13:19.239> the<04:13:19.399> UI

can work with right here Below in the UI

can work with right here Below in the UI
so<04:13:20.520> let's<04:13:20.760> make<04:13:20.920> use<04:13:21.119> of<04:13:21.319> them<04:13:22.199> first<04:13:22.479> things

so let's make use of them first things

so let's make use of them first things
first<04:13:23.239> we<04:13:23.359> can<04:13:23.520> figure<04:13:23.760> out<04:13:24.040> if<04:13:24.159> a<04:13:24.359> post<04:13:24.760> has

first we can figure out if a post has

first we can figure out if a post has
been<04:13:25.159> liked<04:13:25.760> and<04:13:25.920> based<04:13:26.159> on<04:13:26.359> that<04:13:26.520> we<04:13:26.600> can<04:13:26.720> show

been liked and based on that we can show

been liked and based on that we can show
a<04:13:27.080> different<04:13:27.439> icon<04:13:28.199> so<04:13:28.399> instead<04:13:28.640> of<04:13:28.760> a<04:13:28.960> source

a different icon so instead of a source

a different icon so instead of a source
assets<04:13:30.080> icons<04:13:30.560> like<04:13:31.439> we<04:13:31.560> can<04:13:31.960> open<04:13:32.239> up<04:13:32.439> a<04:13:32.600> new

assets icons like we can open up a new

assets icons like we can open up a new
Dynamic<04:13:34.080> block<04:13:35.080> and<04:13:35.359> there<04:13:35.720> we<04:13:35.840> can<04:13:36.040> say<04:13:36.760> check

Dynamic block and there we can say check

Dynamic block and there we can say check
is<04:13:37.960> liked<04:13:38.640> coming<04:13:38.960> from<04:13:39.199> lib<04:13:39.880> utils<04:13:40.880> to<04:13:41.199> which

is liked coming from lib utils to which

is liked coming from lib utils to which
we're<04:13:41.640> going<04:13:41.720> to<04:13:41.960> pass<04:13:42.199> the<04:13:42.319> likes<04:13:42.920> so<04:13:43.080> we<04:13:43.239> know

we're going to pass the likes so we know

we're going to pass the likes so we know
the<04:13:43.520> full<04:13:44.080> likes<04:13:44.399> array<04:13:45.279> as<04:13:45.359> well<04:13:45.520> as<04:13:45.640> the

the full likes array as well as the

the full likes array as well as the
current<04:13:46.080> user<04:13:46.359> ID<04:13:47.040> and<04:13:47.119> we<04:13:47.239> can<04:13:47.399> check<04:13:47.760> if<04:13:47.960> it's

current user ID and we can check if it's

current user ID and we can check if it's
currently<04:13:48.560> in<04:13:48.800> there<04:13:49.720> if<04:13:49.880> it<04:13:50.040> is<04:13:50.680> then<04:13:50.800> we're

currently in there if it is then we're

currently in there if it is then we're
going<04:13:51.040> to<04:13:51.159> show<04:13:51.720> the<04:13:51.960> liked<04:13:52.600> feature<04:13:53.359> like<04:13:53.560> so

going to show the liked feature like so

going to show the liked feature like so
and<04:13:54.399> of<04:13:54.560> course<04:13:54.760> we<04:13:54.880> have<04:13:55.000> to<04:13:55.159> close<04:13:55.600> this

and of course we have to close this

and of course we have to close this
properly<04:13:56.359> so<04:13:56.600> everything<04:13:56.960> appears<04:13:57.439> nicely

properly so everything appears nicely

properly so everything appears nicely
and<04:13:58.399> open<04:13:58.640> up<04:13:58.880> a<04:13:59.040> new<04:13:59.680> template<04:14:00.080> string<04:14:00.720> there

and open up a new template string there

and open up a new template string there
we<04:14:01.000> go<04:14:01.640> so<04:14:01.920> check<04:14:02.479> is<04:14:02.800> liked<04:14:03.800> if<04:14:03.920> it<04:14:04.080> is<04:14:04.439> we

we go so check is liked if it is we

we go so check is liked if it is we
render<04:14:05.040> the<04:14:05.319> assets<04:14:05.760> icons<04:14:06.239> liked<04:14:07.279> and<04:14:07.600> else

render the assets icons liked and else

render the assets icons liked and else
we<04:14:08.279> want<04:14:08.399> to<04:14:08.560> render<04:14:09.119> something<04:14:09.520> like<04:14:10.080> assets

we want to render something like assets

we want to render something like assets
icons<04:14:11.760> like<04:14:12.760> if<04:14:12.880> we<04:14:13.040> save<04:14:13.279> it<04:14:13.800> you<04:14:13.920> can<04:14:14.040> see

icons like if we save it you can see

icons like if we save it you can see
that<04:14:14.439> now<04:14:14.560> it's<04:14:14.680> a<04:14:14.920> zero<04:14:15.479> and<04:14:15.760> it's<04:14:16.119> not<04:14:16.560> liked

that now it's a zero and it's not liked

that now it's a zero and it's not liked
later<04:14:17.640> on<04:14:17.920> once<04:14:18.080> we<04:14:18.239> click<04:14:18.479> it<04:14:18.800> it<04:14:18.920> should<04:14:19.119> turn

later on once we click it it should turn

later on once we click it it should turn
out<04:14:19.720> red<04:14:20.680> once<04:14:20.880> we<04:14:21.080> click<04:14:21.359> the<04:14:21.560> like<04:14:21.920> we<04:14:22.040> want

out red once we click the like we want

out red once we click the like we want
to<04:14:22.279> get<04:14:22.439> the<04:14:22.560> click<04:14:22.840> event<04:14:23.680> and<04:14:23.840> then<04:14:24.040> call<04:14:24.399> the

to get the click event and then call the

to get the click event and then call the
handle<04:14:26.159> like<04:14:26.960> post<04:14:27.840> to<04:14:28.040> which<04:14:28.199> we<04:14:28.399> pass<04:14:28.640> the

handle like post to which we pass the

handle like post to which we pass the
event<04:14:29.920> if<04:14:30.119> the<04:14:30.239> only<04:14:30.520> thing<04:14:30.680> you<04:14:30.840> have<04:14:31.119> here

event if the only thing you have here

event if the only thing you have here
you<04:14:31.760> pass<04:14:32.119> there<04:14:32.600> you<04:14:32.680> can<04:14:32.880> immediately<04:14:33.520> just

you pass there you can immediately just

you pass there you can immediately just
do<04:14:33.960> a<04:14:34.119> shorthand<04:14:35.000> which<04:14:35.159> means<04:14:35.520> like<04:14:35.760> this

do a shorthand which means like this

do a shorthand which means like this
similar<04:14:36.840> thing<04:14:37.279> here<04:14:37.520> instead<04:14:37.800> of<04:14:38.000> zero<04:14:38.520> we

similar thing here instead of zero we

similar thing here instead of zero we
can<04:14:38.840> display<04:14:39.560> the<04:14:39.840> likes.<04:14:40.840> length<04:14:41.359> so<04:14:41.600> how

can display the likes. length so how

can display the likes. length so how
many<04:14:42.279> likes<04:14:42.800> there

many likes there

many likes there
are<04:14:44.560> and<04:14:44.680> then<04:14:44.800> we<04:14:44.880> can<04:14:45.080> do<04:14:45.199> a<04:14:45.319> similar<04:14:45.680> thing

are and then we can do a similar thing

are and then we can do a similar thing
with<04:14:46.279> saved<04:14:47.040> so<04:14:47.319> we<04:14:47.439> can<04:14:47.600> open<04:14:47.840> up<04:14:48.080> a<04:14:48.279> new

with saved so we can open up a new

with saved so we can open up a new
Dynamic<04:14:49.359> template<04:14:49.760> string<04:14:50.439> block<04:14:51.439> and<04:14:51.760> close

Dynamic template string block and close

Dynamic template string block and close
it<04:14:52.239> of<04:14:52.399> course<04:14:53.199> right<04:14:53.359> at<04:14:53.479> the<04:14:53.720> top<04:14:54.040> we<04:14:54.159> can<04:14:54.319> say

it of course right at the top we can say

it of course right at the top we can say
if<04:14:55.600> is<04:14:56.319> saved<04:14:57.319> if<04:14:57.439> it<04:14:57.640> is<04:14:57.840> saved<04:14:58.479> we<04:14:58.600> can<04:14:58.760> simply

if is saved if it is saved we can simply

if is saved if it is saved we can simply
return<04:15:00.319> assets<04:15:01.720> icons<04:15:02.800> saved.

return assets icons saved.

return assets icons saved.
SVG<04:15:06.080> else<04:15:06.680> we<04:15:06.800> can<04:15:07.239> return<04:15:07.720> something<04:15:08.159> like

SVG else we can return something like

SVG else we can return something like
assets<04:15:09.560> icons<04:15:10.359> save<04:15:11.359> there<04:15:11.479> we<04:15:11.720> go<04:15:12.720> and<04:15:12.840> we<04:15:12.960> can

assets icons save there we go and we can

assets icons save there we go and we can
put<04:15:13.279> it<04:15:13.479> like<04:15:13.680> here<04:15:14.439> there<04:15:14.560> is<04:15:14.680> even<04:15:14.880> a<04:15:15.040> shorter

put it like here there is even a shorter

put it like here there is even a shorter
way<04:15:15.479> of<04:15:15.640> doing<04:15:15.920> this<04:15:16.119> we<04:15:16.239> don't<04:15:16.399> have<04:15:16.520> to

way of doing this we don't have to

way of doing this we don't have to
create<04:15:16.840> a<04:15:17.000> template<04:15:17.359> string<04:15:17.840> because<04:15:18.000> we're

create a template string because we're

create a template string because we're
returning<04:15:18.960> one<04:15:19.239> string<04:15:19.640> in<04:15:19.840> any<04:15:20.119> case<04:15:20.680> same<04:15:20.920> to

returning one string in any case same to

returning one string in any case same to
here<04:15:22.080> so<04:15:22.399> we<04:15:22.520> can<04:15:22.680> remove<04:15:23.680> this

here so we can remove this

here so we can remove this
entirely<04:15:25.479> and<04:15:25.720> just<04:15:25.920> say<04:15:26.359> if<04:15:26.680> is<04:15:26.880> saved<04:15:27.479> make

entirely and just say if is saved make

entirely and just say if is saved make
it<04:15:27.920> this<04:15:28.399> else<04:15:28.880> make<04:15:29.040> it<04:15:29.279> this<04:15:30.040> same<04:15:30.239> thing<04:15:30.399> we

it this else make it this same thing we

it this else make it this same thing we
can<04:15:30.640> do<04:15:30.840> here<04:15:31.279> soest<04:15:31.960> check<04:15:32.319> is<04:15:32.560> liked<04:15:33.520> if<04:15:33.680> so

can do here soest check is liked if so

can do here soest check is liked if so
return<04:15:34.640> this<04:15:35.479> else<04:15:36.399> return<04:15:37.439> this<04:15:38.439> and<04:15:38.600> if<04:15:38.720> we

return this else return this and if we

return this else return this and if we
save<04:15:39.119> it<04:15:39.800> it's<04:15:40.040> good<04:15:40.479> right<04:15:40.640> now<04:15:40.880> it's<04:15:41.119> not

save it it's good right now it's not

save it it's good right now it's not
saved<04:15:42.040> nor<04:15:42.319> liked<04:15:42.920> so<04:15:43.119> it<04:15:43.199> should<04:15:43.399> be<04:15:44.000> empty

saved nor liked so it should be empty

saved nor liked so it should be empty
finally<04:15:45.640> if<04:15:45.880> we<04:15:46.279> do<04:15:46.640> this<04:15:47.040> we<04:15:47.159> can<04:15:47.399> handle<04:15:48.479> save

finally if we do this we can handle save

finally if we do this we can handle save
post<04:15:50.880> great<04:15:51.640> so<04:15:51.880> now<04:15:52.119> you<04:15:52.199> can<04:15:52.359> see<04:15:52.640> a<04:15:52.760> lot<04:15:52.960> of

post great so now you can see a lot of

post great so now you can see a lot of
these<04:15:53.479> are<04:15:53.760> used<04:15:54.479> likes<04:15:55.000> is<04:15:55.199> saved<04:15:56.000> but<04:15:56.159> the

these are used likes is saved but the

these are used likes is saved but the
mutations<04:15:56.920> are<04:15:57.119> not<04:15:57.359> used<04:15:58.040> so<04:15:58.479> what's<04:15:58.720> going

mutations are not used so what's going

mutations are not used so what's going
to<04:15:59.040> happen<04:15:59.399> once<04:15:59.600> we<04:15:59.880> actually<04:16:00.399> click<04:16:01.119> this

to happen once we actually click this

to happen once we actually click this
button<04:16:02.359> let's<04:16:02.600> do<04:16:02.800> that<04:16:03.159> next<04:16:04.159> in<04:16:04.319> the<04:16:04.439> handle

button let's do that next in the handle

button let's do that next in the handle
like<04:16:05.000> post<04:16:05.479> we<04:16:05.640> get<04:16:05.840> one<04:16:06.080> parameter<04:16:06.640> of<04:16:06.760> a<04:16:07.040> Type

like post we get one parameter of a Type

like post we get one parameter of a Type
e<04:16:07.720> as<04:16:07.840> an<04:16:08.000> event<04:16:08.840> and<04:16:08.960> for<04:16:09.159> now<04:16:09.359> we<04:16:09.479> can<04:16:09.600> set<04:16:09.840> it

e as an event and for now we can set it

e as an event and for now we can set it
as<04:16:10.560> react.

as react.

as react.
mouseevent<04:16:14.199> we<04:16:14.359> also<04:16:14.600> have<04:16:14.720> to<04:16:14.960> import<04:16:15.359> react

mouseevent we also have to import react

mouseevent we also have to import react
from<04:16:16.080> react<04:16:16.720> so<04:16:16.880> we<04:16:16.960> can<04:16:17.119> do<04:16:17.239> it

from react so we can do it

from react so we can do it
here<04:16:20.000> immediately<04:16:20.600> within<04:16:21.159> we<04:16:21.279> can<04:16:21.399> say<04:16:21.680> e<04:16:22.080> do

here immediately within we can say e do

here immediately within we can say e do
stop<04:16:23.439> propagation<04:16:24.279> so<04:16:24.439> this<04:16:24.560> is<04:16:24.720> not<04:16:24.920> going<04:16:25.040> to

stop propagation so this is not going to

stop propagation so this is not going to
allow<04:16:25.439> us<04:16:25.600> to<04:16:25.760> click<04:16:26.040> any<04:16:26.279> further<04:16:26.800> it's<04:16:27.000> just

allow us to click any further it's just

allow us to click any further it's just
going<04:16:27.319> to<04:16:27.560> click<04:16:28.159> this<04:16:28.760> that's<04:16:28.960> done<04:16:29.279> in<04:16:29.439> case

going to click this that's done in case

going to click this that's done in case
you<04:16:29.760> make<04:16:30.000> this<04:16:30.199> entire<04:16:30.520> container<04:16:31.040> clickable

you make this entire container clickable

you make this entire container clickable
so<04:16:31.880> it<04:16:32.000> points<04:16:32.239> to<04:16:32.359> a<04:16:32.560> post<04:16:33.359> and<04:16:33.520> then<04:16:33.720> if<04:16:33.840> you

so it points to a post and then if you

so it points to a post and then if you
click<04:16:34.159> it<04:16:34.399> here<04:16:34.720> it's<04:16:34.840> only<04:16:35.040> going<04:16:35.199> to<04:16:35.359> like<04:16:35.600> it

click it here it's only going to like it

click it here it's only going to like it
it's<04:16:36.080> not<04:16:36.279> going<04:16:36.399> to<04:16:36.520> do<04:16:36.680> any<04:16:36.880> any<04:16:37.080> other

it's not going to do any any other

it's not going to do any any other
action<04:16:37.960> like<04:16:38.199> go<04:16:38.399> to<04:16:38.560> the<04:16:38.720> Post

action like go to the Post

action like go to the Post
details<04:16:40.560> then<04:16:40.800> we<04:16:40.960> have<04:16:41.080> to<04:16:41.279> update<04:16:41.640> the<04:16:41.800> likes

details then we have to update the likes

details then we have to update the likes
array<04:16:42.600> by<04:16:42.760> saying<04:16:43.199> new<04:16:43.800> likes<04:16:44.439> is<04:16:44.640> equal<04:16:45.000> to<04:16:45.560> an

array by saying new likes is equal to an

array by saying new likes is equal to an
array<04:16:46.319> where<04:16:46.479> we<04:16:46.640> spread<04:16:47.199> all<04:16:47.439> the<04:16:47.600> previous

array where we spread all the previous

array where we spread all the previous
likes<04:16:49.239> and<04:16:49.479> then<04:16:49.920> we<04:16:50.040> need<04:16:50.199> to<04:16:50.399> check<04:16:51.199> if<04:16:52.159> new

likes and then we need to check if new

likes and then we need to check if new
likes<04:16:53.600> that<04:16:54.000> includes<04:16:55.000> the<04:16:55.199> current<04:16:55.600> user<04:16:55.920> ID

likes that includes the current user ID

likes that includes the current user ID
like<04:16:56.920> meaning<04:16:57.319> if<04:16:57.479> they<04:16:57.640> have<04:16:57.800> already<04:16:58.159> liked

like meaning if they have already liked

like meaning if they have already liked
it<04:16:59.159> and<04:16:59.279> to<04:16:59.439> make<04:16:59.600> this<04:16:59.760> code<04:16:59.960> more<04:17:00.159> meaningful

it and to make this code more meaningful

it and to make this code more meaningful
we<04:17:01.000> can<04:17:01.159> even<04:17:01.399> extract<04:17:01.840> this<04:17:02.080> right<04:17:02.239> here<04:17:02.680> and

we can even extract this right here and

we can even extract this right here and
say<04:17:03.279> const<04:17:04.159> has<04:17:04.640> liked<04:17:05.439> is<04:17:05.680> equal<04:17:05.960> to<04:17:06.279> this

say const has liked is equal to this

say const has liked is equal to this
so<04:17:07.720> if<04:17:08.640> has<04:17:08.960> liked<04:17:09.760> see<04:17:10.000> how<04:17:10.159> much<04:17:10.319> more<04:17:10.520> sense

so if has liked see how much more sense

so if has liked see how much more sense
this<04:17:11.040> if<04:17:11.279> now<04:17:11.479> makes<04:17:12.479> so<04:17:12.760> if<04:17:13.119> has<04:17:13.399> liked<04:17:14.319> in

this if now makes so if has liked in

this if now makes so if has liked in
that<04:17:14.720> case<04:17:15.040> we<04:17:15.119> can<04:17:15.359> update<04:17:15.920> the<04:17:16.080> likes<04:17:16.359> array

that case we can update the likes array

that case we can update the likes array
or<04:17:17.319> rather<04:17:17.560> the<04:17:17.760> new<04:17:18.359> likes<04:17:19.319> to<04:17:19.479> be<04:17:19.680> equal<04:17:19.960> to

or rather the new likes to be equal to

or rather the new likes to be equal to
new<04:17:21.319> likes.

new likes.

new likes.
filter<04:17:24.760> where<04:17:24.880> we're<04:17:25.040> going<04:17:25.119> to<04:17:25.279> get<04:17:25.479> the<04:17:25.720> ID

filter where we're going to get the ID

filter where we're going to get the ID
and<04:17:26.920> we<04:17:27.040> want<04:17:27.159> to<04:17:27.800> check<04:17:28.119> if<04:17:28.279> the<04:17:28.439> ID<04:17:29.000> is<04:17:29.199> not

and we want to check if the ID is not

and we want to check if the ID is not
equal<04:17:29.680> to<04:17:29.840> the<04:17:29.960> user<04:17:30.239> ID<04:17:30.640> so<04:17:30.840> we're<04:17:30.960> going<04:17:31.040> to

equal to the user ID so we're going to

equal to the user ID so we're going to
keep<04:17:31.680> all<04:17:31.920> the<04:17:32.119> likes<04:17:32.920> besides<04:17:33.720> the<04:17:33.880> current

keep all the likes besides the current

keep all the likes besides the current
like<04:17:34.479> because<04:17:34.640> we<04:17:34.760> want<04:17:34.840> to<04:17:35.000> remove<04:17:35.359> it<04:17:36.359> and

like because we want to remove it and

like because we want to remove it and
else<04:17:36.800> else<04:17:37.319> if<04:17:37.439> it<04:17:37.640> not<04:17:38.000> has<04:17:38.239> liked<04:17:38.840> we<04:17:38.960> simply

else else if it not has liked we simply

else else if it not has liked we simply
want<04:17:39.319> to<04:17:39.479> call<04:17:39.880> new<04:17:40.199> likes.<04:17:41.159> push<04:17:41.640> and<04:17:41.720> we<04:17:41.840> want

want to call new likes. push and we want

want to call new likes. push and we want
to<04:17:42.119> append<04:17:42.800> the<04:17:42.960> new<04:17:43.279> user<04:17:43.600> ID<04:17:44.119> because<04:17:44.760> that

to append the new user ID because that

to append the new user ID because that
user<04:17:45.439> liked<04:17:45.800> it<04:17:46.239> too<04:17:47.239> finally<04:17:47.800> once<04:17:48.000> we<04:17:48.119> do

user liked it too finally once we do

user liked it too finally once we do
that<04:17:48.680> we<04:17:48.800> want<04:17:48.920> to<04:17:49.319> set<04:17:50.119> likes<04:17:50.760> to<04:17:50.920> be<04:17:51.119> equal<04:17:51.399> to

that we want to set likes to be equal to

that we want to set likes to be equal to
new<04:17:52.399> likes<04:17:53.399> and<04:17:53.640> we<04:17:53.760> want<04:17:53.880> to<04:17:54.040> call<04:17:54.520> the<04:17:54.680> like

new likes and we want to call the like

new likes and we want to call the like
post<04:17:55.319> mutation<04:17:56.319> so<04:17:56.479> we<04:17:56.560> can<04:17:56.720> say<04:17:56.920> like<04:17:57.279> post<04:17:57.920> to

post mutation so we can say like post to

post mutation so we can say like post to
which<04:17:58.479> we<04:17:58.600> need<04:17:58.720> to<04:17:58.920> pass<04:17:59.159> the<04:17:59.319> post<04:17:59.640> ID<04:18:00.600> which

which we need to pass the post ID which

which we need to pass the post ID which
is<04:18:00.920> of<04:18:01.119> a<04:18:01.840> post.<04:18:02.840> dollar<04:18:03.119> sign<04:18:03.359> ID<04:18:04.239> and<04:18:04.560> the

is of a post. dollar sign ID and the

is of a post. dollar sign ID and the
likes<04:18:05.000> array<04:18:05.479> you<04:18:05.600> can<04:18:05.720> see<04:18:06.040> typescript<04:18:06.520> even

likes array you can see typescript even

likes array you can see typescript even
lets<04:18:07.000> us<04:18:07.159> know<04:18:07.399> what<04:18:07.560> we<04:18:07.680> have<04:18:07.800> to<04:18:08.040> pass<04:18:08.439> right

lets us know what we have to pass right

lets us know what we have to pass right
here<04:18:09.199> it's<04:18:09.399> going<04:18:09.560> to<04:18:09.720> be<04:18:10.279> the<04:18:10.479> new

here it's going to be the new

here it's going to be the new
likes<04:18:13.600> there<04:18:13.800> we<04:18:14.199> go<04:18:15.199> but<04:18:15.439> if<04:18:15.560> we<04:18:15.680> do<04:18:15.840> it<04:18:16.080> it's

likes there we go but if we do it it's

likes there we go but if we do it it's
complaining<04:18:16.960> that<04:18:17.119> the<04:18:17.279> argument<04:18:17.840> type<04:18:18.239> new

complaining that the argument type new

complaining that the argument type new
likes<04:18:18.960> is<04:18:19.119> not<04:18:19.359> assignable<04:18:19.880> to<04:18:20.119> parameter<04:18:20.560> of

likes is not assignable to parameter of

likes is not assignable to parameter of
type<04:18:21.040> likes<04:18:21.399> array<04:18:22.319> so<04:18:22.760> this<04:18:22.880> is<04:18:23.040> really<04:18:23.279> good

type likes array so this is really good

type likes array so this is really good
again<04:18:23.960> thank<04:18:24.119> you<04:18:24.279> typescript<04:18:24.920> we<04:18:25.040> have<04:18:25.159> to

again thank you typescript we have to

again thank you typescript we have to
Define<04:18:25.680> likes<04:18:26.000> array<04:18:26.560> and<04:18:26.720> then<04:18:27.000> pass<04:18:27.279> new

Define likes array and then pass new

Define likes array and then pass new
likes<04:18:28.239> right<04:18:28.520> here<04:18:29.520> and<04:18:29.680> now<04:18:29.960> this<04:18:30.080> is<04:18:30.199> the

likes right here and now this is the

likes right here and now this is the
function<04:18:30.760> that's<04:18:30.920> going<04:18:31.040> to<04:18:31.239> handle<04:18:31.520> the<04:18:31.680> like

function that's going to handle the like

function that's going to handle the like
post<04:18:32.760> and<04:18:32.880> as<04:18:33.000> you<04:18:33.080> can<04:18:33.319> see<04:18:34.319> this<04:18:34.439> is<04:18:34.600> being

post and as you can see this is being

post and as you can see this is being
used<04:18:35.800> and<04:18:35.920> then<04:18:36.080> also<04:18:36.359> this<04:18:36.720> mutation<04:18:37.080> is

used and then also this mutation is

used and then also this mutation is
being<04:18:37.439> used<04:18:37.760> as<04:18:37.920> well<04:18:38.800> now<04:18:39.080> let's<04:18:39.279> do<04:18:39.479> a

being used as well now let's do a

being used as well now let's do a
similar<04:18:40.080> thing<04:18:40.319> for<04:18:40.600> the<04:18:40.760> save<04:18:41.760> as<04:18:41.960> before<04:18:42.439> we

similar thing for the save as before we

similar thing for the save as before we
can<04:18:42.760> duplicate<04:18:43.479> all<04:18:43.760> the<04:18:43.960> logic<04:18:44.560> within<04:18:44.880> our

can duplicate all the logic within our

can duplicate all the logic within our
handle<04:18:45.399> like<04:18:46.080> post<04:18:47.080> collapse<04:18:47.560> it<04:18:48.439> and<04:18:48.800> put<04:18:48.960> it

handle like post collapse it and put it

handle like post collapse it and put it
right<04:18:49.479> here<04:18:49.920> within<04:18:50.279> our<04:18:50.520> handle<04:18:51.119> save<04:18:52.199> post

right here within our handle save post

right here within our handle save post
we<04:18:53.319> also<04:18:53.520> need<04:18:53.680> to<04:18:53.880> get<04:18:54.199> the<04:18:54.439> react<04:18:55.040> mouse

we also need to get the react mouse

we also need to get the react mouse
event<04:18:56.159> right<04:18:56.359> here<04:18:57.319> and<04:18:57.439> then<04:18:57.600> the<04:18:57.760> logic<04:18:58.119> is

event right here and then the logic is

event right here and then the logic is
going<04:18:58.439> to<04:18:58.600> be<04:18:58.960> even<04:18:59.720> simpler<04:19:00.720> we<04:19:00.840> can<04:19:01.000> delete

going to be even simpler we can delete

going to be even simpler we can delete
everything<04:19:02.159> right<04:19:02.399> here<04:19:03.359> and<04:19:03.560> we<04:19:03.680> can<04:19:03.880> say<04:19:05.119> if

everything right here and we can say if

everything right here and we can say if
saved<04:19:07.040> post<04:19:07.600> record<04:19:08.600> so<04:19:09.159> have<04:19:09.359> we<04:19:09.560> already

saved post record so have we already

saved post record so have we already
saved<04:19:10.319> it<04:19:10.840> and<04:19:10.960> how<04:19:11.080> are<04:19:11.159> we're<04:19:11.279> going<04:19:11.439> to

saved it and how are we're going to

saved it and how are we're going to
figure<04:19:11.880> that<04:19:12.040> out<04:19:12.760> well<04:19:12.920> let's<04:19:13.159> define<04:19:13.439> it

figure that out well let's define it

figure that out well let's define it
right<04:19:13.920> here<04:19:14.680> const<04:19:15.359> saved<04:19:16.119> post<04:19:16.840> record<04:19:17.840> it's

right here const saved post record it's

right here const saved post record it's
going<04:19:18.159> to<04:19:18.319> be<04:19:18.479> equal<04:19:18.760> to<04:19:19.239> to<04:19:19.439> the<04:19:19.640> current<04:19:20.239> user

going to be equal to to the current user

going to be equal to to the current user
question<04:19:21.640> mark.<04:19:22.279> saave<04:19:23.040> doind<04:19:24.040> so<04:19:24.159> we<04:19:24.279> want<04:19:24.399> to

question mark. saave doind so we want to

question mark. saave doind so we want to
find<04:19:25.800> if<04:19:26.239> the<04:19:26.439> record<04:19:27.239> exists<04:19:28.239> of<04:19:28.399> a<04:19:28.600> type

find if the record exists of a type

find if the record exists of a type
models.<04:19:30.760> document<04:19:31.760> meaning<04:19:32.239> is<04:19:32.520> that<04:19:32.720> user

models. document meaning is that user

models. document meaning is that user
added<04:19:33.359> to<04:19:33.560> the<04:19:34.399> array<04:19:34.680> of<04:19:34.800> the<04:19:34.880> user<04:19:35.119> that

added to the array of the user that

added to the array of the user that
saved<04:19:35.520> the<04:19:35.680> post<04:19:36.359> and<04:19:36.640> we<04:19:36.720> can<04:19:36.840> check<04:19:37.159> that<04:19:37.560> by

saved the post and we can check that by

saved the post and we can check that by
saying<04:19:38.760> find<04:19:39.680> where<04:19:39.920> the<04:19:40.119> record<04:19:40.640> doore<04:19:41.960> ID<04:19:42.960> is

saying find where the record doore ID is

saying find where the record doore ID is
triple<04:19:43.680> equal<04:19:44.000> to<04:19:44.680> to<04:19:45.000> the<04:19:45.399> post.<04:19:46.359> dollar<04:19:46.680> sign

triple equal to to the post. dollar sign

triple equal to to the post. dollar sign
ID<04:19:47.920> there<04:19:48.080> we<04:19:48.239> go<04:19:49.119> so<04:19:49.359> now<04:19:49.560> we're<04:19:49.720> trying<04:19:49.960> to

ID there we go so now we're trying to

ID there we go so now we're trying to
figure<04:19:50.359> it<04:19:50.520> out<04:19:51.319> if<04:19:51.680> there<04:19:51.920> is<04:19:52.319> such<04:19:52.520> a<04:19:52.840> thing

figure it out if there is such a thing

figure it out if there is such a thing
in<04:19:54.080> that<04:19:54.319> case<04:19:54.840> we<04:19:54.960> want<04:19:55.119> to<04:19:55.359> set<04:19:55.800> is<04:19:56.159> saved<04:19:56.720> to

in that case we want to set is saved to

in that case we want to set is saved to
false<04:19:58.520> and<04:19:58.720> we<04:19:58.840> want<04:19:58.960> to<04:19:59.159> call<04:19:59.800> the<04:20:00.000> delete

false and we want to call the delete

false and we want to call the delete
saved<04:20:01.000> post<04:20:01.760> to<04:20:02.119> which<04:20:02.560> we<04:20:02.680> want<04:20:02.840> to<04:20:03.159> pass<04:20:04.080> the

saved post to which we want to pass the

saved post to which we want to pass the
saved<04:20:05.479> post<04:20:06.119> record

saved post record

saved post record
do<04:20:08.319> dollar<04:20:08.720> sign<04:20:09.199> ID<04:20:10.040> so<04:20:10.319> if<04:20:10.520> we<04:20:10.680> already<04:20:11.000> have

do dollar sign ID so if we already have

do dollar sign ID so if we already have
saved<04:20:11.520> it<04:20:11.840> and<04:20:11.960> if<04:20:12.040> we<04:20:12.239> click<04:20:12.479> it<04:20:12.680> again<04:20:13.119> we

saved it and if we click it again we

saved it and if we click it again we
want<04:20:13.359> to<04:20:13.560> remove<04:20:13.840> it<04:20:13.960> from<04:20:14.159> Saved<04:20:15.159> and<04:20:15.359> then<04:20:15.600> we

want to remove it from Saved and then we

want to remove it from Saved and then we
want<04:20:15.840> to<04:20:16.040> call<04:20:16.600> the<04:20:16.800> save<04:20:17.600> post<04:20:18.600> to<04:20:18.840> it<04:20:19.080> we<04:20:19.199> need

want to call the save post to it we need

want to call the save post to it we need
to<04:20:19.560> pass<04:20:19.800> the<04:20:20.000> post<04:20:20.399> ID<04:20:21.199> of<04:20:21.359> a<04:20:21.600> type<04:20:22.239> post.

to pass the post ID of a type post.

to pass the post ID of a type post.
dollar<04:20:23.560> sign<04:20:23.800> ID<04:20:24.640> and<04:20:24.800> also<04:20:25.119> the<04:20:25.279> user

dollar sign ID and also the user

dollar sign ID and also the user
ID<04:20:28.119> and<04:20:28.319> we<04:20:28.439> can<04:20:28.640> finally<04:20:29.239> set<04:20:30.239> is<04:20:30.960> saved<04:20:31.960> to

ID and we can finally set is saved to

ID and we can finally set is saved to
true<04:20:33.399> in<04:20:33.600> this<04:20:33.760> case<04:20:34.000> of<04:20:34.159> course<04:20:34.680> it's<04:20:34.840> going

true in this case of course it's going

true in this case of course it's going
to<04:20:35.199> handle<04:20:35.560> both<04:20:35.880> action

to handle both action

to handle both action
and<04:20:37.319> please<04:20:37.640> take<04:20:37.760> a<04:20:37.960> second<04:20:38.439> and<04:20:38.600> notice<04:20:39.000> if

and please take a second and notice if

and please take a second and notice if
I've<04:20:39.279> made<04:20:39.439> a<04:20:39.600> mistake<04:20:40.199> here<04:20:40.399> we<04:20:40.520> have<04:20:40.640> an<04:20:40.800> if

I've made a mistake here we have an if

I've made a mistake here we have an if
statement<04:20:41.840> that<04:20:42.000> delete<04:20:42.439> the<04:20:42.600> save<04:20:43.399> but<04:20:43.560> then

statement that delete the save but then

statement that delete the save but then
every<04:20:44.239> time<04:20:44.720> as<04:20:44.880> well<04:20:45.359> we<04:20:45.520> also<04:20:45.760> called<04:20:46.199> this

every time as well we also called this

every time as well we also called this
that's<04:20:47.279> because<04:20:47.479> we<04:20:47.600> didn't<04:20:48.040> return<04:20:48.600> right

that's because we didn't return right

that's because we didn't return right
here<04:20:49.640> if<04:20:49.720> you<04:20:49.960> add<04:20:50.199> a<04:20:50.560> return<04:20:50.920> statement<04:20:51.640> like

here if you add a return statement like

here if you add a return statement like
so<04:20:52.560> it's<04:20:52.680> going<04:20:52.840> to<04:20:53.080> stop<04:20:53.439> the<04:20:53.600> execution<04:20:54.399> of

so it's going to stop the execution of

so it's going to stop the execution of
all<04:20:54.720> the<04:20:54.840> other<04:20:55.119> blocks<04:20:56.119> or<04:20:56.560> an<04:20:56.760> alternative

all the other blocks or an alternative

all the other blocks or an alternative
is<04:20:57.720> to<04:20:58.000> also<04:20:58.399> add<04:20:58.680> an<04:20:58.840> else<04:20:59.239> here<04:20:59.880> so<04:21:00.080> we<04:21:00.159> can

is to also add an else here so we can

is to also add an else here so we can
say<04:21:01.040> if<04:21:01.279> it<04:21:01.399> is<04:21:01.880> not<04:21:02.439> saved<04:21:03.439> then<04:21:03.760> save<04:21:04.040> it<04:21:04.760> if

say if it is not saved then save it if

say if it is not saved then save it if
it<04:21:05.000> is<04:21:05.199> saved<04:21:05.800> then<04:21:06.000> remove<04:21:06.920> saved<04:21:07.920> here<04:21:08.080> we<04:21:08.279> go

it is saved then remove saved here we go

it is saved then remove saved here we go
and<04:21:09.239> now<04:21:09.640> we<04:21:09.760> can<04:21:10.000> save<04:21:10.560> this<04:21:11.560> this<04:21:11.840> gives<04:21:12.040> us<04:21:12.319> a

and now we can save this this gives us a

and now we can save this this gives us a
lot<04:21:12.640> of<04:21:12.840> data<04:21:13.119> to<04:21:13.319> work<04:21:13.600> with<04:21:14.239> but<04:21:14.600> before<04:21:14.800> we

lot of data to work with but before we

lot of data to work with but before we
go<04:21:15.040> ahead<04:21:15.239> and<04:21:15.359> test<04:21:15.560> it<04:21:15.680> out<04:21:16.159> typescript<04:21:16.800> is

go ahead and test it out typescript is

go ahead and test it out typescript is
trying<04:21:17.239> to<04:21:17.479> save<04:21:17.800> us<04:21:18.239> one<04:21:18.439> more<04:21:18.760> time<04:21:19.720> it's

trying to save us one more time it's

trying to save us one more time it's
saying<04:21:20.199> property<04:21:20.680> data<04:21:21.040> does<04:21:21.279> not<04:21:21.560> exist<04:21:21.960> on<04:21:22.239> I

saying property data does not exist on I

saying property data does not exist on I
context<04:21:23.239> type<04:21:24.239> and<04:21:24.399> that's<04:21:24.600> because<04:21:24.880> I've

context type and that's because I've

context type and that's because I've
made<04:21:25.239> a<04:21:25.439> mistake<04:21:26.439> this<04:21:26.640> should<04:21:26.840> not<04:21:27.040> be<04:21:27.199> coming

made a mistake this should not be coming

made a mistake this should not be coming
from<04:21:27.680> the<04:21:27.840> get<04:21:28.119> user<04:21:28.560> context<04:21:29.560> it<04:21:29.720> should<04:21:29.920> be

from the get user context it should be

from the get user context it should be
coming<04:21:30.359> from<04:21:30.800> use<04:21:31.720> get<04:21:32.560> current<04:21:33.439> user<04:21:34.319> which

coming from use get current user which

coming from use get current user which
is<04:21:34.600> a<04:21:34.840> new<04:21:35.239> function<04:21:35.600> or<04:21:35.720> a<04:21:35.880> new<04:21:36.119> query<04:21:36.399> quy

is a new function or a new query quy

is a new function or a new query quy
that<04:21:36.880> we<04:21:37.000> have<04:21:37.119> to<04:21:37.800> create<04:21:38.800> this<04:21:39.000> query<04:21:39.520> is<04:21:39.720> not

that we have to create this query is not

that we have to create this query is not
only<04:21:40.239> going<04:21:40.399> to<04:21:40.600> give<04:21:40.720> us<04:21:40.920> the<04:21:41.040> user's<04:21:41.479> ID<04:21:42.239> and

only going to give us the user's ID and

only going to give us the user's ID and
the<04:21:42.600> name<04:21:43.159> as<04:21:43.279> we<04:21:43.439> get<04:21:43.640> from<04:21:43.840> the<04:21:44.000> odd<04:21:44.479> context

the name as we get from the odd context

the name as we get from the odd context
it's<04:21:45.560> also<04:21:45.800> going<04:21:46.000> to<04:21:46.199> give<04:21:46.359> us<04:21:46.600> more

it's also going to give us more

it's also going to give us more
information<04:21:47.760> such<04:21:47.960> as<04:21:48.279> which<04:21:48.560> posts<04:21:49.199> does<04:21:49.399> the

information such as which posts does the

information such as which posts does the
user<04:21:49.840> have<04:21:50.040> saved<04:21:50.840> and<04:21:51.040> based<04:21:51.359> off<04:21:51.560> of<04:21:51.760> that

user have saved and based off of that

user have saved and based off of that
we'll<04:21:52.159> be<04:21:52.279> able<04:21:52.520> to<04:21:52.640> figure<04:21:52.920> out<04:21:53.279> whether<04:21:53.479> we

we'll be able to figure out whether we

we'll be able to figure out whether we
need<04:21:53.760> to<04:21:54.000> save<04:21:54.520> or<04:21:55.040> unsave<04:21:56.040> so<04:21:56.640> let's<04:21:56.920> go<04:21:57.080> to

need to save or unsave so let's go to

need to save or unsave so let's go to
our<04:21:57.560> queries<04:21:58.119> and

our queries and

our queries and
mutations<04:22:01.359> we<04:22:01.479> can<04:22:01.920> export<04:22:02.920> const<04:22:03.880> use<04:22:04.680> get

mutations we can export const use get

mutations we can export const use get
current<04:22:05.960> user

current user

current user
which<04:22:07.640> is<04:22:07.800> going<04:22:07.960> to<04:22:08.080> be<04:22:08.199> an<04:22:08.319> arrow<04:22:08.680> function

which is going to be an arrow function

which is going to be an arrow function
and<04:22:09.640> we<04:22:09.760> can<04:22:10.080> return<04:22:10.399> a<04:22:10.640> simple<04:22:11.279> use<04:22:11.920> Query

and we can return a simple use Query

and we can return a simple use Query
where<04:22:13.319> we<04:22:13.560> pass<04:22:13.760> the<04:22:13.920> query<04:22:14.399> key<04:22:15.159> of<04:22:16.359> query

where we pass the query key of query

where we pass the query key of query
keys.<04:22:19.279> get<04:22:20.040> current<04:22:21.199> user<04:22:22.199> and<04:22:22.600> a<04:22:22.760> query

keys. get current user and a query

keys. get current user and a query
function<04:22:23.760> which<04:22:23.880> we're<04:22:24.000> going<04:22:24.080> to<04:22:24.399> call<04:22:25.399> is

function which we're going to call is

function which we're going to call is
going<04:22:25.760> to<04:22:26.319> be<04:22:27.319> get<04:22:28.399> current<04:22:29.399> user<04:22:30.279> and<04:22:30.520> this<04:22:30.600> is

going to be get current user and this is

going to be get current user and this is
coming<04:22:31.040> from<04:22:31.359> aight<04:22:32.399> API<04:22:33.399> we<04:22:33.560> have<04:22:33.720> already

coming from aight API we have already

coming from aight API we have already
created<04:22:34.439> this<04:22:34.600> API<04:22:35.040> function<04:22:35.439> before<04:22:35.960> because

created this API function before because

created this API function before because
we<04:22:36.359> we<04:22:36.439> needed<04:22:36.640> it<04:22:36.800> for<04:22:37.000> the<04:22:37.199> context<04:22:37.960> we<04:22:38.080> can

we we needed it for the context we can

we we needed it for the context we can
get<04:22:38.359> it<04:22:38.560> here<04:22:38.760> as<04:22:38.960> well<04:22:39.960> and<04:22:40.199> now<04:22:40.800> if<04:22:40.920> we<04:22:41.119> go

get it here as well and now if we go

get it here as well and now if we go
back<04:22:42.920> we<04:22:43.040> can<04:22:43.239> import<04:22:43.640> the<04:22:43.800> used<04:22:44.199> get<04:22:44.439> current

back we can import the used get current

back we can import the used get current
user<04:22:45.359> and<04:22:45.479> we<04:22:45.600> can<04:22:45.760> remove<04:22:46.040> the<04:22:46.159> import<04:22:46.560> from

user and we can remove the import from

user and we can remove the import from
the

the

the
context<04:22:48.399> there<04:22:48.560> we<04:22:48.760> go<04:22:49.199> everything<04:22:49.600> works

context there we go everything works

context there we go everything works
typescript<04:22:50.920> is<04:22:51.040> not<04:22:51.239> complaining<04:22:52.040> so<04:22:52.239> let's

typescript is not complaining so let's

typescript is not complaining so let's
go<04:22:52.640> ahead<04:22:53.119> and<04:22:53.319> test<04:22:53.520> it<04:22:53.680> out<04:22:54.680> I'm<04:22:54.800> going<04:22:54.880> to

go ahead and test it out I'm going to

go ahead and test it out I'm going to
press<04:22:55.239> the<04:22:55.359> like<04:22:55.640> button<04:22:56.119> really<04:22:56.399> carefully

press the like button really carefully

press the like button really carefully
because<04:22:57.080> I'm<04:22:57.239> scared<04:22:57.640> we've<04:22:57.840> done<04:22:57.960> a<04:22:58.080> lot<04:22:58.199> of

because I'm scared we've done a lot of

because I'm scared we've done a lot of
changes<04:22:59.040> hopefully<04:22:59.640> it

changes hopefully it

changes hopefully it
works<04:23:01.840> okay<04:23:02.479> would<04:23:02.680> you<04:23:02.840> look<04:23:03.000> at<04:23:03.199> that<04:23:03.840> it's

works okay would you look at that it's

works okay would you look at that it's
saved<04:23:05.000> and<04:23:05.279> it<04:23:05.479> unsaved<04:23:06.640> not<04:23:06.880> only<04:23:07.359> that<04:23:07.880> but

saved and it unsaved not only that but

saved and it unsaved not only that but
it<04:23:08.279> did<04:23:08.439> it<04:23:09.239> instantaneously<04:23:10.239> the<04:23:10.399> reason<04:23:10.680> why

it did it instantaneously the reason why

it did it instantaneously the reason why
that<04:23:10.960> is<04:23:11.159> happening<04:23:11.640> is<04:23:11.800> because<04:23:12.000> we're<04:23:12.159> using

that is happening is because we're using

that is happening is because we're using
react<04:23:13.080> query<04:23:13.920> it<04:23:14.080> does<04:23:14.520> something<04:23:14.760> known<04:23:15.040> as

react query it does something known as

react query it does something known as
an<04:23:15.319> optimistic<04:23:15.960> update<04:23:16.960> before<04:23:17.359> it<04:23:17.600> actually

an optimistic update before it actually

an optimistic update before it actually
updates<04:23:18.479> it<04:23:18.640> in<04:23:18.800> the<04:23:18.960> database<04:23:19.760> it<04:23:19.920> provides

updates it in the database it provides

updates it in the database it provides
user<04:23:20.920> with<04:23:21.119> an<04:23:21.359> instantaneous<04:23:22.279> feedback<04:23:23.279> now

user with an instantaneous feedback now

user with an instantaneous feedback now
of<04:23:23.600> course<04:23:23.800> the<04:23:23.960> key<04:23:24.159> thing<04:23:24.439> is<04:23:24.960> if<04:23:25.080> I<04:23:25.239> reload

of course the key thing is if I reload

of course the key thing is if I reload
the<04:23:25.800> page<04:23:26.600> is<04:23:26.720> it<04:23:26.840> going<04:23:27.000> to<04:23:27.239> remain<04:23:27.479> saved<04:23:28.319> and

the page is it going to remain saved and

the page is it going to remain saved and
it<04:23:28.680> does<04:23:29.520> let's<04:23:29.720> check<04:23:29.920> the<04:23:30.040> same<04:23:30.199> thing<04:23:30.439> with

it does let's check the same thing with

it does let's check the same thing with
save<04:23:31.600> oh<04:23:31.960> it<04:23:32.080> doesn't<04:23:32.359> allow<04:23:32.600> me<04:23:32.760> to<04:23:33.000> unsave<04:23:33.560> it

save oh it doesn't allow me to unsave it

save oh it doesn't allow me to unsave it
for<04:23:34.239> some<04:23:34.479> reason<04:23:35.319> hm<04:23:35.840> interesting

for some reason hm interesting

for some reason hm interesting
let's<04:23:37.080> see<04:23:37.359> why<04:23:37.600> that<04:23:37.760> is<04:23:38.600> so<04:23:38.840> if<04:23:39.000> we<04:23:39.239> check

let's see why that is so if we check

let's see why that is so if we check
this<04:23:40.319> is<04:23:40.600> saved<04:23:41.560> it<04:23:41.680> is<04:23:41.840> set<04:23:42.080> to<04:23:42.439> is<04:23:42.680> saved<04:23:43.159> to

this is saved it is set to is saved to

this is saved it is set to is saved to
false<04:23:44.560> but<04:23:44.720> then<04:23:44.920> once<04:23:45.119> I<04:23:45.279> check<04:23:45.720> it<04:23:46.720> in<04:23:46.840> the

false but then once I check it in the

false but then once I check it in the
handle<04:23:47.319> save<04:23:47.640> post<04:23:48.239> do<04:23:48.439> we<04:23:48.600> ever<04:23:48.800> set<04:23:49.040> it<04:23:49.119> to

handle save post do we ever set it to

handle save post do we ever set it to
false<04:23:50.399> it<04:23:50.520> seems<04:23:50.800> like<04:23:50.960> we<04:23:51.080> do<04:23:51.640> right<04:23:51.880> here<04:23:52.600> but

false it seems like we do right here but

false it seems like we do right here but
what<04:23:52.920> if<04:23:53.040> I<04:23:53.159> reload<04:23:53.560> the

what if I reload the

what if I reload the
page<04:23:55.439> okay<04:23:55.760> now<04:23:56.040> it's<04:23:56.279> unsaved<04:23:57.279> what<04:23:57.399> if<04:23:57.520> I

page okay now it's unsaved what if I

page okay now it's unsaved what if I
save<04:23:57.920> it<04:23:58.359> if<04:23:58.479> I

save it if I

save it if I
reload<04:24:01.279> it<04:24:01.439> is<04:24:01.760> not<04:24:02.080> saved<04:24:02.800> so<04:24:03.000> we<04:24:03.119> have<04:24:03.239> to<04:24:03.359> be

reload it is not saved so we have to be

reload it is not saved so we have to be
able<04:24:03.720> to<04:24:03.960> get<04:24:04.239> the<04:24:04.439> current<04:24:04.880> Save<04:24:05.279> State

able to get the current Save State

able to get the current Save State
whenever<04:24:06.080> we<04:24:06.359> reload<04:24:06.720> the<04:24:06.920> page<04:24:07.760> to<04:24:07.960> do<04:24:08.199> that

whenever we reload the page to do that

whenever we reload the page to do that
we<04:24:08.680> can<04:24:08.960> extract<04:24:09.880> this<04:24:10.239> saved<04:24:10.920> post<04:24:11.359> record<04:24:12.279> by

we can extract this saved post record by

we can extract this saved post record by
copying<04:24:12.960> it<04:24:13.600> and<04:24:13.760> putting<04:24:14.040> it<04:24:14.399> right<04:24:14.600> here<04:24:15.159> at

copying it and putting it right here at

copying it and putting it right here at
the<04:24:15.640> top<04:24:16.640> then<04:24:17.000> what<04:24:17.159> we<04:24:17.239> can<04:24:17.399> do<04:24:17.680> is<04:24:17.920> create<04:24:18.239> a

the top then what we can do is create a

the top then what we can do is create a
new<04:24:18.920> use

new use

new use
effect<04:24:21.359> and<04:24:21.600> this<04:24:21.760> use<04:24:22.040> effect<04:24:22.560> is<04:24:22.720> going<04:24:22.880> to

effect and this use effect is going to

effect and this use effect is going to
have<04:24:23.199> a<04:24:23.399> typical<04:24:23.920> callback<04:24:24.399> function<04:24:25.399> and

have a typical callback function and

have a typical callback function and
it's<04:24:25.800> going<04:24:25.920> to<04:24:26.159> change<04:24:26.800> whenever<04:24:27.199> the

it's going to change whenever the

it's going to change whenever the
current<04:24:27.840> user<04:24:28.439> changes<04:24:29.439> and<04:24:29.640> then<04:24:29.920> we<04:24:30.040> can<04:24:30.319> set

current user changes and then we can set

current user changes and then we can set
is<04:24:31.319> saved<04:24:32.319> to<04:24:32.479> be<04:24:32.680> equal<04:24:33.000> to<04:24:34.000> saved<04:24:34.880> post

is saved to be equal to saved post

is saved to be equal to saved post
record

record

record
um<04:24:37.119> so<04:24:37.319> if<04:24:37.479> there<04:24:37.640> is<04:24:37.760> a<04:24:37.920> saved<04:24:38.279> post<04:24:38.560> record<04:24:39.279> we

um so if there is a saved post record we

um so if there is a saved post record we
can<04:24:39.720> return<04:24:40.040> a<04:24:40.720> true<04:24:41.720> else<04:24:42.080> we<04:24:42.159> can<04:24:42.399> return<04:24:42.560> a

can return a true else we can return a

can return a true else we can return a
false<04:24:43.159> because<04:24:43.439> this<04:24:43.600> has<04:24:43.720> to<04:24:43.840> be<04:24:43.960> a<04:24:44.159> Boolean

false because this has to be a Boolean

false because this has to be a Boolean
and<04:24:45.279> there's<04:24:45.439> a<04:24:45.560> shorter<04:24:46.000> way<04:24:46.159> of<04:24:46.279> doing<04:24:46.640> this

and there's a shorter way of doing this

and there's a shorter way of doing this
whenever<04:24:47.479> you<04:24:47.640> have<04:24:47.920> something<04:24:48.640> if<04:24:48.800> that

whenever you have something if that

whenever you have something if that
something<04:24:49.439> exists<04:24:50.199> return<04:24:50.479> true<04:24:51.040> else<04:24:51.479> return

something exists return true else return

something exists return true else return
false<04:24:52.640> what<04:24:52.720> you<04:24:52.840> can<04:24:53.080> also<04:24:53.399> do<04:24:53.960> is<04:24:54.359> automatic

false what you can also do is automatic

false what you can also do is automatic
Boolean<04:24:55.439> assignment<04:24:56.399> and<04:24:56.560> That<04:24:56.680> is<04:24:57.080> do<04:24:57.359> a

Boolean assignment and That is do a

Boolean assignment and That is do a
double<04:24:58.000> exclamation<04:24:58.600> mark<04:24:59.439> So<04:24:59.680> what<04:24:59.840> this

double exclamation mark So what this

double exclamation mark So what this
does<04:25:00.640> is<04:25:00.920> it<04:25:01.080> checks<04:25:01.479> whether<04:25:01.720> there<04:25:01.920> is<04:25:02.399> a

does is it checks whether there is a

does is it checks whether there is a
Trudy<04:25:03.000> value<04:25:03.920> if<04:25:04.040> there<04:25:04.199> is<04:25:04.319> a<04:25:04.439> Trudy<04:25:04.880> value

Trudy value if there is a Trudy value

Trudy value if there is a Trudy value
this<04:25:05.600> is<04:25:05.720> going<04:25:05.880> to<04:25:06.159> you<04:25:06.680> make<04:25:06.840> it<04:25:06.960> a<04:25:07.080> falsey

this is going to you make it a falsey

this is going to you make it a falsey
value<04:25:08.279> and<04:25:08.399> then<04:25:08.560> from<04:25:08.720> falsey<04:25:09.399> you<04:25:09.560> get<04:25:09.680> the

value and then from falsey you get the

value and then from falsey you get the
try<04:25:10.880> so<04:25:11.159> let<04:25:11.279> me<04:25:11.399> give<04:25:11.479> you<04:25:11.600> an<04:25:11.760> example

try so let me give you an example

try so let me give you an example
because<04:25:12.319> I<04:25:12.439> know<04:25:12.600> this<04:25:12.720> is<04:25:12.840> a<04:25:12.960> bit<04:25:13.319> complicated

because I know this is a bit complicated

because I know this is a bit complicated
if<04:25:14.479> we<04:25:14.680> have<04:25:15.119> the<04:25:15.359> saved<04:25:15.760> post<04:25:16.119> record<04:25:16.760> which

if we have the saved post record which

if we have the saved post record which
is<04:25:17.119> let's<04:25:17.319> say<04:25:17.560> an<04:25:17.840> object<04:25:18.439> of<04:25:19.040> Saved<04:25:20.040> is<04:25:20.600> true

is let's say an object of Saved is true

is let's say an object of Saved is true
like<04:25:21.840> this<04:25:22.680> then<04:25:22.880> we<04:25:23.040> call<04:25:23.319> one<04:25:23.600> exclamation

like this then we call one exclamation

like this then we call one exclamation
mark<04:25:24.600> on<04:25:24.880> Saved<04:25:25.520> post<04:25:25.920> record<04:25:26.640> which<04:25:26.760> is<04:25:26.920> going

mark on Saved post record which is going

mark on Saved post record which is going
to<04:25:27.640> return<04:25:28.720> false<04:25:29.720> and<04:25:29.840> then<04:25:30.000> we<04:25:30.199> call<04:25:30.479> one

to return false and then we call one

to return false and then we call one
more<04:25:30.880> time<04:25:31.520> this<04:25:31.760> on<04:25:31.920> the<04:25:32.080> false<04:25:32.760> and<04:25:32.880> we<04:25:33.040> get

more time this on the false and we get

more time this on the false and we get
true<04:25:34.159> if<04:25:34.239> you<04:25:34.359> were<04:25:34.520> to<04:25:34.680> repeat<04:25:35.040> this<04:25:35.199> with

true if you were to repeat this with

true if you were to repeat this with
another<04:25:35.680> true<04:25:36.159> value<04:25:36.720> like<04:25:36.920> maybe<04:25:37.239> just<04:25:37.359> a

another true value like maybe just a

another true value like maybe just a
string<04:25:37.920> of<04:25:38.199> test<04:25:39.199> it<04:25:39.279> would<04:25:39.600> also<04:25:40.800> return

string of test it would also return

string of test it would also return
false<04:25:42.640> because<04:25:42.920> once<04:25:43.080> you<04:25:43.199> negate<04:25:43.560> it<04:25:43.760> you<04:25:43.920> get

false because once you negate it you get

false because once you negate it you get
a<04:25:44.239> false<04:25:44.800> and<04:25:44.920> then<04:25:45.040> a<04:25:45.159> false<04:25:45.439> is<04:25:45.600> true<04:25:46.399> but<04:25:46.640> if

a false and then a false is true but if

a false and then a false is true but if
you<04:25:46.880> were<04:25:47.040> to<04:25:47.199> do<04:25:47.479> this<04:25:47.920> on<04:25:48.199> a<04:25:48.439> falsy<04:25:48.960> value

you were to do this on a falsy value

you were to do this on a falsy value
like<04:25:50.000> if<04:25:50.119> you<04:25:50.239> were<04:25:50.399> to<04:25:50.560> do<04:25:50.680> it<04:25:50.800> on<04:25:50.920> an<04:25:51.080> empty

like if you were to do it on an empty

like if you were to do it on an empty
string<04:25:52.520> then<04:25:53.040> at<04:25:53.159> the<04:25:53.279> end<04:25:53.479> you<04:25:53.560> would<04:25:53.760> get

string then at the end you would get

string then at the end you would get
false<04:25:54.600> because<04:25:54.920> first<04:25:55.239> it<04:25:55.359> converts<04:25:55.800> to<04:25:55.920> a

false because first it converts to a

false because first it converts to a
true<04:25:56.720> and<04:25:56.920> then<04:25:57.399> false<04:25:58.239> I<04:25:58.319> hope<04:25:58.520> this<04:25:58.680> makes

true and then false I hope this makes

true and then false I hope this makes
just<04:25:59.119> a<04:25:59.279> bit<04:25:59.399> of<04:25:59.760> sense<04:26:00.760> there<04:26:00.920> we<04:26:01.119> go<04:26:01.880> and<04:26:02.080> we

just a bit of sense there we go and we

just a bit of sense there we go and we
can<04:26:02.359> save<04:26:02.680> this<04:26:03.600> and<04:26:03.760> we<04:26:03.840> can<04:26:04.000> reload<04:26:04.359> the<04:26:04.680> page

can save this and we can reload the page

can save this and we can reload the page
now<04:26:06.199> if<04:26:06.279> we<04:26:06.479> press<04:26:07.119> save<04:26:08.119> it<04:26:08.439> remains<04:26:08.840> saved

now if we press save it remains saved

now if we press save it remains saved
but<04:26:10.199> I<04:26:10.439> still<04:26:10.880> cannot<04:26:11.479> unclick<04:26:12.560> it<04:26:13.560> okay<04:26:14.319> let's

but I still cannot unclick it okay let's

but I still cannot unclick it okay let's
see<04:26:15.080> if<04:26:15.239> I'm<04:26:15.399> doing<04:26:15.640> something<04:26:16.000> wrong<04:26:16.279> here<04:26:17.199> I

see if I'm doing something wrong here I

see if I'm doing something wrong here I
think<04:26:17.840> that<04:26:18.199> right<04:26:18.479> here<04:26:19.399> where<04:26:19.600> I<04:26:19.720> was

think that right here where I was

think that right here where I was
checking<04:26:20.319> for<04:26:20.560> the<04:26:20.720> saved<04:26:21.080> post<04:26:21.760> record<04:26:22.760> the

checking for the saved post record the

checking for the saved post record the
record<04:26:23.319> itself<04:26:23.640> is<04:26:23.800> the<04:26:23.960> user<04:26:24.720> so<04:26:25.000> I<04:26:25.119> cannot

record itself is the user so I cannot

record itself is the user so I cannot
compare<04:26:25.840> the<04:26:26.080> record<04:26:26.399> of<04:26:26.520> the<04:26:26.680> user<04:26:27.119> or<04:26:27.279> the<04:26:27.439> ID

compare the record of the user or the ID

compare the record of the user or the ID
of<04:26:27.880> the<04:26:28.000> user<04:26:28.560> with<04:26:28.760> the<04:26:28.880> ID<04:26:29.119> of<04:26:29.239> the<04:26:29.399> post<04:26:30.239> what

of the user with the ID of the post what

of the user with the ID of the post what
I<04:26:30.479> need<04:26:30.640> to<04:26:30.840> do<04:26:31.239> is<04:26:31.560> dive<04:26:32.239> into<04:26:32.960> the<04:26:33.119> record.

I need to do is dive into the record.

I need to do is dive into the record.
post<04:26:34.640> the<04:26:34.840> that<04:26:35.040> user<04:26:35.319> has<04:26:35.479> saved<04:26:36.239> and<04:26:36.399> then

post the that user has saved and then

post the that user has saved and then
compare<04:26:36.960> with<04:26:37.119> the<04:26:37.239> post<04:26:37.520> ID<04:26:38.319> so<04:26:38.600> now<04:26:38.960> if<04:26:39.080> I

compare with the post ID so now if I

compare with the post ID so now if I
save<04:26:39.560> this<04:26:40.000> the<04:26:40.159> saved<04:26:40.479> record<04:26:40.840> post<04:26:41.199> or<04:26:41.399> save

save this the saved record post or save

save this the saved record post or save
post<04:26:41.960> record<04:26:42.640> should<04:26:43.040> successfully<04:26:43.600> get<04:26:43.760> the

post record should successfully get the

post record should successfully get the
state<04:26:44.760> and<04:26:44.960> now<04:26:45.279> I<04:26:45.399> can<04:26:45.560> be<04:26:45.720> able<04:26:45.960> to<04:26:46.399> toggle<04:26:46.800> it

state and now I can be able to toggle it

state and now I can be able to toggle it
on<04:26:47.960> toggle<04:26:48.359> it<04:26:48.640> off<04:26:49.359> but<04:26:49.600> it<04:26:49.800> looks<04:26:50.119> like<04:26:50.359> not

on toggle it off but it looks like not

on toggle it off but it looks like not
on<04:26:51.319> let's<04:26:51.520> reload<04:26:52.000> and

on let's reload and

on let's reload and
see<04:26:53.760> so<04:26:53.960> if<04:26:54.040> I<04:26:54.159> do<04:26:54.319> it<04:26:54.560> here<04:26:55.239> it's<04:26:55.479> on<04:26:56.439> yeah<04:26:56.680> but

see so if I do it here it's on yeah but

see so if I do it here it's on yeah but
it<04:26:56.920> doesn't<04:26:57.159> allow<04:26:57.399> me<04:26:57.520> to<04:26:57.640> bring<04:26:57.880> it<04:26:58.319> back<04:26:59.319> so

it doesn't allow me to bring it back so

it doesn't allow me to bring it back so
let's<04:26:59.840> just<04:27:00.040> ensure<04:27:00.399> that<04:27:00.560> a<04:27:00.680> couple<04:27:00.880> of

let's just ensure that a couple of

let's just ensure that a couple of
things<04:27:01.239> are<04:27:01.439> in<04:27:01.600> order<04:27:02.439> first<04:27:02.680> of<04:27:02.840> all<04:27:03.199> if<04:27:03.319> it's

things are in order first of all if it's

things are in order first of all if it's
unsaved<04:27:04.279> here<04:27:04.880> go<04:27:05.080> to<04:27:05.319> app<04:27:05.720> right<04:27:06.159> and<04:27:06.319> then<04:27:06.479> go

unsaved here go to app right and then go

unsaved here go to app right and then go
to<04:27:06.800> the<04:27:06.920> saves<04:27:07.279> collection<04:27:08.159> there<04:27:08.279> should<04:27:08.479> be

to the saves collection there should be

to the saves collection there should be
zero<04:27:09.080> documents<04:27:09.680> because<04:27:09.960> no<04:27:10.199> post<04:27:10.520> are<04:27:10.760> saved

zero documents because no post are saved

zero documents because no post are saved
if<04:27:11.960> that<04:27:12.080> is<04:27:12.239> the<04:27:12.399> case<04:27:13.000> once<04:27:13.199> you<04:27:13.399> click<04:27:13.800> it

if that is the case once you click it

if that is the case once you click it
and<04:27:15.000> now<04:27:15.279> go<04:27:15.479> back<04:27:15.640> to<04:27:15.880> aite<04:27:16.880> and<04:27:17.199> reload<04:27:18.199> you

and now go back to aite and reload you

and now go back to aite and reload you
should<04:27:18.520> be<04:27:18.640> able<04:27:18.840> to<04:27:18.960> see<04:27:19.199> one<04:27:19.439> save<04:27:19.840> there<04:27:20.159> but

should be able to see one save there but

should be able to see one save there but
it<04:27:20.439> looks<04:27:20.680> like<04:27:20.840> our<04:27:21.080> user<04:27:21.479> wasn't<04:27:21.960> added<04:27:22.640> and

it looks like our user wasn't added and

it looks like our user wasn't added and
here<04:27:23.199> it<04:27:23.439> unsaved<04:27:24.000> it<04:27:24.319> so<04:27:24.520> something<04:27:24.800> is

here it unsaved it so something is

here it unsaved it so something is
broken<04:27:25.720> so<04:27:26.000> let's<04:27:26.199> try<04:27:26.399> to<04:27:26.560> click<04:27:26.800> it<04:27:27.000> once

broken so let's try to click it once

broken so let's try to click it once
again<04:27:29.119> this<04:27:29.359> time<04:27:29.720> it<04:27:30.080> stays<04:27:30.760> saved<04:27:31.439> and<04:27:31.560> if

again this time it stays saved and if

again this time it stays saved and if
you<04:27:31.840> reload<04:27:32.399> right<04:27:32.600> here<04:27:33.119> it<04:27:33.279> looks<04:27:33.479> like<04:27:33.640> it

you reload right here it looks like it

you reload right here it looks like it
added<04:27:34.279> another<04:27:34.840> document<04:27:35.560> with<04:27:35.720> a<04:27:36.000> again<04:27:36.319> an

added another document with a again an

added another document with a again an
empty<04:27:36.840> user<04:27:37.680> so<04:27:37.960> this<04:27:38.080> is<04:27:38.279> not<04:27:38.520> looking<04:27:38.880> good

empty user so this is not looking good

empty user so this is not looking good
it<04:27:39.479> is<04:27:39.720> possible<04:27:40.080> that<04:27:40.199> we<04:27:40.359> got<04:27:40.560> disconnected

it is possible that we got disconnected

it is possible that we got disconnected
in<04:27:41.399> the<04:27:41.520> meantime<04:27:42.159> so<04:27:42.319> it<04:27:42.439> doesn't<04:27:42.680> know<04:27:42.880> which

in the meantime so it doesn't know which

in the meantime so it doesn't know which
user<04:27:43.359> is<04:27:43.600> there<04:27:44.319> so<04:27:44.520> for<04:27:44.760> now<04:27:45.159> what<04:27:45.279> I'm<04:27:45.399> going

user is there so for now what I'm going

user is there so for now what I'm going
to<04:27:45.640> do<04:27:46.000> is<04:27:46.119> I'm<04:27:46.239> going<04:27:46.359> to<04:27:46.520> delete<04:27:47.279> both<04:27:47.479> of

to do is I'm going to delete both of

to do is I'm going to delete both of
these<04:27:47.800> two<04:27:48.119> documents<04:27:49.080> because<04:27:49.359> we<04:27:49.520> don't

these two documents because we don't

these two documents because we don't
want<04:27:49.840> to<04:27:50.040> have<04:27:50.199> any<04:27:50.399> saves<04:27:51.319> and<04:27:51.520> I'm<04:27:51.640> going<04:27:51.760> to

want to have any saves and I'm going to

want to have any saves and I'm going to
quickly<04:27:52.359> log<04:27:52.680> out<04:27:53.279> and<04:27:53.399> then<04:27:53.600> log<04:27:54.000> back<04:27:54.159> in<04:27:54.560> to

quickly log out and then log back in to

quickly log out and then log back in to
ensure<04:27:55.119> everything<04:27:55.399> is<04:27:55.640> good<04:27:56.520> I'm<04:27:56.600> going<04:27:56.720> to

ensure everything is good I'm going to

ensure everything is good I'm going to
use<04:27:57.159> my<04:27:57.439> same<04:27:58.279> email<04:27:59.279> and<04:27:59.520> sign<04:28:00.040> in<04:28:01.040> now<04:28:01.279> we<04:28:01.359> can

use my same email and sign in now we can

use my same email and sign in now we can
see<04:28:01.680> we're<04:28:01.920> logged<04:28:02.239> in<04:28:02.880> and<04:28:03.119> now<04:28:03.399> I<04:28:03.520> click<04:28:03.840> save

see we're logged in and now I click save

see we're logged in and now I click save
but<04:28:04.960> if<04:28:05.040> we<04:28:05.199> go<04:28:05.439> right<04:28:05.600> here<04:28:06.159> it<04:28:06.319> looks<04:28:06.600> like<04:28:06.800> it

but if we go right here it looks like it

but if we go right here it looks like it
didn't<04:28:07.359> yet<04:28:07.600> save<04:28:07.840> it<04:28:08.760> so<04:28:09.080> it's<04:28:09.279> possible<04:28:09.640> we

didn't yet save it so it's possible we

didn't yet save it so it's possible we
need<04:28:09.880> to<04:28:10.080> add<04:28:10.279> loadings<04:28:10.920> for<04:28:11.199> Save<04:28:11.479> and<04:28:11.680> unsave

need to add loadings for Save and unsave

need to add loadings for Save and unsave
so<04:28:13.159> right<04:28:13.359> here<04:28:13.680> with<04:28:14.000> save<04:28:14.600> we<04:28:14.720> can<04:28:14.960> say<04:28:15.319> is

so right here with save we can say is

so right here with save we can say is
pending<04:28:16.640> and<04:28:16.760> we<04:28:16.840> can<04:28:17.000> say<04:28:17.279> is<04:28:17.760> saving<04:28:18.520> post

pending and we can say is saving post

pending and we can say is saving post
and<04:28:19.479> we<04:28:19.560> can<04:28:19.680> do<04:28:19.840> the<04:28:19.960> same<04:28:20.319> here<04:28:20.840> with<04:28:21.359> is

and we can do the same here with is

and we can do the same here with is
pending<04:28:24.239> we<04:28:24.359> can<04:28:24.520> say<04:28:24.840> is

pending we can say is

pending we can say is
deleting<04:28:27.479> saved<04:28:28.479> and<04:28:28.640> now<04:28:28.840> we<04:28:28.960> can<04:28:29.119> use<04:28:29.439> those

deleting saved and now we can use those

deleting saved and now we can use those
two<04:28:30.359> right<04:28:30.600> here<04:28:30.880> to<04:28:31.119> display<04:28:31.720> a<04:28:32.040> loader<04:28:33.040> so

two right here to display a loader so

two right here to display a loader so
before<04:28:34.359> the<04:28:34.520> image<04:28:34.960> we<04:28:35.080> can<04:28:35.199> say<04:28:35.520> if

before the image we can say if

before the image we can say if
is<04:28:38.159> saving<04:28:39.279> post<04:28:40.600> or<04:28:41.600> if<04:28:41.920> is<04:28:42.520> deleting<04:28:43.520> saved

is saving post or if is deleting saved

is saving post or if is deleting saved
in<04:28:44.760> that<04:28:45.000> case<04:28:45.279> we<04:28:45.359> can<04:28:45.800> return<04:28:46.800> a<04:28:47.040> loader

in that case we can return a loader

in that case we can return a loader
component<04:28:48.720> which<04:28:48.840> we<04:28:49.000> have<04:28:49.119> to<04:28:49.319> import<04:28:49.840> from

component which we have to import from

component which we have to import from
loader<04:28:51.439> else<04:28:52.119> we<04:28:52.479> return<04:28:52.960> an<04:28:53.199> image<04:28:53.680> that's

loader else we return an image that's

loader else we return an image that's
going<04:28:54.000> to<04:28:54.159> allow<04:28:54.359> us<04:28:54.479> to<04:28:54.640> click<04:28:54.880> it<04:28:55.279> and<04:28:55.399> then

going to allow us to click it and then

going to allow us to click it and then
we<04:28:55.640> have<04:28:55.760> to<04:28:55.920> close<04:28:56.520> this<04:28:56.680> block<04:28:57.439> here<04:28:58.439> so<04:28:58.680> now

we have to close this block here so now

we have to close this block here so now
if<04:28:59.319> I<04:28:59.479> reload<04:29:00.000> the<04:29:00.279> page<04:29:01.279> it's<04:29:01.439> going<04:29:01.600> to<04:29:01.760> say

if I reload the page it's going to say

if I reload the page it's going to say
it's<04:29:02.319> not<04:29:02.840> or<04:29:03.159> it<04:29:03.279> is<04:29:03.680> saved<04:29:04.680> and<04:29:04.920> here<04:29:05.080> if<04:29:05.199> I<04:29:05.359> go

it's not or it is saved and here if I go

it's not or it is saved and here if I go
we<04:29:06.439> indeed<04:29:06.760> do<04:29:07.080> have<04:29:07.479> a<04:29:07.680> save<04:29:08.080> document<04:29:08.960> now<04:29:09.199> if

we indeed do have a save document now if

we indeed do have a save document now if
I<04:29:09.479> unsave<04:29:10.279> it<04:29:11.279> oh<04:29:11.479> the<04:29:11.600> loading<04:29:11.920> is<04:29:12.000> in<04:29:12.119> the

I unsave it oh the loading is in the

I unsave it oh the loading is in the
wrong<04:29:12.560> place<04:29:12.920> I<04:29:13.040> added<04:29:13.359> it<04:29:13.560> within<04:29:13.960> the<04:29:14.199> saved

wrong place I added it within the saved

wrong place I added it within the saved
or<04:29:14.720> handle<04:29:15.119> like<04:29:15.479> not<04:29:15.760> save<04:29:16.319> so<04:29:16.479> I'm<04:29:16.560> going<04:29:16.680> to

or handle like not save so I'm going to

or handle like not save so I'm going to
take<04:29:17.159> this<04:29:17.359> entire<04:29:17.840> part<04:29:18.840> remove<04:29:19.199> it<04:29:19.359> from

take this entire part remove it from

take this entire part remove it from
here<04:29:20.080> and<04:29:20.279> add<04:29:20.439> it<04:29:20.720> right

here and add it right

here and add it right
here<04:29:22.560> there<04:29:22.720> we<04:29:22.880> go<04:29:23.040> so<04:29:23.159> it<04:29:23.239> should<04:29:23.359> be<04:29:23.479> in<04:29:23.600> the

here there we go so it should be in the

here there we go so it should be in the
saved<04:29:25.560> and<04:29:25.720> now<04:29:25.920> if<04:29:26.040> I<04:29:26.199> save

saved and now if I save

saved and now if I save
it<04:29:28.560> we<04:29:28.640> can<04:29:28.760> see<04:29:28.960> that<04:29:29.080> it's<04:29:29.279> currently

it we can see that it's currently

it we can see that it's currently
unsaved<04:29:30.880> which<04:29:31.040> we<04:29:31.119> can<04:29:31.279> also<04:29:31.560> verify<04:29:31.960> in<04:29:32.119> app

unsaved which we can also verify in app

unsaved which we can also verify in app
right<04:29:33.239> and<04:29:33.439> now<04:29:33.720> if<04:29:33.840> we<04:29:33.960> save<04:29:34.159> it<04:29:34.399> again<04:29:35.000> it<04:29:35.159> was

right and now if we save it again it was

right and now if we save it again it was
loaded<04:29:36.040> and<04:29:36.199> then<04:29:36.319> it's<04:29:36.640> saved<04:29:37.640> so<04:29:37.960> it's

loaded and then it's saved so it's

loaded and then it's saved so it's
looking<04:29:39.119> good<04:29:39.439> here<04:29:40.399> one<04:29:40.560> more<04:29:40.800> time<04:29:41.040> I'm

looking good here one more time I'm

looking good here one more time I'm
going<04:29:41.239> to<04:29:41.399> unsave

going to unsave

going to unsave
it<04:29:43.439> and<04:29:43.680> go

it and go

it and go
back<04:29:45.960> it's<04:29:46.199> gone<04:29:47.000> we<04:29:47.119> get<04:29:47.239> a<04:29:47.439> 500<04:29:48.199> and<04:29:48.359> this<04:29:48.439> is

back it's gone we get a 500 and this is

back it's gone we get a 500 and this is
okay<04:29:48.960> from<04:29:49.159> time<04:29:49.319> to<04:29:49.560> time<04:29:49.760> you<04:29:49.880> will<04:29:50.080> see<04:29:50.279> some

okay from time to time you will see some

okay from time to time you will see some
errors<04:29:51.040> but<04:29:51.199> that's<04:29:51.399> because<04:29:51.800> aight<04:29:52.319> is<04:29:52.479> still

errors but that's because aight is still

errors but that's because aight is still
in<04:29:52.960> beta<04:29:53.680> it's<04:29:53.840> going<04:29:54.000> to<04:29:54.119> be<04:29:54.359> phenomenal<04:29:54.960> once

in beta it's going to be phenomenal once

in beta it's going to be phenomenal once
it's<04:29:55.359> out<04:29:56.159> so<04:29:56.399> let's<04:29:56.600> just

it's out so let's just

it's out so let's just
reload<04:29:58.359> it<04:29:58.520> works<04:29:58.880> again<04:29:59.279> it's<04:29:59.439> unsaved<04:30:00.199> and

reload it works again it's unsaved and

reload it works again it's unsaved and
one<04:30:00.720> final<04:30:01.119> time<04:30:01.520> let's<04:30:01.760> click<04:30:02.399> save<04:30:03.399> and

one final time let's click save and

one final time let's click save and
check<04:30:04.000> it<04:30:04.159> out<04:30:04.720> it<04:30:04.840> is<04:30:05.080> here<04:30:05.720> so<04:30:05.920> now<04:30:06.199> the<04:30:06.359> save

check it out it is here so now the save

check it out it is here so now the save
functionality<04:30:07.239> works<04:30:07.680> perfectly<04:30:08.680> as<04:30:09.080> does

functionality works perfectly as does

functionality works perfectly as does
the<04:30:09.720> like<04:30:10.000> feature<04:30:10.439> as<04:30:10.600> well<04:30:11.520> this<04:30:11.800> is<04:30:12.199> great

the like feature as well this is great

the like feature as well this is great
and<04:30:13.199> with<04:30:13.399> that<04:30:13.680> we're<04:30:13.840> done<04:30:14.040> with<04:30:14.199> the<04:30:14.319> post

and with that we're done with the post

and with that we're done with the post
stats<04:30:15.279> with<04:30:15.439> the<04:30:15.560> queries<04:30:15.920> mutations<04:30:16.399> and

stats with the queries mutations and

stats with the queries mutations and
apis<04:30:17.040> for<04:30:17.199> the<04:30:17.319> Post<04:30:17.600> stats<04:30:17.960> as<04:30:18.159> well<04:30:19.040> you<04:30:19.119> can

apis for the Post stats as well you can

apis for the Post stats as well you can
remove<04:30:19.600> the<04:30:19.720> conso<04:30:20.119> log<04:30:20.439> that<04:30:20.560> we<04:30:20.680> had<04:30:20.840> in<04:30:20.960> the

remove the conso log that we had in the

remove the conso log that we had in the
post<04:30:21.439> card<04:30:22.439> and<04:30:22.640> we<04:30:22.760> can<04:30:23.000> focus<04:30:23.760> not<04:30:23.960> on<04:30:24.080> the

post card and we can focus not on the

post card and we can focus not on the
home<04:30:24.640> right<04:30:24.840> now<04:30:25.399> but<04:30:25.640> rather<04:30:26.040> on<04:30:26.279> the<04:30:26.560> edit

home right now but rather on the edit

home right now but rather on the edit
page<04:30:27.520> because<04:30:27.720> we<04:30:27.840> need<04:30:27.960> to<04:30:28.080> be<04:30:28.199> able<04:30:28.399> to<04:30:28.600> edit

page because we need to be able to edit

page because we need to be able to edit
the<04:30:29.159> post<04:30:29.479> as<04:30:29.720> well<04:30:30.479> and<04:30:30.640> trust<04:30:30.920> me<04:30:31.319> this<04:30:31.439> is

the post as well and trust me this is

the post as well and trust me this is
going<04:30:31.760> to<04:30:31.880> be<04:30:32.080> simpler<04:30:32.760> than<04:30:32.920> you<04:30:33.040> might<04:30:33.279> think

going to be simpler than you might think

going to be simpler than you might think
you<04:30:34.359> have<04:30:34.479> to<04:30:34.640> go<04:30:34.800> to<04:30:35.000> the<04:30:35.199> edit<04:30:35.920> post<04:30:36.800> page<04:30:37.800> and

you have to go to the edit post page and

you have to go to the edit post page and
then<04:30:38.359> you<04:30:38.520> can<04:30:38.760> also<04:30:39.080> open<04:30:39.359> the<04:30:39.600> create<04:30:40.279> post

then you can also open the create post

then you can also open the create post
page<04:30:41.720> in<04:30:41.960> here<04:30:42.399> we<04:30:42.560> can<04:30:42.800> copy<04:30:43.080> the<04:30:43.239> entire

page in here we can copy the entire

page in here we can copy the entire
create<04:30:44.000> post<04:30:44.760> and<04:30:44.920> then<04:30:45.159> paste<04:30:45.399> it<04:30:45.600> in<04:30:45.760> the

create post and then paste it in the

create post and then paste it in the
edit<04:30:46.239> post<04:30:47.199> we<04:30:47.319> can<04:30:47.520> of<04:30:47.680> course<04:30:48.199> exchange<04:30:48.760> the

edit post we can of course exchange the

edit post we can of course exchange the
create<04:30:49.680> with<04:30:50.000> edit

create with edit

create with edit
post<04:30:53.080> now<04:30:53.319> it<04:30:53.439> seems<04:30:53.720> like<04:30:53.840> we're<04:30:54.040> creating

post now it seems like we're creating

post now it seems like we're creating
one<04:30:55.119> so<04:30:55.479> we<04:30:55.560> can<04:30:55.760> simply<04:30:56.080> change<04:30:56.479> this<04:30:56.640> to

one so we can simply change this to

one so we can simply change this to
instead<04:30:57.159> of<04:30:57.359> create<04:30:57.920> we<04:30:58.040> can<04:30:58.239> say<04:30:58.920> edit<04:30:59.920> and<04:31:00.199> in

instead of create we can say edit and in

instead of create we can say edit and in
this<04:31:00.640> case<04:31:01.080> we'll<04:31:01.359> also<04:31:01.600> have<04:31:01.720> to<04:31:01.920> load<04:31:02.399> the

this case we'll also have to load the

this case we'll also have to load the
existing<04:31:03.080> post<04:31:03.479> data<04:31:03.880> so<04:31:04.000> it's<04:31:04.119> going<04:31:04.239> to<04:31:04.359> be<04:31:04.479> a

existing post data so it's going to be a

existing post data so it's going to be a
bit<04:31:04.760> more<04:31:05.000> complicated<04:31:05.640> and<04:31:05.800> create<04:31:06.680> so<04:31:06.960> what

bit more complicated and create so what

bit more complicated and create so what
we<04:31:07.239> can<04:31:07.399> do<04:31:08.000> is<04:31:08.319> right<04:31:08.560> here<04:31:09.359> get<04:31:09.560> the<04:31:09.800> ID<04:31:10.359> of

we can do is right here get the ID of

we can do is right here get the ID of
the<04:31:10.640> post<04:31:10.960> we<04:31:11.040> want<04:31:11.159> to<04:31:11.319> edit<04:31:11.880> by<04:31:12.000> saying<04:31:12.359> const

the post we want to edit by saying const

the post we want to edit by saying const
ID<04:31:13.279> is<04:31:13.479> equal<04:31:13.840> to<04:31:14.239> use

ID is equal to use

ID is equal to use
perams<04:31:16.640> and<04:31:16.800> this<04:31:16.920> use<04:31:17.239> perams<04:31:17.960> is<04:31:18.239> coming

perams and this use perams is coming

perams and this use perams is coming
from<04:31:19.119> react<04:31:19.560> router<04:31:19.960> Dom<04:31:20.359> so<04:31:20.520> we<04:31:20.640> can<04:31:20.880> import

from react router Dom so we can import

from react router Dom so we can import
use<04:31:22.600> perams<04:31:23.600> from<04:31:24.080> react<04:31:24.880> router

use perams from react router

use perams from react router
Dom<04:31:27.680> there<04:31:27.880> we<04:31:28.080> go<04:31:28.680> and<04:31:28.920> we<04:31:29.000> need<04:31:29.159> to<04:31:29.279> get<04:31:29.439> the

Dom there we go and we need to get the

Dom there we go and we need to get the
post<04:31:30.239> details<04:31:31.239> so<04:31:31.479> to<04:31:31.720> get<04:31:31.840> to<04:31:32.000> the<04:31:32.159> post

post details so to get to the post

post details so to get to the post
details<04:31:33.040> we<04:31:33.159> have<04:31:33.279> to<04:31:33.439> create<04:31:33.720> an<04:31:33.960> API

details we have to create an API

details we have to create an API
function<04:31:35.279> so<04:31:35.520> so<04:31:35.640> let's<04:31:35.840> go<04:31:35.960> to<04:31:36.119> our<04:31:36.359> API<04:31:37.159> below

function so so let's go to our API below

function so so let's go to our API below
save<04:31:38.319> post<04:31:39.000> and<04:31:39.560> delete<04:31:39.960> saved<04:31:40.800> post<04:31:41.800> and<04:31:41.960> by

save post and delete saved post and by

save post and delete saved post and by
the<04:31:42.199> way<04:31:42.520> if<04:31:42.760> some<04:31:42.920> of<04:31:43.080> these<04:31:43.239> things<04:31:43.439> are<04:31:43.600> now

the way if some of these things are now

the way if some of these things are now
working<04:31:44.080> for<04:31:44.279> you<04:31:44.840> there's<04:31:45.080> going<04:31:45.199> to<04:31:45.319> be<04:31:45.439> a

working for you there's going to be a

working for you there's going to be a
complete<04:31:46.040> apit<04:31:46.560> TS<04:31:47.000> file<04:31:47.720> as<04:31:47.960> well<04:31:48.319> as<04:31:48.640> the

complete apit TS file as well as the

complete apit TS file as well as the
queries<04:31:49.279> and<04:31:49.439> mutations<04:31:49.960> file<04:31:50.359> down<04:31:50.800> below<04:31:51.800> so

queries and mutations file down below so

queries and mutations file down below so
let's<04:31:52.319> create<04:31:52.640> a<04:31:52.880> simple<04:31:53.319> get<04:31:53.600> post<04:31:53.920> by<04:31:54.119> ID<04:31:54.920> by

let's create a simple get post by ID by

let's create a simple get post by ID by
saying<04:31:55.680> export

saying export

saying export
async<04:31:58.600> function<04:31:59.600> get<04:32:00.119> post<04:32:00.680> by<04:32:01.080> ID<04:32:01.960> where<04:32:02.159> we

async function get post by ID where we

async function get post by ID where we
get<04:32:02.479> the<04:32:02.640> post<04:32:02.960> ID<04:32:03.680> of<04:32:03.840> a<04:32:04.000> typ<04:32:04.319> string<04:32:05.239> and<04:32:05.560> then

get the post ID of a typ string and then

get the post ID of a typ string and then
we<04:32:05.880> open<04:32:06.159> up<04:32:06.359> a<04:32:06.520> new<04:32:06.880> try<04:32:07.199> and<04:32:07.520> catch<04:32:07.920> Block<04:32:08.800> in

we open up a new try and catch Block in

we open up a new try and catch Block in
the<04:32:09.159> catch<04:32:09.479> we<04:32:09.720> conso<04:32:10.199> log<04:32:10.520> the

the catch we conso log the

the catch we conso log the
error<04:32:12.279> and<04:32:12.600> in<04:32:12.760> the<04:32:12.960> try<04:32:13.800> we<04:32:13.920> can<04:32:14.119> get<04:32:14.600> cons

error and in the try we can get cons

error and in the try we can get cons
post<04:32:15.960> is<04:32:16.239> equal<04:32:16.560> to<04:32:17.319> await<04:32:18.680> databases.<04:32:19.680> getet

post is equal to await databases. getet

post is equal to await databases. getet
document<04:32:21.760> we<04:32:21.840> want<04:32:22.000> to<04:32:22.199> get<04:32:22.359> it<04:32:22.720> from<04:32:23.199> aight

document we want to get it from aight

document we want to get it from aight
config<04:32:24.159> database

config database

config database
ID<04:32:26.239> from<04:32:26.920> the<04:32:27.319> post<04:32:27.800> collection<04:32:28.399> so<04:32:28.560> we<04:32:28.640> can

ID from the post collection so we can

ID from the post collection so we can
say<04:32:29.000> app<04:32:29.239> right<04:32:29.399> config<04:32:29.840> post<04:32:30.119> collection<04:32:30.560> ID

say app right config post collection ID

say app right config post collection ID
and<04:32:31.479> we<04:32:31.600> can<04:32:31.760> pass<04:32:32.040> the<04:32:32.159> post<04:32:32.439> ID<04:32:33.359> finally<04:32:34.040> we

and we can pass the post ID finally we

and we can pass the post ID finally we
can<04:32:34.520> return<04:32:35.040> the<04:32:35.199> post

can return the post

can return the post
post<04:32:37.199> now<04:32:37.479> we<04:32:37.640> have<04:32:37.800> this<04:32:38.000> function<04:32:38.720> and<04:32:38.880> we

post now we have this function and we

post now we have this function and we
have<04:32:39.119> to<04:32:39.279> consume<04:32:39.680> it<04:32:40.199> by<04:32:40.680> react<04:32:41.159> query<04:32:41.880> so

have to consume it by react query so

have to consume it by react query so
let's<04:32:42.239> go<04:32:42.399> to<04:32:42.600> queries<04:32:43.000> and

let's go to queries and

let's go to queries and
mutations<04:32:45.640> we<04:32:45.760> can<04:32:45.960> go<04:32:46.199> below<04:32:47.000> use<04:32:47.279> delete

mutations we can go below use delete

mutations we can go below use delete
saved<04:32:48.080> post<04:32:49.080> and<04:32:49.279> we<04:32:49.359> can<04:32:49.520> create<04:32:49.880> new<04:32:50.080> one

saved post and we can create new one

saved post and we can create new one
called<04:32:51.000> export<04:32:51.920> const<04:32:52.760> use<04:32:53.479> get<04:32:54.159> post<04:32:54.760> by

called export const use get post by

called export const use get post by
ID<04:32:57.199> here<04:32:57.880> we<04:32:58.000> can<04:32:58.119> say<04:32:58.560> return<04:32:59.040> use

ID here we can say return use

ID here we can say return use
Query<04:33:01.600> where<04:33:01.800> we're<04:33:01.920> going<04:33:02.040> to<04:33:02.159> have<04:33:02.279> a<04:33:02.479> query

Query where we're going to have a query

Query where we're going to have a query
key<04:33:03.840> of<04:33:04.279> an<04:33:04.480> array<04:33:05.039> of<04:33:05.439> query<04:33:06.000> uncore

key of an array of query uncore

key of an array of query uncore
keys.<04:33:08.320> get<04:33:09.000> post<04:33:09.719> by<04:33:10.359> ID<04:33:11.359> like<04:33:11.719> this<04:33:12.719> and<04:33:12.840> we

keys. get post by ID like this and we

keys. get post by ID like this and we
need<04:33:13.080> to<04:33:13.240> pass<04:33:13.520> the<04:33:13.639> post<04:33:13.920> ID<04:33:14.400> in

need to pass the post ID in

need to pass the post ID in
it<04:33:16.119> and<04:33:16.279> this<04:33:16.480> post<04:33:16.760> ID<04:33:17.160> is<04:33:17.400> coming<04:33:18.199> as<04:33:18.320> a<04:33:18.520> param

it and this post ID is coming as a param

it and this post ID is coming as a param
to<04:33:19.240> this<04:33:19.439> function<04:33:20.000> so<04:33:20.119> we<04:33:20.240> can<04:33:20.359> say<04:33:20.600> post<04:33:20.920> ID

to this function so we can say post ID

to this function so we can say post ID
of<04:33:21.840> a<04:33:22.039> typ<04:33:22.279> string<04:33:23.119> finally<04:33:23.719> which<04:33:23.920> function

of a typ string finally which function

of a typ string finally which function
are<04:33:24.279> we<04:33:24.400> going<04:33:24.520> to<04:33:24.639> call<04:33:25.039> to<04:33:25.240> query<04:33:25.680> this<04:33:25.879> post

are we going to call to query this post

are we going to call to query this post
we're<04:33:26.760> going<04:33:26.879> to<04:33:27.000> call<04:33:27.240> the<04:33:27.439> query<04:33:28.320> FN<04:33:29.320> which

we're going to call the query FN which

we're going to call the query FN which
is<04:33:29.639> going<04:33:29.799> to<04:33:30.000> call<04:33:30.840> the<04:33:31.080> get<04:33:31.600> posted<04:33:32.000> by<04:33:32.240> ID<04:33:33.000> to

is going to call the get posted by ID to

is going to call the get posted by ID to
which<04:33:33.400> we<04:33:33.600> pass<04:33:33.840> the<04:33:34.000> post<04:33:34.320> ID<04:33:35.039> and<04:33:35.160> this<04:33:35.480> of

which we pass the post ID and this of

which we pass the post ID and this of
course<04:33:35.840> has<04:33:35.959> to<04:33:36.080> be<04:33:36.240> imported<04:33:37.000> from<04:33:37.680> the<04:33:37.879> top

course has to be imported from the top

course has to be imported from the top
right<04:33:38.760> here<04:33:39.000> from<04:33:39.240> aight<04:33:39.719> API<04:33:40.680> get<04:33:41.039> posed<04:33:41.480> by

right here from aight API get posed by

right here from aight API get posed by
ID<04:33:42.520> I<04:33:42.639> think<04:33:42.840> it's<04:33:43.359> here<04:33:43.959> there<04:33:44.119> we<04:33:44.320> go<04:33:45.199> and

ID I think it's here there we go and

ID I think it's here there we go and
once<04:33:45.520> you<04:33:45.680> do<04:33:45.879> that<04:33:46.080> we'll<04:33:46.320> also<04:33:46.600> have<04:33:46.760> a

once you do that we'll also have a

once you do that we'll also have a
special<04:33:47.359> property<04:33:47.920> called

special property called

special property called
enabled<04:33:50.439> so<04:33:50.680> you<04:33:50.799> want<04:33:50.920> to<04:33:51.039> set<04:33:51.359> this<04:33:51.480> defaults

enabled so you want to set this defaults

enabled so you want to set this defaults
to<04:33:52.320> disable<04:33:52.879> automatic<04:33:53.439> ref<04:33:53.760> fetching<04:33:54.199> when

to disable automatic ref fetching when

to disable automatic ref fetching when
the<04:33:54.480> query<04:33:54.840> mounts<04:33:55.359> or<04:33:55.600> the<04:33:55.719> query<04:33:56.039> Keys<04:33:56.240> is

the query mounts or the query Keys is

the query mounts or the query Keys is
changed<04:33:57.480> so<04:33:57.680> we<04:33:57.799> want<04:33:57.920> to<04:33:58.160> enable<04:33:58.600> the

changed so we want to enable the

changed so we want to enable the
fetching<04:33:59.520> only<04:33:59.920> when<04:34:00.080> we're<04:34:00.240> fetching<04:34:00.520> the

fetching only when we're fetching the

fetching only when we're fetching the
data<04:34:00.879> for<04:34:01.199> another<04:34:01.639> ID<04:34:02.279> if<04:34:02.359> we're<04:34:02.561> fetching<04:34:02.879> it

data for another ID if we're fetching it

data for another ID if we're fetching it
again<04:34:03.240> for<04:34:03.439> the<04:34:03.600> same<04:34:03.799> one<04:34:04.400> then<04:34:04.680> we're<04:34:04.840> going

again for the same one then we're going

again for the same one then we're going
to<04:34:05.039> get<04:34:05.359> the<04:34:05.480> same<04:34:05.799> details<04:34:06.520> if<04:34:06.639> the<04:34:06.799> post<04:34:07.080> ID

to get the same details if the post ID

to get the same details if the post ID
didn't<04:34:07.639> changed<04:34:08.400> again<04:34:08.760> this<04:34:08.879> is<04:34:09.000> a<04:34:09.199> small

didn't changed again this is a small

didn't changed again this is a small
step<04:34:09.879> here<04:34:10.480> nicely<04:34:10.920> built<04:34:11.199> into<04:34:11.480> react<04:34:11.879> query

step here nicely built into react query

step here nicely built into react query
but<04:34:12.840> it<04:34:12.959> allows<04:34:13.320> us<04:34:13.480> to<04:34:13.760> cache<04:34:14.199> data<04:34:14.520> and<04:34:14.680> fetch

but it allows us to cache data and fetch

but it allows us to cache data and fetch
data<04:34:15.279> more<04:34:15.719> efficiently<04:34:16.719> so<04:34:16.920> now<04:34:17.080> we<04:34:17.240> have

data more efficiently so now we have

data more efficiently so now we have
this<04:34:17.561> use<04:34:17.879> get<04:34:18.119> post<04:34:18.400> by<04:34:18.600> ID<04:34:19.520> and<04:34:19.639> we<04:34:19.719> can<04:34:19.920> go

this use get post by ID and we can go

this use get post by ID and we can go
back<04:34:20.600> to<04:34:21.480> right<04:34:21.719> here<04:34:22.000> in<04:34:22.160> the<04:34:22.279> edit

back to right here in the edit

back to right here in the edit
post<04:34:24.199> where<04:34:24.520> we<04:34:24.639> can<04:34:24.799> use<04:34:25.039> it<04:34:25.520> by<04:34:25.680> saying<04:34:26.240> const

post where we can use it by saying const

post where we can use it by saying const
data<04:34:28.400> is<04:34:28.561> equal<04:34:28.799> to<04:34:29.000> post<04:34:29.959> and<04:34:30.320> is<04:34:30.799> pending<04:34:31.799> is

data is equal to post and is pending is

data is equal to post and is pending is
equal<04:34:32.279> to<04:34:32.840> use<04:34:33.879> get<04:34:34.879> post<04:34:35.719> by<04:34:36.080> ID<04:34:37.039> of<04:34:37.199> course<04:34:37.400> I

equal to use get post by ID of course I

equal to use get post by ID of course I
have<04:34:37.639> to<04:34:37.760> spell<04:34:38.039> it<04:34:38.199> correctly<04:34:38.799> and<04:34:39.000> pass<04:34:39.240> the

have to spell it correctly and pass the

have to spell it correctly and pass the
ID<04:34:40.561> and<04:34:40.680> then<04:34:40.799> we<04:34:40.959> have<04:34:41.039> to<04:34:41.240> import<04:34:41.600> it<04:34:41.959> from

ID and then we have to import it from

ID and then we have to import it from
queries<04:34:42.760> and

queries and

queries and
mutations<04:34:44.920> the<04:34:45.080> ID<04:34:45.639> has<04:34:45.799> to<04:34:45.959> be<04:34:46.080> a<04:34:46.240> string<04:34:46.719> so

mutations the ID has to be a string so

mutations the ID has to be a string so
we're<04:34:47.000> going<04:34:47.080> to<04:34:47.279> pass<04:34:47.520> either<04:34:47.879> this<04:34:48.279> or<04:34:48.561> an

we're going to pass either this or an

we're going to pass either this or an
empty<04:34:49.240> string<04:34:50.240> then<04:34:50.639> if<04:34:50.840> we<04:34:51.000> are<04:34:51.400> pending

empty string then if we are pending

empty string then if we are pending
meaning<04:34:52.279> if<04:34:52.400> we're<04:34:52.561> loading<04:34:52.879> the<04:34:53.039> data<04:34:53.680> in

meaning if we're loading the data in

meaning if we're loading the data in
that<04:34:54.080> case<04:34:54.359> we<04:34:54.480> can<04:34:54.600> say<04:34:55.080> return<04:34:55.520> if<04:34:55.760> is

that case we can say return if is

that case we can say return if is
pending<04:34:57.039> then<04:34:57.279> we<04:34:57.359> can<04:34:57.561> simply<04:34:58.000> return

pending then we can simply return

pending then we can simply return
something<04:34:58.799> like<04:34:59.039> a<04:34:59.719> loader<04:35:00.719> like<04:35:00.959> this<04:35:01.439> which

something like a loader like this which

something like a loader like this which
is<04:35:01.719> coming<04:35:02.000> from<04:35:02.359> components<04:35:02.920> shared

is coming from components shared

is coming from components shared
loader<04:35:05.320> but<04:35:05.520> now<04:35:05.879> once<04:35:06.039> we<04:35:06.199> do<04:35:06.400> fetch<04:35:06.680> the<04:35:06.840> data

loader but now once we do fetch the data

loader but now once we do fetch the data
what<04:35:07.480> do<04:35:07.600> we<04:35:07.719> want<04:35:07.799> to<04:35:07.959> do<04:35:08.119> with<04:35:08.240> it<04:35:08.799> well<04:35:09.000> we

what do we want to do with it well we

what do we want to do with it well we
simply<04:35:09.439> want<04:35:09.520> to<04:35:09.840> pass<04:35:10.039> it<04:35:10.320> over<04:35:11.199> to<04:35:11.680> our<04:35:11.920> post

simply want to pass it over to our post

simply want to pass it over to our post
form<04:35:13.039> with<04:35:13.279> an<04:35:13.561> action<04:35:14.160> equal<04:35:14.480> to<04:35:14.719> update

form with an action equal to update

form with an action equal to update
because<04:35:15.719> now<04:35:15.879> we're<04:35:16.119> updating<04:35:17.119> and<04:35:17.320> a<04:35:17.561> post

because now we're updating and a post

because now we're updating and a post
equal<04:35:18.359> to<04:35:18.600> post<04:35:19.600> there<04:35:19.719> we<04:35:19.920> go<04:35:20.160> you<04:35:20.240> can<04:35:20.359> see

equal to post there we go you can see

equal to post there we go you can see
the<04:35:20.680> data<04:35:20.920> was<04:35:21.039> already<04:35:21.719> populated<04:35:22.719> how<04:35:22.879> did

the data was already populated how did

the data was already populated how did
that<04:35:23.320> happen<04:35:23.840> well<04:35:24.000> more<04:35:24.160> than<04:35:24.359> that<04:35:24.561> soon

that happen well more than that soon

that happen well more than that soon
let's<04:35:25.639> dive<04:35:25.920> into<04:35:26.240> the<04:35:26.400> post<04:35:26.719> form<04:35:27.680> we<04:35:27.799> can

let's dive into the post form we can

let's dive into the post form we can
also<04:35:28.561> accept<04:35:29.080> the<04:35:29.719> action<04:35:30.719> and<04:35:30.840> we<04:35:30.959> can<04:35:31.080> say

also accept the action and we can say

also accept the action and we can say
that<04:35:31.639> action<04:35:32.439> is<04:35:32.680> either<04:35:32.959> going<04:35:33.160> to<04:35:33.359> be<04:35:34.240> create

that action is either going to be create

that action is either going to be create
or<04:35:35.879> it's<04:35:36.039> going<04:35:36.240> to<04:35:36.400> be<04:35:37.080> update<04:35:38.000> so<04:35:38.199> now<04:35:38.320> we

or it's going to be update so now we

or it's going to be update so now we
know<04:35:38.719> exactly<04:35:39.160> what<04:35:39.279> we're<04:35:39.439> getting<04:35:39.680> in<04:35:40.520> and

know exactly what we're getting in and

know exactly what we're getting in and
all<04:35:40.959> the<04:35:41.119> data<04:35:41.359> automatically<04:35:41.879> got<04:35:42.160> populated

all the data automatically got populated

all the data automatically got populated
because<04:35:43.279> we're<04:35:43.520> accepting<04:35:44.000> this<04:35:44.199> post<04:35:44.639> right

because we're accepting this post right

because we're accepting this post right
here<04:35:45.199> as<04:35:45.320> a<04:35:45.680> prop<04:35:46.680> but<04:35:46.959> the<04:35:47.119> question<04:35:47.439> is<04:35:47.840> how

here as a prop but the question is how

here as a prop but the question is how
can<04:35:48.119> we<04:35:48.279> get<04:35:48.439> the<04:35:48.680> file<04:35:49.279> to<04:35:49.520> get<04:35:49.799> updated<04:35:50.561> as

can we get the file to get updated as

can we get the file to get updated as
well<04:35:51.320> because<04:35:51.561> you<04:35:51.680> can<04:35:51.799> see<04:35:52.080> right<04:35:52.240> here<04:35:52.520> we

well because you can see right here we

well because you can see right here we
don't<04:35:52.920> see<04:35:53.240> the<04:35:53.439> photo<04:35:53.920> or<04:35:54.080> the<04:35:54.480> file<04:35:55.480> and<04:35:55.639> to

don't see the photo or the file and to

don't see the photo or the file and to
get<04:35:56.039> it<04:35:56.359> we<04:35:56.480> have<04:35:56.600> to<04:35:56.799> look<04:35:57.160> into<04:35:57.600> our<04:35:57.920> file

get it we have to look into our file

get it we have to look into our file
uploader<04:35:58.840> component<04:35:59.520> that<04:35:59.680> we<04:35:59.799> have<04:35:59.959> created

uploader component that we have created

uploader component that we have created
not<04:36:00.639> that<04:36:00.799> long<04:36:01.039> ago<04:36:01.760> to<04:36:02.000> it<04:36:02.240> we're<04:36:02.520> passing

not that long ago to it we're passing

not that long ago to it we're passing
the<04:36:02.959> media<04:36:03.320> URL<04:36:04.240> post<04:36:04.760> image<04:36:05.160> URL<04:36:06.000> so<04:36:06.240> it

the media URL post image URL so it

the media URL post image URL so it
should<04:36:06.561> be<04:36:06.719> able<04:36:06.920> to<04:36:07.119> read<04:36:07.719> the<04:36:07.879> image<04:36:08.160> we're

should be able to read the image we're

should be able to read the image we're
showing<04:36:09.279> so<04:36:09.439> if<04:36:09.520> you<04:36:09.680> go<04:36:09.879> back<04:36:10.039> to<04:36:10.160> the

showing so if you go back to the

showing so if you go back to the
homepage<04:36:11.080> and<04:36:11.279> click<04:36:11.639> edit<04:36:12.639> it<04:36:12.719> should<04:36:12.920> be

homepage and click edit it should be

homepage and click edit it should be
able<04:36:13.279> to<04:36:13.400> read<04:36:13.639> it<04:36:14.199> but<04:36:14.480> it<04:36:14.680> doesn't<04:36:15.480> so<04:36:15.680> let's

able to read it but it doesn't so let's

able to read it but it doesn't so let's
simply<04:36:16.160> conso<04:36:16.600> log<04:36:16.920> right<04:36:17.039> here<04:36:17.199> at<04:36:17.320> the<04:36:17.520> top

simply conso log right here at the top

simply conso log right here at the top
whether<04:36:18.279> we're<04:36:18.480> getting<04:36:19.199> post<04:36:19.879> dot<04:36:20.760> image<04:36:21.480> URL

whether we're getting post dot image URL

whether we're getting post dot image URL
so<04:36:22.639> let's<04:36:22.879> conso<04:36:23.279> log<04:36:24.279> the<04:36:24.959> post.<04:36:25.959> image<04:36:27.000> URL

so let's conso log the post. image URL

so let's conso log the post. image URL
and<04:36:28.199> then<04:36:28.439> we<04:36:28.600> can<04:36:29.119> save

and then we can save

and then we can save
it<04:36:31.080> this<04:36:31.400> post<04:36:32.039> is<04:36:32.400> coming<04:36:32.840> from<04:36:33.400> let's<04:36:33.600> see

it this post is coming from let's see

it this post is coming from let's see
here

here

here
it's<04:36:35.760> saying<04:36:36.000> that<04:36:36.320> sometimes<04:36:36.520> it's

it's saying that sometimes it's

it's saying that sometimes it's
undefined<04:36:37.359> so<04:36:37.520> we<04:36:37.639> have<04:36:37.760> to<04:36:37.959> add<04:36:38.119> a<04:36:38.359> question

undefined so we have to add a question

undefined so we have to add a question
mark<04:36:39.000> so<04:36:39.160> our<04:36:39.359> app<04:36:39.561> doesn't<04:36:39.840> break<04:36:40.561> that's

mark so our app doesn't break that's

mark so our app doesn't break that's
great<04:36:41.760> now<04:36:42.240> let's<04:36:42.480> open<04:36:42.719> up<04:36:42.879> the

great now let's open up the

great now let's open up the
console<04:36:45.279> and<04:36:45.600> let's

console and let's

console and let's
reload<04:36:47.480> and<04:36:47.600> as<04:36:47.719> you<04:36:47.799> can<04:36:47.920> see<04:36:48.160> we<04:36:48.359> indeed<04:36:48.760> do

reload and as you can see we indeed do

reload and as you can see we indeed do
get<04:36:49.520> a<04:36:49.760> post<04:36:50.279> which<04:36:50.400> is<04:36:50.520> our<04:36:50.760> exact<04:36:51.240> image

get a post which is our exact image

get a post which is our exact image
which<04:36:51.920> is<04:36:52.160> great<04:36:52.799> so<04:36:52.959> we<04:36:53.080> just<04:36:53.199> have<04:36:53.320> to<04:36:53.439> figure

which is great so we just have to figure

which is great so we just have to figure
out<04:36:53.920> how<04:36:54.039> to<04:36:54.160> show<04:36:54.439> it<04:36:54.719> right<04:36:54.920> here<04:36:55.359> in<04:36:55.480> the

out how to show it right here in the

out how to show it right here in the
photos<04:36:56.561> and<04:36:56.719> that's<04:36:56.959> most<04:36:57.199> likely<04:36:57.480> have<04:36:57.600> to<04:36:57.719> do

photos and that's most likely have to do

photos and that's most likely have to do
with<04:36:58.199> going<04:36:58.561> into<04:36:59.199> the<04:36:59.320> file<04:36:59.719> uploader<04:37:00.719> and

with going into the file uploader and

with going into the file uploader and
then<04:37:01.080> using<04:37:01.439> the<04:37:01.561> media<04:37:01.920> URL<04:37:02.600> yes<04:37:02.920> as<04:37:03.000> you<04:37:03.119> can

then using the media URL yes as you can

then using the media URL yes as you can
see<04:37:03.439> we're<04:37:03.639> currently<04:37:04.160> not<04:37:04.520> using<04:37:04.840> it<04:37:05.480> so<04:37:05.799> we

see we're currently not using it so we

see we're currently not using it so we
can<04:37:06.160> simply<04:37:06.480> set<04:37:06.719> the<04:37:06.840> media<04:37:07.199> URL<04:37:07.879> to<04:37:08.080> be<04:37:08.320> a

can simply set the media URL to be a

can simply set the media URL to be a
default<04:37:09.320> State<04:37:09.920> the<04:37:10.160> default<04:37:10.680> file<04:37:11.000> URL<04:37:11.840> and

default State the default file URL and

default State the default file URL and
if<04:37:12.080> we<04:37:12.240> do<04:37:12.480> that<04:37:13.039> immediately<04:37:13.840> it<04:37:14.080> gets

if we do that immediately it gets

if we do that immediately it gets
updated<04:37:15.920> so<04:37:16.199> now<04:37:16.719> if<04:37:16.840> we<04:37:17.119> reload<04:37:18.119> as<04:37:18.240> you<04:37:18.359> can

updated so now if we reload as you can

updated so now if we reload as you can
see<04:37:19.400> once<04:37:19.561> you<04:37:19.760> visit<04:37:20.240> the<04:37:20.600> create<04:37:21.400> route<04:37:22.039> it's

see once you visit the create route it's

see once you visit the create route it's
empty<04:37:23.359> but<04:37:23.639> if<04:37:23.760> you<04:37:23.920> go<04:37:24.119> to<04:37:24.279> the<04:37:24.439> edit<04:37:25.119> you<04:37:25.240> can

empty but if you go to the edit you can

empty but if you go to the edit you can
see<04:37:25.760> right<04:37:26.000> here<04:37:26.840> that<04:37:27.119> it<04:37:27.320> nicely<04:37:27.719> gets<04:37:28.039> all

see right here that it nicely gets all

see right here that it nicely gets all
the<04:37:28.480> data<04:37:29.080> the<04:37:29.240> photo<04:37:29.840> as<04:37:30.080> well<04:37:30.760> and<04:37:30.920> now<04:37:31.119> you

the data the photo as well and now you

the data the photo as well and now you
should<04:37:31.400> be<04:37:31.520> able<04:37:31.719> to<04:37:31.920> resubmit<04:37:32.561> the<04:37:32.680> form<04:37:33.199> to

should be able to resubmit the form to

should be able to resubmit the form to
then<04:37:33.600> edit<04:37:34.039> the<04:37:34.240> actual<04:37:34.561> details

then edit the actual details

then edit the actual details
don't<04:37:35.959> click<04:37:36.160> it<04:37:36.400> just<04:37:36.639> yet<04:37:37.000> because<04:37:37.240> if<04:37:37.320> you

don't click it just yet because if you

don't click it just yet because if you
click<04:37:37.719> it<04:37:37.879> now<04:37:38.199> it's<04:37:38.359> going<04:37:38.520> to<04:37:38.719> create

click it now it's going to create

click it now it's going to create
another<04:37:39.639> post<04:37:40.480> because<04:37:41.119> if<04:37:41.240> you<04:37:41.400> go<04:37:41.561> to<04:37:41.719> the

another post because if you go to the

another post because if you go to the
edit<04:37:42.840> or<04:37:43.561> onsubmit<04:37:44.561> in<04:37:44.760> here<04:37:44.920> we're<04:37:45.160> only

edit or onsubmit in here we're only

edit or onsubmit in here we're only
calling<04:37:45.760> the<04:37:45.959> create<04:37:46.359> post<04:37:47.000> but<04:37:47.119> we're<04:37:47.320> not

calling the create post but we're not

calling the create post but we're not
calling<04:37:47.920> edit<04:37:48.279> post<04:37:48.799> which<04:37:48.959> we<04:37:49.119> have<04:37:49.240> to

calling edit post which we have to

calling edit post which we have to
create<04:37:50.480> so<04:37:51.279> one<04:37:51.480> thing<04:37:51.639> that<04:37:51.760> I<04:37:51.879> noticed<04:37:52.400> is

create so one thing that I noticed is

create so one thing that I noticed is
that<04:37:52.760> here<04:37:52.959> it's<04:37:53.119> complaining<04:37:53.600> that<04:37:53.879> action

that here it's complaining that action

that here it's complaining that action
should<04:37:54.680> be<04:37:54.920> update<04:37:55.561> with<04:37:55.719> an<04:37:55.840> uppercase<04:37:56.400> du<04:37:56.920> so

should be update with an uppercase du so

should be update with an uppercase du so
let's<04:37:57.320> do<04:37:57.439> it<04:37:57.600> that<04:37:57.799> way<04:37:58.480> and<04:37:58.639> now<04:37:58.959> we'll<04:37:59.119> have

let's do it that way and now we'll have

let's do it that way and now we'll have
to<04:37:59.359> focus<04:37:59.639> on<04:37:59.840> the<04:38:00.000> logic<04:38:00.520> of<04:38:00.840> updating<04:38:01.520> the

to focus on the logic of updating the

to focus on the logic of updating the
post<04:38:02.480> so<04:38:02.879> let's<04:38:03.119> do<04:38:03.359> that<04:38:03.600> next<04:38:04.439> to<04:38:05.080> implement

post so let's do that next to implement

post so let's do that next to implement
the<04:38:05.840> update<04:38:06.359> post<04:38:06.959> we<04:38:07.080> can<04:38:07.279> go<04:38:07.480> to<04:38:07.719> our<04:38:08.320> API<04:38:09.320> and

the update post we can go to our API and

the update post we can go to our API and
right<04:38:09.840> here<04:38:10.119> we<04:38:10.199> can<04:38:10.359> add<04:38:10.520> a<04:38:10.639> new<04:38:10.879> function

right here we can add a new function

right here we can add a new function
called<04:38:11.799> update<04:38:12.279> post<04:38:13.119> to<04:38:13.279> do<04:38:13.439> it<04:38:13.840> we<04:38:14.039> might<04:38:14.320> as

called update post to do it we might as

called update post to do it we might as
well<04:38:14.840> copy<04:38:15.320> the<04:38:15.600> initial<04:38:16.199> create<04:38:16.719> post<04:38:17.000> that

well copy the initial create post that

well copy the initial create post that
we<04:38:17.279> had<04:38:17.561> here<04:38:18.279> because<04:38:18.639> a<04:38:18.760> lot<04:38:18.920> of<04:38:19.039> the<04:38:19.199> logic

we had here because a lot of the logic

we had here because a lot of the logic
is<04:38:19.639> going<04:38:19.799> to<04:38:19.959> be<04:38:20.160> similar<04:38:21.080> so<04:38:21.320> let's<04:38:21.639> copy<04:38:21.920> it

is going to be similar so let's copy it

is going to be similar so let's copy it
and<04:38:22.760> then<04:38:23.000> paste<04:38:23.279> it<04:38:23.600> right<04:38:23.840> here<04:38:24.359> below<04:38:25.359> this

and then paste it right here below this

and then paste it right here below this
time<04:38:25.840> it's<04:38:26.000> going<04:38:26.160> to<04:38:26.279> be<04:38:26.439> called<04:38:26.840> update

time it's going to be called update

time it's going to be called update
post<04:38:29.799> and<04:38:30.000> we'll<04:38:30.199> have<04:38:30.320> to<04:38:30.439> get<04:38:30.561> the<04:38:30.680> entire

post and we'll have to get the entire

post and we'll have to get the entire
post<04:38:31.359> want<04:38:31.561> to<04:38:31.799> update<04:38:32.760> now<04:38:33.000> the<04:38:33.160> first<04:38:33.359> thing

post want to update now the first thing

post want to update now the first thing
we<04:38:33.600> want<04:38:33.719> to<04:38:33.879> do<04:38:34.160> is<04:38:34.279> we<04:38:34.400> want<04:38:34.480> to<04:38:34.561> figure<04:38:35.000> out

we want to do is we want to figure out

we want to do is we want to figure out
if<04:38:35.719> the<04:38:35.879> user<04:38:36.240> is<04:38:36.439> updating<04:38:37.080> the<04:38:37.760> contents<04:38:38.760> as

if the user is updating the contents as

if the user is updating the contents as
well<04:38:39.080> as<04:38:39.240> the<04:38:39.400> image<04:38:40.000> or<04:38:40.240> if<04:38:40.359> they're<04:38:40.639> updating

well as the image or if they're updating

well as the image or if they're updating
just<04:38:41.480> the<04:38:42.000> contents<04:38:43.000> so<04:38:43.199> we<04:38:43.279> can<04:38:43.400> say<04:38:43.680> const

just the contents so we can say const

just the contents so we can say const
has<04:38:44.920> file<04:38:45.719> to<04:38:46.279> update<04:38:47.240> and<04:38:47.359> that's<04:38:47.480> going<04:38:47.600> to

has file to update and that's going to

has file to update and that's going to
be<04:38:47.840> true<04:38:48.279> if<04:38:48.439> the<04:38:48.639> post.<04:38:49.480> file.<04:38:50.199> length<04:38:50.639> is

be true if the post. file. length is

be true if the post. file. length is
greater<04:38:51.199> than<04:38:51.359> one<04:38:52.279> this<04:38:52.400> can<04:38:52.600> be<04:38:52.840> above<04:38:53.279> the

greater than one this can be above the

greater than one this can be above the
try<04:38:53.760> and<04:38:54.039> catch<04:38:54.439> block<04:38:55.439> and<04:38:55.561> then<04:38:55.840> inside<04:38:56.160> of

try and catch block and then inside of

try and catch block and then inside of
the<04:38:56.439> try<04:38:57.080> we<04:38:57.199> can<04:38:57.359> form<04:38:57.760> this<04:38:57.959> new<04:38:58.199> image<04:38:58.719> by

the try we can form this new image by

the try we can form this new image by
saying<04:38:59.240> let<04:38:59.561> image<04:39:00.039> is<04:39:00.240> equal<04:39:00.561> to<04:39:01.320> image<04:39:01.600> URL

saying let image is equal to image URL

saying let image is equal to image URL
is<04:39:02.719> post.<04:39:03.600> image<04:39:03.879> URL<04:39:04.959> and<04:39:05.279> image<04:39:05.600> ID<04:39:06.119> is<04:39:06.359> post

is post. image URL and image ID is post

is post. image URL and image ID is post
that<04:39:07.080> image<04:39:07.520> ID<04:39:08.520> and<04:39:08.799> this<04:39:09.039> is<04:39:09.160> going<04:39:09.359> to<04:39:09.480> be<04:39:09.680> of

that image ID and this is going to be of

that image ID and this is going to be of
a<04:39:10.080> type<04:39:10.639> I<04:39:11.520> update<04:39:12.520> post<04:39:13.320> so<04:39:13.520> we<04:39:13.600> can<04:39:13.760> import<04:39:14.080> it

a type I update post so we can import it

a type I update post so we can import it
from<04:39:14.359> the<04:39:14.520> types<04:39:15.320> that<04:39:15.520> way<04:39:15.760> we<04:39:15.920> know<04:39:16.279> it's

from the types that way we know it's

from the types that way we know it's
going<04:39:16.600> to<04:39:16.760> contain<04:39:17.119> the<04:39:17.359> file<04:39:17.840> as<04:39:18.080> well<04:39:18.799> as

going to contain the file as well as

going to contain the file as well as
well<04:39:19.039> as<04:39:19.160> the<04:39:19.279> image<04:39:19.561> ID<04:39:19.920> and<04:39:20.039> the<04:39:20.160> image<04:39:20.480> URL

well as the image ID and the image URL

well as the image ID and the image URL
now<04:39:21.719> once<04:39:21.920> we<04:39:22.080> have<04:39:22.240> the<04:39:22.400> image<04:39:22.840> we<04:39:22.920> can<04:39:23.080> figure

now once we have the image we can figure

now once we have the image we can figure
out<04:39:23.799> if<04:39:24.199> the<04:39:24.320> user<04:39:24.840> has<04:39:25.039> a<04:39:25.279> file<04:39:25.561> to<04:39:26.119> update<04:39:27.119> and

out if the user has a file to update and

out if the user has a file to update and
if<04:39:27.520> they<04:39:27.680> do<04:39:28.400> we<04:39:28.520> can<04:39:28.680> open<04:39:29.080> this<04:39:29.240> block<04:39:29.760> and<04:39:29.879> we

if they do we can open this block and we

if they do we can open this block and we
can<04:39:30.119> slowly<04:39:30.520> start<04:39:30.799> adding<04:39:31.119> things<04:39:31.359> to<04:39:31.600> it<04:39:32.080> so

can slowly start adding things to it so

can slowly start adding things to it so
if<04:39:32.520> they<04:39:32.680> have<04:39:32.799> a<04:39:32.920> file<04:39:33.119> to<04:39:33.279> upload<04:39:33.840> we<04:39:33.959> want<04:39:34.080> to

if they have a file to upload we want to

if they have a file to upload we want to
get<04:39:34.600> the<04:39:34.879> uploaded<04:39:35.719> file<04:39:36.719> we<04:39:36.840> want<04:39:36.959> to<04:39:37.160> check

get the uploaded file we want to check

get the uploaded file we want to check
if<04:39:37.840> it's<04:39:38.400> there<04:39:39.400> we<04:39:39.480> want<04:39:39.600> to<04:39:39.760> get<04:39:39.920> the<04:39:40.040> file

if it's there we want to get the file

if it's there we want to get the file
URL<04:39:41.040> alongside<04:39:41.680> the<04:39:42.000> error<04:39:42.400> Handler<04:39:42.878> for<04:39:43.160> the

URL alongside the error Handler for the

URL alongside the error Handler for the
file<04:39:43.560> URL<04:39:44.240> put<04:39:44.440> all<04:39:44.600> of<04:39:44.760> that<04:39:45.080> above<04:39:46.080> and<04:39:46.240> then

file URL put all of that above and then

file URL put all of that above and then
finally<04:39:46.958> in<04:39:47.120> this<04:39:47.320> case<04:39:47.480> we<04:39:47.600> want<04:39:47.718> to<04:39:47.878> update

finally in this case we want to update

finally in this case we want to update
the<04:39:48.400> image<04:39:48.878> by<04:39:49.040> saying<04:39:49.400> image<04:39:49.840> is<04:39:50.040> equal<04:39:50.360> to<04:39:51.080> we

the image by saying image is equal to we

the image by saying image is equal to we
spread<04:39:51.760> the<04:39:51.920> existing<04:39:52.400> image<04:39:53.120> and<04:39:53.280> then

spread the existing image and then

spread the existing image and then
update<04:39:53.920> the<04:39:54.080> image<04:39:54.320> URL<04:39:55.040> with<04:39:55.280> a<04:39:55.480> new<04:39:55.798> file<04:39:56.120> URL

update the image URL with a new file URL

update the image URL with a new file URL
and<04:39:57.520> update<04:39:57.840> the<04:39:57.958> image<04:39:58.280> ID<04:39:59.040> with<04:39:59.240> a<04:39:59.520> new

and update the image ID with a new

and update the image ID with a new
uploaded<04:40:01.040> file.<04:40:02.000> doar<04:40:02.400> sign<04:40:02.760> ID<04:40:03.718> this<04:40:03.920> here<04:40:04.040> is

uploaded file. doar sign ID this here is

uploaded file. doar sign ID this here is
going<04:40:04.320> to<04:40:04.440> be<04:40:04.560> the<04:40:04.840> entire<04:40:05.760> image<04:40:06.760> and<04:40:06.958> the

going to be the entire image and the

going to be the entire image and the
image<04:40:07.440> has<04:40:07.560> to<04:40:07.680> be<04:40:07.840> reassign<04:40:08.638> so<04:40:08.798> it<04:40:08.958> has<04:40:09.080> to<04:40:09.240> be

image has to be reassign so it has to be

image has to be reassign so it has to be
led<04:40:10.320> but<04:40:10.520> it's<04:40:10.680> still<04:40:10.920> complaining<04:40:11.600> that

led but it's still complaining that

led but it's still complaining that
image<04:40:12.160> is<04:40:12.320> never<04:40:12.600> used<04:40:13.080> we're<04:40:13.200> going<04:40:13.280> to<04:40:13.440> use

image is never used we're going to use

image is never used we're going to use
it<04:40:13.840> really

it really

it really
soon<04:40:16.240> now<04:40:16.600> we<04:40:16.718> get<04:40:16.920> the<04:40:17.120> tags<04:40:17.718> same<04:40:18.000> things<04:40:18.360> as

soon now we get the tags same things as

soon now we get the tags same things as
before<04:40:19.360> and<04:40:19.480> then<04:40:19.600> we<04:40:19.680> want<04:40:19.798> to<04:40:19.920> save<04:40:20.200> the<04:40:20.320> post

before and then we want to save the post

before and then we want to save the post
of<04:40:20.680> the<04:40:20.878> database<04:40:21.680> but<04:40:21.920> this<04:40:22.160> time<04:40:22.360> it's<04:40:22.560> not

of the database but this time it's not

of the database but this time it's not
going<04:40:22.878> to<04:40:23.000> be<04:40:23.240> create<04:40:24.000> it's<04:40:24.200> going<04:40:24.360> to<04:40:24.520> be

going to be create it's going to be

going to be create it's going to be
update<04:40:26.638> once<04:40:26.840> we<04:40:27.000> update<04:40:27.320> it<04:40:27.600> we<04:40:27.718> want<04:40:27.840> to<04:40:28.120> get

update once we update it we want to get

update once we update it we want to get
the<04:40:28.360> same<04:40:28.638> databid<04:40:29.638> same<04:40:29.958> post<04:40:30.280> collection

the same databid same post collection

the same databid same post collection
but<04:40:31.280> this<04:40:31.480> time<04:40:31.760> we're<04:40:32.040> updating<04:40:32.440> an<04:40:32.638> already

but this time we're updating an already

but this time we're updating an already
existing<04:40:33.958> post<04:40:34.480> so<04:40:34.680> so<04:40:34.798> we<04:40:34.878> can<04:40:35.000> get<04:40:35.160> the<04:40:35.600> post.

existing post so so we can get the post.

existing post so so we can get the post.
poost<04:40:37.000> ID<04:40:37.798> right<04:40:38.040> here<04:40:39.040> and<04:40:39.160> then<04:40:39.360> here<04:40:39.520> we<04:40:39.600> can

poost ID right here and then here we can

poost ID right here and then here we can
Define<04:40:40.160> what<04:40:40.280> do<04:40:40.400> we<04:40:40.480> want<04:40:40.600> to<04:40:40.840> update<04:40:41.840> the

Define what do we want to update the

Define what do we want to update the
creator<04:40:42.798> doesn't<04:40:43.080> have<04:40:43.200> to<04:40:43.320> be<04:40:43.440> updated<04:40:44.040> it's

creator doesn't have to be updated it's

creator doesn't have to be updated it's
the<04:40:44.400> same<04:40:44.680> one<04:40:45.360> the<04:40:45.560> caption<04:40:45.878> is<04:40:46.040> post.

the same one the caption is post.

the same one the caption is post.
caption<04:40:47.240> image<04:40:47.480> URL<04:40:48.040> is<04:40:48.200> going<04:40:48.360> to<04:40:48.520> be<04:40:48.798> this

caption image URL is going to be this

caption image URL is going to be this
new<04:40:49.400> image<04:40:49.840> object<04:40:50.680> do<04:40:51.320> image<04:40:51.958> URL<04:40:52.958> image<04:40:53.280> ID

new image object do image URL image ID

new image object do image URL image ID
is<04:40:53.920> going<04:40:54.080> to<04:40:54.240> be<04:40:54.480> image<04:40:55.280> do<04:40:56.080> image

is going to be image do image

is going to be image do image
ID<04:40:58.360> location<04:40:58.878> is<04:40:59.040> the<04:40:59.200> same<04:40:59.440> and<04:40:59.600> tax<04:40:59.958> is<04:41:00.120> the

ID location is the same and tax is the

ID location is the same and tax is the
same<04:41:01.840> finally<04:41:02.480> if<04:41:02.638> we<04:41:02.798> don't<04:41:03.120> have<04:41:03.440> this<04:41:03.798> let's

same finally if we don't have this let's

same finally if we don't have this let's
call<04:41:04.160> it<04:41:04.280> an<04:41:04.400> up<04:41:04.680> upd<04:41:04.840> dated

call it an up upd dated

call it an up upd dated
post<04:41:07.280> then<04:41:07.600> we<04:41:07.760> can<04:41:08.120> await<04:41:08.798> delete<04:41:09.320> file<04:41:10.400> post.

post then we can await delete file post.

post then we can await delete file post.
image<04:41:11.840> ID<04:41:12.840> so<04:41:12.958> if<04:41:13.120> something<04:41:13.360> went<04:41:13.600> wrong

image ID so if something went wrong

image ID so if something went wrong
we're<04:41:14.040> deleting<04:41:14.560> the<04:41:14.718> file<04:41:15.638> else<04:41:16.080> we're

we're deleting the file else we're

we're deleting the file else we're
returning<04:41:16.878> the<04:41:17.120> updated

returning the updated

returning the updated
post<04:41:19.760> this<04:41:19.878> is<04:41:20.160> great<04:41:20.520> this<04:41:20.680> is<04:41:20.798> going<04:41:20.920> to

post this is great this is going to

post this is great this is going to
enable<04:41:21.400> us<04:41:21.560> to<04:41:21.878> update<04:41:22.240> the<04:41:22.440> post<04:41:23.120> and<04:41:23.320> while

enable us to update the post and while

enable us to update the post and while
we're<04:41:23.760> here<04:41:24.160> let's<04:41:24.440> also<04:41:24.878> implement<04:41:25.360> the

we're here let's also implement the

we're here let's also implement the
delete<04:41:25.958> post<04:41:26.638> that<04:41:26.840> way<04:41:27.320> all<04:41:27.560> of<04:41:27.718> the<04:41:27.878> cred

delete post that way all of the cred

delete post that way all of the cred
options<04:41:28.680> for<04:41:28.840> the<04:41:29.040> Post<04:41:29.440> are<04:41:29.600> going<04:41:29.680> to<04:41:29.840> be

options for the Post are going to be

options for the Post are going to be
complete<04:41:30.798> so<04:41:30.958> we<04:41:31.040> can<04:41:31.200> say<04:41:31.920> export<04:41:32.920> async

complete so we can say export async

complete so we can say export async
function<04:41:34.718> delete<04:41:35.360> post<04:41:36.360> to<04:41:36.520> delete<04:41:36.878> it<04:41:37.080> we

function delete post to delete it we

function delete post to delete it we
need<04:41:37.320> to<04:41:37.440> be<04:41:37.560> able<04:41:37.718> to<04:41:37.840> get<04:41:38.000> the<04:41:38.200> post<04:41:38.520> ID<04:41:39.080> of<04:41:39.240> a

need to be able to get the post ID of a

need to be able to get the post ID of a
type<04:41:39.680> string<04:41:40.638> and<04:41:40.878> an<04:41:41.120> image<04:41:41.480> ID<04:41:42.000> of<04:41:42.160> a<04:41:42.320> type

type string and an image ID of a type

type string and an image ID of a type
string<04:41:44.878> then<04:41:45.400> what<04:41:45.560> we<04:41:45.638> can<04:41:45.840> do<04:41:46.280> is<04:41:46.440> say<04:41:46.878> if

string then what we can do is say if

string then what we can do is say if
there<04:41:47.638> is<04:41:47.878> no<04:41:48.240> post<04:41:48.600> ID<04:41:49.520> or<04:41:49.840> if<04:41:50.000> there's<04:41:50.240> no

there is no post ID or if there's no

there is no post ID or if there's no
image<04:41:50.840> ID<04:41:51.400> we<04:41:51.520> can<04:41:51.680> throw<04:41:51.878> an<04:41:52.040> error<04:41:52.440> because

image ID we can throw an error because

image ID we can throw an error because
we<04:41:52.798> need<04:41:53.080> those<04:41:53.280> to<04:41:53.400> be<04:41:53.520> able<04:41:53.718> to<04:41:53.878> delete<04:41:54.160> a

we need those to be able to delete a

we need those to be able to delete a
post<04:41:55.240> and<04:41:55.360> we<04:41:55.520> also<04:41:55.680> need<04:41:55.798> to<04:41:55.958> delete<04:41:56.240> an<04:41:56.400> image

post and we also need to delete an image

post and we also need to delete an image
which<04:41:57.160> is<04:41:57.360> why<04:41:57.520> we<04:41:57.680> need<04:41:58.040> an<04:41:58.200> image

which is why we need an image

which is why we need an image
ID<04:42:00.080> then<04:42:00.480> we<04:42:00.600> can<04:42:00.760> go<04:42:00.878> to<04:42:01.040> the<04:42:01.160> try<04:42:01.400> and<04:42:01.680> catch

ID then we can go to the try and catch

ID then we can go to the try and catch
you<04:42:02.440> know<04:42:02.638> the<04:42:02.760> drill<04:42:03.360> in<04:42:03.480> the<04:42:03.680> catch<04:42:03.958> we<04:42:04.080> can

you know the drill in the catch we can

you know the drill in the catch we can
conso<04:42:04.680> log<04:42:04.920> the<04:42:05.040> error<04:42:06.000> and<04:42:06.200> in<04:42:06.360> the<04:42:06.520> try<04:42:06.920> we

conso log the error and in the try we

conso log the error and in the try we
can<04:42:07.160> say<04:42:07.920> await

can say await

can say await
databases.<04:42:10.798> delete<04:42:11.360> document<04:42:12.360> to<04:42:12.680> which<04:42:12.840> we

databases. delete document to which we

databases. delete document to which we
pass<04:42:13.520> the<04:42:13.958> database<04:42:14.760> ID<04:42:15.760> the<04:42:16.000> post<04:42:16.320> collection

pass the database ID the post collection

pass the database ID the post collection
ID<04:42:17.718> as<04:42:17.840> well<04:42:18.000> as<04:42:18.160> the<04:42:18.320> post<04:42:18.638> ID<04:42:19.080> that<04:42:19.200> we<04:42:19.320> want

ID as well as the post ID that we want

ID as well as the post ID that we want
to<04:42:19.840> delete<04:42:20.840> and<04:42:21.000> finally<04:42:21.560> we<04:42:21.680> can<04:42:22.000> return

to delete and finally we can return

to delete and finally we can return
something<04:42:22.680> like<04:42:22.878> a<04:42:23.120> status<04:42:23.878> that's<04:42:24.080> going<04:42:24.240> to

something like a status that's going to

something like a status that's going to
say<04:42:25.160> okay<04:42:26.080> there<04:42:26.240> we<04:42:26.400> go<04:42:26.958> so<04:42:27.160> now<04:42:27.280> we<04:42:27.400> have

say okay there we go so now we have

say okay there we go so now we have
delete<04:42:28.000> as<04:42:28.160> well<04:42:28.920> don't<04:42:29.120> forget<04:42:29.600> we<04:42:29.718> have<04:42:29.840> to

delete as well don't forget we have to

delete as well don't forget we have to
consume<04:42:30.600> this<04:42:30.958> within<04:42:31.200> a<04:42:31.360> react<04:42:32.200> query<04:42:33.200> so

consume this within a react query so

consume this within a react query so
let's<04:42:33.840> go<04:42:34.000> to<04:42:34.240> query<04:42:34.560> iies<04:42:35.120> and<04:42:35.878> mutations<04:42:36.878> and

let's go to query iies and mutations and

let's go to query iies and mutations and
before<04:42:37.480> creating<04:42:37.878> it<04:42:38.160> we<04:42:38.280> can<04:42:38.480> simply<04:42:38.958> copy

before creating it we can simply copy

before creating it we can simply copy
the<04:42:39.400> one<04:42:39.718> before<04:42:40.718> and<04:42:40.840> then<04:42:41.080> paste<04:42:41.320> it<04:42:41.560> here<04:42:42.000> we

the one before and then paste it here we

the one before and then paste it here we
can<04:42:42.240> rename<04:42:42.680> it<04:42:42.878> to<04:42:43.120> use<04:42:43.680> update<04:42:44.920> post<04:42:45.920> we

can rename it to use update post we

can rename it to use update post we
don't<04:42:46.240> need<04:42:46.400> to<04:42:46.560> get<04:42:46.760> anything<04:42:47.200> inside<04:42:47.560> of<04:42:47.718> it

don't need to get anything inside of it

don't need to get anything inside of it
in<04:42:48.718> this<04:42:48.920> case<04:42:49.120> it's<04:42:49.280> not<04:42:49.440> going<04:42:49.560> to<04:42:49.680> be<04:42:49.760> a

in this case it's not going to be a

in this case it's not going to be a
query<04:42:50.280> it's<04:42:50.520> going<04:42:50.638> to<04:42:50.760> be<04:42:50.840> a<04:42:50.958> mutation<04:42:51.680> so<04:42:51.840> we

query it's going to be a mutation so we

query it's going to be a mutation so we
can<04:42:52.080> say<04:42:52.360> const<04:42:53.080> query<04:42:53.520> client<04:42:54.480> is<04:42:54.718> equal<04:42:55.040> to

can say const query client is equal to

can say const query client is equal to
use<04:42:56.120> Query<04:42:56.520> client<04:42:57.440> and<04:42:57.638> then<04:42:58.040> use<04:42:58.638> mutation

use Query client and then use mutation

use Query client and then use mutation
instead<04:42:59.638> of<04:42:59.760> use<04:43:00.040> Query<04:43:00.840> because<04:43:01.560> this<04:43:01.680> is<04:43:01.840> a

instead of use Query because this is a

instead of use Query because this is a
mutation<04:43:02.718> an<04:43:02.958> update<04:43:03.440> not<04:43:03.600> a<04:43:03.760> fetch

mutation an update not a fetch

mutation an update not a fetch
then<04:43:05.480> we<04:43:05.638> don't<04:43:05.840> need<04:43:05.958> to<04:43:06.120> define<04:43:06.360> a<04:43:06.520> query<04:43:06.878> key

then we don't need to define a query key

then we don't need to define a query key
because<04:43:07.440> we're<04:43:07.600> doing<04:43:07.798> a<04:43:08.000> mutation<04:43:09.000> and<04:43:09.320> we

because we're doing a mutation and we

because we're doing a mutation and we
can<04:43:09.560> say<04:43:09.878> mutation<04:43:10.480> function<04:43:11.080> instead<04:43:11.320> of<04:43:11.400> a

can say mutation function instead of a

can say mutation function instead of a
query<04:43:12.360> function<04:43:13.360> in<04:43:13.560> this<04:43:13.798> case<04:43:14.080> we<04:43:14.200> need<04:43:14.320> to

query function in this case we need to

query function in this case we need to
get<04:43:14.600> the<04:43:14.840> post<04:43:15.798> because<04:43:16.000> we<04:43:16.120> need<04:43:16.240> to<04:43:16.360> know

get the post because we need to know

get the post because we need to know
what<04:43:17.080> are<04:43:17.240> we<04:43:17.440> updating<04:43:18.160> of<04:43:18.320> a<04:43:18.520> type<04:43:18.920> I<04:43:19.520> update

what are we updating of a type I update

what are we updating of a type I update
post<04:43:21.080> which<04:43:21.240> we<04:43:21.320> can<04:43:21.600> import<04:43:22.080> from<04:43:22.560> types<04:43:23.360> and

post which we can import from types and

post which we can import from types and
then<04:43:23.840> we<04:43:23.958> can<04:43:24.320> update<04:43:25.320> post<04:43:26.080> by<04:43:26.320> importing

then we can update post by importing

then we can update post by importing
this<04:43:27.000> from<04:43:27.360> aight<04:43:28.240> API<04:43:29.200> and<04:43:29.320> we<04:43:29.520> pass<04:43:29.798> the

this from aight API and we pass the

this from aight API and we pass the
entire

entire

entire
Post<04:43:32.120> finally<04:43:32.560> we<04:43:32.680> want<04:43:32.798> to<04:43:32.958> do<04:43:33.160> something<04:43:33.480> on

Post finally we want to do something on

Post finally we want to do something on
success<04:43:34.638> so<04:43:34.878> on<04:43:35.400> success<04:43:36.400> we're<04:43:36.600> going<04:43:36.798> to<04:43:37.400> get

success so on success we're going to get

success so on success we're going to get
all<04:43:37.920> the

all the

all the
data<04:43:40.040> and<04:43:40.160> then<04:43:40.320> call<04:43:40.560> the<04:43:40.718> query<04:43:41.160> client<04:43:42.160> do

data and then call the query client do

data and then call the query client do
invalidate<04:43:43.520> queries<04:43:44.240> so<04:43:44.440> if<04:43:44.560> we<04:43:44.760> update<04:43:45.080> a

invalidate queries so if we update a

invalidate queries so if we update a
post<04:43:45.718> we<04:43:45.840> need<04:43:45.958> to<04:43:46.240> update<04:43:47.160> the<04:43:47.320> query<04:43:47.760> key

post we need to update the query key

post we need to update the query key
under<04:43:49.480> query

under query

under query
keys.<04:43:51.920> get<04:43:52.280> post<04:43:52.840> by<04:43:53.080> ID<04:43:53.718> because<04:43:53.958> we<04:43:54.080> have

keys. get post by ID because we have

keys. get post by ID because we have
updated<04:43:54.718> it<04:43:55.040> and<04:43:55.160> if<04:43:55.240> you<04:43:55.400> go<04:43:55.560> to<04:43:55.680> the<04:43:55.840> Post

updated it and if you go to the Post

updated it and if you go to the Post
Details<04:43:56.638> page<04:43:57.160> it<04:43:57.320> needs<04:43:57.560> to<04:43:57.680> be<04:43:58.000> updated<04:43:59.000> and

Details page it needs to be updated and

Details page it needs to be updated and
we<04:43:59.320> can<04:43:59.480> now<04:43:59.718> duplicate<04:44:00.200> this

we can now duplicate this

we can now duplicate this
below<04:44:02.878> this<04:44:03.080> time<04:44:03.400> we<04:44:03.520> can<04:44:03.680> call<04:44:03.920> it<04:44:04.560> use

below this time we can call it use

below this time we can call it use
delete

delete

delete
Post<04:44:07.718> in<04:44:07.920> this<04:44:08.160> case<04:44:08.480> we<04:44:08.560> need<04:44:08.718> to<04:44:08.878> get<04:44:09.040> two

Post in this case we need to get two

Post in this case we need to get two
things<04:44:09.480> into<04:44:09.718> the<04:44:09.840> mutation<04:44:10.600> function<04:44:11.600> so

things into the mutation function so

things into the mutation function so
let's<04:44:12.040> define<04:44:12.400> them<04:44:12.638> properly<04:44:13.638> it's<04:44:13.798> going<04:44:13.958> to

let's define them properly it's going to

let's define them properly it's going to
be<04:44:14.200> an<04:44:14.440> object<04:44:14.958> of<04:44:15.360> post<04:44:15.798> ID<04:44:16.520> and<04:44:16.798> image

be an object of post ID and image

be an object of post ID and image
ID<04:44:18.798> and<04:44:18.958> that's<04:44:19.160> going<04:44:19.320> to<04:44:19.400> be<04:44:19.560> of<04:44:19.680> a<04:44:19.920> type<04:44:20.798> post

ID and that's going to be of a type post

ID and that's going to be of a type post
ID<04:44:21.480> is<04:44:21.600> a<04:44:21.760> a<04:44:21.958> type<04:44:22.160> string<04:44:23.120> and<04:44:23.440> image<04:44:23.760> ID<04:44:24.280> is<04:44:24.400> a

ID is a a type string and image ID is a

ID is a a type string and image ID is a
a<04:44:24.798> type<04:44:25.000> string<04:44:25.560> as<04:44:25.920> well<04:44:26.920> and<04:44:27.080> then<04:44:27.200> we<04:44:27.360> call

a type string as well and then we call

a type string as well and then we call
not<04:44:27.958> update<04:44:28.400> post<04:44:28.920> but<04:44:29.120> rather<04:44:29.440> delete

not update post but rather delete

not update post but rather delete
post<04:44:31.920> coming<04:44:32.240> from<04:44:32.600> ight<04:44:33.200> API<04:44:34.200> and<04:44:34.360> and<04:44:34.480> to<04:44:34.680> it

post coming from ight API and and to it

post coming from ight API and and to it
we<04:44:35.240> pass<04:44:35.440> a<04:44:35.638> post<04:44:35.920> ID<04:44:36.240> as<04:44:36.360> the<04:44:36.520> first<04:44:36.798> parameter

we pass a post ID as the first parameter

we pass a post ID as the first parameter
and<04:44:37.958> image<04:44:38.280> ID<04:44:38.878> as<04:44:39.040> the<04:44:39.520> second<04:44:40.520> finally<04:44:41.040> the

and image ID as the second finally the

and image ID as the second finally the
query<04:44:41.480> you<04:44:41.600> want<04:44:41.680> to<04:44:41.878> invalidate<04:44:42.600> here<04:44:43.120> is<04:44:43.920> get

query you want to invalidate here is get

query you want to invalidate here is get
recent<04:44:45.520> posts<04:44:46.360> because<04:44:46.718> in<04:44:46.878> case<04:44:47.080> we<04:44:47.240> delete<04:44:47.520> a

recent posts because in case we delete a

recent posts because in case we delete a
post<04:44:48.360> then<04:44:48.600> we<04:44:48.718> need<04:44:48.878> to<04:44:49.000> be<04:44:49.120> able<04:44:49.400> to<04:44:49.920> refetch

post then we need to be able to refetch

post then we need to be able to refetch
all<04:44:50.798> the<04:44:50.958> posts<04:44:51.200> on<04:44:51.320> the<04:44:51.480> homepage<04:44:52.200> to<04:44:52.400> show

all the posts on the homepage to show

all the posts on the homepage to show
all<04:44:53.160> the<04:44:53.320> new<04:44:53.600> posts<04:44:54.240> without<04:44:54.878> the<04:44:55.040> deleted

all the new posts without the deleted

all the new posts without the deleted
one<04:44:56.798> now<04:44:56.958> that<04:44:57.120> we<04:44:57.280> have<04:44:57.480> these<04:44:57.760> options<04:44:58.440> we

one now that we have these options we

one now that we have these options we
can<04:44:58.680> go<04:44:59.040> back<04:44:59.480> to<04:44:59.638> the<04:44:59.878> post<04:45:00.280> form<04:45:01.200> and<04:45:01.320> we<04:45:01.440> can

can go back to the post form and we can

can go back to the post form and we can
import<04:45:02.280> all<04:45:02.480> of<04:45:02.638> these<04:45:02.958> actions<04:45:03.320> or<04:45:03.520> mutations

import all of these actions or mutations

import all of these actions or mutations
from<04:45:05.120> react<04:45:05.718> query<04:45:06.718> so<04:45:07.120> right<04:45:07.360> here<04:45:08.200> below<04:45:09.040> the

from react query so right here below the

from react query so right here below the
use<04:45:09.798> create<04:45:10.200> post<04:45:11.200> we<04:45:11.320> can<04:45:11.440> do<04:45:11.638> something

use create post we can do something

use create post we can do something
similar<04:45:12.840> by<04:45:13.080> duplicating<04:45:13.878> this<04:45:14.080> entire<04:45:14.480> line

similar by duplicating this entire line

similar by duplicating this entire line
mutate<04:45:15.958> async<04:45:16.560> in<04:45:16.798> this<04:45:17.000> case<04:45:17.240> is<04:45:17.360> going<04:45:17.520> to<04:45:17.638> be

mutate async in this case is going to be

mutate async in this case is going to be
update

update

update
post<04:45:21.200> is<04:45:21.520> pending<04:45:22.080> is<04:45:22.280> going<04:45:22.440> to<04:45:22.600> be<04:45:23.200> is

post is pending is going to be is

post is pending is going to be is
loading

loading

loading
update<04:45:26.280> and<04:45:26.480> this<04:45:26.600> is<04:45:26.718> going<04:45:26.878> to<04:45:27.000> be<04:45:27.160> use

update and this is going to be use

update and this is going to be use
update<04:45:28.958> post<04:45:29.760> which<04:45:29.958> has<04:45:30.080> to<04:45:30.240> be<04:45:30.400> imported

update post which has to be imported

update post which has to be imported
from<04:45:31.080> queries<04:45:31.440> and

from queries and

from queries and
mutations<04:45:34.000> now<04:45:34.480> we<04:45:34.560> can<04:45:34.718> go<04:45:35.080> right<04:45:35.400> in<04:45:35.638> our

mutations now we can go right in our

mutations now we can go right in our
submit

submit

submit
Handler<04:45:38.320> and<04:45:38.480> we<04:45:38.600> can<04:45:38.760> check<04:45:39.600> at<04:45:39.718> the<04:45:40.400> Top<04:45:41.400> If

Handler and we can check at the Top If

Handler and we can check at the Top If
post<04:45:42.878> exists<04:45:43.878> and<04:45:44.440> if<04:45:44.718> action<04:45:45.400> is<04:45:45.600> triple

post exists and if action is triple

post exists and if action is triple
equal<04:45:46.280> to<04:45:46.440> the<04:45:46.638> update<04:45:47.120> with<04:45:47.280> a<04:45:47.520> capital<04:45:48.000> u<04:45:49.000> in

equal to the update with a capital u in

equal to the update with a capital u in
that<04:45:49.520> case<04:45:50.080> we<04:45:50.280> say<04:45:50.560> const<04:45:51.520> updated<04:45:52.120> post<04:45:52.798> is

that case we say const updated post is

that case we say const updated post is
equal

equal

equal
to

to

to
await<04:45:57.480> update

await update

await update
post<04:45:59.920> and<04:46:00.040> then<04:46:00.160> we<04:46:00.320> need<04:46:00.440> to<04:46:00.680> pass<04:46:00.920> all<04:46:01.080> of<04:46:01.240> the

post and then we need to pass all of the

post and then we need to pass all of the
options<04:46:01.718> in<04:46:01.878> it<04:46:02.520> this<04:46:02.760> update<04:46:03.160> post<04:46:03.520> is<04:46:03.680> coming

options in it this update post is coming

options in it this update post is coming
from<04:46:04.360> our<04:46:04.560> react<04:46:04.958> query<04:46:05.680> and<04:46:05.878> of<04:46:06.080> course<04:46:06.440> it's

from our react query and of course it's

from our react query and of course it's
doing<04:46:07.360> the<04:46:07.638> action<04:46:08.120> from<04:46:08.840> aight

doing the action from aight

doing the action from aight
API<04:46:11.760> so<04:46:12.000> now<04:46:13.000> we<04:46:13.120> need<04:46:13.280> to<04:46:13.520> pass<04:46:13.920> do<04:46:14.240> do<04:46:14.480> dot

API so now we need to pass do do dot

API so now we need to pass do do dot
values<04:46:15.480> meaning<04:46:15.920> everything<04:46:16.320> about<04:46:16.600> that

values meaning everything about that

values meaning everything about that
post<04:46:17.400> we<04:46:17.560> also<04:46:17.798> need<04:46:17.958> to<04:46:18.160> pass<04:46:18.400> the<04:46:18.560> post<04:46:18.878> ID<04:46:19.360> of

post we also need to pass the post ID of

post we also need to pass the post ID of
the<04:46:19.638> post<04:46:19.920> we're<04:46:20.120> updating<04:46:20.920> by<04:46:21.040> saying<04:46:21.400> post.

the post we're updating by saying post.

the post we're updating by saying post.
dollar<04:46:22.400> sign<04:46:22.760> ID<04:46:23.760> we<04:46:23.878> can<04:46:24.080> pass<04:46:24.360> the<04:46:24.600> image<04:46:25.200> ID

dollar sign ID we can pass the image ID

dollar sign ID we can pass the image ID
by<04:46:26.120> saying<04:46:26.600> post<04:46:27.280> question<04:46:27.638> mark.<04:46:28.120> image<04:46:28.558> ID

by saying post question mark. image ID

by saying post question mark. image ID
as<04:46:29.718> well<04:46:29.878> as<04:46:30.040> the<04:46:30.200> image<04:46:30.600> URL<04:46:31.600> which<04:46:31.718> is<04:46:31.840> going

as well as the image URL which is going

as well as the image URL which is going
to<04:46:32.120> be<04:46:32.400> post.<04:46:33.320> image<04:46:33.638> URL

to be post. image URL

to be post. image URL
finally<04:46:36.798> if<04:46:36.958> we<04:46:37.160> don't<04:46:37.600> have<04:46:37.798> the<04:46:37.958> updated

finally if we don't have the updated

finally if we don't have the updated
post<04:46:39.000> meaning<04:46:39.400> something<04:46:39.680> went<04:46:40.280> wrong<04:46:41.280> it

post meaning something went wrong it

post meaning something went wrong it
should<04:46:41.558> say<04:46:41.760> updated

should say updated

should say updated
post<04:46:44.120> then<04:46:44.360> we<04:46:44.480> can<04:46:44.680> release<04:46:45.080> a<04:46:45.320> toast<04:46:46.280> saying

post then we can release a toast saying

post then we can release a toast saying
something<04:46:47.520> like<04:46:48.520> title

something like title

something like title
is<04:46:50.878> please<04:46:51.240> try<04:46:51.638> again<04:46:52.638> and<04:46:52.878> if<04:46:53.000> it<04:46:53.200> succeeds

is please try again and if it succeeds

is please try again and if it succeeds
we<04:46:54.000> can<04:46:54.400> return<04:46:55.760> navigate<04:46:56.760> this<04:46:56.958> time<04:46:57.120> we're

we can return navigate this time we're

we can return navigate this time we're
going<04:46:57.440> to<04:46:57.600> forward<04:46:57.958> SL<04:46:58.400> poost<04:46:59.360> slash

going to forward SL poost slash

going to forward SL poost slash
poost<04:47:01.878> do<04:47:02.160> doll<04:47:02.480> sign<04:47:02.680> ID<04:47:03.400> so<04:47:03.600> no<04:47:03.760> longer<04:47:04.160> are

poost do doll sign ID so no longer are

poost do doll sign ID so no longer are
we<04:47:04.400> going<04:47:04.558> to<04:47:04.718> the<04:47:04.878> homepage<04:47:05.680> to<04:47:05.840> see<04:47:06.080> the<04:47:06.200> new

we going to the homepage to see the new

we going to the homepage to see the new
post<04:47:06.680> we<04:47:06.840> created<04:47:07.440> we're<04:47:07.680> going<04:47:07.878> to<04:47:08.120> the

post we created we're going to the

post we created we're going to the
details<04:47:08.798> of<04:47:09.000> that<04:47:09.240> page<04:47:09.680> to<04:47:09.878> see<04:47:10.280> that<04:47:10.520> it<04:47:10.638> was

details of that page to see that it was

details of that page to see that it was
successfully<04:47:11.558> updated<04:47:12.558> great<04:47:13.480> because<04:47:13.718> we

successfully updated great because we

successfully updated great because we
have<04:47:14.040> this<04:47:14.320> return<04:47:14.638> here<04:47:15.120> we<04:47:15.280> don't<04:47:15.520> have<04:47:15.638> to

have this return here we don't have to

have this return here we don't have to
wrap<04:47:16.080> this<04:47:16.160> in<04:47:16.320> an<04:47:16.480> else<04:47:17.240> because<04:47:17.718> once<04:47:17.920> we

wrap this in an else because once we

wrap this in an else because once we
update<04:47:18.958> it's<04:47:19.120> going<04:47:19.320> to<04:47:19.440> do<04:47:19.718> this<04:47:20.320> and<04:47:20.680> exit<04:47:21.680> if

update it's going to do this and exit if

update it's going to do this and exit if
it's<04:47:21.958> not<04:47:22.240> update<04:47:22.878> it's<04:47:23.040> going<04:47:23.200> to<04:47:23.360> do<04:47:23.600> this

it's not update it's going to do this

it's not update it's going to do this
immediately<04:47:25.320> great<04:47:26.320> so<04:47:26.558> now<04:47:26.798> if<04:47:26.920> we<04:47:27.080> save<04:47:27.400> this

immediately great so now if we save this

immediately great so now if we save this
we're<04:47:27.920> successfully<04:47:28.600> doing<04:47:28.958> the<04:47:29.200> update

we're successfully doing the update

we're successfully doing the update
action<04:47:30.680> so<04:47:30.878> let's<04:47:31.040> try<04:47:31.200> to<04:47:31.360> say<04:47:31.680> something

action so let's try to say something

action so let's try to say something
like<04:47:32.558> let's<04:47:32.760> say<04:47:33.000> the<04:47:33.160> course<04:47:33.440> got<04:47:33.638> updated<04:47:34.240> to

like let's say the course got updated to

like let's say the course got updated to
version

version

version
13.6<04:47:37.320> and<04:47:37.480> we<04:47:37.600> want<04:47:37.718> to<04:47:37.920> add<04:47:38.160> a<04:47:38.320> URL<04:47:38.878> so<04:47:39.000> we<04:47:39.120> can

13.6 and we want to add a URL so we can

13.6 and we want to add a URL so we can
say<04:47:39.440> URL<04:47:40.120> is<04:47:40.360> JS<04:47:40.760> mastery.<04:47:41.558> proo<04:47:42.360> we<04:47:42.480> can<04:47:42.638> leave

say URL is JS mastery. proo we can leave

say URL is JS mastery. proo we can leave
the<04:47:43.000> location<04:47:43.440> and<04:47:43.638> this<04:47:43.920> the<04:47:44.040> same<04:47:44.520> but<04:47:44.680> it

the location and this the same but it

the location and this the same but it
says<04:47:45.040> submit<04:47:45.718> maybe<04:47:45.958> it<04:47:46.040> should<04:47:46.200> say

says submit maybe it should say

says submit maybe it should say
something<04:47:46.878> else<04:47:47.520> so<04:47:47.718> if<04:47:47.798> we<04:47:48.000> go<04:47:48.240> down<04:47:48.440> to<04:47:48.600> the

something else so if we go down to the

something else so if we go down to the
button<04:47:50.160> in<04:47:50.360> the<04:47:50.520> button<04:47:51.240> sometimes<04:47:51.440> we<04:47:51.558> need

button in the button sometimes we need

button in the button sometimes we need
to<04:47:51.840> disable<04:47:52.280> it<04:47:52.760> when<04:47:53.000> it's<04:47:53.200> currently

to disable it when it's currently

to disable it when it's currently
loading<04:47:54.280> so<04:47:54.440> we<04:47:54.520> can<04:47:54.638> give<04:47:54.760> it<04:47:54.878> a<04:47:55.040> disabled

loading so we can give it a disabled

loading so we can give it a disabled
State<04:47:56.360> and<04:47:56.600> say<04:47:57.080> if<04:47:57.400> is<04:47:57.558> loading<04:47:57.958> create<04:47:58.558> or<04:47:58.920> is

State and say if is loading create or is

State and say if is loading create or is
loading<04:47:59.600> update<04:48:00.280> then<04:48:00.440> we<04:48:00.520> want<04:48:00.638> to<04:48:00.760> disable

loading update then we want to disable

loading update then we want to disable
the<04:48:01.320> button<04:48:01.600> so<04:48:01.798> the<04:48:01.878> user<04:48:02.200> cannot<04:48:02.520> just<04:48:02.718> mash

the button so the user cannot just mash

the button so the user cannot just mash
it<04:48:03.200> multiple<04:48:03.680> times

it multiple times

it multiple times
and<04:48:05.160> the<04:48:05.320> button<04:48:05.798> can<04:48:06.000> say<04:48:06.360> something<04:48:06.840> like

and the button can say something like

and the button can say something like
this<04:48:08.360> if<04:48:08.480> it's<04:48:08.638> loading<04:48:09.280> and<04:48:09.440> if<04:48:09.520> it's

this if it's loading and if it's

this if it's loading and if it's
disabled<04:48:10.400> the<04:48:10.520> button<04:48:10.760> should<04:48:10.958> render<04:48:11.280> the

disabled the button should render the

disabled the button should render the
loader<04:48:12.120> so<04:48:12.280> we<04:48:12.360> can<04:48:12.680> say<04:48:13.680> if<04:48:14.000> is<04:48:14.240> loading

loader so we can say if is loading

loader so we can say if is loading
create<04:48:15.520> or<04:48:15.840> is<04:48:16.000> loading<04:48:16.558> update<04:48:17.558> then<04:48:17.840> we<04:48:17.958> want

create or is loading update then we want

create or is loading update then we want
to<04:48:18.200> Simply<04:48:19.120> return<04:48:20.120> the<04:48:20.280> loading<04:48:20.680> State<04:48:21.638> like

to Simply return the loading State like

to Simply return the loading State like
so<04:48:23.878> and<04:48:24.160> if<04:48:24.280> it<04:48:24.440> is<04:48:24.600> loading<04:48:25.120> it<04:48:25.240> can<04:48:25.400> say

so and if it is loading it can say

so and if it is loading it can say
something<04:48:25.920> like<04:48:26.200> post<04:48:27.200> but<04:48:27.400> it<04:48:27.520> can<04:48:27.638> be<04:48:27.798> an

something like post but it can be an

something like post but it can be an
action<04:48:28.798> so<04:48:28.920> it's<04:48:29.080> going<04:48:29.240> to<04:48:29.440> either<04:48:29.718> say

action so it's going to either say

action so it's going to either say
create<04:48:31.400> if<04:48:31.520> we're<04:48:31.840> creating<04:48:33.000> or

create if we're creating or

create if we're creating or
update<04:48:35.320> if<04:48:35.440> we're<04:48:35.718> updating<04:48:36.680> so<04:48:36.878> let's<04:48:37.080> just

update if we're updating so let's just

update if we're updating so let's just
ensure<04:48:37.718> that<04:48:37.840> on<04:48:38.000> the<04:48:38.160> create<04:48:38.558> post<04:48:39.080> we're

ensure that on the create post we're

ensure that on the create post we're
properly<04:48:39.798> passing<04:48:40.240> it<04:48:41.240> here<04:48:41.558> we're<04:48:41.760> not<04:48:42.240> so<04:48:42.360> we

properly passing it here we're not so we

properly passing it here we're not so we
need<04:48:42.558> to<04:48:42.760> pass<04:48:42.920> an<04:48:43.160> action<04:48:43.760> equal<04:48:44.120> to

need to pass an action equal to

need to pass an action equal to
create<04:48:46.680> and<04:48:46.920> now<04:48:47.480> if<04:48:47.558> we<04:48:47.760> go<04:48:48.200> back<04:48:49.200> as<04:48:49.320> you<04:48:49.440> can

create and now if we go back as you can

create and now if we go back as you can
see<04:48:50.000> on<04:48:50.280> update<04:48:50.878> we<04:48:51.000> can<04:48:51.120> see<04:48:51.400> update<04:48:51.840> post<04:48:52.840> I'm

see on update we can see update post I'm

see on update we can see update post I'm
not<04:48:53.120> going<04:48:53.240> to<04:48:53.400> go<04:48:53.600> back<04:48:53.840> now<04:48:54.000> to<04:48:54.160> show<04:48:54.320> you<04:48:54.440> the

not going to go back now to show you the

not going to go back now to show you the
create<04:48:55.200> but<04:48:55.440> you<04:48:55.558> can<04:48:55.760> trust<04:48:56.040> me<04:48:56.280> that<04:48:56.440> on

create but you can trust me that on

create but you can trust me that on
create<04:48:57.240> it's<04:48:57.400> going<04:48:57.558> to<04:48:57.680> say<04:48:58.120> create<04:48:59.120> now

create it's going to say create now

create it's going to say create now
modify<04:48:59.798> your<04:49:00.000> original<04:49:00.480> post<04:49:01.080> and<04:49:01.360> let's<04:49:01.798> give

modify your original post and let's give

modify your original post and let's give
it<04:49:02.080> a<04:49:02.280> run<04:49:03.080> click<04:49:03.440> update<04:49:04.040> post<04:49:04.360> and<04:49:04.520> let's<04:49:04.718> see

it a run click update post and let's see

it a run click update post and let's see
what<04:49:05.558> happens<04:49:06.558> it<04:49:06.680> says<04:49:06.920> loading<04:49:07.558> update<04:49:08.480> post

what happens it says loading update post

what happens it says loading update post
and<04:49:09.680> we<04:49:09.798> got<04:49:10.040> redirected<04:49:10.840> to<04:49:11.040> the<04:49:11.240> post

and we got redirected to the post

and we got redirected to the post
Details<04:49:12.120> page<04:49:12.878> exactly<04:49:13.400> as<04:49:13.520> we<04:49:13.680> wanted<04:49:14.440> just

Details page exactly as we wanted just

Details page exactly as we wanted just
to<04:49:14.798> verify<04:49:15.240> that<04:49:15.360> the<04:49:15.520> post<04:49:15.878> indeed<04:49:16.440> did<04:49:16.718> get

to verify that the post indeed did get

to verify that the post indeed did get
updated<04:49:17.798> we<04:49:17.920> can<04:49:18.080> go<04:49:18.240> to<04:49:18.400> our<04:49:19.040> posts<04:49:20.040> and<04:49:20.160> we

updated we can go to our posts and we

updated we can go to our posts and we
can<04:49:20.400> see<04:49:20.760> if<04:49:20.920> the<04:49:21.120> caption<04:49:21.798> contains<04:49:22.360> what<04:49:22.520> we

can see if the caption contains what we

can see if the caption contains what we
added<04:49:24.000> so<04:49:24.240> that's<04:49:24.440> going<04:49:24.600> to<04:49:24.718> be<04:49:24.920> in<04:49:25.120> the<04:49:25.600> data

added so that's going to be in the data

added so that's going to be in the data
and<04:49:26.718> we<04:49:26.798> can<04:49:26.958> see<04:49:27.240> that<04:49:27.520> indeed<04:49:28.200> it<04:49:28.360> does<04:49:29.120> so

and we can see that indeed it does so

and we can see that indeed it does so
this<04:49:29.638> is<04:49:30.080> great<04:49:30.878> so<04:49:31.160> immediately<04:49:31.680> the<04:49:31.840> next

this is great so immediately the next

this is great so immediately the next
reasonable<04:49:32.680> step<04:49:33.080> is<04:49:33.200> to<04:49:33.400> implement<04:49:34.160> the<04:49:34.440> post

reasonable step is to implement the post

reasonable step is to implement the post
Details<04:49:35.440> page<04:49:36.240> as<04:49:36.480> now<04:49:36.760> our<04:49:36.958> homepage<04:49:37.360> is

Details page as now our homepage is

Details page as now our homepage is
looking<04:49:37.798> pretty<04:49:38.080> good<04:49:38.558> and<04:49:38.760> the<04:49:38.958> actions<04:49:39.360> are

looking pretty good and the actions are

looking pretty good and the actions are
there<04:49:39.958> as<04:49:40.160> well<04:49:40.878> so<04:49:41.320> let's<04:49:41.520> focus<04:49:41.958> on<04:49:42.120> the<04:49:42.280> post

there as well so let's focus on the post

there as well so let's focus on the post
Details<04:49:43.120> page<04:49:43.480> next<04:49:44.160> by<04:49:44.400> going<04:49:44.638> to<04:49:45.320> post

Details page next by going to post

Details page next by going to post
details<04:49:47.440> and<04:49:47.718> implementing<04:49:48.520> its<04:49:49.040> UI<04:49:50.040> to

details and implementing its UI to

details and implementing its UI to
implement<04:49:50.878> the<04:49:51.000> post<04:49:51.360> details<04:49:52.040> we<04:49:52.240> first<04:49:52.520> have

implement the post details we first have

implement the post details we first have
to<04:49:52.920> fetch<04:49:53.638> the<04:49:53.840> post<04:49:54.160> details<04:49:54.840> from<04:49:55.080> the

to fetch the post details from the

to fetch the post details from the
database<04:49:56.200> and<04:49:56.400> the<04:49:56.600> way<04:49:56.920> in<04:49:57.080> which<04:49:57.240> we<04:49:57.360> can<04:49:57.480> do

database and the way in which we can do

database and the way in which we can do
that<04:49:58.440> is<04:49:58.878> by<04:49:59.040> saying<04:49:59.920> const

that is by saying const

that is by saying const
data<04:50:02.520> which<04:50:02.680> we<04:50:02.760> can<04:50:02.920> rename<04:50:03.280> to<04:50:03.480> post

data which we can rename to post

data which we can rename to post
as<04:50:04.480> well<04:50:04.638> as<04:50:04.840> is<04:50:05.040> loading<04:50:05.718> or<04:50:05.920> in<04:50:06.080> this<04:50:06.240> case<04:50:06.520> is

as well as is loading or in this case is

as well as is loading or in this case is
pending<04:50:07.360> because<04:50:07.520> we're<04:50:07.718> using<04:50:08.200> react<04:50:08.638> query

pending because we're using react query

pending because we're using react query
version<04:50:09.400> 5<04:50:10.240> is<04:50:10.480> equal<04:50:10.798> to<04:50:11.600> use<04:50:12.440> get<04:50:13.120> post<04:50:13.798> by<04:50:14.200> ID

version 5 is equal to use get post by ID

version 5 is equal to use get post by ID
coming<04:50:15.280> from<04:50:15.558> queries<04:50:16.080> and<04:50:16.440> mutations<04:50:17.440> to

coming from queries and mutations to

coming from queries and mutations to
which<04:50:18.280> we<04:50:18.400> need<04:50:18.558> to<04:50:18.718> pass<04:50:19.000> the

which we need to pass the

which we need to pass the
ID<04:50:20.840> the<04:50:21.000> ID<04:50:21.558> is<04:50:21.718> coming<04:50:22.000> from<04:50:22.200> use<04:50:22.558> perams<04:50:23.400> so

ID the ID is coming from use perams so

ID the ID is coming from use perams so
we<04:50:23.680> can<04:50:23.840> immediately<04:50:24.718> import<04:50:25.718> use<04:50:26.638> perams

we can immediately import use perams

we can immediately import use perams
which<04:50:27.798> is<04:50:28.000> coming<04:50:28.280> from<04:50:28.638> react<04:50:29.080> router<04:50:29.480> Dom

which is coming from react router Dom

which is coming from react router Dom
and<04:50:30.558> then<04:50:30.718> we<04:50:30.798> can<04:50:30.920> say<04:50:31.200> const<04:50:31.958> ID<04:50:32.840> is<04:50:33.120> equal<04:50:33.440> to

and then we can say const ID is equal to

and then we can say const ID is equal to
use<04:50:35.120> for<04:50:35.760> Rams<04:50:36.760> and<04:50:37.000> that<04:50:37.200> ID<04:50:37.760> can<04:50:38.160> sometimes

use for Rams and that ID can sometimes

use for Rams and that ID can sometimes
be<04:50:38.718> an<04:50:38.878> empty<04:50:39.240> string<04:50:40.000> like<04:50:40.160> so<04:50:40.638> in<04:50:40.798> case<04:50:41.000> we

be an empty string like so in case we

be an empty string like so in case we
didn't<04:50:41.320> get<04:50:41.480> fetch<04:50:41.680> it<04:50:41.798> from<04:50:41.958> the<04:50:42.320> perams

didn't get fetch it from the perams

didn't get fetch it from the perams
great<04:50:44.080> so<04:50:44.320> now<04:50:44.558> we<04:50:44.680> have<04:50:44.798> the<04:50:44.958> F<04:50:45.360> data<04:50:46.120> let's<04:50:46.360> go

great so now we have the F data let's go

great so now we have the F data let's go
ahead<04:50:46.920> and<04:50:47.080> use<04:50:47.320> it<04:50:47.718> within<04:50:47.958> our<04:50:48.520> UI<04:50:49.520> right

ahead and use it within our UI right

ahead and use it within our UI right
here<04:50:50.280> we<04:50:50.400> can<04:50:50.600> wrap<04:50:51.040> everything<04:50:51.320> in<04:50:51.440> a<04:50:51.638> div

here we can wrap everything in a div

here we can wrap everything in a div
that<04:50:52.280> has<04:50:52.440> a<04:50:52.760> class<04:50:53.160> name<04:50:53.760> equal<04:50:54.080> to<04:50:54.600> postore

that has a class name equal to postore

that has a class name equal to postore
details<04:50:56.798> Das

details Das

details Das
container<04:50:58.840> inside<04:50:59.120> of<04:50:59.280> this<04:50:59.520> div<04:50:59.958> we<04:51:00.040> can

container inside of this div we can

container inside of this div we can
check<04:51:00.638> if<04:51:00.840> we<04:51:01.000> are<04:51:01.320> currently<04:51:01.718> loading<04:51:02.400> so<04:51:02.558> we

check if we are currently loading so we

check if we are currently loading so we
can<04:51:02.798> say<04:51:03.120> if<04:51:03.480> is<04:51:04.200> pending<04:51:05.200> in<04:51:05.400> that<04:51:05.600> case<04:51:05.798> we

can say if is pending in that case we

can say if is pending in that case we
want<04:51:06.040> to<04:51:06.360> return<04:51:06.958> a<04:51:07.160> self-closing<04:51:08.080> loader

want to return a self-closing loader

want to return a self-closing loader
component<04:51:09.360> which<04:51:09.520> we<04:51:09.600> can<04:51:09.840> import<04:51:10.320> from

component which we can import from

component which we can import from
components<04:51:11.240> loader<04:51:12.240> else<04:51:12.840> we<04:51:12.920> can<04:51:13.240> return<04:51:13.558> a

components loader else we can return a

components loader else we can return a
div<04:51:14.680> that<04:51:14.920> has<04:51:15.240> a<04:51:15.520> class<04:51:15.920> name<04:51:16.680> equal<04:51:17.000> to

div that has a class name equal to

div that has a class name equal to
postore<04:51:18.718> details<04:51:19.638> dcard<04:51:20.638> this<04:51:20.760> is<04:51:20.878> going<04:51:21.040> to

postore details dcard this is going to

postore details dcard this is going to
create<04:51:21.638> this<04:51:21.920> rectangle<04:51:22.480> that<04:51:22.600> you<04:51:22.680> can<04:51:22.920> see

create this rectangle that you can see

create this rectangle that you can see
within<04:51:24.200> it<04:51:24.480> we<04:51:24.558> can<04:51:24.760> immediately<04:51:25.280> render<04:51:25.878> the

within it we can immediately render the

within it we can immediately render the
Creator<04:51:26.480> image<04:51:27.360> as<04:51:27.480> a<04:51:27.600> matter<04:51:27.920> of<04:51:28.120> fact<04:51:28.440> a<04:51:28.558> lot

Creator image as a matter of fact a lot

Creator image as a matter of fact a lot
of<04:51:28.920> things<04:51:29.440> from<04:51:29.760> the<04:51:29.920> homepage<04:51:30.638> which<04:51:30.798> we<04:51:30.878> can

of things from the homepage which we can

of things from the homepage which we can
see<04:51:31.320> right<04:51:31.558> here<04:51:32.040> like<04:51:32.280> the<04:51:32.520> Creator<04:51:33.040> image

see right here like the Creator image

see right here like the Creator image
and<04:51:33.520> all<04:51:33.718> all<04:51:33.798> of<04:51:33.958> these<04:51:34.160> details<04:51:34.878> can<04:51:35.040> be

and all all of these details can be

and all all of these details can be
taken<04:51:35.558> from<04:51:35.840> there<04:51:36.480> so<04:51:36.798> let's<04:51:37.080> go<04:51:37.280> to<04:51:37.558> our<04:51:37.958> home

taken from there so let's go to our home

taken from there so let's go to our home
and<04:51:38.878> then<04:51:39.000> we're<04:51:39.080> going<04:51:39.200> to<04:51:39.320> go<04:51:39.440> to<04:51:39.600> the<04:51:39.798> post

and then we're going to go to the post

and then we're going to go to the post
card<04:51:41.798> and<04:51:42.080> we<04:51:42.160> can<04:51:42.480> copy<04:51:43.400> this<04:51:43.760> div<04:51:44.320> that

card and we can copy this div that

card and we can copy this div that
contains<04:51:44.920> the<04:51:45.080> link<04:51:46.000> with<04:51:46.200> all<04:51:46.360> of<04:51:46.520> the

contains the link with all of the

contains the link with all of the
profile<04:51:47.280> details<04:51:48.280> so<04:51:48.480> let's<04:51:48.760> copy<04:51:49.000> it<04:51:49.920> all<04:51:50.200> the

profile details so let's copy it all the

profile details so let's copy it all the
way<04:51:50.520> to<04:51:51.000> here<04:51:52.000> and<04:51:52.160> then<04:51:52.320> we<04:51:52.440> can<04:51:52.718> paste<04:51:53.000> it

way to here and then we can paste it

way to here and then we can paste it
right<04:51:53.718> here<04:51:53.958> within<04:51:54.360> post<04:51:55.160> details<04:51:56.160> instead

right here within post details instead

right here within post details instead
of<04:51:56.600> this<04:51:56.760> image<04:51:57.000> that<04:51:57.160> we<04:51:57.280> just

of this image that we just

of this image that we just
added<04:51:59.120> there<04:51:59.320> we<04:51:59.520> go<04:51:59.798> I<04:51:59.878> can<04:52:00.040> indent<04:52:00.400> it

added there we go I can indent it

added there we go I can indent it
properly<04:52:02.400> we<04:52:02.520> have<04:52:02.638> to<04:52:02.878> import<04:52:03.320> link<04:52:04.080> coming

properly we have to import link coming

properly we have to import link coming
from<04:52:04.840> react<04:52:05.240> router<04:52:05.638> Dom<04:52:06.360> so<04:52:06.558> let's<04:52:06.760> get<04:52:06.878> it

from react router Dom so let's get it

from react router Dom so let's get it
right

right

right
here<04:52:08.920> we<04:52:09.040> can<04:52:09.200> also<04:52:09.440> notice<04:52:09.760> that<04:52:10.040> post<04:52:10.760> is

here we can also notice that post is

here we can also notice that post is
possibly

possibly

possibly
undefined<04:52:13.200> so<04:52:13.400> whenever<04:52:13.718> we're<04:52:13.920> talking

undefined so whenever we're talking

undefined so whenever we're talking
about<04:52:14.400> a<04:52:14.600> post<04:52:15.000> we<04:52:15.080> have<04:52:15.200> to<04:52:15.360> add<04:52:15.520> a<04:52:15.760> question

about a post we have to add a question

about a post we have to add a question
mark<04:52:16.600> after<04:52:17.400> so<04:52:17.680> question<04:52:17.958> mark<04:52:18.360> here<04:52:19.360> here<04:52:19.958> as

mark after so question mark here here as

mark after so question mark here here as
well<04:52:21.080> and<04:52:21.480> here<04:52:22.000> with<04:52:22.200> the<04:52:22.360> location<04:52:23.280> and<04:52:23.440> we

well and here with the location and we

well and here with the location and we
have<04:52:23.680> to<04:52:23.878> import<04:52:24.280> the<04:52:24.480> format<04:52:24.958> date<04:52:25.558> right

have to import the format date right

have to import the format date right
here<04:52:26.718> now<04:52:27.120> if<04:52:27.240> we<04:52:27.360> go<04:52:27.718> back<04:52:28.718> to<04:52:28.920> the<04:52:29.040> post

here now if we go back to the post

here now if we go back to the post
details<04:52:30.080> you<04:52:30.200> can<04:52:30.320> see<04:52:30.600> we<04:52:30.760> have<04:52:31.000> this<04:52:31.320> the

details you can see we have this the

details you can see we have this the
real<04:52:32.000> JSM<04:52:32.958> this<04:52:33.200> is<04:52:33.878> great<04:52:34.878> but<04:52:35.040> in<04:52:35.240> this<04:52:35.440> case

real JSM this is great but in this case

real JSM this is great but in this case
we<04:52:35.718> want<04:52:35.878> to<04:52:36.000> show<04:52:36.240> it<04:52:36.558> after<04:52:36.878> the<04:52:37.120> post<04:52:37.680> so<04:52:37.798> we

we want to show it after the post so we

we want to show it after the post so we
can<04:52:38.080> go<04:52:38.360> above<04:52:39.200> in<04:52:39.360> the<04:52:39.520> post<04:52:39.798> details<04:52:40.280> card

can go above in the post details card

can go above in the post details card
and<04:52:41.200> immediately<04:52:41.840> here<04:52:42.280> render<04:52:42.760> a

and immediately here render a

and immediately here render a
self-closing

self-closing

self-closing
image<04:52:45.520> that's<04:52:45.718> going<04:52:45.878> to<04:52:46.040> have<04:52:46.200> a<04:52:46.400> source

image that's going to have a source

image that's going to have a source
equal<04:52:47.680> to<04:52:48.680> post<04:52:49.160> question<04:52:49.440> mark.<04:52:50.080> image<04:52:50.760> URL

equal to post question mark. image URL

equal to post question mark. image URL
with<04:52:51.920> an<04:52:52.080> ALT<04:52:52.440> tag<04:52:52.680> of<04:52:53.200> Creator<04:52:54.200> and<04:52:54.360> a<04:52:54.638> class

with an ALT tag of Creator and a class

with an ALT tag of Creator and a class
name<04:52:55.400> equal<04:52:55.718> to<04:52:56.760> postore<04:52:57.760> details<04:52:58.600> D<04:52:59.200> IMG<04:53:00.200> and

name equal to postore details D IMG and

name equal to postore details D IMG and
this<04:53:00.440> is<04:53:00.558> not<04:53:00.680> going<04:53:00.840> to<04:53:00.920> be<04:53:01.040> Creator<04:53:01.400> it's

this is not going to be Creator it's

this is not going to be Creator it's
going<04:53:01.680> to<04:53:01.798> be<04:53:01.958> the<04:53:02.200> actual<04:53:02.878> post

going to be the actual post

going to be the actual post
there<04:53:04.920> we<04:53:05.080> go<04:53:05.400> so<04:53:05.558> now<04:53:05.680> we<04:53:05.798> can<04:53:05.878> see<04:53:06.080> the<04:53:06.240> post

there we go so now we can see the post

there we go so now we can see the post
and<04:53:06.718> then<04:53:06.840> we<04:53:06.958> can<04:53:07.080> see<04:53:07.360> who<04:53:07.638> created<04:53:08.200> the<04:53:08.360> post

and then we can see who created the post

and then we can see who created the post
we<04:53:09.360> can<04:53:09.558> rename<04:53:10.000> this<04:53:10.200> div<04:53:10.878> that<04:53:11.040> contains<04:53:11.440> the

we can rename this div that contains the

we can rename this div that contains the
link<04:53:12.400> into

link into

link into
postore<04:53:15.760> detailsinfo

postore detailsinfo

postore detailsinfo
there<04:53:18.320> we<04:53:18.520> go<04:53:19.040> and<04:53:19.160> then<04:53:19.320> we<04:53:19.400> can<04:53:19.600> wrap<04:53:19.840> it<04:53:19.958> all

there we go and then we can wrap it all

there we go and then we can wrap it all
in<04:53:20.600> another<04:53:21.000> div<04:53:22.000> this<04:53:22.200> div<04:53:22.480> is<04:53:22.600> going<04:53:22.760> to<04:53:22.920> have

in another div this div is going to have

in another div this div is going to have
a<04:53:23.280> class<04:53:23.638> name<04:53:24.200> equal<04:53:24.520> to<04:53:25.120> flex<04:53:26.080> between<04:53:27.080> as

a class name equal to flex between as

a class name equal to flex between as
well<04:53:27.400> as

well as

well as
w-o<04:53:29.718> and<04:53:29.920> now<04:53:30.240> we'll<04:53:30.440> have<04:53:30.558> to<04:53:30.680> put<04:53:30.920> all<04:53:31.040> of

w-o and now we'll have to put all of

w-o and now we'll have to put all of
these<04:53:31.480> details<04:53:31.878> on<04:53:32.000> the<04:53:32.160> left<04:53:32.440> side<04:53:32.920> and<04:53:33.040> then

these details on the left side and then

these details on the left side and then
the<04:53:33.320> button<04:53:33.520> butons<04:53:33.920> on<04:53:34.040> the<04:53:34.240> right<04:53:34.480> side<04:53:35.240> so

the button butons on the right side so

the button butons on the right side so
let's<04:53:35.760> do<04:53:36.040> just<04:53:36.360> that<04:53:37.360> within<04:53:37.680> this<04:53:37.840> div<04:53:38.120> we

let's do just that within this div we

let's do just that within this div we
can<04:53:38.360> put<04:53:38.520> the<04:53:38.680> link<04:53:39.240> that<04:53:39.440> points<04:53:39.798> to<04:53:40.080> the

can put the link that points to the

can put the link that points to the
Creator<04:53:41.200> image<04:53:42.200> and<04:53:42.400> that<04:53:42.558> link<04:53:43.040> can<04:53:43.240> wrap

Creator image and that link can wrap

Creator image and that link can wrap
everything<04:53:44.440> all<04:53:44.840> the<04:53:45.000> way<04:53:45.760> to<04:53:46.040> the<04:53:46.160> end<04:53:46.760> right

everything all the way to the end right

everything all the way to the end right
here<04:53:47.760> and<04:53:47.920> we<04:53:48.040> can<04:53:48.160> remove<04:53:48.520> these<04:53:48.760> characters

here and we can remove these characters

here and we can remove these characters
that<04:53:49.600> I<04:53:49.718> don't<04:53:49.958> need<04:53:50.638> so<04:53:50.840> now<04:53:51.040> if<04:53:51.160> we<04:53:51.320> save<04:53:51.558> it

that I don't need so now if we save it

that I don't need so now if we save it
you<04:53:52.080> can<04:53:52.200> see<04:53:52.400> the<04:53:52.520> real<04:53:52.798> JSM<04:53:53.280> fits<04:53:53.600> nicely<04:53:54.280> and

you can see the real JSM fits nicely and

you can see the real JSM fits nicely and
we<04:53:54.520> can<04:53:54.760> put<04:53:55.040> this<04:53:55.638> link<04:53:56.718> within<04:53:57.718> this<04:53:57.878> new<04:53:58.120> div

we can put this link within this new div

we can put this link within this new div
that<04:53:58.558> we<04:53:58.680> have<04:53:58.840> created<04:53:59.760> with<04:53:59.920> a<04:54:00.120> flex

that we have created with a flex

that we have created with a flex
between<04:54:02.600> there<04:54:02.760> we<04:54:02.920> go

between there we go

between there we go
of<04:54:04.200> course<04:54:04.638> this<04:54:04.840> link<04:54:05.320> will<04:54:05.558> have<04:54:05.680> to<04:54:05.920> have<04:54:06.160> a

of course this link will have to have a

of course this link will have to have a
class<04:54:06.760> name<04:54:07.440> equal<04:54:07.760> to<04:54:08.600> flex<04:54:09.440> so<04:54:09.638> that<04:54:09.840> all<04:54:09.958> of

class name equal to flex so that all of

class name equal to flex so that all of
these<04:54:10.280> elements<04:54:10.718> appear<04:54:11.000> in<04:54:11.120> a<04:54:11.280> row<04:54:12.160> it's

these elements appear in a row it's

these elements appear in a row it's
going<04:54:12.480> to<04:54:12.638> have<04:54:12.920> items<04:54:13.400> Das<04:54:13.638> Center<04:54:14.558> and<04:54:14.798> a<04:54:15.040> gap

going to have items Das Center and a gap

going to have items Das Center and a gap
of

of

of
three<04:54:17.160> and<04:54:17.400> now<04:54:17.760> we<04:54:17.878> can<04:54:18.080> go<04:54:18.440> below<04:54:19.000> this<04:54:19.200> link

three and now we can go below this link

three and now we can go below this link
and<04:54:20.000> we<04:54:20.120> can<04:54:20.280> create<04:54:20.798> those<04:54:21.160> actions<04:54:21.760> that<04:54:21.920> we

and we can create those actions that we

and we can create those actions that we
should<04:54:22.200> have<04:54:22.360> on<04:54:22.520> the<04:54:22.680> right<04:54:23.080> side<04:54:24.080> if<04:54:24.200> at<04:54:24.360> any

should have on the right side if at any

should have on the right side if at any
point<04:54:24.840> something<04:54:25.160> breaks<04:54:25.520> or<04:54:25.718> doesn't<04:54:25.958> look

point something breaks or doesn't look

point something breaks or doesn't look
the<04:54:26.320> same<04:54:26.718> I<04:54:26.798> know<04:54:27.000> we<04:54:27.280> switched<04:54:27.680> a<04:54:27.760> lot<04:54:27.920> of

the same I know we switched a lot of

the same I know we switched a lot of
code<04:54:28.400> here<04:54:29.160> you<04:54:29.280> can<04:54:29.440> go<04:54:29.558> to<04:54:29.680> the<04:54:29.798> finished

code here you can go to the finished

code here you can go to the finished
project<04:54:30.638> GitHub<04:54:31.000> repository<04:54:31.798> and<04:54:32.040> find<04:54:32.360> the

project GitHub repository and find the

project GitHub repository and find the
post<04:54:32.878> Details<04:54:33.280> page<04:54:33.638> page<04:54:34.638> now<04:54:34.920> below<04:54:35.240> this

post Details page page now below this

post Details page page now below this
link<04:54:35.840> we<04:54:35.958> can<04:54:36.120> create<04:54:36.480> another<04:54:36.798> div<04:54:37.440> that's

link we can create another div that's

link we can create another div that's
going<04:54:37.798> to<04:54:38.080> have<04:54:38.320> a<04:54:38.600> class<04:54:38.920> name<04:54:39.520> equal<04:54:39.840> to<04:54:40.040> flex

going to have a class name equal to flex

going to have a class name equal to flex
Center<04:54:41.920> as<04:54:42.040> well<04:54:42.160> as<04:54:42.320> a<04:54:42.520> gap<04:54:42.798> of

Center as well as a gap of

Center as well as a gap of
four<04:54:44.718> within<04:54:45.000> it<04:54:45.320> we<04:54:45.400> can<04:54:45.600> create<04:54:45.958> another

four within it we can create another

four within it we can create another
link<04:54:47.360> this<04:54:47.520> link<04:54:47.878> is<04:54:48.000> going<04:54:48.160> to<04:54:48.280> render<04:54:48.638> the

link this link is going to render the

link this link is going to render the
edit<04:54:49.080> image<04:54:49.760> so<04:54:50.000> let's<04:54:50.200> say<04:54:50.798> image<04:54:51.798> is<04:54:51.958> going

edit image so let's say image is going

edit image so let's say image is going
to<04:54:52.320> point<04:54:52.638> to<04:54:53.240> Source<04:54:54.240> SL<04:54:54.638> assets<04:54:55.638> SL<04:54:56.120> ions<04:54:57.120> SL

to point to Source SL assets SL ions SL

to point to Source SL assets SL ions SL
edit.

edit.

edit.
SVG<04:55:00.360> and<04:55:00.520> of<04:55:00.680> course<04:55:01.160> if<04:55:01.280> it's<04:55:01.440> a<04:55:01.558> link<04:55:02.000> we<04:55:02.160> have

SVG and of course if it's a link we have

SVG and of course if it's a link we have
to<04:55:02.360> give<04:55:02.480> it<04:55:02.600> a<04:55:02.718> two<04:55:03.000> property<04:55:03.760> it's<04:55:03.920> going<04:55:04.080> to

to give it a two property it's going to

to give it a two property it's going to
go<04:55:04.400> to<04:55:04.600> forward<04:55:05.000> slash<04:55:05.520> we<04:55:05.638> have<04:55:05.760> to<04:55:05.878> make<04:55:06.000> it

go to forward slash we have to make it

go to forward slash we have to make it
Dynamic<04:55:07.600> update

Dynamic update

Dynamic update
dpost

dpost

dpost
slost<04:55:11.798> question<04:55:12.160> mark.<04:55:13.160> dollar<04:55:13.558> sign<04:55:13.958> ID<04:55:14.958> and

slost question mark. dollar sign ID and

slost question mark. dollar sign ID and
there<04:55:15.240> we<04:55:15.400> go<04:55:15.638> we<04:55:15.760> have<04:55:15.878> a<04:55:16.040> huge<04:55:16.360> edit<04:55:16.958> button

there we go we have a huge edit button

there we go we have a huge edit button
we<04:55:18.200> only<04:55:18.480> want<04:55:18.638> to<04:55:18.798> show<04:55:19.160> this<04:55:19.718> if<04:55:19.920> the<04:55:20.080> person

we only want to show this if the person

we only want to show this if the person
that<04:55:20.558> created<04:55:20.958> it<04:55:21.400> is<04:55:21.638> the<04:55:21.840> author<04:55:22.638> so<04:55:23.000> we<04:55:23.080> need

that created it is the author so we need

that created it is the author so we need
to<04:55:23.480> again<04:55:23.840> know<04:55:24.200> who<04:55:24.360> is<04:55:24.520> the<04:55:24.638> currently

to again know who is the currently

to again know who is the currently
logged<04:55:25.400> in<04:55:25.558> user<04:55:26.520> to<04:55:26.680> know<04:55:27.000> that<04:55:27.440> we<04:55:27.520> can<04:55:27.638> say

logged in user to know that we can say

logged in user to know that we can say
const<04:55:28.840> user<04:55:29.520> is<04:55:29.718> equal<04:55:30.040> to<04:55:30.878> use<04:55:31.600> user<04:55:32.400> context

const user is equal to use user context

const user is equal to use user context
and<04:55:33.840> we<04:55:33.920> can<04:55:34.120> import<04:55:34.440> it<04:55:34.878> and<04:55:35.040> now<04:55:35.200> we<04:55:35.320> have<04:55:35.520> the

and we can import it and now we have the

and we can import it and now we have the
user<04:55:37.440> so<04:55:37.600> we<04:55:37.680> can<04:55:37.878> go<04:55:38.120> back<04:55:38.558> down<04:55:39.558> and<04:55:39.760> to<04:55:40.000> this

user so we can go back down and to this

user so we can go back down and to this
link<04:55:41.000> we<04:55:41.120> can<04:55:41.320> apply<04:55:41.718> a<04:55:41.958> class<04:55:42.360> name<04:55:43.360> saying

link we can apply a class name saying

link we can apply a class name saying
that<04:55:44.240> if<04:55:45.080> user.<04:55:46.080> ID<04:55:46.958> is<04:55:47.200> not<04:55:47.638> equal<04:55:48.000> to<04:55:48.840> post

that if user. ID is not equal to post

that if user. ID is not equal to post
question<04:55:49.840> mark.

question mark.

question mark.
creator.<04:55:52.680> dollar<04:55:53.000> sign<04:55:53.638> ID<04:55:54.638> in<04:55:54.878> that<04:55:55.160> case<04:55:55.440> we

creator. dollar sign ID in that case we

creator. dollar sign ID in that case we
want<04:55:55.718> to<04:55:55.878> make<04:55:56.040> it<04:55:56.440> hidden<04:55:56.920> so<04:55:57.160> completely

want to make it hidden so completely

want to make it hidden so completely
hide<04:55:57.878> it<04:55:58.600> in<04:55:58.798> this<04:55:58.958> case<04:55:59.120> it's<04:55:59.280> still<04:55:59.558> there

hide it in this case it's still there

hide it in this case it's still there
because<04:56:00.160> we<04:56:00.360> created<04:56:00.760> it<04:56:01.600> then<04:56:02.040> this<04:56:02.280> image

because we created it then this image

because we created it then this image
has<04:56:03.040> to<04:56:03.440> have<04:56:03.718> a<04:56:04.000> width<04:56:04.680> of<04:56:04.920> about<04:56:05.638> 24<04:56:06.638> and<04:56:06.798> a

has to have a width of about 24 and a

has to have a width of about 24 and a
height<04:56:07.480> of<04:56:07.958> 24<04:56:08.958> and<04:56:09.200> an<04:56:09.360> Al<04:56:09.718> tag<04:56:10.040> of<04:56:10.680> edit<04:56:11.680> it's

height of 24 and an Al tag of edit it's

height of 24 and an Al tag of edit it's
much<04:56:12.080> smaller<04:56:12.638> we<04:56:12.760> should<04:56:13.000> also<04:56:13.320> make<04:56:13.638> this

much smaller we should also make this

much smaller we should also make this
profile<04:56:14.400> photo<04:56:14.760> smaller<04:56:15.360> as<04:56:15.558> well<04:56:16.040> so<04:56:16.240> let's

profile photo smaller as well so let's

profile photo smaller as well so let's
go<04:56:16.600> to<04:56:16.798> the<04:56:17.400> Creator<04:56:18.400> and<04:56:18.600> we<04:56:18.718> can<04:56:18.878> make<04:56:19.040> it<04:56:19.680> W8

go to the Creator and we can make it W8

go to the Creator and we can make it W8
and<04:56:21.000> H<04:56:21.520> can<04:56:21.760> be<04:56:22.280> 8<04:56:22.840> as

and H can be 8 as

and H can be 8 as
well<04:56:25.280> but<04:56:25.480> on<04:56:25.718> large<04:56:26.120> devices<04:56:26.878> W<04:56:27.320> can<04:56:27.440> be<04:56:27.600> 12

well but on large devices W can be 12

well but on large devices W can be 12
and<04:56:28.520> age<04:56:28.840> can<04:56:29.000> be<04:56:29.400> 12<04:56:30.400> and<04:56:30.600> if<04:56:30.718> we<04:56:30.878> save<04:56:31.120> it<04:56:31.638> we

and age can be 12 and if we save it we

and age can be 12 and if we save it we
have<04:56:31.878> to<04:56:32.000> say<04:56:32.200> on<04:56:32.440> large<04:56:32.798> devices<04:56:33.480> H<04:56:33.760> is<04:56:33.958> 12

have to say on large devices H is 12

have to say on large devices H is 12
there<04:56:35.000> we<04:56:35.160> go<04:56:35.480> that's<04:56:35.680> looking<04:56:36.160> better<04:56:37.160> and

there we go that's looking better and

there we go that's looking better and
now<04:56:37.840> alongside<04:56:38.840> this<04:56:39.080> edit<04:56:39.600> we<04:56:39.760> also<04:56:40.000> want<04:56:40.160> to

now alongside this edit we also want to

now alongside this edit we also want to
add<04:56:40.638> another

add another

add another
button<04:56:42.718> but<04:56:42.958> this<04:56:43.160> time<04:56:43.558> the<04:56:43.718> button<04:56:44.280> is<04:56:44.440> going

button but this time the button is going

button but this time the button is going
to<04:56:44.798> be<04:56:45.160> for

delete so we can say on click we want to

delete so we can say on click we want to
call<04:56:52.680> a<04:56:52.878> handle<04:56:53.638> delete<04:56:54.958> post<04:56:55.958> and<04:56:56.200> we<04:56:56.360> have<04:56:56.440> to

call a handle delete post and we have to

call a handle delete post and we have to
declare<04:56:57.000> that<04:56:57.240> function<04:56:57.558> of<04:56:57.718> course<04:56:58.400> const

declare that function of course const

declare that function of course const
handle<04:57:00.840> delete<04:57:01.840> post<04:57:02.558> for<04:57:02.760> now<04:57:02.958> it<04:57:03.400> be<04:57:03.558> an

handle delete post for now it be an

handle delete post for now it be an
empty<04:57:04.280> callback

empty callback

empty callback
function<04:57:06.558> it's<04:57:06.840> also<04:57:07.200> going<04:57:07.360> to<04:57:07.638> have<04:57:07.920> a

function it's also going to have a

function it's also going to have a
variant<04:57:09.360> equal<04:57:09.638> to<04:57:09.958> ghost<04:57:10.958> it's<04:57:11.160> going<04:57:11.360> to

variant equal to ghost it's going to

variant equal to ghost it's going to
have<04:57:11.600> a<04:57:11.798> class<04:57:12.160> name<04:57:12.798> equal<04:57:13.080> to

have a class name equal to

have a class name equal to
ghostcore<04:57:15.200> details<04:57:16.080> D<04:57:16.680> deletor<04:57:17.840> BTN<04:57:18.840> and<04:57:19.040> it

ghostcore details D deletor BTN and it

ghostcore details D deletor BTN and it
has<04:57:19.440> to<04:57:19.600> have<04:57:19.798> the<04:57:20.040> same<04:57:20.680> class<04:57:21.160> right<04:57:21.360> here<04:57:21.718> to

has to have the same class right here to

has to have the same class right here to
hide<04:57:22.240> it<04:57:22.558> if<04:57:22.680> we're<04:57:22.920> not<04:57:23.200> the<04:57:23.360> current<04:57:23.680> Creator

hide it if we're not the current Creator

hide it if we're not the current Creator
so<04:57:24.798> let's<04:57:25.080> copy<04:57:25.480> this<04:57:25.760> right<04:57:25.958> here<04:57:26.718> turn<04:57:27.040> this

so let's copy this right here turn this

so let's copy this right here turn this
into<04:57:27.558> a<04:57:27.718> dynamic<04:57:28.280> template

into a dynamic template

into a dynamic template
string<04:57:30.958> and<04:57:31.080> then<04:57:31.240> we<04:57:31.320> can<04:57:31.520> paste<04:57:31.760> it<04:57:32.000> right

string and then we can paste it right

string and then we can paste it right
here

here

here
finally<04:57:34.718> within<04:57:35.000> the<04:57:35.160> button<04:57:35.638> we<04:57:35.760> can<04:57:35.878> render

finally within the button we can render

finally within the button we can render
an

an

an
image<04:57:38.080> and<04:57:38.280> this<04:57:38.480> image<04:57:38.798> is<04:57:38.958> going<04:57:39.120> to<04:57:39.280> have<04:57:39.440> a

image and this image is going to have a

image and this image is going to have a
source<04:57:40.200> equal<04:57:40.520> to<04:57:40.840> for/<04:57:41.840> assets<04:57:42.840> SL<04:57:43.400> ions<04:57:44.400> SL

source equal to for/ assets SL ions SL

source equal to for/ assets SL ions SL
delete.<04:57:46.400> SVG<04:57:47.400> with<04:57:47.558> an<04:57:47.798> ALT<04:57:48.160> tag<04:57:48.440> of

delete. SVG with an ALT tag of

delete. SVG with an ALT tag of
delete<04:57:50.280> a<04:57:50.520> width<04:57:51.080> of<04:57:51.280> 24<04:57:52.280> and<04:57:52.520> a<04:57:52.798> height<04:57:53.240> of<04:57:53.400> 24

delete a width of 24 and a height of 24

delete a width of 24 and a height of 24
as<04:57:54.520> well<04:57:55.360> and<04:57:55.558> there<04:57:55.680> we<04:57:55.840> go<04:57:56.280> now<04:57:56.480> we<04:57:56.558> can<04:57:56.718> see

as well and there we go now we can see

as well and there we go now we can see
both<04:57:57.680> of<04:57:57.920> these<04:57:58.638> we<04:57:58.760> can<04:57:58.920> also<04:57:59.160> lower<04:57:59.558> the<04:57:59.760> Gap

both of these we can also lower the Gap

both of these we can also lower the Gap
a<04:58:00.120> bit<04:58:00.480> maybe<04:58:00.840> Gap<04:58:01.040> two<04:58:01.600> is<04:58:01.760> going<04:58:01.920> to<04:58:02.080> be<04:58:02.360> fine

a bit maybe Gap two is going to be fine

a bit maybe Gap two is going to be fine
or<04:58:02.920> even<04:58:03.400> one<04:58:03.840> looks<04:58:04.160> good<04:58:04.600> what<04:58:04.718> if<04:58:04.798> you<04:58:04.920> do<04:58:05.040> it

or even one looks good what if you do it

or even one looks good what if you do it
with<04:58:05.360> no<04:58:05.638> Gap<04:58:06.600> there<04:58:06.760> we<04:58:06.920> go<04:58:07.240> even<04:58:07.520> without<04:58:07.718> a

with no Gap there we go even without a

with no Gap there we go even without a
gap<04:58:08.200> it's<04:58:08.400> looking<04:58:08.760> good<04:58:09.400> and<04:58:09.558> if<04:58:09.638> you<04:58:09.798> expand

gap it's looking good and if you expand

gap it's looking good and if you expand
it<04:58:10.840> keep<04:58:11.040> in<04:58:11.240> mind<04:58:11.520> it<04:58:11.638> still<04:58:11.878> looks<04:58:12.200> good<04:58:12.680> on

it keep in mind it still looks good on

it keep in mind it still looks good on
all<04:58:13.480> different<04:58:14.120> devices<04:58:15.120> this<04:58:15.360> is

all different devices this is

all different devices this is
wonderful<04:58:17.400> now<04:58:17.600> don't<04:58:17.798> delete<04:58:18.080> the<04:58:18.200> poe<04:58:18.558> just

wonderful now don't delete the poe just

wonderful now don't delete the poe just
yet<04:58:19.080> we<04:58:19.240> still<04:58:19.440> have<04:58:19.558> to<04:58:19.680> add<04:58:19.840> a<04:58:20.000> caption<04:58:20.360> in

yet we still have to add a caption in

yet we still have to add a caption in
more<04:58:20.798> details<04:58:21.760> so<04:58:21.958> let's<04:58:22.240> go<04:58:22.520> below<04:58:23.040> this

more details so let's go below this

more details so let's go below this
button<04:58:23.798> and<04:58:24.000> Below<04:58:24.360> two<04:58:24.558> more

button and Below two more

button and Below two more
divs<04:58:26.680> and<04:58:26.798> then<04:58:27.000> here<04:58:27.480> we<04:58:27.558> can<04:58:27.718> create<04:58:28.000> an<04:58:28.200> HR<04:58:29.160> a

divs and then here we can create an HR a

divs and then here we can create an HR a
horizontal<04:58:29.920> line<04:58:30.680> with<04:58:30.878> a<04:58:31.160> class<04:58:31.520> name<04:58:31.958> equal

horizontal line with a class name equal

horizontal line with a class name equal
to<04:58:32.480> border

to border

to border
w-<04:58:35.160> full<04:58:35.760> and<04:58:35.958> border<04:58:36.360> colar<04:58:36.798> of<04:58:37.000> Border<04:58:37.600> D

w- full and border colar of Border D

w- full and border colar of Border D
dark<04:58:38.520> of<04:58:38.798> 4<04:58:39.320> over

dark of 4 over

dark of 4 over
80<04:58:41.440> if<04:58:41.558> we<04:58:41.718> save<04:58:41.920> it<04:58:42.080> you<04:58:42.160> should<04:58:42.320> be<04:58:42.440> able<04:58:42.600> to

80 if we save it you should be able to

80 if we save it you should be able to
see<04:58:43.000> a<04:58:43.160> really<04:58:43.440> unnoticeable<04:58:44.200> line<04:58:44.600> that's

see a really unnoticeable line that's

see a really unnoticeable line that's
going<04:58:44.958> to<04:58:45.120> create<04:58:45.360> some<04:58:46.040> spacing<04:58:47.040> and<04:58:47.160> then

going to create some spacing and then

going to create some spacing and then
below<04:58:47.958> we<04:58:48.080> can<04:58:48.320> copy<04:58:48.718> everything<04:58:49.120> we<04:58:49.280> already

below we can copy everything we already

below we can copy everything we already
had<04:58:50.160> from<04:58:50.440> a<04:58:50.680> post

had from a post

had from a post
card<04:58:52.840> not<04:58:53.160> the<04:58:53.320> Creator<04:58:53.798> things<04:58:54.280> but<04:58:54.520> rather

card not the Creator things but rather

card not the Creator things but rather
all<04:58:55.080> of<04:58:55.240> the<04:58:55.400> post<04:58:55.798> tags<04:58:56.240> the<04:58:56.360> post<04:58:56.718> caption

all of the post tags the post caption

all of the post tags the post caption
and<04:58:57.798> more<04:58:58.680> so<04:58:58.878> let's<04:58:59.040> simply<04:58:59.360> copy<04:58:59.638> this<04:58:59.920> div

and more so let's simply copy this div

and more so let's simply copy this div
that<04:59:01.080> contains<04:59:01.718> the<04:59:01.920> post<04:59:02.240> caption<04:59:03.360> it's<04:59:03.558> just

that contains the post caption it's just

that contains the post caption it's just
this<04:59:03.920> small<04:59:04.200> one<04:59:04.480> right<04:59:04.680> here<04:59:05.600> we<04:59:05.718> can<04:59:05.920> paste

this small one right here we can paste

this small one right here we can paste
it<04:59:06.320> below<04:59:06.680> the

it below the

it below the
HR<04:59:09.558> indent<04:59:09.958> it<04:59:10.440> properly<04:59:11.440> and<04:59:11.718> everywhere

HR indent it properly and everywhere

HR indent it properly and everywhere
where<04:59:12.240> we're<04:59:12.400> saying<04:59:12.760> post<04:59:13.280> we<04:59:13.400> can<04:59:13.558> add<04:59:13.760> a

where we're saying post we can add a

where we're saying post we can add a
question<04:59:14.240> mark<04:59:14.718> as<04:59:14.920> well<04:59:15.480> and<04:59:15.638> there<04:59:15.760> we<04:59:15.920> go<04:59:16.280> we

question mark as well and there we go we

question mark as well and there we go we
have<04:59:16.638> this<04:59:16.798> wonderful<04:59:17.878> caption<04:59:18.878> we<04:59:19.080> can

have this wonderful caption we can

have this wonderful caption we can
change<04:59:19.440> this<04:59:19.558> tiing<04:59:20.000> a<04:59:20.120> bit<04:59:20.520> from<04:59:20.760> this<04:59:20.920> div<04:59:21.440> by

change this tiing a bit from this div by

change this tiing a bit from this div by
giving<04:59:21.840> it<04:59:22.000> a<04:59:22.200> flex<04:59:23.120> Flex<04:59:23.638> Das<04:59:23.920> Co<04:59:24.760> Flex<04:59:25.400> D1<04:59:26.400> w-

giving it a flex Flex Das Co Flex D1 w-

giving it a flex Flex Das Co Flex D1 w-
full<04:59:28.040> small-<04:59:29.040> medium<04:59:30.040> and<04:59:30.280> on<04:59:30.520> large<04:59:30.878> devices

full small- medium and on large devices

full small- medium and on large devices
base-<04:59:32.520> regular

base- regular

base- regular
there<04:59:34.160> we<04:59:34.360> go<04:59:34.638> that's<04:59:34.840> going<04:59:34.958> to<04:59:35.160> position<04:59:35.480> it

there we go that's going to position it

there we go that's going to position it
a<04:59:35.718> bit<04:59:35.920> better<04:59:36.760> and<04:59:37.000> finally<04:59:37.440> we<04:59:37.558> need<04:59:37.680> to

a bit better and finally we need to

a bit better and finally we need to
render<04:59:38.120> the<04:59:38.280> post<04:59:38.638> stats<04:59:39.240> so<04:59:39.400> let's<04:59:39.638> go<04:59:39.840> below

render the post stats so let's go below

render the post stats so let's go below
this<04:59:40.680> div<04:59:41.680> create<04:59:42.080> another<04:59:42.440> div<04:59:43.120> that's<04:59:43.320> going

this div create another div that's going

this div create another div that's going
to<04:59:43.760> have<04:59:44.120> a<04:59:44.440> class<04:59:44.958> name<04:59:45.958> equal<04:59:46.280> to

to have a class name equal to

to have a class name equal to
w-o<04:59:48.240> and<04:59:48.440> within<04:59:48.798> there<04:59:49.200> we<04:59:49.320> can<04:59:49.480> render<04:59:50.320> a

w-o and within there we can render a

w-o and within there we can render a
post<04:59:51.480> stats<04:59:52.160> self-closing<04:59:53.000> component<04:59:53.920> which

post stats self-closing component which

post stats self-closing component which
we<04:59:54.200> have<04:59:54.320> to<04:59:54.600> import<04:59:55.200> from<04:59:55.480> components<04:59:55.958> shared

we have to import from components shared

we have to import from components shared
post

post

post
stats<04:59:58.480> with<04:59:58.638> a<04:59:59.160> post<05:00:00.160> is<05:00:00.440> equal<05:00:00.798> to<05:00:01.558> post<05:00:02.558> a<05:00:02.718> use

stats with a post is equal to post a use

stats with a post is equal to post a use
user<05:00:03.200> ID<05:00:03.840> equal<05:00:04.160> to<05:00:04.360> user.<05:00:05.240> ID<05:00:06.240> in<05:00:06.440> this<05:00:06.600> case

user ID equal to user. ID in this case

user ID equal to user. ID in this case
it<05:00:07.040> complains<05:00:07.558> that<05:00:07.680> a<05:00:07.878> post<05:00:08.280> could<05:00:08.558> possibly

it complains that a post could possibly

it complains that a post could possibly
be<05:00:09.040> undefined<05:00:09.760> so<05:00:09.920> we<05:00:10.040> can<05:00:10.160> say<05:00:10.480> post<05:00:10.958> or<05:00:11.240> an

be undefined so we can say post or an

be undefined so we can say post or an
empty<05:00:11.798> object<05:00:12.360> so<05:00:12.558> it<05:00:12.680> doesn't<05:00:13.000> break<05:00:13.920> oh<05:00:14.120> but

empty object so it doesn't break oh but

empty object so it doesn't break oh but
the<05:00:14.400> structure<05:00:14.760> of<05:00:14.878> an<05:00:15.000> empty<05:00:15.320> object<05:00:15.600> is<05:00:15.760> not

the structure of an empty object is not

the structure of an empty object is not
the<05:00:16.160> same<05:00:16.760> as<05:00:16.920> the<05:00:17.040> structure<05:00:17.440> that<05:00:17.558> it<05:00:17.638> should

the same as the structure that it should

the same as the structure that it should
have<05:00:18.520> so<05:00:18.680> in<05:00:18.798> the<05:00:19.000> post<05:00:19.320> stats<05:00:20.080> we<05:00:20.200> can<05:00:20.360> declare

have so in the post stats we can declare

have so in the post stats we can declare
the<05:00:20.958> post<05:00:21.798> as<05:00:22.440> optional<05:00:23.120> maybe<05:00:23.360> it's<05:00:23.520> not

the post as optional maybe it's not

the post as optional maybe it's not
going<05:00:23.798> to<05:00:23.958> be<05:00:24.200> there<05:00:24.958> but<05:00:25.160> then<05:00:25.400> it<05:00:25.558> lets<05:00:25.760> us

going to be there but then it lets us

going to be there but then it lets us
know<05:00:26.400> please<05:00:26.798> add<05:00:27.160> question<05:00:27.400> marks<05:00:27.840> so<05:00:28.080> the

know please add question marks so the

know please add question marks so the
app<05:00:28.440> doesn't<05:00:28.718> break<05:00:29.400> so<05:00:29.600> that's<05:00:29.840> exactly<05:00:30.400> what

app doesn't break so that's exactly what

app doesn't break so that's exactly what
I'm<05:00:30.878> going<05:00:31.000> to<05:00:31.280> do<05:00:32.280> I'm<05:00:32.360> going<05:00:32.480> to<05:00:32.600> add<05:00:32.718> a

I'm going to do I'm going to add a

I'm going to do I'm going to add a
question<05:00:33.280> mark<05:00:33.718> whenever<05:00:34.360> post<05:00:34.798> is

question mark whenever post is

question mark whenever post is
mentioned<05:00:36.680> oh<05:00:37.000> but<05:00:37.200> then<05:00:37.360> it's<05:00:37.558> complaining

mentioned oh but then it's complaining

mentioned oh but then it's complaining
that<05:00:38.440> we<05:00:38.680> actually<05:00:39.080> need<05:00:39.320> to<05:00:39.680> pass<05:00:40.400> a<05:00:40.600> post<05:00:40.920> ID

that we actually need to pass a post ID

that we actually need to pass a post ID
to<05:00:41.360> the<05:00:41.480> save<05:00:41.878> post<05:00:42.638> so<05:00:42.920> I'm<05:00:43.040> going<05:00:43.120> to<05:00:43.400> add

to the save post so I'm going to add

to the save post so I'm going to add
right<05:00:44.040> here<05:00:44.480> or<05:00:44.798> an<05:00:44.958> empty<05:00:45.718> string<05:00:46.718> or<05:00:47.160> an

right here or an empty string or an

right here or an empty string or an
empty<05:00:47.600> string<05:00:48.000> as<05:00:48.160> well<05:00:48.680> and<05:00:48.958> now<05:00:49.320> we<05:00:49.440> are<05:00:49.680> good

empty string as well and now we are good

empty string as well and now we are good
so<05:00:50.718> if<05:00:50.798> we<05:00:50.958> go<05:00:51.240> back<05:00:52.120> now<05:00:52.320> we<05:00:52.440> have<05:00:52.558> the<05:00:52.718> post

so if we go back now we have the post

so if we go back now we have the post
stats<05:00:53.320> and<05:00:53.440> you<05:00:53.520> can<05:00:53.600> see<05:00:53.798> the<05:00:53.920> likes<05:00:54.320> and

stats and you can see the likes and

stats and you can see the likes and
saves<05:00:55.040> as<05:00:55.240> well<05:00:55.440> on<05:00:55.600> the<05:00:55.760> bottom<05:00:56.760> this<05:00:57.120> is<05:00:57.240> a

saves as well on the bottom this is a

saves as well on the bottom this is a
real<05:00:58.400> post<05:00:58.840> Details<05:00:59.440> page<05:01:00.120> looking<05:01:00.600> really

real post Details page looking really

real post Details page looking really
similar<05:01:01.440> as<05:01:01.558> it<05:01:01.680> does<05:01:02.000> on<05:01:02.160> the<05:01:02.280> original

similar as it does on the original

similar as it does on the original
Instagram<05:01:03.360> application<05:01:04.200> keep<05:01:04.360> in<05:01:04.520> mind<05:01:04.760> that

Instagram application keep in mind that

Instagram application keep in mind that
you<05:01:04.958> can<05:01:05.120> go<05:01:05.280> to<05:01:05.440> the<05:01:05.600> edit<05:01:06.280> which<05:01:06.400> is<05:01:06.600> great

you can go to the edit which is great

you can go to the edit which is great
and<05:01:07.320> you<05:01:07.400> can<05:01:07.558> also<05:01:07.760> delete<05:01:08.120> it<05:01:08.360> which<05:01:08.480> we're

and you can also delete it which we're

and you can also delete it which we're
not<05:01:08.840> going<05:01:08.920> to<05:01:09.080> do<05:01:09.240> for<05:01:09.440> now<05:01:10.080> but<05:01:10.520> this<05:01:10.920> is

not going to do for now but this is

not going to do for now but this is
wonderful<05:01:12.558> and<05:01:12.798> later<05:01:13.080> on<05:01:13.360> once<05:01:13.520> we<05:01:13.680> have<05:01:13.840> more

wonderful and later on once we have more

wonderful and later on once we have more
posts<05:01:14.600> we're<05:01:14.760> going<05:01:14.920> to<05:01:15.280> also<05:01:15.680> Implement

posts we're going to also Implement

posts we're going to also Implement
other<05:01:16.920> post<05:01:17.320> recommendations<05:01:18.320> right<05:01:18.520> here

other post recommendations right here

other post recommendations right here
below<05:01:19.280> this<05:01:19.400> one<05:01:19.798> so<05:01:19.958> you<05:01:20.080> can<05:01:20.240> scroll<05:01:20.638> through

below this one so you can scroll through

below this one so you can scroll through
the<05:01:21.040> app<05:01:21.360> and<05:01:21.558> find<05:01:21.920> all<05:01:22.160> the<05:01:22.320> post<05:01:22.638> that<05:01:22.718> you

the app and find all the post that you

the app and find all the post that you
like<05:01:23.958> but<05:01:24.240> with<05:01:24.400> that<05:01:24.558> said<05:01:24.760> we're<05:01:25.000> making

like but with that said we're making

like but with that said we're making
amazing<05:01:26.200> progress<05:01:27.120> we<05:01:27.280> have<05:01:27.440> the

amazing progress we have the

amazing progress we have the
homepage<05:01:29.360> we<05:01:29.558> have<05:01:29.840> the<05:01:30.200> create<05:01:30.638> post<05:01:31.040> page<05:01:31.920> we

homepage we have the create post page we

homepage we have the create post page we
also<05:01:32.480> have<05:01:32.680> the<05:01:32.878> the<05:01:33.040> edit<05:01:33.400> page<05:01:34.120> we<05:01:34.240> can<05:01:34.480> like

also have the the edit page we can like

also have the the edit page we can like
and<05:01:34.958> unlike<05:01:35.798> save<05:01:36.200> and<05:01:36.638> unsave<05:01:37.638> as<05:01:37.798> well<05:01:37.958> as

and unlike save and unsave as well as

and unlike save and unsave as well as
visit<05:01:38.400> the<05:01:38.558> post<05:01:39.200> details<05:01:40.200> this<05:01:40.440> is<05:01:40.798> amazing

visit the post details this is amazing

visit the post details this is amazing
so<05:01:42.080> let's<05:01:42.280> go<05:01:42.440> ahead<05:01:42.718> and<05:01:42.958> focus<05:01:43.440> on<05:01:43.638> the

so let's go ahead and focus on the

so let's go ahead and focus on the
second<05:01:44.320> major<05:01:44.760> page<05:01:44.958> of<05:01:45.120> our<05:01:45.360> app<05:01:46.080> which<05:01:46.200> is

second major page of our app which is

second major page of our app which is
the<05:01:46.878> explore<05:01:47.520> page<05:01:48.520> here<05:01:48.878> we're<05:01:49.040> going<05:01:49.160> to

the explore page here we're going to

the explore page here we're going to
expand<05:01:49.840> it<05:01:50.080> further<05:01:50.840> so<05:01:51.120> no<05:01:51.320> longer<05:01:51.680> it<05:01:51.798> will

expand it further so no longer it will

expand it further so no longer it will
only<05:01:52.200> be<05:01:52.360> a<05:01:52.520> home<05:01:52.920> where<05:01:53.040> we<05:01:53.160> fetch<05:01:53.400> the<05:01:53.520> latest

only be a home where we fetch the latest

only be a home where we fetch the latest
post<05:01:54.520> we're<05:01:54.638> going<05:01:54.760> to<05:01:54.920> have<05:01:55.080> some<05:01:55.280> search

post we're going to have some search

post we're going to have some search
Logic<05:01:56.280> we're<05:01:56.400> going<05:01:56.520> to<05:01:56.638> have<05:01:56.840> the<05:01:57.040> infinite

Logic we're going to have the infinite

Logic we're going to have the infinite
scroll<05:01:57.878> logic<05:01:58.718> and<05:01:59.120> a<05:01:59.360> lot<05:02:00.080> more<05:02:01.080> so<05:02:01.440> let's<05:02:01.680> get

scroll logic and a lot more so let's get

scroll logic and a lot more so let's get
started<05:02:02.400> with<05:02:02.600> a<05:02:02.878> explore<05:02:03.280> next<05:02:03.920> by<05:02:04.080> putting

started with a explore next by putting

started with a explore next by putting
this<05:02:04.480> to<05:02:04.638> the<05:02:04.878> side<05:02:05.558> and<05:02:05.680> then<05:02:05.920> opening<05:02:06.638> the

this to the side and then opening the

this to the side and then opening the
explore<05:02:08.040> page<05:02:09.040> to<05:02:09.400> get<05:02:09.680> started<05:02:10.240> with<05:02:10.400> our

explore page to get started with our

explore page to get started with our
explore<05:02:11.200> page<05:02:11.798> we<05:02:11.920> can<05:02:12.120> first<05:02:12.558> wrap

explore page we can first wrap

explore page we can first wrap
everything<05:02:13.718> in<05:02:13.958> a<05:02:14.200> div<05:02:14.718> that's<05:02:14.878> going<05:02:15.080> to<05:02:15.240> have

everything in a div that's going to have

everything in a div that's going to have
a<05:02:15.680> class<05:02:16.080> name<05:02:16.798> equal<05:02:17.160> to<05:02:17.680> explore<05:02:18.480> Das

a class name equal to explore Das

a class name equal to explore Das
container<05:02:20.520> then<05:02:20.920> within<05:02:21.200> it<05:02:21.480> we<05:02:21.558> can<05:02:21.718> have

container then within it we can have

container then within it we can have
another<05:02:22.240> div<05:02:22.840> that's<05:02:23.000> going<05:02:23.160> to<05:02:23.400> have<05:02:23.558> a<05:02:23.798> class

another div that's going to have a class

another div that's going to have a class
name<05:02:24.798> equal<05:02:25.120> to<05:02:25.798> explore<05:02:26.638> Das

name equal to explore Das

name equal to explore Das
inore

inore

inore
container<05:02:31.280> within<05:02:31.760> that<05:02:31.958> one<05:02:32.240> we're<05:02:32.360> going<05:02:32.480> to

container within that one we're going to

container within that one we're going to
have<05:02:32.840> have<05:02:33.040> an

have have an

have have an
H2<05:02:34.878> this<05:02:35.080> H2<05:02:35.718> is<05:02:35.840> going<05:02:36.000> to<05:02:36.160> say<05:02:36.520> search<05:02:37.680> posts

H2 this H2 is going to say search posts

H2 this H2 is going to say search posts
and<05:02:38.920> it's<05:02:39.080> going<05:02:39.240> to<05:02:39.400> have<05:02:39.520> a<05:02:39.718> class<05:02:40.080> name

and it's going to have a class name

and it's going to have a class name
equal<05:02:41.200> to<05:02:41.558> H3<05:02:42.520> D<05:02:42.840> bold<05:02:43.680> on<05:02:43.920> medium<05:02:44.400> devices<05:02:45.120> H2

equal to H3 D bold on medium devices H2

equal to H3 D bold on medium devices H2
Das<05:02:46.360> bold<05:02:47.360> and<05:02:47.680> w-<05:02:48.520> full<05:02:49.520> now<05:02:49.920> right<05:02:50.120> below<05:02:50.480> it

Das bold and w- full now right below it

Das bold and w- full now right below it
we<05:02:50.920> can<05:02:51.120> have<05:02:51.280> a<05:02:51.480> div<05:02:52.240> that's<05:02:52.440> going<05:02:52.600> to<05:02:52.798> have<05:02:53.000> a

we can have a div that's going to have a

we can have a div that's going to have a
class<05:02:53.638> name<05:02:54.558> equal<05:02:54.878> to<05:02:55.360> flex<05:02:56.360> gap<05:02:56.718> of<05:02:56.920> one

class name equal to flex gap of one

class name equal to flex gap of one
padding<05:02:58.320> X<05:02:58.680> of

padding X of

padding X of
four<05:03:00.638> w-<05:03:01.400> full<05:03:02.200> rounded<05:03:03.000> -<05:03:03.360> LG<05:03:04.320> and<05:03:04.558> a<05:03:04.760> BG<05:03:05.280> of

four w- full rounded - LG and a BG of

four w- full rounded - LG and a BG of
dark<05:03:05.958> 4<05:03:06.840> we<05:03:06.958> are<05:03:07.120> now<05:03:07.360> starting<05:03:07.680> to<05:03:07.878> form<05:03:08.558> the

dark 4 we are now starting to form the

dark 4 we are now starting to form the
UI<05:03:09.120> for<05:03:09.280> our<05:03:09.480> search<05:03:10.280> so<05:03:10.558> let's<05:03:10.840> render<05:03:11.240> an

UI for our search so let's render an

UI for our search so let's render an
image<05:03:12.440> and<05:03:12.718> that<05:03:12.920> image<05:03:13.320> is<05:03:13.480> going<05:03:13.680> to<05:03:13.878> have<05:03:14.040> a

image and that image is going to have a

image and that image is going to have a
source<05:03:14.958> equal<05:03:15.240> to<05:03:15.840> SL<05:03:16.480> assets<05:03:17.480> slash<05:03:18.120> ions<05:03:19.120> SL

source equal to SL assets slash ions SL

source equal to SL assets slash ions SL
search.

search.

search.
SVG<05:03:21.878> there<05:03:22.040> we<05:03:22.240> go<05:03:23.040> and<05:03:23.240> then<05:03:23.520> we<05:03:23.638> can<05:03:23.760> give<05:03:23.878> it

SVG there we go and then we can give it

SVG there we go and then we can give it
a<05:03:24.240> width<05:03:24.600> of<05:03:24.840> 24<05:03:25.798> and<05:03:26.000> a<05:03:26.280> height<05:03:26.638> of<05:03:26.878> 24<05:03:27.798> and

a width of 24 and a height of 24 and

a width of 24 and a height of 24 and
then<05:03:28.200> I'll<05:03:28.558> tag<05:03:28.958> off<05:03:29.680> search<05:03:30.680> finally<05:03:31.360> let's

then I'll tag off search finally let's

then I'll tag off search finally let's
create<05:03:31.878> an<05:03:32.080> input

create an input

create an input
this<05:03:33.440> is<05:03:33.600> going<05:03:33.760> to<05:03:33.920> be<05:03:34.080> a<05:03:34.240> self-closing<05:03:35.080> input

this is going to be a self-closing input

this is going to be a self-closing input
component<05:03:36.240> coming<05:03:36.520> from<05:03:36.798> components<05:03:37.520> UI

component coming from components UI

component coming from components UI
input<05:03:39.320> it's<05:03:39.480> going<05:03:39.638> to<05:03:39.798> have<05:03:39.958> a<05:03:40.160> type<05:03:40.638> is<05:03:40.798> equal

input it's going to have a type is equal

input it's going to have a type is equal
to<05:03:41.400> text<05:03:42.400> a<05:03:43.120> placeholder<05:03:44.120> that's<05:03:44.360> going<05:03:44.520> to

to text a placeholder that's going to

to text a placeholder that's going to
say<05:03:45.760> search<05:03:46.760> a<05:03:47.040> class<05:03:47.400> name<05:03:48.000> equal<05:03:48.320> to<05:03:48.638> explore

say search a class name equal to explore

say search a class name equal to explore
Das

Das

Das
search<05:03:52.080> and<05:03:52.280> of<05:03:52.440> course<05:03:53.000> what<05:03:53.240> would<05:03:53.558> an<05:03:53.760> input

search and of course what would an input

search and of course what would an input
be<05:03:54.680> without<05:03:55.000> a<05:03:55.320> value<05:03:56.120> which<05:03:56.280> is<05:03:56.360> going<05:03:56.638> to<05:03:56.718> be

be without a value which is going to be

be without a value which is going to be
a<05:03:56.958> use<05:03:57.280> state<05:03:57.680> right<05:03:57.840> here<05:03:57.958> on<05:03:58.240> top<05:03:59.000> so<05:03:59.160> we<05:03:59.280> can

a use state right here on top so we can

a use state right here on top so we can
use<05:03:59.798> a<05:04:00.040> state<05:04:00.360> snippet<05:04:01.360> and<05:04:01.558> we<05:04:01.638> can<05:04:01.840> call<05:04:02.120> it

use a state snippet and we can call it

use a state snippet and we can call it
search<05:04:03.760> value<05:04:04.760> set<05:04:05.120> search<05:04:05.520> value<05:04:06.040> as<05:04:06.240> well

search value set search value as well

search value set search value as well
and<05:04:07.320> then<05:04:07.480> at<05:04:07.600> the<05:04:07.798> start<05:04:08.080> it's<05:04:08.240> going<05:04:08.400> to<05:04:08.520> be

and then at the start it's going to be

and then at the start it's going to be
set<05:04:08.878> to<05:04:09.000> an<05:04:09.120> empty<05:04:09.480> string<05:04:10.320> and<05:04:10.600> we<05:04:10.680> of<05:04:10.798> course

set to an empty string and we of course

set to an empty string and we of course
have<05:04:11.120> to<05:04:11.320> import<05:04:12.040> use<05:04:12.520> State<05:04:13.360> coming<05:04:13.718> from

have to import use State coming from

have to import use State coming from
react<05:04:16.000> now<05:04:16.240> we<05:04:16.360> can<05:04:16.558> use<05:04:16.958> this<05:04:17.638> search<05:04:18.160> value

react now we can use this search value

react now we can use this search value
right<05:04:19.200> here<05:04:20.200> and<05:04:20.680> the<05:04:20.840> input<05:04:21.320> also<05:04:21.600> needs

right here and the input also needs

right here and the input also needs
something<05:04:22.240> to<05:04:22.440> modify<05:04:22.958> that<05:04:23.200> value<05:04:23.840> which<05:04:24.000> is

something to modify that value which is

something to modify that value which is
going<05:04:24.280> to<05:04:24.440> be<05:04:24.600> an<05:04:24.798> onchange

going to be an onchange

going to be an onchange
Handler<05:04:28.240> this<05:04:28.440> onchange<05:04:29.280> is<05:04:29.440> going<05:04:29.558> to<05:04:29.718> get<05:04:29.840> an

Handler this onchange is going to get an

Handler this onchange is going to get an
event<05:04:30.798> and<05:04:31.040> it's<05:04:31.240> going<05:04:31.400> to<05:04:31.638> set<05:04:32.000> search<05:04:32.360> value

event and it's going to set search value

event and it's going to set search value
value<05:04:33.080> to<05:04:33.240> be<05:04:33.440> equal<05:04:33.718> to<05:04:34.120> e.<05:04:34.840> target.<05:04:35.840> value

value to be equal to e. target. value

value to be equal to e. target. value
like<05:04:36.558> so<05:04:37.040> so<05:04:37.200> we<05:04:37.320> can<05:04:37.480> immediately<05:04:38.040> get<05:04:38.240> the

like so so we can immediately get the

like so so we can immediately get the
value<05:04:39.000> and<05:04:39.120> then<05:04:39.280> modify<05:04:39.760> it<05:04:40.760> now<05:04:41.000> let's<05:04:41.160> go

value and then modify it now let's go

value and then modify it now let's go
two<05:04:41.680> devs<05:04:42.360> below<05:04:43.360> and<05:04:43.480> then<05:04:43.760> there<05:04:44.000> we<05:04:44.120> can

two devs below and then there we can

two devs below and then there we can
start<05:04:44.638> creating<05:04:45.200> the<05:04:45.638> what<05:04:45.798> is<05:04:45.958> about<05:04:46.160> to

start creating the what is about to

start creating the what is about to
become<05:04:46.878> the<05:04:47.558> popular<05:04:48.558> the<05:04:48.718> explore<05:04:49.200> page<05:04:50.000> so

become the popular the explore page so

become the popular the explore page so
let's<05:04:50.558> give<05:04:50.718> this<05:04:50.920> div<05:04:51.200> a<05:04:51.440> class<05:04:51.840> name<05:04:52.680> equal

let's give this div a class name equal

let's give this div a class name equal
to<05:04:54.120> flex<05:04:55.120> Das

to flex Das

to flex Das
between<05:04:57.000> w-<05:04:57.798> full<05:04:58.080> for<05:04:58.280> full<05:04:58.638> width<05:04:59.638> Max<05:05:00.160> DW

between w- full for full width Max DW

between w- full for full width Max DW
d5xl

d5xl

d5xl
and<05:05:03.680> margin<05:05:04.120> top<05:05:04.360> of<05:05:04.520> 16<05:05:05.000> to<05:05:05.200> divide<05:05:05.480> it<05:05:05.600> from

and margin top of 16 to divide it from

and margin top of 16 to divide it from
the<05:05:05.840> search<05:05:06.558> and<05:05:06.718> margin<05:05:07.160> bottom<05:05:07.480> of

the search and margin bottom of

the search and margin bottom of
seven<05:05:09.360> in<05:05:09.638> there<05:05:10.040> we<05:05:10.160> can<05:05:10.320> have<05:05:10.520> an<05:05:10.638> H3<05:05:11.320> that's

seven in there we can have an H3 that's

seven in there we can have an H3 that's
going<05:05:11.680> to<05:05:11.798> be<05:05:12.000> similar<05:05:12.360> to<05:05:12.520> this<05:05:12.798> H2<05:05:13.798> and<05:05:14.000> we're

going to be similar to this H2 and we're

going to be similar to this H2 and we're
going<05:05:14.240> to<05:05:14.360> change<05:05:14.638> the<05:05:14.840> styling<05:05:15.638> to<05:05:15.840> be<05:05:16.080> body-

going to change the styling to be body-

going to change the styling to be body-
bold<05:05:18.280> as<05:05:18.440> Wells<05:05:18.680> on<05:05:18.798> medium<05:05:19.360> devices<05:05:20.360> H3<05:05:21.080> Das

bold as Wells on medium devices H3 Das

bold as Wells on medium devices H3 Das
bold<05:05:22.080> and<05:05:22.200> we<05:05:22.320> can<05:05:22.440> change<05:05:22.680> it<05:05:22.840> to<05:05:23.400> H3<05:05:24.400> there<05:05:24.558> we

bold and we can change it to H3 there we

bold and we can change it to H3 there we
go<05:05:25.480> instead<05:05:25.760> of<05:05:25.878> search<05:05:26.200> posts<05:05:26.840> it's<05:05:27.000> going<05:05:27.120> to

go instead of search posts it's going to

go instead of search posts it's going to
say<05:05:27.798> popular

say popular

say popular
today<05:05:30.798> right<05:05:31.040> below<05:05:31.360> it<05:05:32.200> we<05:05:32.320> can<05:05:32.480> can<05:05:32.600> create<05:05:32.920> a

today right below it we can can create a

today right below it we can can create a
new<05:05:33.360> div<05:05:34.280> that's<05:05:34.480> going<05:05:34.638> to<05:05:34.840> have<05:05:35.000> a<05:05:35.280> class

new div that's going to have a class

new div that's going to have a class
name<05:05:36.320> equal<05:05:36.600> to<05:05:36.878> flex<05:05:37.798> Das<05:05:38.440> Center<05:05:39.440> gap<05:05:39.680> of

name equal to flex Das Center gap of

name equal to flex Das Center gap of
three<05:05:41.000> background<05:05:41.480> of<05:05:41.760> dark<05:05:42.360> three<05:05:43.200> rounded

three background of dark three rounded

three background of dark three rounded
Das<05:05:44.480> excl<05:05:45.480> padding<05:05:45.840> X<05:05:46.080> of<05:05:46.280> four<05:05:47.080> padding<05:05:47.440> y<05:05:47.638> of

Das excl padding X of four padding y of

Das excl padding X of four padding y of
two<05:05:48.520> and<05:05:48.718> cursor<05:05:49.320> Das<05:05:49.920> pointer<05:05:50.920> this<05:05:51.040> is<05:05:51.160> going

two and cursor Das pointer this is going

two and cursor Das pointer this is going
to<05:05:51.440> be<05:05:51.600> a<05:05:51.798> button<05:05:52.280> to<05:05:52.520> filter<05:05:53.080> our<05:05:53.360> posts<05:05:54.320> so

to be a button to filter our posts so

to be a button to filter our posts so
let's<05:05:54.680> create<05:05:54.878> a<05:05:55.040> P<05:05:55.320> tag<05:05:55.718> that's<05:05:55.920> going<05:05:56.080> to<05:05:56.200> say

let's create a P tag that's going to say

let's create a P tag that's going to say
all<05:05:57.480> at<05:05:57.600> the<05:05:57.760> start<05:05:58.040> we're<05:05:58.200> filtering<05:05:58.680> by<05:05:59.040> all

all at the start we're filtering by all

all at the start we're filtering by all
we<05:06:00.160> can<05:06:00.320> give<05:06:00.440> it<05:06:00.558> a<05:06:00.760> class<05:06:01.120> name<05:06:01.840> equal<05:06:02.160> to

we can give it a class name equal to

we can give it a class name equal to
small<05:06:03.638> medium<05:06:04.638> on<05:06:04.840> medium<05:06:05.280> devices<05:06:05.958> base

small medium on medium devices base

small medium on medium devices base
medium<05:06:07.600> and<05:06:07.920> text-<05:06:09.000> light-2<05:06:10.000> for<05:06:10.440> the<05:06:10.878> color

medium and text- light-2 for the color

medium and text- light-2 for the color
below<05:06:12.280> this<05:06:12.480> P<05:06:12.760> tag<05:06:13.120> we<05:06:13.240> can<05:06:13.400> render<05:06:13.920> a

below this P tag we can render a

below this P tag we can render a
self-closing<05:06:15.040> image<05:06:15.400> tag<05:06:16.160> that's<05:06:16.360> going<05:06:16.520> to

self-closing image tag that's going to

self-closing image tag that's going to
have<05:06:16.840> a<05:06:17.040> source<05:06:17.878> equal<05:06:18.520> to<05:06:19.520> SL<05:06:20.080> assets<05:06:21.080> SL<05:06:21.600> ions

have a source equal to SL assets SL ions

have a source equal to SL assets SL ions
SL<05:06:23.080> filter.

SL filter.

SL filter.
SVG<05:06:25.680> it's<05:06:25.840> going<05:06:26.000> to<05:06:26.120> have<05:06:26.240> a<05:06:26.520> width<05:06:26.920> of<05:06:27.120> 20<05:06:28.040> a

SVG it's going to have a width of 20 a

SVG it's going to have a width of 20 a
height<05:06:28.958> of<05:06:29.200> 20<05:06:30.120> and<05:06:30.558> an<05:06:30.718> Al<05:06:31.080> tag<05:06:31.558> of<05:06:31.958> filter

height of 20 and an Al tag of filter

height of 20 and an Al tag of filter
there<05:06:33.680> we<05:06:33.878> go<05:06:34.200> so<05:06:34.400> now<05:06:34.638> this<05:06:34.760> is<05:06:34.920> looking

there we go so now this is looking

there we go so now this is looking
really<05:06:35.798> good<05:06:36.520> and<05:06:36.718> now<05:06:37.120> we<05:06:37.200> can<05:06:37.360> go<05:06:37.558> two<05:06:37.798> divs

really good and now we can go two divs

really good and now we can go two divs
below<05:06:38.680> and<05:06:38.798> we<05:06:38.920> can<05:06:39.040> show<05:06:39.280> the<05:06:39.480> results<05:06:40.080> of

below and we can show the results of

below and we can show the results of
what's<05:06:40.600> popular<05:06:40.958> today<05:06:41.878> so<05:06:42.040> let's<05:06:42.240> create<05:06:42.520> a

what's popular today so let's create a

what's popular today so let's create a
new<05:06:42.920> Dev<05:06:43.400> that's<05:06:43.558> going<05:06:43.718> to<05:06:43.878> have<05:06:44.000> a<05:06:44.240> class

new Dev that's going to have a class

new Dev that's going to have a class
name<05:06:45.160> equal<05:06:45.480> to<05:06:46.480> flex<05:06:47.520> flex-wrap<05:06:48.958> gap<05:06:49.958> of<05:06:50.320> nine

name equal to flex flex-wrap gap of nine

name equal to flex flex-wrap gap of nine
between<05:06:51.480> each<05:06:51.798> post<05:06:52.480> a<05:06:52.718> W-4<05:06:53.638> for<05:06:53.840> full<05:06:54.160> width

between each post a W-4 for full width

between each post a W-4 for full width
and<05:06:55.280> a<05:06:55.480> Max<05:06:55.878> W<05:06:56.440> of<05:06:56.680> 5<05:06:57.360> XEL<05:06:58.360> now<05:06:58.600> inside<05:06:58.958> of<05:06:59.160> here

and a Max W of 5 XEL now inside of here

and a Max W of 5 XEL now inside of here
we<05:06:59.878> should<05:07:00.120> figure<05:07:00.440> out<05:07:00.958> if<05:07:01.160> we<05:07:01.240> should<05:07:01.440> show

we should figure out if we should show

we should figure out if we should show
no<05:07:02.040> post<05:07:02.360> post<05:07:02.798> or<05:07:03.040> if<05:07:03.160> we<05:07:03.280> should<05:07:03.480> show<05:07:03.840> old

no post post or if we should show old

no post post or if we should show old
posts<05:07:06.160> so<05:07:06.360> let's<05:07:06.558> create<05:07:06.798> some<05:07:07.000> variables

posts so let's create some variables

posts so let's create some variables
that<05:07:07.558> are<05:07:07.680> going<05:07:07.760> to<05:07:07.878> help<05:07:08.240> decide<05:07:08.798> what<05:07:08.920> to

that are going to help decide what to

that are going to help decide what to
show<05:07:10.120> we<05:07:10.240> can<05:07:10.440> say<05:07:10.718> const<05:07:11.558> should

show we can say const should

show we can say const should
show<05:07:14.760> search<05:07:16.040> results<05:07:17.040> and<05:07:17.200> that's<05:07:17.360> going<05:07:17.520> to

show search results and that's going to

show search results and that's going to
be<05:07:17.840> equal<05:07:18.080> to<05:07:18.638> if<05:07:18.840> search<05:07:19.360> value<05:07:20.160> is<05:07:20.480> not<05:07:20.958> equal

be equal to if search value is not equal

be equal to if search value is not equal
to<05:07:21.360> an<05:07:21.480> empty<05:07:21.798> string<05:07:22.520> then<05:07:22.760> yes<05:07:23.160> it<05:07:23.280> should

to an empty string then yes it should

to an empty string then yes it should
show<05:07:23.718> search<05:07:24.280> results<05:07:25.280> then<05:07:25.958> const

show search results then const

show search results then const
should<05:07:29.200> show<05:07:30.040> posts<05:07:30.958> it's<05:07:31.120> going<05:07:31.280> to<05:07:31.440> be<05:07:31.600> equal

should show posts it's going to be equal

should show posts it's going to be equal
to<05:07:32.600> if<05:07:32.760> it's<05:07:33.000> no<05:07:33.638> should<05:07:34.400> show<05:07:35.400> search<05:07:35.798> results

to if it's no should show search results

to if it's no should show search results
I<05:07:36.600> think<05:07:36.718> I<05:07:36.878> misspelled<05:07:37.320> it<05:07:37.440> show<05:07:37.718> show<05:07:38.200> it

I think I misspelled it show show it

I think I misspelled it show show it
should<05:07:38.440> have<05:07:38.600> been<05:07:39.040> should<05:07:39.958> show<05:07:40.958> so<05:07:41.160> if<05:07:41.320> no

should have been should show so if no

should have been should show so if no
should<05:07:41.920> show<05:07:42.400> search<05:07:42.958> results<05:07:43.958> and<05:07:44.638> if<05:07:44.798> we

should show search results and if we

should show search results and if we
have<05:07:45.400> posts<05:07:46.400> so<05:07:46.600> later<05:07:46.840> on<05:07:47.000> we're<05:07:47.120> going<05:07:47.240> to

have posts so later on we're going to

have posts so later on we're going to
have<05:07:47.440> an<05:07:47.558> array<05:07:47.840> of<05:07:48.040> post<05:07:48.680> cons<05:07:49.120> post<05:07:49.400> is<05:07:49.558> an

have an array of post cons post is an

have an array of post cons post is an
array<05:07:52.240> and<05:07:52.360> then<05:07:52.480> we'll<05:07:52.680> be<05:07:52.798> able<05:07:53.000> to<05:07:53.200> say<05:07:53.600> if

array and then we'll be able to say if

array and then we'll be able to say if
posts.<05:07:55.440> pages.<05:07:56.440> every<05:07:56.920> page<05:07:57.920> has<05:07:58.120> an<05:07:58.878> item

posts. pages. every page has an item

posts. pages. every page has an item
where<05:08:00.280> an<05:08:00.520> item.<05:08:01.360> documents<05:08:02.280> do<05:08:02.840> length<05:08:03.840> is

where an item. documents do length is

where an item. documents do length is
greater

greater

greater
than<05:08:06.200> zero<05:08:07.200> that<05:08:07.320> means<05:08:07.600> that<05:08:07.760> we<05:08:07.920> do<05:08:08.200> have

than zero that means that we do have

than zero that means that we do have
posts<05:08:09.160> but<05:08:09.360> again<05:08:09.600> this<05:08:09.718> is<05:08:09.878> just<05:08:10.000> a<05:08:10.240> fake

posts but again this is just a fake

posts but again this is just a fake
array<05:08:11.240> soon<05:08:11.520> enough<05:08:11.760> we're<05:08:11.878> going<05:08:12.000> to<05:08:12.160> fix

array soon enough we're going to fix

array soon enough we're going to fix
this<05:08:13.200> but<05:08:13.400> these<05:08:13.558> two<05:08:13.798> Boolean<05:08:14.280> variables

this but these two Boolean variables

this but these two Boolean variables
should<05:08:15.160> allow<05:08:15.440> us<05:08:15.558> to<05:08:15.760> know<05:08:16.240> what<05:08:16.400> we<05:08:16.520> need<05:08:16.638> to

should allow us to know what we need to

should allow us to know what we need to
display<05:08:17.558> so<05:08:17.840> right<05:08:18.000> here<05:08:18.280> below<05:08:19.040> we<05:08:19.160> can<05:08:19.360> say

display so right here below we can say

display so right here below we can say
if<05:08:20.680> should<05:08:21.240> show<05:08:21.878> search

if should show search

if should show search
results<05:08:23.840> then<05:08:24.400> we<05:08:24.520> can<05:08:24.638> do<05:08:24.760> a<05:08:24.878> Turner

results then we can do a Turner

results then we can do a Turner
operation<05:08:26.400> and<05:08:26.520> then<05:08:26.680> we<05:08:26.760> can<05:08:26.920> show<05:08:27.240> a<05:08:27.480> new

operation and then we can show a new

operation and then we can show a new
search<05:08:28.680> results<05:08:29.440> component<05:08:30.440> like<05:08:30.760> this<05:08:31.760> else

search results component like this else

search results component like this else
we<05:08:32.520> can<05:08:32.680> check<05:08:33.000> if<05:08:33.320> should<05:08:33.958> show<05:08:34.840> posts<05:08:35.840> then

we can check if should show posts then

we can check if should show posts then
we<05:08:36.200> can<05:08:36.320> do<05:08:36.440> a<05:08:36.600> P<05:08:36.840> tag<05:08:37.160> here<05:08:37.400> and<05:08:37.558> say<05:08:37.840> end<05:08:38.360> off

we can do a P tag here and say end off

we can do a P tag here and say end off
posts<05:08:39.400> because<05:08:39.638> we<05:08:39.760> have<05:08:39.920> came<05:08:40.200> to<05:08:40.360> the<05:08:40.520> bottom

posts because we have came to the bottom

posts because we have came to the bottom
and<05:08:41.360> we<05:08:41.440> can<05:08:41.600> give<05:08:41.680> it<05:08:41.798> a<05:08:42.040> class<05:08:42.360> name<05:08:42.798> of<05:08:43.520> text

and we can give it a class name of text

and we can give it a class name of text
dl-4<05:08:46.000> margin<05:08:46.440> top<05:08:46.718> of<05:08:46.878> 10<05:08:47.798> text-<05:08:48.680> Center<05:08:49.680> and

dl-4 margin top of 10 text- Center and

dl-4 margin top of 10 text- Center and
w-<05:08:50.760> full<05:08:51.760> and<05:08:52.040> finally<05:08:52.840> we<05:08:52.958> can<05:08:53.160> render<05:08:53.600> the

w- full and finally we can render the

w- full and finally we can render the
posts<05:08:54.240> so<05:08:54.400> we<05:08:54.480> can<05:08:54.600> say<05:08:54.920> posts.<05:08:55.920> pages.<05:08:56.920> map

posts so we can say posts. pages. map

posts so we can say posts. pages. map
here<05:08:57.680> we<05:08:57.840> Rend<05:08:58.080> it<05:08:58.240> through<05:08:58.440> all<05:08:58.600> the<05:08:58.878> pages

here we Rend it through all the pages

here we Rend it through all the pages
where<05:09:00.000> we<05:09:00.160> get<05:09:00.400> each<05:09:00.638> individual<05:09:01.240> item<05:09:01.920> and

where we get each individual item and

where we get each individual item and
and<05:09:02.360> an<05:09:02.798> index<05:09:03.798> and<05:09:04.080> we<05:09:04.400> return<05:09:04.840> something

and an index and we return something

and an index and we return something
known<05:09:05.440> as<05:09:05.558> a<05:09:05.798> grid<05:09:06.760> post<05:09:07.878> list<05:09:08.878> this<05:09:08.958> is

known as a grid post list this is

known as a grid post list this is
another<05:09:09.440> component<05:09:09.840> that<05:09:09.958> we<05:09:10.160> don't<05:09:10.440> yet<05:09:10.718> have

another component that we don't yet have

another component that we don't yet have
so<05:09:11.200> it's<05:09:11.320> going<05:09:11.480> to<05:09:11.638> result<05:09:12.000> in<05:09:12.120> an<05:09:12.320> error

so it's going to result in an error

so it's going to result in an error
right<05:09:13.160> now<05:09:14.160> but<05:09:14.400> we<05:09:14.520> can<05:09:14.798> pass<05:09:15.040> it<05:09:15.400> a<05:09:15.638> key<05:09:16.320> equal

right now but we can pass it a key equal

right now but we can pass it a key equal
to<05:09:17.680> something<05:09:18.000> like<05:09:18.480> page-

to something like page-

to something like page-
index<05:09:21.480> as<05:09:21.600> well<05:09:21.760> as<05:09:22.040> posts<05:09:22.638> which<05:09:22.760> is<05:09:22.920> equal<05:09:23.200> to

index as well as posts which is equal to

index as well as posts which is equal to
item.<05:09:24.360> documents<05:09:25.160> so<05:09:25.440> posts<05:09:25.840> on<05:09:26.080> that

item. documents so posts on that

item. documents so posts on that
specific<05:09:26.878> page<05:09:27.718> and<05:09:27.878> now<05:09:28.040> of<05:09:28.200> course

specific page and now of course

specific page and now of course
everything<05:09:28.718> is<05:09:28.878> breaking<05:09:29.400> because<05:09:29.638> we<05:09:29.760> have

everything is breaking because we have

everything is breaking because we have
to<05:09:30.040> create<05:09:30.440> two<05:09:30.718> new<05:09:31.000> components<05:09:31.680> search

to create two new components search

to create two new components search
results<05:09:32.600> and<05:09:32.840> GD<05:09:33.200> post<05:09:33.520> list<05:09:34.200> so<05:09:34.520> let's<05:09:34.718> do

results and GD post list so let's do

results and GD post list so let's do
that<05:09:35.240> immediately<05:09:36.240> by<05:09:36.440> going<05:09:36.718> to<05:09:37.440> components

that immediately by going to components

that immediately by going to components
shared<05:09:39.600> search<05:09:41.040> results.<05:09:42.040> TSX<05:09:43.040> where<05:09:43.160> we<05:09:43.320> run

shared search results. TSX where we run

shared search results. TSX where we run
rafc<05:09:45.958> as<05:09:46.160> well

rafc as well

rafc as well
as<05:09:48.718> grid<05:09:49.680> poost<05:09:50.400> list.<05:09:51.360> TSX<05:09:52.320> where<05:09:52.440> we<05:09:52.558> run

as grid poost list. TSX where we run

as grid poost list. TSX where we run
rafc<05:09:54.480> again<05:09:55.480> now<05:09:55.680> we<05:09:55.798> can<05:09:56.120> import<05:09:56.718> both<05:09:56.920> of

rafc again now we can import both of

rafc again now we can import both of
these<05:09:57.360> components<05:09:58.360> right

these components right

these components right
here<05:10:01.558> but<05:10:01.798> if<05:10:02.160> we<05:10:02.280> go<05:10:02.480> a<05:10:02.600> bit<05:10:02.878> above<05:10:03.718> and<05:10:03.878> then

here but if we go a bit above and then

here but if we go a bit above and then
comment<05:10:04.600> out<05:10:05.320> these<05:10:05.718> posts<05:10:06.360> because<05:10:06.718> right

comment out these posts because right

comment out these posts because right
now<05:10:07.280> this<05:10:07.520> breaks<05:10:08.320> because<05:10:08.718> the<05:10:08.878> pages<05:10:09.200> don't

now this breaks because the pages don't

now this breaks because the pages don't
exist<05:10:09.760> on<05:10:09.958> posts<05:10:10.638> so<05:10:10.840> maybe<05:10:11.040> we<05:10:11.160> can<05:10:11.320> add

exist on posts so maybe we can add

exist on posts so maybe we can add
question<05:10:11.840> marks<05:10:12.240> right<05:10:12.400> here<05:10:12.558> to<05:10:12.760> make<05:10:13.000> this

question marks right here to make this

question marks right here to make this
work<05:10:13.840> for<05:10:14.080> now<05:10:14.360> that's<05:10:14.600> not<05:10:14.798> going<05:10:14.958> to<05:10:15.160> work<05:10:15.520> so

work for now that's not going to work so

work for now that's not going to work so
we<05:10:15.798> can<05:10:16.000> comment<05:10:16.320> it<05:10:16.480> out<05:10:16.958> and<05:10:17.120> the<05:10:17.240> reason<05:10:17.558> why

we can comment it out and the reason why

we can comment it out and the reason why
it's<05:10:17.840> not<05:10:18.080> working<05:10:18.718> is<05:10:19.000> because<05:10:19.680> these

it's not working is because these

it's not working is because these
variables<05:10:20.480> are<05:10:20.680> not<05:10:20.920> working<05:10:21.600> as<05:10:21.798> the<05:10:21.958> pages

variables are not working as the pages

variables are not working as the pages
don't<05:10:23.000> exist<05:10:23.400> under<05:10:23.840> posts<05:10:24.638> so<05:10:24.798> we<05:10:24.920> can

don't exist under posts so we can

don't exist under posts so we can
comment<05:10:25.718> all<05:10:26.320> of<05:10:26.558> that<05:10:26.840> out<05:10:27.360> and<05:10:27.480> we're<05:10:27.718> left

comment all of that out and we're left

comment all of that out and we're left
with<05:10:28.160> the<05:10:28.280> base<05:10:29.040> structure<05:10:30.040> of<05:10:30.200> course<05:10:30.680> the

with the base structure of course the

with the base structure of course the
next<05:10:31.080> meaningful<05:10:31.558> thing<05:10:31.680> to<05:10:31.798> do<05:10:32.440> is<05:10:32.600> to

next meaningful thing to do is to

next meaningful thing to do is to
actually<05:10:33.480> fetch<05:10:34.240> real<05:10:34.760> posts<05:10:35.320> that<05:10:35.480> we<05:10:35.600> can

actually fetch real posts that we can

actually fetch real posts that we can
explore<05:10:36.638> and<05:10:36.798> then<05:10:37.000> implement<05:10:37.360> the<05:10:37.520> search<05:10:37.878> as

explore and then implement the search as

explore and then implement the search as
well<05:10:39.000> so<05:10:39.320> let's<05:10:39.558> go<05:10:39.680> ahead<05:10:40.040> and<05:10:40.200> let's<05:10:40.480> focus

well so let's go ahead and let's focus

well so let's go ahead and let's focus
on<05:10:41.400> getting<05:10:41.680> the<05:10:41.878> post<05:10:42.280> for<05:10:42.558> our<05:10:42.798> explore<05:10:43.360> page

on getting the post for our explore page

on getting the post for our explore page
and<05:10:44.558> don't<05:10:44.798> forget<05:10:45.280> that<05:10:45.400> in<05:10:45.520> the<05:10:45.680> explore

and don't forget that in the explore

and don't forget that in the explore
page<05:10:46.638> we<05:10:46.798> have<05:10:47.040> this<05:10:47.360> wonderful<05:10:48.120> infinite

page we have this wonderful infinite

page we have this wonderful infinite
scroll<05:10:49.200> so<05:10:49.320> you'll<05:10:49.600> always<05:10:49.920> be<05:10:50.080> able<05:10:50.320> to<05:10:50.480> get

scroll so you'll always be able to get

scroll so you'll always be able to get
new<05:10:50.958> content<05:10:51.798> as<05:10:52.040> you<05:10:52.240> scroll<05:10:52.878> down<05:10:53.878> so<05:10:54.240> let's

new content as you scroll down so let's

new content as you scroll down so let's
go<05:10:54.558> ahead<05:10:54.878> and<05:10:55.120> Implement<05:10:55.718> that<05:10:56.120> fetch<05:10:56.718> posts

go ahead and Implement that fetch posts

go ahead and Implement that fetch posts
you<05:10:57.840> know<05:10:58.040> the<05:10:58.160> drill<05:10:58.638> we<05:10:58.840> first<05:10:59.080> have<05:10:59.200> to<05:10:59.360> go

you know the drill we first have to go

you know the drill we first have to go
to<05:10:59.718> the<05:10:59.920> API<05:11:00.638> app<05:11:01.000> right<05:11:02.120> and<05:11:02.320> to<05:11:02.480> create<05:11:02.840> this

to the API app right and to create this

to the API app right and to create this
function<05:11:03.600> we<05:11:03.718> can<05:11:03.878> create<05:11:04.120> an<05:11:04.400> export<05:11:05.320> async

function we can create an export async

function we can create an export async
function<05:11:07.360> get<05:11:08.040> infinite<05:11:09.000> posts<05:11:10.000> of<05:11:10.120> course

function get infinite posts of course

function get infinite posts of course
we're<05:11:10.400> missing<05:11:10.680> an<05:11:10.840> N<05:11:11.200> right<05:11:11.440> here<05:11:12.400> and<05:11:12.638> it's

we're missing an N right here and it's

we're missing an N right here and it's
going<05:11:12.958> to<05:11:13.200> accept<05:11:13.920> an<05:11:14.240> object<05:11:14.798> called<05:11:15.480> page

going to accept an object called page

going to accept an object called page
peram<05:11:17.200> which<05:11:17.320> is<05:11:17.480> going<05:11:17.638> to<05:11:17.840> essentially<05:11:18.400> be

peram which is going to essentially be

peram which is going to essentially be
page<05:11:19.400> per<05:11:19.680> Ram<05:11:20.240> of<05:11:20.400> a<05:11:20.638> type<05:11:21.480> number<05:11:22.480> inside<05:11:22.798> of

page per Ram of a type number inside of

page per Ram of a type number inside of
here<05:11:23.200> we<05:11:23.280> want<05:11:23.440> to<05:11:23.600> define<05:11:24.000> the<05:11:24.160> queries<05:11:24.878> which

here we want to define the queries which

here we want to define the queries which
we<05:11:25.120> want<05:11:25.200> to<05:11:25.360> fetch<05:11:25.638> the<05:11:25.760> post<05:11:26.320> by<05:11:27.000> so<05:11:27.200> we<05:11:27.280> can

we want to fetch the post by so we can

we want to fetch the post by so we can
say<05:11:27.680> const<05:11:28.360> queries<05:11:29.240> of<05:11:29.400> a<05:11:29.638> type<05:11:30.160> array<05:11:30.878> with

say const queries of a type array with

say const queries of a type array with
any<05:11:31.280> kind<05:11:31.440> of<05:11:31.600> content

any kind of content

any kind of content
is<05:11:32.718> equal<05:11:33.040> to<05:11:33.638> array<05:11:34.280> of<05:11:34.520> query.<05:11:35.360> order

is equal to array of query. order

is equal to array of query. order
descending<05:11:37.240> based<05:11:37.638> off<05:11:37.798> of<05:11:37.958> the<05:11:38.200> updated<05:11:38.798> ad

descending based off of the updated ad

descending based off of the updated ad
property<05:11:40.400> and<05:11:40.520> we<05:11:40.638> have<05:11:40.760> to<05:11:40.958> add<05:11:41.200> a<05:11:41.400> dollar

property and we have to add a dollar

property and we have to add a dollar
sign<05:11:42.280> up<05:11:42.840> front<05:11:43.840> so<05:11:44.000> we<05:11:44.080> want<05:11:44.240> to<05:11:44.360> get<05:11:44.520> the

sign up front so we want to get the

sign up front so we want to get the
newest<05:11:45.040> post<05:11:45.440> first<05:11:46.240> and<05:11:46.400> we<05:11:46.480> want<05:11:46.600> to<05:11:46.760> limit

newest post first and we want to limit

newest post first and we want to limit
it<05:11:47.320> to<05:11:47.638> query.<05:11:48.638> limit<05:11:49.160> of<05:11:49.400> 20<05:11:50.400> 10<05:11:50.760> is<05:11:51.040> okay<05:11:51.360> as

it to query. limit of 20 10 is okay as

it to query. limit of 20 10 is okay as
well<05:11:51.878> considering<05:11:52.320> that<05:11:52.480> we<05:11:52.680> also<05:11:53.080> have

well considering that we also have

well considering that we also have
infinite<05:11:54.120> loading<05:11:55.120> then<05:11:55.400> we<05:11:55.480> want<05:11:55.600> to<05:11:55.760> check

infinite loading then we want to check

infinite loading then we want to check
if<05:11:56.680> we<05:11:56.920> have<05:11:57.320> page<05:11:57.638> prrams<05:11:58.360> so<05:11:58.638> if<05:11:58.920> page<05:11:59.200> pram

if we have page prrams so if page pram

if we have page prrams so if page pram
in<05:12:00.160> that<05:12:00.400> case<05:12:00.878> queries.<05:12:01.958> push<05:12:02.760> we<05:12:02.958> also<05:12:03.200> want

in that case queries. push we also want

in that case queries. push we also want
to<05:12:03.558> add<05:12:03.840> a

to add a

to add a
query.<05:12:05.638> cursor<05:12:06.840> after<05:12:07.840> what<05:12:08.080> does<05:12:08.320> this<05:12:08.520> mean

query. cursor after what does this mean

query. cursor after what does this mean
well<05:12:09.080> it<05:12:09.400> means<05:12:10.400> if<05:12:10.520> we're<05:12:10.718> at<05:12:10.798> the<05:12:11.000> page<05:12:11.240> two

well it means if we're at the page two

well it means if we're at the page two
skip<05:12:12.360> the<05:12:12.558> first<05:12:12.878> 10<05:12:13.320> already<05:12:13.840> and<05:12:14.000> give<05:12:14.160> me

skip the first 10 already and give me

skip the first 10 already and give me
the<05:12:14.480> second<05:12:14.798> 10<05:12:15.480> right<05:12:15.958> so<05:12:16.120> we<05:12:16.240> can<05:12:16.400> say<05:12:16.760> page

the second 10 right so we can say page

the second 10 right so we can say page
Pam<05:12:19.520> do<05:12:19.840> two

Pam do two

Pam do two
string<05:12:21.798> so<05:12:22.000> the<05:12:22.120> page<05:12:22.360> param<05:12:22.760> is<05:12:22.920> actually

string so the page param is actually

string so the page param is actually
going<05:12:23.280> to<05:12:23.400> be<05:12:23.520> a<05:12:23.680> number<05:12:24.080> of<05:12:24.280> how<05:12:24.440> many<05:12:24.798> pages

going to be a number of how many pages

going to be a number of how many pages
or<05:12:25.680> documents<05:12:26.440> do<05:12:26.600> we<05:12:26.718> want<05:12:26.840> to

or documents do we want to

or documents do we want to
skip<05:12:28.600> once<05:12:28.798> we<05:12:28.920> know<05:12:29.200> that<05:12:29.400> information<05:12:30.320> we

skip once we know that information we

skip once we know that information we
can<05:12:30.638> open<05:12:30.878> up<05:12:31.080> a<05:12:31.240> new<05:12:31.480> trial<05:12:31.958> and<05:12:32.120> catch<05:12:32.400> Block

can open up a new trial and catch Block

can open up a new trial and catch Block
in<05:12:33.440> the<05:12:33.638> catch<05:12:34.160> we<05:12:34.280> can<05:12:34.440> simply<05:12:34.760> consel<05:12:35.240> log

in the catch we can simply consel log

in the catch we can simply consel log
the

the

the
error<05:12:37.718> and<05:12:37.958> in<05:12:38.120> the<05:12:38.280> try<05:12:38.920> we<05:12:39.040> can<05:12:39.200> try<05:12:39.360> to<05:12:39.520> fetch

error and in the try we can try to fetch

error and in the try we can try to fetch
those<05:12:40.160> posts<05:12:40.760> by<05:12:40.878> saying<05:12:41.240> const<05:12:42.160> posts<05:12:43.080> is

those posts by saying const posts is

those posts by saying const posts is
equal<05:12:43.600> to<05:12:44.480> await

equal to await

equal to await
databases.<05:12:47.080> list

databases. list

databases. list
documents<05:12:49.160> from<05:12:49.440> a<05:12:49.680> database<05:12:50.360> with<05:12:50.520> an<05:12:50.718> ID<05:12:51.200> of

documents from a database with an ID of

documents from a database with an ID of
ight<05:12:52.120> config<05:12:52.840> database<05:12:53.400> ID<05:12:54.240> and<05:12:54.440> the

ight config database ID and the

ight config database ID and the
collection<05:12:55.240> with<05:12:55.360> an<05:12:55.520> ID<05:12:56.000> of<05:12:56.280> aight<05:12:56.760> config

collection with an ID of aight config

collection with an ID of aight config
that<05:12:57.680> post<05:12:58.120> collection<05:12:58.558> ID<05:12:59.360> and<05:12:59.520> then<05:12:59.638> we<05:12:59.718> want

that post collection ID and then we want

that post collection ID and then we want
to<05:13:00.080> pass<05:13:00.400> all<05:13:00.638> the<05:13:00.760> queries<05:13:01.480> BAS<05:13:02.040> off<05:13:02.240> of<05:13:02.440> which

to pass all the queries BAS off of which

to pass all the queries BAS off of which
we<05:13:02.878> want<05:13:03.000> to<05:13:03.160> fetch<05:13:03.440> the

we want to fetch the

we want to fetch the
data<05:13:05.240> if<05:13:05.440> there<05:13:05.600> are<05:13:06.000> no<05:13:06.320> posts<05:13:06.878> we<05:13:07.000> can<05:13:07.160> throw

data if there are no posts we can throw

data if there are no posts we can throw
an<05:13:07.480> error<05:13:08.200> in<05:13:08.360> case<05:13:08.600> there<05:13:08.760> are<05:13:09.360> we<05:13:09.480> can<05:13:09.840> return

an error in case there are we can return

an error in case there are we can return
the<05:13:10.878> posts<05:13:11.878> that's<05:13:12.080> it<05:13:12.240> for<05:13:12.400> the<05:13:12.600> get<05:13:12.798> infinite

the posts that's it for the get infinite

the posts that's it for the get infinite
posts<05:13:13.680> believe<05:13:13.920> it<05:13:14.040> or<05:13:14.240> not<05:13:15.240> but<05:13:15.480> while<05:13:15.600> we're

posts believe it or not but while we're

posts believe it or not but while we're
here<05:13:16.280> let's<05:13:16.520> also<05:13:16.798> do<05:13:17.000> the<05:13:17.240> search<05:13:18.240> and<05:13:18.400> that's

here let's also do the search and that's

here let's also do the search and that's
going<05:13:18.718> to<05:13:18.798> be<05:13:19.040> really<05:13:19.280> similar<05:13:19.798> to<05:13:20.000> get

going to be really similar to get

going to be really similar to get
infinite<05:13:20.638> posts<05:13:21.160> so<05:13:21.360> let's<05:13:21.558> duplicate<05:13:21.958> it

infinite posts so let's duplicate it

infinite posts so let's duplicate it
below<05:13:23.958> let's<05:13:24.200> change<05:13:24.558> the<05:13:24.840> name<05:13:25.840> this<05:13:26.120> time<05:13:26.878> to

below let's change the name this time to

below let's change the name this time to
search<05:13:29.280> posts<05:13:30.280> we<05:13:30.440> won't<05:13:30.718> need<05:13:31.000> any<05:13:31.160> kind<05:13:31.320> of

search posts we won't need any kind of

search posts we won't need any kind of
page<05:13:31.920> Brams<05:13:32.638> we'll<05:13:32.840> need<05:13:33.240> search<05:13:34.080> term<05:13:34.840> of<05:13:35.000> a

page Brams we'll need search term of a

page Brams we'll need search term of a
type

type

type
string<05:13:37.520> we<05:13:37.638> don't<05:13:37.878> need<05:13:38.120> any<05:13:38.320> kind<05:13:38.440> of<05:13:38.638> queries

string we don't need any kind of queries

string we don't need any kind of queries
or<05:13:39.280> page<05:13:39.558> prams<05:13:40.520> the<05:13:40.638> only<05:13:40.840> thing<05:13:41.000> we<05:13:41.120> need<05:13:41.240> to

or page prams the only thing we need to

or page prams the only thing we need to
do<05:13:41.878> is<05:13:42.160> fetch<05:13:42.558> the

do is fetch the

do is fetch the
posts<05:13:44.280> so<05:13:44.600> here<05:13:45.160> we<05:13:45.280> can<05:13:45.558> have<05:13:45.920> one<05:13:46.240> specific

posts so here we can have one specific

posts so here we can have one specific
query<05:13:47.280> which<05:13:47.400> is<05:13:47.520> going<05:13:47.718> to<05:13:47.878> be<05:13:48.120> query.<05:13:49.200> search

query which is going to be query. search

query which is going to be query. search
and<05:13:50.320> we<05:13:50.440> can<05:13:50.558> search<05:13:51.000> by<05:13:51.840> caption<05:13:52.840> and<05:13:53.080> the

and we can search by caption and the

and we can search by caption and the
search<05:13:53.638> term<05:13:54.120> is<05:13:54.240> going<05:13:54.440> to<05:13:54.600> be<05:13:55.240> the<05:13:55.360> search

search term is going to be the search

search term is going to be the search
term<05:13:56.280> that<05:13:56.400> we're<05:13:56.680> passing<05:13:57.200> through<05:13:57.680> props

term that we're passing through props

term that we're passing through props
there<05:13:59.120> we<05:13:59.638> go<05:14:00.638> and<05:14:01.120> again<05:14:01.360> thank<05:14:01.520> you<05:14:01.798> tab

there we go and again thank you tab

there we go and again thank you tab
script<05:14:02.320> it's<05:14:02.600> complaining<05:14:03.080> that<05:14:03.200> the<05:14:03.320> search

script it's complaining that the search

script it's complaining that the search
term<05:14:03.878> should<05:14:04.120> be<05:14:04.558> not<05:14:04.760> a<05:14:04.958> second<05:14:05.400> part<05:14:05.718> of<05:14:05.878> the

term should be not a second part of the

term should be not a second part of the
array<05:14:06.680> but<05:14:06.878> rather<05:14:07.160> a<05:14:07.360> second<05:14:07.718> part<05:14:08.160> of<05:14:08.400> this

array but rather a second part of this

array but rather a second part of this
search<05:14:09.320> object<05:14:10.240> there<05:14:10.400> we<05:14:10.600> go<05:14:11.240> and<05:14:11.400> then<05:14:11.520> we're

search object there we go and then we're

search object there we go and then we're
returning<05:14:12.080> the

returning the

returning the
posts<05:14:13.798> with<05:14:14.000> that<05:14:14.240> we're<05:14:14.480> done<05:14:14.798> with<05:14:14.958> the

posts with that we're done with the

posts with that we're done with the
search<05:14:15.638> posts<05:14:16.638> now<05:14:17.120> as<05:14:17.240> you<05:14:17.360> know<05:14:17.520> the<05:14:17.718> drill

search posts now as you know the drill

search posts now as you know the drill
we<05:14:18.280> have<05:14:18.400> to<05:14:18.600> consume<05:14:19.120> those<05:14:19.680> within<05:14:20.400> queries

we have to consume those within queries

we have to consume those within queries
and

and

and
mutations<05:14:23.440> so<05:14:23.840> let's<05:14:24.080> say<05:14:24.320> export<05:14:24.840> const<05:14:25.840> use

mutations so let's say export const use

mutations so let's say export const use
get<05:14:27.440> posts<05:14:28.440> which<05:14:28.600> is<05:14:28.760> equal<05:14:29.040> to<05:14:29.440> a<05:14:29.958> function

get posts which is equal to a function

get posts which is equal to a function
that<05:14:31.280> returns<05:14:32.120> something<05:14:32.480> known<05:14:32.878> as<05:14:33.000> a<05:14:33.320> use

that returns something known as a use

that returns something known as a use
infinite<05:14:35.160> query<05:14:36.040> this<05:14:36.160> is<05:14:36.320> a<05:14:36.520> buil-in<05:14:36.798> react

infinite query this is a buil-in react

infinite query this is a buil-in react
query<05:14:37.920> feature<05:14:38.920> here<05:14:39.280> want<05:14:39.400> to<05:14:39.638> pass<05:14:39.840> a<05:14:40.040> query

query feature here want to pass a query

query feature here want to pass a query
key<05:14:40.878> meaning<05:14:41.520> which<05:14:41.840> posts<05:14:42.280> do<05:14:42.440> we<05:14:42.558> want<05:14:42.680> to

key meaning which posts do we want to

key meaning which posts do we want to
get<05:14:43.440> and<05:14:43.558> that's<05:14:43.760> going<05:14:43.920> to<05:14:44.080> be<05:14:44.600> query<05:14:45.440> keys.

get and that's going to be query keys.

get and that's going to be query keys.
getet<05:14:47.320> infinite<05:14:48.760> posts<05:14:49.760> then<05:14:49.878> we<05:14:50.000> need<05:14:50.120> to

getet infinite posts then we need to

getet infinite posts then we need to
pass<05:14:50.480> a<05:14:50.680> query<05:14:51.320> function<05:14:52.320> which<05:14:52.440> is<05:14:52.558> going<05:14:52.718> to

pass a query function which is going to

pass a query function which is going to
be<05:14:53.080> get<05:14:53.680> infinite<05:14:54.558> posts<05:14:55.120> coming<05:14:55.400> from<05:14:55.718> aight

be get infinite posts coming from aight

be get infinite posts coming from aight
API<05:14:57.480> and<05:14:57.680> then<05:14:57.920> we<05:14:58.080> have<05:14:58.200> to<05:14:58.360> figure<05:14:58.638> out<05:14:58.920> how

API and then we have to figure out how

API and then we have to figure out how
we're<05:14:59.240> going<05:14:59.360> to<05:14:59.520> paginate<05:15:00.320> so<05:15:00.480> we<05:15:00.600> can<05:15:00.718> say

we're going to paginate so we can say

we're going to paginate so we can say
get<05:15:02.040> next<05:15:02.920> page<05:15:03.600> for<05:15:03.878> Ram<05:15:04.878> which<05:15:05.000> is<05:15:05.160> going<05:15:05.360> to

get next page for Ram which is going to

get next page for Ram which is going to
contain<05:15:06.520> the<05:15:06.760> last<05:15:07.160> page<05:15:07.440> that<05:15:07.600> we<05:15:08.120> visited

contain the last page that we visited

contain the last page that we visited
then<05:15:09.480> if<05:15:09.718> there's<05:15:09.920> no<05:15:10.200> data<05:15:10.878> that<05:15:11.000> means<05:15:11.280> there

then if there's no data that means there

then if there's no data that means there
are<05:15:11.520> no<05:15:11.680> more<05:15:12.000> pages<05:15:12.680> so<05:15:12.840> we<05:15:12.920> can<05:15:13.120> say<05:15:13.400> if<05:15:13.600> we're

are no more pages so we can say if we're

are no more pages so we can say if we're
on<05:15:13.958> the<05:15:14.240> last

on the last

on the last
page<05:15:16.360> and<05:15:17.200> if<05:15:18.200> last

page and if last

page and if last
page<05:15:21.760> documents.

page documents.

page documents.
length<05:15:24.320> is<05:15:24.520> equal<05:15:24.840> to<05:15:25.160> zero<05:15:26.160> then<05:15:26.440> we<05:15:26.558> can

length is equal to zero then we can

length is equal to zero then we can
return

return

return
null<05:15:29.360> else<05:15:29.878> we<05:15:29.958> want<05:15:30.080> to<05:15:30.400> find<05:15:30.920> the<05:15:31.160> ID<05:15:31.920> of<05:15:32.080> the

null else we want to find the ID of the

null else we want to find the ID of the
last<05:15:32.680> page<05:15:33.200> so<05:15:33.360> we<05:15:33.480> can<05:15:33.638> say<05:15:33.878> last<05:15:34.200> ID<05:15:35.200> is<05:15:35.360> equal

last page so we can say last ID is equal

last page so we can say last ID is equal
to<05:15:35.878> last<05:15:36.558> page.

to last page.

to last page.
documents<05:15:39.120> and<05:15:39.320> then<05:15:39.680> we<05:15:39.798> want<05:15:39.920> to<05:15:40.040> get<05:15:40.240> the

documents and then we want to get the

documents and then we want to get the
last<05:15:40.840> page.<05:15:41.638> documents.

last page. documents.

last page. documents.
length<05:15:44.878> minus<05:15:45.280> one<05:15:46.040> this<05:15:46.160> is<05:15:46.280> going<05:15:46.440> to<05:15:46.638> give

length minus one this is going to give

length minus one this is going to give
us<05:15:47.040> the<05:15:47.480> last<05:15:47.920> page<05:15:48.480> and<05:15:48.600> then<05:15:48.718> we<05:15:48.798> can<05:15:48.920> say

us the last page and then we can say

us the last page and then we can say
that<05:15:49.558> dollar<05:15:49.920> sign<05:15:50.320> ID<05:15:50.920> of<05:15:51.160> that<05:15:51.440> page<05:15:52.320> and<05:15:52.520> we

that dollar sign ID of that page and we

that dollar sign ID of that page and we
can<05:15:52.920> return<05:15:53.520> the<05:15:53.760> last<05:15:54.480> ID<05:15:55.480> here<05:15:55.840> it's

can return the last ID here it's

can return the last ID here it's
complaining<05:15:56.600> that<05:15:56.878> last<05:15:57.200> page<05:15:57.440> is<05:15:57.638> possibly

complaining that last page is possibly

complaining that last page is possibly
undefined<05:15:59.080> that's<05:15:59.360> okay<05:15:59.600> we<05:15:59.760> know<05:16:00.040> it<05:16:00.160> will

undefined that's okay we know it will

undefined that's okay we know it will
not<05:16:00.638> be<05:16:01.240> and<05:16:01.600> finally<05:16:01.958> we<05:16:02.080> can<05:16:02.200> do<05:16:02.360> a<05:16:02.558> similar

not be and finally we can do a similar

not be and finally we can do a similar
one<05:16:03.440> for<05:16:03.920> the<05:16:04.120> use<05:16:04.558> search<05:16:04.920> posts<05:16:05.558> so<05:16:05.840> right

one for the use search posts so right

one for the use search posts so right
here<05:16:06.400> we<05:16:06.520> can<05:16:06.638> say<05:16:07.000> export<05:16:07.958> const<05:16:08.798> use<05:16:09.520> search

here we can say export const use search

here we can say export const use search
posts<05:16:11.600> is<05:16:11.840> equal<05:16:12.160> to<05:16:13.080> a<05:16:13.240> function<05:16:13.638> where<05:16:13.760> we

posts is equal to a function where we

posts is equal to a function where we
pass<05:16:14.480> the<05:16:14.638> search<05:16:15.040> term<05:16:15.680> of<05:16:15.840> a<05:16:16.000> type<05:16:16.600> string

pass the search term of a type string

pass the search term of a type string
and<05:16:17.840> then<05:16:18.600> we<05:16:19.000> return<05:16:19.520> a<05:16:19.718> use

and then we return a use

and then we return a use
Query<05:16:22.360> where<05:16:22.718> the<05:16:22.878> query<05:16:23.360> key<05:16:24.040> is<05:16:24.280> equal<05:16:24.600> to

Query where the query key is equal to

Query where the query key is equal to
query.<05:16:25.958> keys<05:16:26.798> and<05:16:26.958> then<05:16:27.080> it's<05:16:27.240> going<05:16:27.400> to<05:16:27.558> be

query. keys and then it's going to be

query. keys and then it's going to be
search<05:16:28.520> posts<05:16:29.520> and<05:16:29.638> we<05:16:29.798> don't<05:16:30.040> pass<05:16:30.280> the

search posts and we don't pass the

search posts and we don't pass the
search<05:16:30.760> term<05:16:31.160> here<05:16:31.840> we<05:16:32.080> pass<05:16:32.320> it<05:16:32.840> under<05:16:33.280> query

search term here we pass it under query

search term here we pass it under query
function<05:16:34.680> once<05:16:34.840> we<05:16:35.000> call<05:16:35.320> the

function once we call the

function once we call the
function<05:16:37.080> so<05:16:37.360> query<05:16:37.840> FN<05:16:38.840> is<05:16:39.000> going<05:16:39.160> to<05:16:39.440> be<05:16:39.600> a

function so query FN is going to be a

function so query FN is going to be a
callback<05:16:40.200> function<05:16:40.760> where<05:16:40.920> we<05:16:41.120> call<05:16:41.878> the

callback function where we call the

callback function where we call the
function<05:16:42.360> we<05:16:42.520> created<05:16:43.320> called<05:16:43.680> search<05:16:44.120> posts

function we created called search posts

function we created called search posts
coming<05:16:45.240> from<05:16:45.798> aight<05:16:46.520> API<05:16:47.520> to<05:16:47.798> which<05:16:48.240> we<05:16:48.440> pass

coming from aight API to which we pass

coming from aight API to which we pass
the<05:16:48.798> search<05:16:49.440> term<05:16:50.440> finally<05:16:50.878> as<05:16:51.120> before<05:16:51.600> we

the search term finally as before we

the search term finally as before we
have<05:16:51.878> to<05:16:52.200> do<05:16:52.440> the<05:16:53.040> enabled<05:16:54.040> this<05:16:54.200> means<05:16:54.680> when

have to do the enabled this means when

have to do the enabled this means when
is<05:16:55.120> it<05:16:55.240> going<05:16:55.440> to<05:16:55.638> automatically<05:16:56.440> refetch

is it going to automatically refetch

is it going to automatically refetch
when<05:16:57.798> the<05:16:57.920> search<05:16:58.320> term<05:16:58.840> changes<05:16:59.760> and<05:16:59.958> this<05:17:00.080> is

when the search term changes and this is

when the search term changes and this is
how<05:17:00.360> we<05:17:00.520> do<05:17:00.680> it<05:17:01.520> so<05:17:01.958> this<05:17:02.080> is<05:17:02.320> great<05:17:02.878> now<05:17:03.040> we<05:17:03.160> can

how we do it so this is great now we can

how we do it so this is great now we can
consume<05:17:04.240> both<05:17:04.440> of<05:17:04.638> these<05:17:05.080> within<05:17:05.440> our<05:17:05.718> explore

consume both of these within our explore

consume both of these within our explore
page<05:17:06.958> in<05:17:07.120> the<05:17:07.320> same<05:17:07.600> way<05:17:07.798> we<05:17:07.920> have<05:17:08.080> been<05:17:08.200> doing

page in the same way we have been doing

page in the same way we have been doing
so<05:17:08.920> far<05:17:09.920> so<05:17:10.280> right<05:17:10.480> here<05:17:10.760> at<05:17:10.878> the<05:17:11.080> top<05:17:11.958> const

so far so right here at the top const

so far so right here at the top const
data<05:17:13.718> as<05:17:14.600> searched<05:17:15.718> posts<05:17:16.718> and<05:17:17.080> is<05:17:17.718> fetching

data as searched posts and is fetching

data as searched posts and is fetching
as<05:17:19.080> is<05:17:19.558> search<05:17:20.718> fetching<05:17:21.718> that's<05:17:22.000> equal<05:17:22.320> to

as is search fetching that's equal to

as is search fetching that's equal to
use<05:17:23.520> search<05:17:24.280> posts<05:17:25.000> coming<05:17:25.240> from<05:17:25.520> queries<05:17:25.878> and

use search posts coming from queries and

use search posts coming from queries and
mutations<05:17:26.958> to<05:17:27.200> which<05:17:27.360> we<05:17:27.520> have<05:17:27.638> to<05:17:27.920> pass<05:17:28.520> the

mutations to which we have to pass the

mutations to which we have to pass the
search<05:17:29.160> value<05:17:30.160> one<05:17:30.400> cool<05:17:30.638> thing<05:17:30.878> about<05:17:31.160> this

search value one cool thing about this

search value one cool thing about this
is<05:17:32.200> if<05:17:32.360> we<05:17:32.440> were<05:17:32.638> to<05:17:32.840> just<05:17:33.040> pass<05:17:33.240> a<05:17:33.440> regular

is if we were to just pass a regular

is if we were to just pass a regular
search<05:17:34.200> value<05:17:34.798> it<05:17:34.920> would<05:17:35.160> recall<05:17:35.798> this<05:17:36.160> every

search value it would recall this every

search value it would recall this every
time<05:17:36.760> that<05:17:36.920> we<05:17:37.080> enter<05:17:37.480> a<05:17:37.920> keystroke<05:17:38.920> but<05:17:39.160> this

time that we enter a keystroke but this

time that we enter a keystroke but this
can<05:17:39.520> be<05:17:39.680> quite<05:17:39.878> draining<05:17:40.360> for<05:17:40.600> our<05:17:40.878> API<05:17:41.798> and

can be quite draining for our API and

can be quite draining for our API and
our<05:17:42.280> server<05:17:43.000> and<05:17:43.240> everybody<05:17:43.638> involved<05:17:44.520> so

our server and everybody involved so

our server and everybody involved so
usually<05:17:45.160> what<05:17:45.280> you<05:17:45.400> want<05:17:45.520> to<05:17:45.638> do<05:17:46.000> is<05:17:46.120> you<05:17:46.200> want

usually what you want to do is you want

usually what you want to do is you want
to<05:17:46.440> do<05:17:46.558> it<05:17:46.798> after<05:17:47.160> a<05:17:47.440> specific<05:17:47.840> amount<05:17:48.080> of

to do it after a specific amount of

to do it after a specific amount of
milliseconds<05:17:49.040> pass<05:17:49.360> by<05:17:50.040> then<05:17:50.200> you<05:17:50.320> want<05:17:50.440> to<05:17:50.558> do

milliseconds pass by then you want to do

milliseconds pass by then you want to do
another<05:17:51.160> call<05:17:52.040> this<05:17:52.160> is<05:17:52.280> a<05:17:52.558> method<05:17:53.080> called

another call this is a method called

another call this is a method called
debouncing<05:17:55.120> so<05:17:55.520> what<05:17:55.638> you<05:17:55.718> can<05:17:55.920> do<05:17:56.558> is<05:17:57.280> close

debouncing so what you can do is close

debouncing so what you can do is close
everything<05:17:58.200> collapse<05:17:58.600> all<05:17:58.798> the<05:17:58.958> files<05:17:59.760> go<05:17:59.878> to

everything collapse all the files go to

everything collapse all the files go to
source<05:18:00.760> and<05:18:00.920> create<05:18:01.400> a<05:18:01.558> new<05:18:01.760> folder<05:18:02.440> called

source and create a new folder called

source and create a new folder called
hooks<05:18:04.360> within<05:18:04.718> hooks<05:18:05.320> you<05:18:05.440> can<05:18:05.638> create<05:18:05.878> a<05:18:06.040> hook

hooks within hooks you can create a hook

hooks within hooks you can create a hook
called<05:18:06.840> use<05:18:07.878> debounce

called use debounce

called use debounce
dots<05:18:10.400> and<05:18:10.600> this<05:18:10.718> is<05:18:10.840> a<05:18:11.040> hook<05:18:11.400> that<05:18:11.520> I<05:18:11.680> found

dots and this is a hook that I found

dots and this is a hook that I found
directly<05:18:13.000> from<05:18:13.360> react<05:18:13.840> query<05:18:14.798> here<05:18:15.120> they

directly from react query here they

directly from react query here they
provided<05:18:15.798> its<05:18:16.000> entire<05:18:16.360> code<05:18:17.040> essentially

provided its entire code essentially

provided its entire code essentially
what<05:18:17.718> it<05:18:17.840> does<05:18:18.320> is<05:18:18.520> as<05:18:18.638> you<05:18:18.760> start<05:18:19.080> typing<05:18:19.760> it

what it does is as you start typing it

what it does is as you start typing it
de<05:18:20.240> bounces<05:18:21.040> the<05:18:21.200> query<05:18:21.878> so<05:18:22.160> it<05:18:22.320> saves<05:18:22.638> you

de bounces the query so it saves you

de bounces the query so it saves you
performance<05:18:23.958> and<05:18:24.200> this<05:18:24.400> entire<05:18:24.798> debounce

performance and this entire debounce

performance and this entire debounce
query<05:18:26.040> is<05:18:26.200> going<05:18:26.360> to<05:18:26.520> be<05:18:26.718> in<05:18:26.840> the<05:18:27.040> GitHub<05:18:27.440> gist

query is going to be in the GitHub gist

query is going to be in the GitHub gist
down<05:18:28.080> below<05:18:28.718> so<05:18:28.878> you<05:18:28.958> can<05:18:29.160> simply<05:18:29.558> copy<05:18:29.840> it<05:18:30.320> and

down below so you can simply copy it and

down below so you can simply copy it and
paste<05:18:30.840> it<05:18:31.080> right<05:18:31.360> right<05:18:31.558> here<05:18:32.360> once<05:18:32.558> we<05:18:32.760> have

paste it right right here once we have

paste it right right here once we have
it<05:18:33.480> instead<05:18:33.760> of<05:18:33.958> passing<05:18:34.240> the<05:18:34.360> search<05:18:34.760> value

it instead of passing the search value

it instead of passing the search value
we<05:18:35.520> can<05:18:35.718> define<05:18:36.160> a<05:18:36.400> new<05:18:37.320> const<05:18:38.600> debounced

we can define a new const debounced

we can define a new const debounced
value<05:18:40.798> which<05:18:40.958> is<05:18:41.080> going<05:18:41.240> to<05:18:41.400> be<05:18:41.600> equal<05:18:41.878> to<05:18:42.320> use

value which is going to be equal to use

value which is going to be equal to use
the<05:18:43.320> bounce<05:18:44.320> to<05:18:44.558> which<05:18:44.680> you<05:18:44.878> pass<05:18:45.160> the<05:18:45.240> search

the bounce to which you pass the search

the bounce to which you pass the search
value<05:18:46.520> and<05:18:46.680> then<05:18:46.840> set<05:18:47.080> in<05:18:47.320> number<05:18:47.558> of

value and then set in number of

value and then set in number of
milliseconds<05:18:48.680> like<05:18:48.920> 500<05:18:49.878> until<05:18:50.240> when<05:18:50.480> it's

milliseconds like 500 until when it's

milliseconds like 500 until when it's
going<05:18:50.718> to<05:18:50.840> be<05:18:51.040> recalled<05:18:52.040> and<05:18:52.120> you<05:18:52.240> need<05:18:52.360> to

going to be recalled and you need to

going to be recalled and you need to
import<05:18:53.000> use<05:18:53.320> de<05:18:53.558> bounds<05:18:54.120> from<05:18:54.360> hooks<05:18:54.878> use

import use de bounds from hooks use

import use de bounds from hooks use
debounce<05:18:56.878> and<05:18:57.000> then<05:18:57.120> you<05:18:57.240> can<05:18:57.520> pass<05:18:57.920> the

debounce and then you can pass the

debounce and then you can pass the
debounced<05:18:58.798> value<05:18:59.320> which<05:18:59.400> is<05:18:59.558> going<05:18:59.680> to<05:18:59.840> make

debounced value which is going to make

debounced value which is going to make
our<05:19:00.200> application<05:19:00.958> even<05:19:01.280> even<05:19:01.520> more

our application even even more

our application even even more
optimized<05:19:03.400> so<05:19:03.718> here<05:19:04.120> we<05:19:04.280> have<05:19:04.558> everything

optimized so here we have everything

optimized so here we have everything
when<05:19:05.240> it<05:19:05.400> comes<05:19:05.600> to<05:19:05.760> the<05:19:05.958> search<05:19:06.958> but<05:19:07.240> above

when it comes to the search but above

when it comes to the search but above
the<05:19:07.638> search<05:19:08.240> we<05:19:08.360> can<05:19:08.558> also<05:19:09.240> Define<05:19:10.240> const<05:19:11.200> data

the search we can also Define const data

the search we can also Define const data
as

as

as
posts<05:19:14.000> fetch<05:19:14.638> next<05:19:15.360> page<05:19:16.360> as<05:19:16.520> well<05:19:16.718> as<05:19:17.040> has

posts fetch next page as well as has

posts fetch next page as well as has
next<05:19:18.160> page<05:19:19.120> which<05:19:19.240> is<05:19:19.480> equal<05:19:19.760> to<05:19:20.320> use<05:19:21.120> get

next page which is equal to use get

next page which is equal to use get
post<05:19:23.840> and<05:19:23.958> then<05:19:24.080> we<05:19:24.240> have<05:19:24.360> to<05:19:24.558> import<05:19:25.000> this

post and then we have to import this

post and then we have to import this
from<05:19:25.878> queries<05:19:26.280> and

from queries and

from queries and
mutations<05:19:28.040> now<05:19:28.558> this<05:19:28.718> gives<05:19:28.920> us<05:19:29.040> a<05:19:29.200> lot<05:19:29.320> of

mutations now this gives us a lot of

mutations now this gives us a lot of
data<05:19:29.718> to<05:19:29.878> work<05:19:30.160> with<05:19:30.520> because<05:19:30.798> no<05:19:31.000> longer

data to work with because no longer

data to work with because no longer
longer<05:19:31.480> do<05:19:31.600> we<05:19:31.718> have<05:19:31.840> to<05:19:32.000> fake<05:19:32.320> the<05:19:32.480> posts<05:19:33.360> now

longer do we have to fake the posts now

longer do we have to fake the posts now
we<05:19:33.920> can<05:19:34.200> actually<05:19:34.878> use<05:19:35.558> these<05:19:35.920> right

we can actually use these right

we can actually use these right
here<05:19:37.680> and<05:19:37.920> we<05:19:38.000> can<05:19:38.200> uncomment<05:19:39.000> what<05:19:39.200> we<05:19:39.400> have

here and we can uncomment what we have

here and we can uncomment what we have
right<05:19:39.958> here

right here

right here
below<05:19:42.160> if<05:19:42.240> you<05:19:42.400> do<05:19:42.638> that<05:19:42.920> and<05:19:43.120> save<05:19:43.400> it<05:19:43.958> we

below if you do that and save it we

below if you do that and save it we
still<05:19:44.400> get<05:19:44.558> an<05:19:44.718> error<05:19:45.520> but<05:19:45.718> that's<05:19:46.000> okay<05:19:46.320> we

still get an error but that's okay we

still get an error but that's okay we
can<05:19:46.600> go<05:19:46.718> to<05:19:47.000> inspect<05:19:48.000> and<05:19:48.120> then<05:19:48.400> conso<05:19:49.400> and<05:19:49.558> we

can go to inspect and then conso and we

can go to inspect and then conso and we
can<05:19:49.798> see<05:19:50.040> that<05:19:50.160> it's<05:19:50.320> complaining<05:19:51.160> that<05:19:51.280> it

can see that it's complaining that it

can see that it's complaining that it
cannot<05:19:51.718> read<05:19:52.080> undefined<05:19:52.718> at<05:19:53.040> Pages<05:19:53.878> line<05:19:54.440> 16

cannot read undefined at Pages line 16

cannot read undefined at Pages line 16
so<05:19:55.680> that<05:19:55.798> is<05:19:56.200> right<05:19:56.558> here<05:19:57.558> apparently<05:19:58.080> our

so that is right here apparently our

so that is right here apparently our
posts<05:19:59.040> still<05:19:59.320> don't<05:19:59.638> have<05:19:59.840> the<05:20:00.160> pages

posts still don't have the pages

posts still don't have the pages
other<05:20:02.160> errors<05:20:02.680> also<05:20:02.958> include<05:20:03.558> I'm<05:20:03.718> guessing

other errors also include I'm guessing

other errors also include I'm guessing
something<05:20:04.440> related<05:20:04.760> to<05:20:05.040> that<05:20:05.718> yes<05:20:06.440> so<05:20:06.680> what<05:20:06.840> we

something related to that yes so what we

something related to that yes so what we
can<05:20:07.080> do<05:20:07.360> is<05:20:07.480> we<05:20:07.600> can<05:20:07.760> conso<05:20:08.240> log<05:20:08.798> the<05:20:08.958> posts<05:20:09.798> and

can do is we can conso log the posts and

can do is we can conso log the posts and
see<05:20:10.520> what<05:20:10.680> are<05:20:10.840> we<05:20:11.040> getting<05:20:11.638> back<05:20:12.638> if<05:20:12.718> I<05:20:12.878> reload

see what are we getting back if I reload

see what are we getting back if I reload
the<05:20:13.400> page<05:20:13.680> once<05:20:13.958> again<05:20:14.840> it<05:20:15.040> seems<05:20:15.440> like<05:20:15.638> the

the page once again it seems like the

the page once again it seems like the
posts<05:20:16.440> are

posts are

posts are
undefined<05:20:18.400> so<05:20:18.558> let's<05:20:18.798> figure<05:20:19.040> out<05:20:19.400> why<05:20:19.600> that

undefined so let's figure out why that

undefined so let's figure out why that
is<05:20:20.600> one<05:20:20.840> thing<05:20:21.120> that<05:20:21.320> we<05:20:21.520> might<05:20:21.718> need<05:20:21.920> to<05:20:22.080> do<05:20:22.600> is

is one thing that we might need to do is

is one thing that we might need to do is
just<05:20:22.920> ensure<05:20:23.240> that<05:20:23.360> we<05:20:23.480> don't<05:20:23.760> get<05:20:23.878> to<05:20:24.120> this

just ensure that we don't get to this

just ensure that we don't get to this
block<05:20:24.600> of<05:20:24.760> code<05:20:25.360> if<05:20:25.520> the<05:20:25.680> posts<05:20:26.040> are<05:20:26.240> undefined

block of code if the posts are undefined

block of code if the posts are undefined
and<05:20:27.400> it<05:20:27.520> seems<05:20:27.718> that<05:20:27.920> they<05:20:28.040> are<05:20:28.920> so<05:20:29.280> what<05:20:29.440> we

and it seems that they are so what we

and it seems that they are so what we
can<05:20:29.718> do<05:20:30.120> is<05:20:30.360> add<05:20:30.558> an<05:20:30.718> if<05:20:30.878> state<05:20:31.120> statement

can do is add an if state statement

can do is add an if state statement
right

right

right
here<05:20:33.400> checking<05:20:34.120> if<05:20:34.360> we<05:20:34.520> don't<05:20:34.840> have<05:20:35.160> posts<05:20:36.160> and

here checking if we don't have posts and

here checking if we don't have posts and
if<05:20:36.440> we<05:20:36.600> don't<05:20:36.878> yet<05:20:37.120> have<05:20:37.400> posts<05:20:38.240> then<05:20:38.480> we<05:20:38.600> can

if we don't yet have posts then we can

if we don't yet have posts then we can
simply<05:20:39.440> return<05:20:40.120> a<05:20:40.360> div<05:20:41.160> that<05:20:41.360> has<05:20:41.520> a<05:20:41.798> class

simply return a div that has a class

simply return a div that has a class
name<05:20:42.878> equal<05:20:43.160> to<05:20:43.360> flex<05:20:43.840> D<05:20:44.120> Center<05:20:45.160> w-o<05:20:46.160> and<05:20:46.400> h-

name equal to flex D Center w-o and h-

name equal to flex D Center w-o and h-
fool<05:20:47.760> and<05:20:47.958> this<05:20:48.080> is<05:20:48.240> going<05:20:48.400> to<05:20:48.520> render<05:20:48.958> only

fool and this is going to render only

fool and this is going to render only
one<05:20:49.558> thing<05:20:50.280> which<05:20:50.400> is<05:20:50.558> going<05:20:50.718> to<05:20:50.878> be<05:20:51.200> our

one thing which is going to be our

one thing which is going to be our
self-closing<05:20:52.480> loader<05:20:53.040> component<05:20:53.878> coming

self-closing loader component coming

self-closing loader component coming
from<05:20:54.400> components<05:20:55.120> shared<05:20:56.040> loader<05:20:57.040> if<05:20:57.160> we<05:20:57.320> save

from components shared loader if we save

from components shared loader if we save
this<05:20:58.440> you<05:20:58.558> can<05:20:58.680> see<05:20:58.878> that<05:20:59.040> our<05:20:59.280> app<05:20:59.520> works

this you can see that our app works

this you can see that our app works
again<05:21:00.718> and<05:21:01.240> we<05:21:01.360> can<05:21:01.480> see<05:21:01.760> that<05:21:02.000> first<05:21:02.440> the

again and we can see that first the

again and we can see that first the
posts<05:21:02.878> are<05:21:03.040> undefined<05:21:03.920> but<05:21:04.080> then<05:21:04.280> as<05:21:04.400> soon<05:21:04.558> as

posts are undefined but then as soon as

posts are undefined but then as soon as
it<05:21:04.840> loads<05:21:05.200> them<05:21:05.480> we<05:21:05.638> get<05:21:05.920> one<05:21:06.480> post<05:21:06.920> right<05:21:07.080> here

it loads them we get one post right here

it loads them we get one post right here
with<05:21:07.760> the<05:21:07.958> caption<05:21:08.280> that<05:21:08.400> we<05:21:08.520> have<05:21:08.680> entered<05:21:09.680> so

with the caption that we have entered so

with the caption that we have entered so
this<05:21:10.200> is<05:21:10.400> great<05:21:11.160> and<05:21:11.360> now<05:21:11.680> you<05:21:11.798> can<05:21:11.920> see<05:21:12.120> that

this is great and now you can see that

this is great and now you can see that
we're<05:21:12.480> displaying<05:21:13.160> the<05:21:13.400> grid<05:21:14.000> post<05:21:14.638> list

we're displaying the grid post list

we're displaying the grid post list
great<05:21:16.160> and<05:21:16.320> we're<05:21:16.558> passing<05:21:16.840> the<05:21:17.080> posts<05:21:17.520> within

great and we're passing the posts within

great and we're passing the posts within
them<05:21:19.240> so<05:21:19.558> what<05:21:19.680> do<05:21:19.798> you<05:21:19.920> say<05:21:20.120> that<05:21:20.240> we<05:21:20.360> try<05:21:20.558> to

them so what do you say that we try to

them so what do you say that we try to
show<05:21:21.040> these<05:21:21.280> posts<05:21:21.680> on<05:21:21.798> the<05:21:21.958> explore<05:21:22.480> page

show these posts on the explore page

show these posts on the explore page
let's<05:21:23.480> go<05:21:23.600> ahead<05:21:23.878> and<05:21:24.080> go<05:21:24.280> into<05:21:24.558> the<05:21:24.680> grid<05:21:24.958> post

let's go ahead and go into the grid post

let's go ahead and go into the grid post
list<05:21:25.958> and<05:21:26.240> let's<05:21:26.558> implement<05:21:27.040> it<05:21:27.840> first<05:21:28.160> things

list and let's implement it first things

list and let's implement it first things
first<05:21:28.840> let's<05:21:29.080> get<05:21:29.280> all<05:21:29.520> the<05:21:29.680> necessary<05:21:30.240> props

first let's get all the necessary props

first let's get all the necessary props
most<05:21:31.878> important<05:21:32.320> one<05:21:32.520> is<05:21:32.680> going<05:21:32.840> to<05:21:32.958> be<05:21:33.200> posts

most important one is going to be posts

most important one is going to be posts
so<05:21:34.080> we<05:21:34.200> can<05:21:34.400> Define<05:21:34.798> this<05:21:35.080> as<05:21:35.440> grid<05:21:36.200> post<05:21:36.920> list

so we can Define this as grid post list

so we can Define this as grid post list
props<05:21:38.360> and<05:21:38.480> we<05:21:38.558> can<05:21:38.680> Define<05:21:39.040> them<05:21:39.280> right<05:21:39.400> here

props and we can Define them right here

props and we can Define them right here
at<05:21:39.680> the<05:21:39.878> top<05:21:40.400> by<05:21:40.558> saying<05:21:41.520> type<05:21:42.520> GD<05:21:42.958> post<05:21:43.320> list

at the top by saying type GD post list

at the top by saying type GD post list
props<05:21:44.680> posts<05:21:45.600> is<05:21:45.760> going<05:21:45.920> to<05:21:46.040> be<05:21:46.240> of<05:21:46.360> a<05:21:46.558> type

props posts is going to be of a type

props posts is going to be of a type
models.<05:21:49.200> document<05:21:50.120> but<05:21:50.240> it's<05:21:50.400> going<05:21:50.520> to<05:21:50.638> be<05:21:50.760> an

models. document but it's going to be an

models. document but it's going to be an
array<05:21:51.558> of<05:21:51.760> these<05:21:51.958> models<05:21:52.680> coming<05:21:53.080> from

array of these models coming from

array of these models coming from
ight<05:21:55.718> now<05:21:55.878> that<05:21:56.000> we<05:21:56.120> have<05:21:56.240> the<05:21:56.400> post<05:21:56.798> here

ight now that we have the post here

ight now that we have the post here
let's<05:21:57.480> also<05:21:57.718> get<05:21:57.878> the<05:21:58.040> user<05:21:58.600> because<05:21:58.798> we'll

let's also get the user because we'll

let's also get the user because we'll
have<05:21:59.120> to<05:21:59.240> know<05:21:59.558> which<05:21:59.718> ones<05:21:59.920> were<05:22:00.120> created<05:22:00.480> by

have to know which ones were created by

have to know which ones were created by
the<05:22:00.680> user

the user

the user
so<05:22:02.280> you<05:22:02.400> know<05:22:02.638> the<05:22:02.760> drill<05:22:03.760> const<05:22:04.240> user<05:22:05.080> is

so you know the drill const user is

so you know the drill const user is
equal<05:22:05.760> to<05:22:06.760> use<05:22:07.558> user<05:22:08.320> context<05:22:09.200> which<05:22:09.320> we

equal to use user context which we

equal to use user context which we
import<05:22:10.000> from<05:22:10.280> OD

import from OD

import from OD
context<05:22:13.240> now<05:22:13.400> that<05:22:13.600> we<05:22:13.760> have<05:22:14.000> this<05:22:14.400> we<05:22:14.520> can

context now that we have this we can

context now that we have this we can
wrap<05:22:15.200> all<05:22:15.360> of<05:22:15.558> this<05:22:15.760> in<05:22:15.920> a<05:22:16.120> UL<05:22:16.798> an<05:22:17.080> unordered

wrap all of this in a UL an unordered

wrap all of this in a UL an unordered
list<05:22:18.840> that<05:22:19.080> has<05:22:19.240> a<05:22:19.520> class<05:22:19.878> name<05:22:20.520> equal<05:22:20.840> to<05:22:21.558> grid

list that has a class name equal to grid

list that has a class name equal to grid
Das

Das

Das
container<05:22:25.320> and<05:22:25.520> let's<05:22:25.718> save<05:22:25.958> it<05:22:26.558> you<05:22:26.680> can<05:22:26.798> see

container and let's save it you can see

container and let's save it you can see
it<05:22:27.120> disappears<05:22:27.840> and<05:22:28.000> now<05:22:28.200> within<05:22:28.600> here<05:22:29.200> we<05:22:29.320> can

it disappears and now within here we can

it disappears and now within here we can
map<05:22:29.840> over<05:22:30.080> the<05:22:30.320> posts<05:22:31.000> by<05:22:31.120> saying<05:22:31.480> posts.<05:22:32.360> map

map over the posts by saying posts. map

map over the posts by saying posts. map
where<05:22:33.480> we<05:22:33.638> get<05:22:33.920> each<05:22:34.200> individual<05:22:34.840> post<05:22:35.760> and

where we get each individual post and

where we get each individual post and
for<05:22:36.120> each<05:22:36.320> one<05:22:36.520> we<05:22:36.638> can<05:22:36.958> return<05:22:37.280> a<05:22:37.558> list<05:22:38.200> item

for each one we can return a list item

for each one we can return a list item
for<05:22:39.400> now<05:22:39.638> let's<05:22:39.798> say<05:22:39.958> that<05:22:40.080> we<05:22:40.200> just<05:22:40.480> returned

for now let's say that we just returned

for now let's say that we just returned
a<05:22:41.160> post.<05:22:42.160> caption<05:22:43.160> if<05:22:43.240> we<05:22:43.400> do<05:22:43.558> it<05:22:43.958> you<05:22:44.080> can<05:22:44.200> see

a post. caption if we do it you can see

a post. caption if we do it you can see
only<05:22:44.840> one<05:22:45.120> post<05:22:45.480> caption<05:22:45.958> here<05:22:46.400> but<05:22:46.558> of<05:22:46.680> course

only one post caption here but of course

only one post caption here but of course
we<05:22:47.040> want<05:22:47.160> to<05:22:47.320> make<05:22:47.520> this<05:22:47.638> a<05:22:47.760> bit<05:22:47.958> more

we want to make this a bit more

we want to make this a bit more
interesting<05:22:49.320> and<05:22:49.680> something<05:22:50.040> like<05:22:50.240> this

interesting and something like this

interesting and something like this
would<05:22:50.638> be<05:22:50.878> great<05:22:51.600> an<05:22:51.840> explore<05:22:52.360> page<05:22:52.680> where<05:22:52.798> we

would be great an explore page where we

would be great an explore page where we
can<05:22:53.000> see<05:22:53.280> all<05:22:53.600> the<05:22:53.840> popular<05:22:54.320> posts<05:22:55.160> we<05:22:55.280> have<05:22:55.400> a

can see all the popular posts we have a

can see all the popular posts we have a
nice<05:22:55.878> looking<05:22:56.240> image<05:22:56.920> a<05:22:57.080> Creator<05:22:57.440> in<05:22:57.680> bottom

nice looking image a Creator in bottom

nice looking image a Creator in bottom
left<05:22:58.400> and<05:22:58.520> then<05:22:58.798> save<05:22:59.360> and<05:22:59.760> like<05:23:00.320> on<05:23:00.558> the

left and then save and like on the

left and then save and like on the
bottom<05:23:01.240> right<05:23:01.520> as<05:23:01.638> well<05:23:02.400> and<05:23:02.520> then<05:23:02.638> we<05:23:02.760> can

bottom right as well and then we can

bottom right as well and then we can
Scroll<05:23:03.440> of<05:23:03.558> course<05:23:03.798> with<05:23:03.958> the<05:23:04.120> infinite

Scroll of course with the infinite

Scroll of course with the infinite
scroll<05:23:05.320> as<05:23:05.480> much<05:23:05.680> as<05:23:05.798> we<05:23:05.920> want<05:23:06.120> to<05:23:06.638> down<05:23:06.878> below

scroll as much as we want to down below

scroll as much as we want to down below
so<05:23:08.320> this<05:23:08.400> is<05:23:08.558> the<05:23:08.680> goal<05:23:09.480> and<05:23:09.718> we<05:23:09.840> can<05:23:10.040> implement

so this is the goal and we can implement

so this is the goal and we can implement
it<05:23:11.120> so<05:23:11.360> instead<05:23:11.600> of<05:23:11.760> just<05:23:11.878> An<05:23:12.080> Li<05:23:12.840> Let's<05:23:13.080> do<05:23:13.360> an

it so instead of just An Li Let's do an

it so instead of just An Li Let's do an
Li<05:23:14.240> that<05:23:14.440> has<05:23:14.558> a<05:23:14.840> key<05:23:15.638> equal<05:23:15.958> to<05:23:16.240> post.<05:23:17.160> doar<05:23:17.638> ID

Li that has a key equal to post. doar ID

Li that has a key equal to post. doar ID
as<05:23:18.200> We're<05:23:18.360> looping<05:23:18.760> over<05:23:19.040> it<05:23:19.760> and<05:23:19.920> the<05:23:20.200> class

as We're looping over it and the class

as We're looping over it and the class
name<05:23:20.878> of

name of

name of
relative<05:23:23.240> m-w<05:23:24.240> of<05:23:24.520> 80<05:23:25.520> and<05:23:26.040> H<05:23:26.480> of<05:23:26.718> 80<05:23:27.320> as<05:23:27.558> well

relative m-w of 80 and H of 80 as well

relative m-w of 80 and H of 80 as well
now<05:23:28.840> instead<05:23:29.120> of<05:23:29.200> rendering<05:23:29.718> a<05:23:29.958> post<05:23:30.360> caption

now instead of rendering a post caption

now instead of rendering a post caption
right<05:23:31.600> here<05:23:32.000> we<05:23:32.120> want<05:23:32.240> to<05:23:32.400> render<05:23:32.920> a<05:23:33.480> link<05:23:34.480> this

right here we want to render a link this

right here we want to render a link this
link<05:23:35.120> is<05:23:35.320> of<05:23:35.520> course<05:23:35.840> coming<05:23:36.600> from<05:23:38.080> import

link is of course coming from import

link is of course coming from import
link<05:23:40.360> from<05:23:41.120> react<05:23:42.120> router

link from react router

link from react router
Dom<05:23:44.480> this<05:23:44.680> link<05:23:45.200> is<05:23:45.360> going<05:23:45.600> to<05:23:46.240> wrap<05:23:46.840> our<05:23:47.080> image

Dom this link is going to wrap our image

Dom this link is going to wrap our image
so<05:23:47.920> right<05:23:48.080> here<05:23:48.240> we<05:23:48.360> can<05:23:48.558> Define<05:23:49.000> our<05:23:49.240> image

so right here we can Define our image

so right here we can Define our image
that's<05:23:50.280> going<05:23:50.400> to<05:23:50.520> have<05:23:50.638> a<05:23:50.840> source<05:23:51.360> equal<05:23:51.638> to

that's going to have a source equal to

that's going to have a source equal to
post.<05:23:52.718> image<05:23:53.160> URL<05:23:54.160> and<05:23:54.320> there<05:23:54.480> we<05:23:54.638> go<05:23:55.520> so<05:23:56.000> now

post. image URL and there we go so now

post. image URL and there we go so now
once<05:23:56.638> we<05:23:56.840> click<05:23:57.040> it<05:23:57.680> we<05:23:57.840> wanted<05:23:58.160> to<05:23:58.320> go<05:23:58.440> to<05:23:58.600> the

once we click it we wanted to go to the

once we click it we wanted to go to the
Post<05:23:59.040> details<05:23:59.440> of<05:23:59.638> this<05:23:59.878> post<05:24:00.480> so<05:24:00.840> let's<05:24:00.958> say

Post details of this post so let's say

Post details of this post so let's say
two<05:24:03.240> slost<05:24:04.600> slost<05:24:05.600> dooll<05:24:06.400> sign

two slost slost dooll sign

two slost slost dooll sign
ID<05:24:08.680> now<05:24:09.000> if<05:24:09.080> we<05:24:09.240> click<05:24:09.440> it<05:24:09.958> we<05:24:10.120> go<05:24:10.360> away<05:24:11.040> that's

ID now if we click it we go away that's

ID now if we click it we go away that's
great<05:24:11.958> let's<05:24:12.160> also<05:24:12.360> give<05:24:12.480> it<05:24:12.600> a<05:24:12.798> class<05:24:13.120> name

great let's also give it a class name

great let's also give it a class name
equal<05:24:14.160> to<05:24:14.760> grid<05:24:15.600> Das<05:24:16.920> postore<05:24:17.920> link<05:24:18.798> and

equal to grid Das postore link and

equal to grid Das postore link and
that's<05:24:19.080> going<05:24:19.240> to<05:24:19.360> make<05:24:19.520> it<05:24:19.680> look<05:24:19.840> a<05:24:19.958> bit

that's going to make it look a bit

that's going to make it look a bit
better<05:24:21.000> the<05:24:21.160> image<05:24:21.480> itself<05:24:21.878> is<05:24:22.040> going<05:24:22.200> to<05:24:22.320> have

better the image itself is going to have

better the image itself is going to have
an<05:24:22.558> Al<05:24:22.920> tag<05:24:23.160> of<05:24:23.400> post<05:24:24.240> as<05:24:24.360> well<05:24:24.480> as<05:24:24.600> a<05:24:24.798> class

an Al tag of post as well as a class

an Al tag of post as well as a class
name<05:24:25.558> of<05:24:26.040> h-<05:24:26.760> full<05:24:27.240> for<05:24:27.480> full<05:24:27.840> height<05:24:28.480> w-o<05:24:29.440> for

name of h- full for full height w-o for

name of h- full for full height w-o for
full<05:24:29.958> width<05:24:30.520> and<05:24:30.958> object<05:24:31.400> cover<05:24:32.120> so<05:24:32.480> it<05:24:32.680> looks

full width and object cover so it looks

full width and object cover so it looks
good<05:24:33.878> there<05:24:34.040> we<05:24:34.200> go<05:24:34.680> now<05:24:34.878> below<05:24:35.240> this<05:24:35.400> link<05:24:35.798> we

good there we go now below this link we

good there we go now below this link we
need<05:24:36.080> to<05:24:36.200> show<05:24:36.440> the<05:24:36.600> information<05:24:37.320> about<05:24:37.680> a

need to show the information about a

need to show the information about a
user<05:24:38.920> but<05:24:39.040> we're<05:24:39.160> going<05:24:39.280> to<05:24:39.440> reuse<05:24:39.920> this<05:24:40.120> grid

user but we're going to reuse this grid

user but we're going to reuse this grid
a<05:24:40.600> couple<05:24:40.840> of<05:24:41.040> times<05:24:41.520> we're<05:24:41.680> going<05:24:41.798> to<05:24:41.920> reuse

a couple of times we're going to reuse

a couple of times we're going to reuse
it<05:24:42.480> on<05:24:42.600> our<05:24:42.878> profile<05:24:43.360> later<05:24:43.638> on<05:24:44.040> as<05:24:44.280> well

it on our profile later on as well

it on our profile later on as well
specifically<05:24:45.558> on<05:24:45.760> liked<05:24:46.160> posts<05:24:46.558> and<05:24:46.840> more<05:24:47.600> and

specifically on liked posts and more and

specifically on liked posts and more and
as<05:24:47.840> you<05:24:47.958> can<05:24:48.080> see<05:24:48.798> and<05:24:49.040> on<05:24:49.200> the<05:24:49.360> Explorer<05:24:49.878> we're

as you can see and on the Explorer we're

as you can see and on the Explorer we're
going<05:24:50.120> to<05:24:50.240> show<05:24:50.480> the<05:24:50.638> stats<05:24:51.200> like<05:24:51.400> save<05:24:51.920> and

going to show the stats like save and

going to show the stats like save and
like<05:24:52.958> but<05:24:53.200> if<05:24:53.320> we're<05:24:53.600> visiting<05:24:54.080> somebody's

like but if we're visiting somebody's

like but if we're visiting somebody's
profile<05:24:55.240> we<05:24:55.400> don't<05:24:55.680> necessarily<05:24:56.200> have<05:24:56.320> to

profile we don't necessarily have to

profile we don't necessarily have to
show<05:24:56.718> the<05:24:56.878> stats<05:24:57.320> because<05:24:57.480> you're<05:24:57.638> not<05:24:57.840> going

show the stats because you're not going

show the stats because you're not going
to<05:24:58.080> like<05:24:58.280> your<05:24:58.440> own<05:24:58.840> posts<05:24:59.840> so<05:25:00.040> that's<05:25:00.240> why

to like your own posts so that's why

to like your own posts so that's why
we're<05:25:00.440> going<05:25:00.558> to<05:25:00.798> make<05:25:01.000> this<05:25:01.160> component

we're going to make this component

we're going to make this component
modifiable<05:25:02.600> as<05:25:02.840> every<05:25:03.160> component<05:25:03.638> should<05:25:03.840> be

modifiable as every component should be

modifiable as every component should be
we<05:25:04.878> can<05:25:05.080> pass<05:25:05.240> some<05:25:05.440> additional<05:25:05.920> props<05:25:06.638> such

we can pass some additional props such

we can pass some additional props such
as<05:25:07.160> show<05:25:07.718> user<05:25:08.480> by<05:25:08.760> default<05:25:09.160> set<05:25:09.360> to<05:25:09.558> true<05:25:10.400> as

as show user by default set to true as

as show user by default set to true as
well<05:25:10.718> as<05:25:10.840> show<05:25:11.320> stats<05:25:12.120> also<05:25:12.440> by<05:25:12.600> default<05:25:12.958> set

well as show stats also by default set

well as show stats also by default set
to<05:25:13.320> true<05:25:14.120> but<05:25:14.360> in<05:25:14.520> case<05:25:14.718> you<05:25:14.840> want<05:25:14.958> to<05:25:15.240> pass<05:25:15.558> a

to true but in case you want to pass a

to true but in case you want to pass a
false<05:25:16.400> you<05:25:16.520> can<05:25:16.760> do<05:25:16.958> that<05:25:17.920> so<05:25:18.280> right<05:25:18.440> here<05:25:18.558> at

false you can do that so right here at

false you can do that so right here at
the<05:25:18.920> top<05:25:19.440> we<05:25:19.558> can<05:25:19.718> also<05:25:20.040> add<05:25:20.240> two<05:25:20.440> new<05:25:20.718> types

the top we can also add two new types

the top we can also add two new types
show<05:25:21.760> user<05:25:22.520> question<05:25:22.878> mark<05:25:23.240> meaning<05:25:23.638> it's

show user question mark meaning it's

show user question mark meaning it's
optional<05:25:24.718> of<05:25:24.840> a<05:25:25.000> type<05:25:25.200> Boolean<05:25:26.200> and<05:25:26.360> show

optional of a type Boolean and show

optional of a type Boolean and show
stats<05:25:27.558> question<05:25:27.840> mark<05:25:28.200> Boolean<05:25:28.760> which<05:25:28.878> means

stats question mark Boolean which means

stats question mark Boolean which means
that<05:25:29.240> it<05:25:29.360> is<05:25:29.680> optional<05:25:31.000> so<05:25:31.320> now<05:25:31.638> if<05:25:31.760> we<05:25:31.958> go

that it is optional so now if we go

that it is optional so now if we go
below<05:25:33.280> this<05:25:33.638> link<05:25:34.480> we<05:25:34.600> can<05:25:34.798> create<05:25:35.120> a<05:25:35.280> new<05:25:35.558> div

below this link we can create a new div

below this link we can create a new div
that's<05:25:36.600> going<05:25:36.760> to<05:25:37.000> have<05:25:37.160> a<05:25:37.440> class<05:25:37.798> name<05:25:38.798> equal

that's going to have a class name equal

that's going to have a class name equal
to<05:25:39.360> grid

to grid

to grid
dstore<05:25:42.320> user<05:25:43.320> and<05:25:43.480> within<05:25:43.878> here<05:25:44.200> we<05:25:44.320> want<05:25:44.440> to

dstore user and within here we want to

dstore user and within here we want to
check<05:25:45.120> if<05:25:45.638> show<05:25:46.080> user<05:25:47.080> is<05:25:47.600> true<05:25:48.600> then<05:25:49.080> we<05:25:49.200> want

check if show user is true then we want

check if show user is true then we want
to<05:25:49.680> return<05:25:50.000> a<05:25:50.240> div<05:25:51.080> that's<05:25:51.240> going<05:25:51.400> to<05:25:51.600> have<05:25:51.718> a

to return a div that's going to have a

to return a div that's going to have a
class<05:25:52.400> name<05:25:53.400> equal<05:25:53.760> to<05:25:54.240> for<05:25:54.480> now<05:25:54.798> flex<05:25:55.798> and

class name equal to for now flex and

class name equal to for now flex and
it's<05:25:56.120> going<05:25:56.240> to<05:25:56.360> render<05:25:56.638> an<05:25:56.840> image<05:25:57.558> that's

it's going to render an image that's

it's going to render an image that's
going<05:25:57.878> to<05:25:58.000> have<05:25:58.120> a<05:25:58.280> source<05:25:58.840> equal<05:25:59.120> to<05:25:59.360> post.

going to have a source equal to post.

going to have a source equal to post.
creator

creator

creator
image

image

image
URL<05:26:03.080> and<05:26:03.280> now<05:26:03.718> you<05:26:03.840> can<05:26:04.000> see<05:26:04.240> it<05:26:04.600> right<05:26:04.798> this<05:26:04.920> is

URL and now you can see it right this is

URL and now you can see it right this is
the<05:26:05.480> little<05:26:05.760> image<05:26:06.040> that<05:26:06.160> we<05:26:06.280> need<05:26:06.400> to<05:26:06.520> show<05:26:07.000> of

the little image that we need to show of

the little image that we need to show of
who<05:26:07.360> created<05:26:07.718> the<05:26:07.878> post<05:26:08.798> we<05:26:08.920> can<05:26:09.040> give<05:26:09.160> it<05:26:09.280> an

who created the post we can give it an

who created the post we can give it an
Al<05:26:09.760> tag<05:26:10.920> of

Al tag of

Al tag of
Creator<05:26:13.680> as<05:26:13.878> well<05:26:14.160> as<05:26:14.280> a<05:26:14.520> class<05:26:14.840> name<05:26:15.760> of

Creator as well as a class name of

Creator as well as a class name of
h-8

h-8

h-8
w-8<05:26:19.680> and<05:26:20.000> rounded<05:26:20.600> Das<05:26:20.840> full<05:26:21.360> as<05:26:21.480> we<05:26:21.638> usually

w-8 and rounded Das full as we usually

w-8 and rounded Das full as we usually
do<05:26:22.320> with<05:26:22.520> profile<05:26:22.920> images<05:26:23.920> and<05:26:24.080> there<05:26:24.200> we<05:26:24.360> go

do with profile images and there we go

do with profile images and there we go
now<05:26:24.878> it's<05:26:25.000> a<05:26:25.120> little<05:26:25.480> profile<05:26:25.878> icon<05:26:26.400> on<05:26:26.600> the

now it's a little profile icon on the

now it's a little profile icon on the
bottom<05:26:27.200> left<05:26:28.080> we<05:26:28.200> can<05:26:28.400> also<05:26:28.638> create<05:26:28.878> a<05:26:29.040> P<05:26:29.280> tag

bottom left we can also create a P tag

bottom left we can also create a P tag
that's<05:26:29.920> going<05:26:30.080> to<05:26:30.200> render<05:26:30.680> the<05:26:30.920> post.

that's going to render the post.

that's going to render the post.
creator.

creator.

creator.
name<05:26:35.120> and<05:26:35.480> we<05:26:35.600> can<05:26:35.760> also<05:26:36.000> give<05:26:36.120> it<05:26:36.240> a<05:26:36.400> class

name and we can also give it a class

name and we can also give it a class
name<05:26:38.160> off<05:26:39.000> line-<05:26:40.000> clamp<05:26:41.000> D1<05:26:41.958> which<05:26:42.080> is<05:26:42.200> going

name off line- clamp D1 which is going

name off line- clamp D1 which is going
to<05:26:42.558> ensure<05:26:43.000> it<05:26:43.160> fits<05:26:43.558> in<05:26:43.718> one<05:26:44.120> line<05:26:45.120> let's<05:26:45.360> also

to ensure it fits in one line let's also

to ensure it fits in one line let's also
add<05:26:45.760> a<05:26:45.840> couple<05:26:46.080> more<05:26:46.280> properties<05:26:46.798> to<05:26:47.000> this<05:26:47.200> div

add a couple more properties to this div

add a couple more properties to this div
Flex<05:26:49.360> items<05:26:49.840> D

Flex items D

Flex items D
Center<05:26:51.600> justify<05:26:52.240> Das<05:26:52.958> start<05:26:53.958> a<05:26:54.200> gap<05:26:54.440> of<05:26:54.600> two<05:26:54.840> to

Center justify Das start a gap of two to

Center justify Das start a gap of two to
divide<05:26:55.280> them<05:26:55.440> a<05:26:55.600> bit<05:26:56.160> and<05:26:56.320> the<05:26:56.480> flex<05:26:56.760> of

divide them a bit and the flex of

divide them a bit and the flex of
one<05:26:59.280> great<05:27:00.040> now<05:27:00.200> we<05:27:00.320> can<05:27:00.638> go<05:27:00.840> below<05:27:01.520> this<05:27:01.718> div

one great now we can go below this div

one great now we can go below this div
and<05:27:02.240> below<05:27:02.638> the<05:27:02.840> dynamic<05:27:03.320> block<05:27:04.040> and<05:27:04.160> we<05:27:04.240> can

and below the dynamic block and we can

and below the dynamic block and we can
also<05:27:04.718> check<05:27:05.080> whether<05:27:05.280> we<05:27:05.400> want<05:27:05.520> to<05:27:05.680> show<05:27:06.040> the

also check whether we want to show the

also check whether we want to show the
stats<05:27:07.400> if<05:27:07.558> we<05:27:07.680> do<05:27:07.878> want<05:27:08.040> to<05:27:08.160> show<05:27:08.400> the<05:27:08.600> stats<05:27:09.400> we

stats if we do want to show the stats we

stats if we do want to show the stats we
can<05:27:09.680> render<05:27:10.360> the<05:27:10.638> post<05:27:11.160> stats<05:27:11.680> component<05:27:12.680> so

can render the post stats component so

can render the post stats component so
post<05:27:13.558> stats<05:27:14.080> like<05:27:14.280> so<05:27:15.200> we<05:27:15.320> can<05:27:15.600> import<05:27:16.040> it<05:27:16.240> from

post stats like so we can import it from

post stats like so we can import it from
Post<05:27:17.000> stats<05:27:18.000> pass<05:27:18.280> over<05:27:18.600> the<05:27:18.840> post<05:27:19.280> equal<05:27:19.600> to

Post stats pass over the post equal to

Post stats pass over the post equal to
post<05:27:20.160> as<05:27:20.280> a<05:27:20.520> prop<05:27:21.160> as<05:27:21.280> well<05:27:21.400> as<05:27:21.558> the<05:27:21.680> user<05:27:22.040> ID

post as a prop as well as the user ID

post as a prop as well as the user ID
equal<05:27:22.840> to<05:27:23.040> user.<05:27:23.798> ID<05:27:24.798> as<05:27:24.920> a<05:27:25.120> prop<05:27:26.000> if<05:27:26.120> we<05:27:26.280> save

equal to user. ID as a prop if we save

equal to user. ID as a prop if we save
it<05:27:26.920> you<05:27:27.040> can<05:27:27.200> see<05:27:27.520> like<05:27:28.000> and<05:27:28.280> save<05:27:28.840> and<05:27:28.958> we<05:27:29.080> can

it you can see like and save and we can

it you can see like and save and we can
do<05:27:29.440> that<05:27:29.718> right<05:27:29.878> here<05:27:30.080> from<05:27:30.240> the<05:27:30.520> explore<05:27:31.080> page

do that right here from the explore page

do that right here from the explore page
this<05:27:32.440> is<05:27:33.080> great<05:27:34.080> now<05:27:34.320> our<05:27:34.520> explore<05:27:35.000> page<05:27:35.200> is

this is great now our explore page is

this is great now our explore page is
almost<05:27:35.680> done<05:27:36.160> we<05:27:36.280> still<05:27:36.520> have<05:27:36.638> to<05:27:36.760> do<05:27:36.920> the

almost done we still have to do the

almost done we still have to do the
search<05:27:37.440> of<05:27:37.600> course<05:27:38.040> but<05:27:38.160> let's<05:27:38.320> go<05:27:38.440> ahead<05:27:38.718> and

search of course but let's go ahead and

search of course but let's go ahead and
add<05:27:39.200> another<05:27:39.558> post<05:27:40.000> to<05:27:40.120> see<05:27:40.360> how<05:27:40.520> it<05:27:40.680> looks

add another post to see how it looks

add another post to see how it looks
like<05:27:41.638> let's<05:27:41.878> go<05:27:42.040> to<05:27:42.400> create<05:27:43.400> add<05:27:43.558> a<05:27:43.798> caption

like let's go to create add a caption

like let's go to create add a caption
something<05:27:44.718> like<05:27:45.080> learning<05:27:46.080> nextjs<05:27:47.480> 13<05:27:48.480> select

something like learning nextjs 13 select

something like learning nextjs 13 select
the<05:27:49.160> photo<05:27:50.160> add<05:27:50.320> a<05:27:50.520> location<05:27:51.360> something<05:27:51.798> like

the photo add a location something like

the photo add a location something like
add<05:27:52.600> home<05:27:53.600> and<05:27:53.920> add<05:27:54.200> tags<05:27:54.760> such<05:27:54.920> as

add home and add tags such as

add home and add tags such as
nextjs

nextjs

nextjs
learning<05:27:59.480> coding<05:28:00.680> and<05:28:00.798> we<05:28:00.920> can<05:28:01.080> create<05:28:01.320> a<05:28:02.000> post

learning coding and we can create a post

learning coding and we can create a post
this<05:28:03.360> right<05:28:03.558> now<05:28:04.080> works<05:28:04.718> pretty<05:28:04.958> flawlessly<05:28:05.798> I

this right now works pretty flawlessly I

this right now works pretty flawlessly I
got<05:28:06.000> to<05:28:06.200> say<05:28:06.600> we<05:28:06.760> get<05:28:06.920> redirected<05:28:07.480> to<05:28:07.600> the

got to say we get redirected to the

got to say we get redirected to the
homepage<05:28:09.200> and<05:28:09.320> we<05:28:09.440> can<05:28:09.600> immediately<05:28:10.080> see<05:28:10.558> our

homepage and we can immediately see our

homepage and we can immediately see our
new<05:28:11.040> photo<05:28:11.680> like<05:28:11.840> a<05:28:12.040> real<05:28:12.440> social<05:28:12.760> media

new photo like a real social media

new photo like a real social media
application<05:28:14.360> our<05:28:14.680> timestamps<05:28:15.440> work<05:28:15.718> as<05:28:15.878> well

application our timestamps work as well

application our timestamps work as well
so<05:28:16.520> just<05:28:16.798> now<05:28:17.160> at<05:28:17.440> home<05:28:18.120> we<05:28:18.240> have<05:28:18.440> different

so just now at home we have different

so just now at home we have different
tags<05:28:19.280> and<05:28:19.400> we<05:28:19.520> can<05:28:19.718> click<05:28:19.958> it<05:28:20.440> to<05:28:20.718> go<05:28:21.200> to<05:28:21.480> the

tags and we can click it to go to the

tags and we can click it to go to the
Post<05:28:22.000> details<05:28:22.798> we<05:28:22.920> can<05:28:23.120> like<05:28:23.360> it<05:28:23.920> and<05:28:24.040> we<05:28:24.120> can

Post details we can like it and we can

Post details we can like it and we can
also<05:28:24.638> of<05:28:24.798> course<05:28:25.200> head<05:28:25.360> to<05:28:25.638> explore<05:28:26.638> where<05:28:27.040> the

also of course head to explore where the

also of course head to explore where the
new<05:28:27.440> photo<05:28:27.840> now<05:28:28.160> appears<05:28:28.718> at<05:28:28.878> the<05:28:29.120> Top<05:28:29.920> This<05:28:30.160> is

new photo now appears at the Top This is

new photo now appears at the Top This is
is<05:28:30.920> great<05:28:31.878> now<05:28:32.160> what<05:28:32.280> do<05:28:32.360> you<05:28:32.520> say<05:28:32.798> that<05:28:32.920> we

is great now what do you say that we

is great now what do you say that we
focus<05:28:33.440> on<05:28:33.600> the<05:28:33.760> search<05:28:34.320> next<05:28:35.160> so<05:28:35.520> here<05:28:35.958> we<05:28:36.120> have

focus on the search next so here we have

focus on the search next so here we have
a<05:28:36.440> component<05:28:36.920> called<05:28:37.200> search<05:28:37.920> results<05:28:38.920> and<05:28:39.080> if

a component called search results and if

a component called search results and if
you<05:28:39.400> remember<05:28:40.120> we<05:28:40.320> have<05:28:40.520> already<05:28:40.958> created<05:28:41.638> the

you remember we have already created the

you remember we have already created the
searched<05:28:42.360> post<05:28:42.840> right<05:28:43.040> here<05:28:43.600> so<05:28:43.798> let's<05:28:44.080> pass

searched post right here so let's pass

searched post right here so let's pass
some<05:28:44.440> of<05:28:44.600> the<05:28:44.798> values<05:28:45.360> into<05:28:45.958> our<05:28:46.400> search

some of the values into our search

some of the values into our search
results<05:28:47.878> specifically<05:28:48.680> we<05:28:48.798> can<05:28:49.080> pass<05:28:49.400> the<05:28:49.718> is

results specifically we can pass the is

results specifically we can pass the is
search<05:28:51.080> fetching<05:28:51.798> which<05:28:51.920> is<05:28:52.040> going<05:28:52.200> to<05:28:52.320> be<05:28:52.440> the

search fetching which is going to be the

search fetching which is going to be the
loading<05:28:52.958> State<05:28:53.520> equal<05:28:53.840> to<05:28:54.120> is<05:28:54.400> search

loading State equal to is search

loading State equal to is search
fetching<05:28:55.878> as<05:28:56.000> well<05:28:56.120> as<05:28:56.240> the<05:28:56.400> search<05:28:56.840> post

fetching as well as the search post

fetching as well as the search post
which<05:28:57.798> is<05:28:57.878> going<05:28:58.000> to<05:28:58.160> be<05:28:58.480> a<05:28:58.760> query<05:28:59.440> request

which is going to be a query request

which is going to be a query request
coming<05:29:00.520> from<05:29:01.000> our<05:29:01.320> used<05:29:01.638> query<05:29:02.440> finally<05:29:02.878> we

coming from our used query finally we

coming from our used query finally we
can<05:29:03.160> head<05:29:03.400> into<05:29:03.680> this<05:29:03.840> component<05:29:04.440> and<05:29:04.600> we<05:29:04.718> can

can head into this component and we can

can head into this component and we can
start<05:29:05.360> implementing<05:29:06.400> search<05:29:07.400> the<05:29:07.558> first

start implementing search the first

start implementing search the first
thing<05:29:07.920> we<05:29:08.040> have<05:29:08.160> to<05:29:08.360> do<05:29:09.040> is<05:29:09.520> accept<05:29:10.000> those<05:29:10.240> two

thing we have to do is accept those two

thing we have to do is accept those two
props<05:29:11.160> by<05:29:11.280> saying<05:29:11.798> is<05:29:12.320> search<05:29:12.840> fetching<05:29:13.840> and

props by saying is search fetching and

props by saying is search fetching and
search

search

search
posts<05:29:16.480> and<05:29:16.600> this<05:29:16.680> is<05:29:16.798> going<05:29:16.958> to<05:29:17.080> be<05:29:17.240> of<05:29:17.400> a

posts and this is going to be of a

posts and this is going to be of a
type<05:29:19.360> search<05:29:20.600> results

type search results

type search results
props<05:29:23.120> we<05:29:23.200> can<05:29:23.360> of<05:29:23.520> course<05:29:23.760> Define<05:29:24.080> the<05:29:24.360> type

props we can of course Define the type

props we can of course Define the type
right<05:29:24.840> above<05:29:25.558> so<05:29:25.840> type<05:29:26.360> search<05:29:27.000> result<05:29:27.840> props

right above so type search result props

right above so type search result props
it's<05:29:29.040> going<05:29:29.200> to<05:29:29.400> get<05:29:29.600> the<05:29:29.798> is<05:29:30.558> search<05:29:31.320> fetching

it's going to get the is search fetching

it's going to get the is search fetching
which<05:29:32.240> is<05:29:32.360> going<05:29:32.520> to<05:29:32.638> be<05:29:32.718> a<05:29:32.878> Boolean<05:29:33.878> and

which is going to be a Boolean and

which is going to be a Boolean and
search<05:29:34.760> posts<05:29:35.520> which<05:29:35.638> can<05:29:35.798> be<05:29:35.920> a<05:29:36.080> collection

search posts which can be a collection

search posts which can be a collection
of<05:29:37.080> models<05:29:38.080> dot

of models dot

of models dot
document<05:29:40.760> and<05:29:41.000> an<05:29:41.200> array<05:29:41.920> and<05:29:42.080> we<05:29:42.160> can<05:29:42.360> import

document and an array and we can import

document and an array and we can import
that<05:29:43.040> from<05:29:43.520> aite<05:29:44.480> now<05:29:44.760> how<05:29:45.000> is<05:29:45.120> our<05:29:45.320> search

that from aite now how is our search

that from aite now how is our search
going<05:29:45.878> to<05:29:46.040> look<05:29:46.360> like<05:29:47.240> well<05:29:47.440> our<05:29:47.600> search<05:29:47.958> is

going to look like well our search is

going to look like well our search is
going<05:29:48.240> to<05:29:48.360> be<05:29:48.480> a<05:29:48.798> really<05:29:49.240> simple

going to be a really simple

going to be a really simple
component<05:29:51.240> as<05:29:51.320> a<05:29:51.480> matter<05:29:51.680> of<05:29:51.878> fact<05:29:52.240> it's<05:29:52.400> going

component as a matter of fact it's going

component as a matter of fact it's going
to<05:29:52.760> be<05:29:53.080> almost<05:29:53.440> like<05:29:53.600> an<05:29:53.840> if<05:29:54.638> so<05:29:54.760> we're<05:29:54.920> going

to be almost like an if so we're going

to be almost like an if so we're going
to<05:29:55.280> return<05:29:55.520> a<05:29:55.638> couple<05:29:55.840> of<05:29:56.040> different<05:29:56.360> things

to return a couple of different things

to return a couple of different things
if<05:29:57.520> we're<05:29:57.798> fetching<05:29:58.160> the<05:29:58.320> search<05:29:58.760> posts<05:29:59.440> we

if we're fetching the search posts we

if we're fetching the search posts we
can<05:29:59.680> simply<05:30:00.080> return<05:30:00.320> return<05:30:00.840> the<05:30:00.958> loader

can simply return return the loader

can simply return return the loader
component<05:30:02.240> which<05:30:02.400> we<05:30:02.520> have<05:30:02.638> to<05:30:02.878> import<05:30:03.440> from

component which we have to import from

component which we have to import from
loader<05:30:05.440> on<05:30:05.600> the<05:30:05.718> other<05:30:05.958> hand<05:30:06.520> if<05:30:06.840> searched

loader on the other hand if searched

loader on the other hand if searched
posts<05:30:08.480> exist<05:30:09.240> so<05:30:09.480> if<05:30:09.638> search<05:30:10.240> posts.

posts exist so if search posts.

posts exist so if search posts.
documents.<05:30:12.638> length<05:30:13.200> is<05:30:13.400> greater<05:30:13.718> than<05:30:13.958> zero

documents. length is greater than zero

documents. length is greater than zero
then<05:30:14.958> we<05:30:15.080> want<05:30:15.200> to<05:30:15.558> return<05:30:16.320> the<05:30:16.638> same<05:30:17.280> grid

then we want to return the same grid

then we want to return the same grid
post<05:30:18.638> list<05:30:19.200> that<05:30:19.320> we<05:30:19.480> have<05:30:19.638> already<05:30:20.120> created

post list that we have already created

post list that we have already created
but<05:30:21.360> this<05:30:21.558> time<05:30:21.958> we<05:30:22.080> want<05:30:22.160> to<05:30:22.400> pass<05:30:22.638> something

but this time we want to pass something

but this time we want to pass something
else<05:30:23.160> to<05:30:23.320> it<05:30:23.558> so<05:30:23.680> I'm<05:30:23.760> going<05:30:23.878> to<05:30:24.000> put<05:30:24.120> it<05:30:24.280> in<05:30:24.360> a

else to it so I'm going to put it in a

else to it so I'm going to put it in a
new<05:30:24.760> line<05:30:25.200> like<05:30:25.480> so<05:30:26.480> and<05:30:26.600> we<05:30:26.680> can<05:30:26.840> also<05:30:27.120> put

new line like so and we can also put

new line like so and we can also put
this<05:30:27.440> in<05:30:27.558> a<05:30:27.680> new<05:30:27.878> line<05:30:28.040> so<05:30:28.200> it's<05:30:28.360> easier<05:30:28.638> to

this in a new line so it's easier to

this in a new line so it's easier to
understand<05:30:29.440> it's<05:30:29.558> a<05:30:29.680> real<05:30:29.920> function<05:30:30.600> block

understand it's a real function block

understand it's a real function block
there<05:30:31.760> we<05:30:32.000> go<05:30:32.920> so<05:30:33.080> we<05:30:33.160> want<05:30:33.280> to<05:30:33.600> return<05:30:34.240> this

there we go so we want to return this

there we go so we want to return this
grid<05:30:34.878> post<05:30:35.280> list<05:30:36.160> and<05:30:36.280> we<05:30:36.360> need<05:30:36.480> to<05:30:36.760> pass<05:30:37.000> to<05:30:37.200> it

grid post list and we need to pass to it

grid post list and we need to pass to it
posts<05:30:38.600> which<05:30:38.760> now<05:30:38.958> are<05:30:39.120> not<05:30:39.280> just<05:30:39.400> going<05:30:39.520> to<05:30:39.600> be

posts which now are not just going to be

posts which now are not just going to be
explore<05:30:40.320> posts<05:30:41.000> but<05:30:41.200> rather<05:30:41.558> searched

explore posts but rather searched

explore posts but rather searched
posts.

posts.

posts.
documents<05:30:46.000> there<05:30:46.240> we<05:30:46.440> go<05:30:47.280> here<05:30:47.638> tapescript<05:30:48.120> is

documents there we go here tapescript is

documents there we go here tapescript is
complaining<05:30:48.638> a<05:30:48.798> bit<05:30:49.200> I<05:30:49.320> made<05:30:49.558> two<05:30:49.760> mistakes

complaining a bit I made two mistakes

complaining a bit I made two mistakes
first<05:30:50.440> of<05:30:50.600> all<05:30:50.718> I<05:30:50.840> have<05:30:50.958> to<05:30:51.080> spell<05:30:51.400> this<05:30:51.558> prop

first of all I have to spell this prop

first of all I have to spell this prop
correctly<05:30:52.958> and<05:30:53.160> when<05:30:53.280> it<05:30:53.400> comes<05:30:53.558> to<05:30:53.680> the

correctly and when it comes to the

correctly and when it comes to the
search<05:30:54.200> posts<05:30:54.840> it's<05:30:55.080> complaining<05:30:55.638> right<05:30:55.798> now

search posts it's complaining right now

search posts it's complaining right now
that<05:30:56.480> it<05:30:56.638> does<05:30:56.878> not<05:30:57.200> exist<05:30:57.480> on<05:30:57.718> this<05:30:57.920> property

that it does not exist on this property

that it does not exist on this property
we<05:30:58.798> can<05:30:59.040> add<05:30:59.240> a<05:30:59.400> check<05:30:59.798> right<05:30:59.958> here<05:31:00.320> saying<05:31:00.760> if

we can add a check right here saying if

we can add a check right here saying if
search<05:31:01.360> post<05:31:01.798> exists<05:31:02.680> then<05:31:02.958> we<05:31:03.080> can<05:31:03.240> go<05:31:03.320> ahead

search post exists then we can go ahead

search post exists then we can go ahead
and<05:31:03.680> check<05:31:03.878> for<05:31:04.080> the<05:31:04.480> documents<05:31:05.480> this<05:31:05.558> is<05:31:05.718> just

and check for the documents this is just

and check for the documents this is just
a<05:31:06.040> top<05:31:06.280> script<05:31:06.558> warning<05:31:07.080> we<05:31:07.160> can<05:31:07.320> look<05:31:07.480> into<05:31:07.718> it

a top script warning we can look into it

a top script warning we can look into it
later<05:31:09.040> and<05:31:09.280> here<05:31:09.520> it's<05:31:09.680> saying<05:31:10.000> cannot<05:31:10.320> find

later and here it's saying cannot find

later and here it's saying cannot find
search<05:31:11.000> posts<05:31:11.320> did<05:31:11.480> you<05:31:11.558> mean<05:31:11.760> search<05:31:12.160> posts

search posts did you mean search posts

search posts did you mean search posts
yes<05:31:13.200> we<05:31:13.360> indeed<05:31:13.958> did<05:31:14.200> mean<05:31:14.520> that<05:31:14.878> so<05:31:15.120> that's

yes we indeed did mean that so that's

yes we indeed did mean that so that's
good<05:31:15.760> thank<05:31:15.920> you<05:31:16.040> tsrip<05:31:16.558> for<05:31:16.958> letting<05:31:17.280> us<05:31:17.440> know

good thank you tsrip for letting us know

good thank you tsrip for letting us know
and<05:31:18.320> then<05:31:18.440> we're<05:31:18.680> passing<05:31:18.920> the<05:31:19.080> search<05:31:19.480> posts

and then we're passing the search posts

and then we're passing the search posts
into<05:31:20.160> the<05:31:20.320> grid<05:31:20.680> post

into the grid post

into the grid post
list<05:31:22.958> finally<05:31:23.480> if<05:31:23.680> this<05:31:23.798> is<05:31:23.958> not<05:31:24.240> true<05:31:24.600> and

list finally if this is not true and

list finally if this is not true and
this<05:31:24.920> is<05:31:25.080> not<05:31:25.320> true<05:31:26.000> then<05:31:26.240> it<05:31:26.400> must<05:31:26.600> mean<05:31:26.798> that

this is not true then it must mean that

this is not true then it must mean that
we<05:31:27.120> have<05:31:27.280> no<05:31:27.480> searched<05:31:28.000> posts<05:31:28.558> so<05:31:28.718> we<05:31:28.840> can

we have no searched posts so we can

we have no searched posts so we can
simply<05:31:29.440> return<05:31:29.680> a<05:31:29.920> p<05:31:30.520> tag<05:31:31.520> that's<05:31:31.718> going<05:31:31.878> to

simply return a p tag that's going to

simply return a p tag that's going to
say<05:31:32.558> no<05:31:33.200> results<05:31:34.160> found<05:31:35.160> and<05:31:35.280> then<05:31:35.440> we<05:31:35.520> can<05:31:35.680> do

say no results found and then we can do

say no results found and then we can do
a<05:31:36.280> class<05:31:36.600> name<05:31:37.440> of<05:31:37.718> text

a class name of text

a class name of text
dl-4<05:31:40.280> margin<05:31:40.760> top<05:31:41.000> of<05:31:41.160> 10<05:31:42.120> text-<05:31:43.160> Center<05:31:44.160> and<05:31:44.480> W

dl-4 margin top of 10 text- Center and W

dl-4 margin top of 10 text- Center and W
Off

Off

Off
full<05:31:47.040> and<05:31:47.200> this<05:31:47.320> is<05:31:47.520> it<05:31:48.160> this<05:31:48.400> is<05:31:48.680> our<05:31:48.920> search

full and this is it this is our search

full and this is it this is our search
results<05:31:49.840> component<05:31:50.558> that<05:31:50.718> we<05:31:50.878> have<05:31:51.160> here<05:31:51.840> and

results component that we have here and

results component that we have here and
that<05:31:52.120> we're<05:31:52.360> using<05:31:53.240> within<05:31:53.840> our<05:31:54.120> search

that we're using within our search

that we're using within our search
results<05:31:55.558> here<05:31:55.798> we<05:31:55.920> have<05:31:56.040> a<05:31:56.160> warning<05:31:56.440> from

results here we have a warning from

results here we have a warning from
typescript<05:31:57.440> this<05:31:57.520> is<05:31:57.760> okay<05:31:57.920> for<05:31:58.160> now<05:31:58.520> we<05:31:58.600> can

typescript this is okay for now we can

typescript this is okay for now we can
come<05:31:58.958> back<05:31:59.120> to<05:31:59.280> it<05:31:59.440> later<05:31:59.680> on

come back to it later on

come back to it later on
so<05:32:01.120> let's<05:32:01.320> go<05:32:01.440> ahead<05:32:01.718> and<05:32:01.958> test<05:32:02.240> our<05:32:02.520> search<05:32:03.280> we

so let's go ahead and test our search we

so let's go ahead and test our search we
can<05:32:03.558> try<05:32:03.798> searching<05:32:04.160> for<05:32:04.360> something<05:32:04.638> that<05:32:04.798> we

can try searching for something that we

can try searching for something that we
have<05:32:05.040> on<05:32:05.160> our<05:32:05.320> homepage<05:32:06.240> for<05:32:06.440> example<05:32:06.840> nextjs

have on our homepage for example nextjs

have on our homepage for example nextjs
13<05:32:08.400> appears<05:32:08.878> in<05:32:09.200> both<05:32:09.920> we<05:32:10.040> have<05:32:10.200> learning<05:32:10.798> here

13 appears in both we have learning here

13 appears in both we have learning here
and<05:32:11.240> we<05:32:11.360> have<05:32:11.558> ultimate<05:32:12.160> here<05:32:12.520> so<05:32:12.760> let's<05:32:12.958> try

and we have ultimate here so let's try

and we have ultimate here so let's try
to<05:32:13.320> search<05:32:13.680> for<05:32:14.200> something<05:32:14.558> like<05:32:14.798> that<05:32:15.520> let's

to search for something like that let's

to search for something like that let's
try<05:32:16.080> to<05:32:16.240> go<05:32:16.440> for<05:32:16.878> next.js

try to go for next.js

try to go for next.js
it's<05:32:20.280> loading<05:32:20.840> and<05:32:20.958> we<05:32:21.120> get<05:32:21.400> both<05:32:22.000> that's<05:32:22.280> good

it's loading and we get both that's good

it's loading and we get both that's good
both<05:32:23.240> say<05:32:23.558> 13<05:32:24.558> but<05:32:24.840> only<05:32:25.080> one<05:32:25.360> says<05:32:25.840> 13.5<05:32:26.840> the

both say 13 but only one says 13.5 the

both say 13 but only one says 13.5 the
other<05:32:27.120> one<05:32:27.240> is

other one is

other one is
13.6<05:32:29.360> so<05:32:29.520> if<05:32:29.600> we<05:32:29.718> do<05:32:29.920> this<05:32:30.120> this<05:32:30.440> it<05:32:30.558> seems<05:32:30.878> like

13.6 so if we do this this it seems like

13.6 so if we do this this it seems like
it's<05:32:31.280> not<05:32:31.558> ref<05:32:31.920> fetching<05:32:32.240> it<05:32:32.638> it<05:32:32.840> just<05:32:33.040> gives

it's not ref fetching it it just gives

it's not ref fetching it it just gives
us<05:32:33.440> what's<05:32:33.600> already<05:32:34.320> cached<05:32:35.320> so<05:32:35.638> let's<05:32:35.920> go

us what's already cached so let's go

us what's already cached so let's go
into<05:32:37.000> our<05:32:37.360> query<05:32:38.080> for<05:32:38.320> the<05:32:38.480> search<05:32:39.120> that's

into our query for the search that's

into our query for the search that's
going<05:32:39.520> to<05:32:39.878> be<05:32:40.878> search<05:32:41.440> post<05:32:41.840> use<05:32:42.240> search<05:32:42.760> posts

going to be search post use search posts

going to be search post use search posts
and<05:32:43.920> then<05:32:44.200> here<05:32:44.520> we<05:32:44.638> have<05:32:44.798> to<05:32:45.040> validate<05:32:45.440> the

and then here we have to validate the

and then here we have to validate the
query<05:32:46.000> again<05:32:46.718> once<05:32:47.000> the<05:32:47.120> search<05:32:47.480> term<05:32:47.760> changes

query again once the search term changes

query again once the search term changes
so<05:32:48.840> we<05:32:48.920> can<05:32:49.240> pass<05:32:49.760> the<05:32:49.878> search<05:32:50.280> term<05:32:50.760> here<05:32:51.520> as

so we can pass the search term here as

so we can pass the search term here as
the<05:32:51.840> second<05:32:52.558> parameter<05:32:53.558> and<05:32:53.760> now<05:32:54.080> it's<05:32:54.200> going

the second parameter and now it's going

the second parameter and now it's going
to<05:32:54.400> recall<05:32:54.840> it<05:32:55.558> 13.5<05:32:56.558> and<05:32:56.718> then<05:32:57.320> 13.6<05:32:58.320> we<05:32:58.480> still

to recall it 13.5 and then 13.6 we still

to recall it 13.5 and then 13.6 we still
have<05:32:59.120> both<05:32:59.558> but<05:32:59.680> if<05:32:59.798> we<05:33:00.080> search<05:33:00.280> for

have both but if we search for

have both but if we search for
ultimate<05:33:02.840> we<05:33:03.000> only<05:33:03.320> have<05:33:03.600> this<05:33:04.000> and<05:33:04.120> if<05:33:04.240> we

ultimate we only have this and if we

ultimate we only have this and if we
search<05:33:04.600> for

learning we only get this which means

learning we only get this which means
that<05:33:09.680> our<05:33:09.840> search<05:33:10.240> is<05:33:10.440> working<05:33:11.200> properly<05:33:12.200> this

that our search is working properly this

that our search is working properly this
is<05:33:12.920> great<05:33:13.400> to<05:33:14.000> see<05:33:15.000> of<05:33:15.160> course<05:33:15.400> there<05:33:15.520> are

is great to see of course there are

is great to see of course there are
filters<05:33:16.200> here<05:33:16.440> that<05:33:16.600> we<05:33:16.680> can<05:33:16.920> also<05:33:17.240> do<05:33:17.958> and<05:33:18.600> in

filters here that we can also do and in

filters here that we can also do and in
general<05:33:19.120> if<05:33:19.240> we<05:33:19.360> don't<05:33:19.558> have<05:33:19.718> search<05:33:20.280> then<05:33:20.440> we

general if we don't have search then we

general if we don't have search then we
have<05:33:20.718> the<05:33:20.878> explore<05:33:21.680> of<05:33:21.840> course<05:33:22.160> this<05:33:22.280> is<05:33:22.400> the

have the explore of course this is the

have the explore of course this is the
place<05:33:22.878> where<05:33:23.000> we're<05:33:23.160> going<05:33:23.240> to<05:33:23.440> also

place where we're going to also

place where we're going to also
implement<05:33:24.480> the<05:33:24.718> infinite<05:33:25.280> loading<05:33:25.878> so<05:33:26.040> we<05:33:26.120> can

implement the infinite loading so we can

implement the infinite loading so we can
immediately<05:33:26.840> fetch<05:33:27.320> all<05:33:27.520> of<05:33:27.638> the<05:33:27.798> next<05:33:28.400> pages

immediately fetch all of the next pages

immediately fetch all of the next pages
and<05:33:29.600> all<05:33:29.760> of<05:33:30.040> that<05:33:30.200> is<05:33:30.280> going<05:33:30.360> to<05:33:30.480> be<05:33:30.638> pretty

and all of that is going to be pretty

and all of that is going to be pretty
easy<05:33:31.200> to<05:33:31.400> implement<05:33:32.240> using<05:33:32.878> react<05:33:33.400> query<05:33:34.000> and

easy to implement using react query and

easy to implement using react query and
aite<05:33:35.200> so<05:33:35.400> what<05:33:35.520> we<05:33:35.638> can<05:33:35.798> do<05:33:36.120> is<05:33:36.320> first<05:33:36.520> of<05:33:36.638> all

aite so what we can do is first of all

aite so what we can do is first of all
go<05:33:37.240> all<05:33:37.600> the<05:33:37.718> way<05:33:38.160> down<05:33:38.920> and<05:33:39.200> below<05:33:39.718> this<05:33:39.920> div

go all the way down and below this div

go all the way down and below this div
we<05:33:40.718> can<05:33:40.920> create<05:33:41.320> a<05:33:41.520> new<05:33:41.798> Dynamic<05:33:42.280> block<05:33:42.558> of

we can create a new Dynamic block of

we can create a new Dynamic block of
code<05:33:43.360> that<05:33:43.480> says<05:33:44.000> if<05:33:44.760> we<05:33:45.080> have<05:33:45.440> a<05:33:45.600> next<05:33:46.000> page<05:33:46.400> so

code that says if we have a next page so

code that says if we have a next page so
has<05:33:47.000> next<05:33:47.718> page<05:33:48.718> and<05:33:49.120> if<05:33:49.280> there<05:33:49.440> is<05:33:49.638> no<05:33:49.878> search

has next page and if there is no search

has next page and if there is no search
value<05:33:50.958> meaning<05:33:51.360> we<05:33:51.480> are<05:33:51.600> on<05:33:51.760> the<05:33:52.320> explore<05:33:53.320> and

value meaning we are on the explore and

value meaning we are on the explore and
then<05:33:54.280> we<05:33:54.440> want<05:33:54.600> to<05:33:54.718> show<05:33:55.520> a<05:33:55.798> div<05:33:56.798> that's<05:33:57.000> going

then we want to show a div that's going

then we want to show a div that's going
to<05:33:57.320> have<05:33:57.480> a<05:33:57.638> ref<05:33:58.200> this<05:33:58.320> is<05:33:58.480> really<05:33:58.718> important<05:33:59.200> a

to have a ref this is really important a

to have a ref this is really important a
ref

ref

ref
called<05:34:01.520> ref<05:34:02.520> and<05:34:02.680> a<05:34:02.920> class<05:34:03.240> name<05:34:04.120> of<05:34:04.360> margin

called ref and a class name of margin

called ref and a class name of margin
top<05:34:05.040> of

top of

top of
10<05:34:07.200> of<05:34:07.360> course<05:34:07.558> the<05:34:07.680> app<05:34:07.920> is<05:34:08.000> going<05:34:08.160> to<05:34:08.280> break

10 of course the app is going to break

10 of course the app is going to break
now<05:34:08.878> because<05:34:09.120> we<05:34:09.240> haven't<05:34:09.520> yet<05:34:09.680> created<05:34:10.040> this

now because we haven't yet created this

now because we haven't yet created this
ref<05:34:11.240> and<05:34:11.360> we<05:34:11.480> can<05:34:11.638> add<05:34:11.760> a<05:34:11.920> loader<05:34:12.638> right<05:34:12.878> here

ref and we can add a loader right here

ref and we can add a loader right here
when<05:34:13.600> we're<05:34:13.798> loading<05:34:14.080> for<05:34:14.280> the<05:34:14.440> next<05:34:14.760> page<05:34:15.760> now

when we're loading for the next page now

when we're loading for the next page now
why<05:34:16.160> are<05:34:16.280> we<05:34:16.440> adding<05:34:16.680> a<05:34:16.878> ref<05:34:17.400> to<05:34:17.638> this<05:34:17.798> little

why are we adding a ref to this little

why are we adding a ref to this little
div<05:34:18.440> right<05:34:18.600> here<05:34:18.718> at<05:34:18.840> the<05:34:19.000> bottom<05:34:19.558> well<05:34:19.760> once

div right here at the bottom well once

div right here at the bottom well once
we<05:34:20.040> scroll<05:34:20.360> to<05:34:20.558> it<05:34:21.040> and<05:34:21.240> once<05:34:21.480> this<05:34:21.718> reference

we scroll to it and once this reference

we scroll to it and once this reference
gets<05:34:22.320> in<05:34:22.520> view<05:34:23.160> it<05:34:23.280> means<05:34:23.558> we're<05:34:23.718> at<05:34:23.920> the

gets in view it means we're at the

gets in view it means we're at the
bottom<05:34:24.320> of<05:34:24.440> the<05:34:24.638> page<05:34:25.240> and<05:34:25.400> we<05:34:25.480> want<05:34:25.638> to<05:34:25.760> start

bottom of the page and we want to start

bottom of the page and we want to start
loading<05:34:26.680> the<05:34:26.840> new<05:34:27.120> posts<05:34:27.878> so<05:34:28.040> let<05:34:28.120> me<05:34:28.280> show<05:34:28.480> you

loading the new posts so let me show you

loading the new posts so let me show you
how<05:34:28.798> to<05:34:29.000> implement<05:34:29.520> that<05:34:30.120> right<05:34:30.320> at<05:34:30.480> the<05:34:30.680> top

how to implement that right at the top

how to implement that right at the top
we<05:34:31.240> can<05:34:31.480> install<05:34:32.000> a<05:34:32.200> new<05:34:32.798> package<05:34:33.798> this

we can install a new package this

we can install a new package this
package<05:34:34.400> is<05:34:34.558> called<05:34:34.958> react<05:34:35.680> intersection

package is called react intersection

package is called react intersection
Observer<05:34:37.920> you<05:34:38.000> can<05:34:38.120> see<05:34:38.320> it<05:34:38.558> right<05:34:38.760> here<05:34:39.040> on

Observer you can see it right here on

Observer you can see it right here on
mpm<05:34:40.280> you<05:34:40.400> can<05:34:40.600> implement<05:34:41.000> it<05:34:41.200> in<05:34:41.400> Hooks<05:34:42.040> and

mpm you can implement it in Hooks and

mpm you can implement it in Hooks and
it's<05:34:42.320> going<05:34:42.480> to<05:34:42.638> give<05:34:42.760> us<05:34:43.040> access<05:34:43.280> to<05:34:43.520> this<05:34:43.878> use

it's going to give us access to this use

it's going to give us access to this use
in<05:34:44.680> view<05:34:45.400> it's<05:34:45.520> going<05:34:45.680> to<05:34:45.840> be<05:34:46.080> really<05:34:46.360> easy<05:34:46.638> to

in view it's going to be really easy to

in view it's going to be really easy to
monitor<05:34:47.798> specific<05:34:48.240> elements<05:34:49.160> in<05:34:49.360> this<05:34:49.558> case

monitor specific elements in this case

monitor specific elements in this case
that<05:34:50.080> ref<05:34:50.480> at<05:34:50.600> the<05:34:50.760> bottom<05:34:51.520> the<05:34:51.638> only<05:34:51.840> thing<05:34:51.958> we

that ref at the bottom the only thing we

that ref at the bottom the only thing we
have<05:34:52.200> to<05:34:52.360> do<05:34:52.798> is<05:34:53.000> import<05:34:53.360> it<05:34:54.160> attach<05:34:54.400> a<05:34:54.558> ref<05:34:54.798> to

have to do is import it attach a ref to

have to do is import it attach a ref to
it<05:34:55.360> and<05:34:55.480> then<05:34:55.600> we're<05:34:55.718> going<05:34:55.798> to<05:34:55.958> know<05:34:56.200> once<05:34:56.360> we

it and then we're going to know once we

it and then we're going to know once we
reach<05:34:56.840> the<05:34:57.000> bottom<05:34:57.280> of<05:34:57.400> the<05:34:57.558> page<05:34:58.440> again<05:34:58.760> don't

reach the bottom of the page again don't

reach the bottom of the page again don't
read<05:34:59.280> when<05:34:59.480> the<05:34:59.558> wheel<05:35:00.000> when<05:35:00.120> you<05:35:00.200> can<05:35:00.400> find<05:35:00.718> a

read when the wheel when you can find a

read when the wheel when you can find a
simple<05:35:01.280> package<05:35:01.680> like<05:35:02.080> so<05:35:03.080> and<05:35:03.320> we<05:35:03.400> can<05:35:03.558> easily

simple package like so and we can easily

simple package like so and we can easily
install<05:35:04.280> it<05:35:04.480> by<05:35:04.600> running<05:35:04.958> mpm<05:35:05.440> install<05:35:06.080> react

install it by running mpm install react

install it by running mpm install react
intersection<05:35:07.798> Observer<05:35:08.798> there<05:35:08.920> we<05:35:09.120> go<05:35:09.440> the

intersection Observer there we go the

intersection Observer there we go the
package<05:35:09.920> got<05:35:10.120> installed<05:35:10.958> and<05:35:11.120> we<05:35:11.240> can<05:35:11.400> use<05:35:11.638> it

package got installed and we can use it

package got installed and we can use it
by<05:35:12.600> importing<05:35:13.600> the<05:35:13.840> use<05:35:14.320> in<05:35:14.878> view<05:35:15.400> hook<05:35:16.200> coming

by importing the use in view hook coming

by importing the use in view hook coming
from<05:35:17.320> react<05:35:18.280> intersection<05:35:19.600> Observer<05:35:20.600> now

from react intersection Observer now

from react intersection Observer now
right<05:35:21.120> at<05:35:21.280> the<05:35:21.480> top<05:35:21.958> we<05:35:22.080> can<05:35:22.240> declare<05:35:22.680> a<05:35:22.840> new

right at the top we can declare a new

right at the top we can declare a new
ref<05:35:23.958> const<05:35:24.520> ref<05:35:25.360> and<05:35:25.680> in<05:35:26.080> view<05:35:27.080> which<05:35:27.200> is<05:35:27.440> equal

ref const ref and in view which is equal

ref const ref and in view which is equal
to<05:35:28.440> the<05:35:28.638> call<05:35:29.040> of<05:35:29.240> the<05:35:29.360> used<05:35:30.000> in<05:35:30.520> view<05:35:31.200> hook

to the call of the used in view hook

to the call of the used in view hook
just<05:35:32.558> like

just like

just like
so<05:35:34.600> and<05:35:34.840> then<05:35:35.160> we<05:35:35.280> can<05:35:35.480> also<05:35:35.878> import<05:35:36.320> use

so and then we can also import use

so and then we can also import use
effect<05:35:38.240> coming<05:35:38.520> from<05:35:38.878> react<05:35:39.878> we<05:35:40.000> can<05:35:40.200> Define

effect coming from react we can Define

effect coming from react we can Define
it<05:35:40.760> right<05:35:40.878> here<05:35:41.040> at<05:35:41.200> the<05:35:41.400> top<05:35:41.840> by<05:35:42.000> saying<05:35:42.400> use

it right here at the top by saying use

it right here at the top by saying use
effect<05:35:44.280> don't<05:35:44.638> Define<05:35:44.958> it<05:35:45.240> below<05:35:46.040> the<05:35:46.320> if

effect don't Define it below the if

effect don't Define it below the if
statement<05:35:47.920> use<05:35:48.240> effects<05:35:48.600> have<05:35:48.718> to<05:35:48.878> be<05:35:49.120> above

statement use effects have to be above

statement use effects have to be above
all<05:35:50.000> conditional

all conditional

all conditional
renderings<05:35:51.878> and<05:35:52.080> it's<05:35:52.240> going<05:35:52.400> to<05:35:52.600> render

renderings and it's going to render

renderings and it's going to render
whenever<05:35:53.558> the<05:35:53.798> inw<05:35:54.400> variable<05:35:55.040> changes<05:35:55.958> or

whenever the inw variable changes or

whenever the inw variable changes or
whenever<05:35:56.638> the<05:35:56.798> search<05:35:57.600> value

whenever the search value

whenever the search value
changes<05:35:59.760> what<05:35:59.878> we<05:35:59.958> want<05:36:00.080> to<05:36:00.200> do<05:36:00.798> is<05:36:00.920> we<05:36:01.040> want<05:36:01.160> to

changes what we want to do is we want to

changes what we want to do is we want to
check<05:36:02.040> if<05:36:02.600> it<05:36:02.718> is<05:36:03.000> in<05:36:03.480> View<05:36:04.480> and<05:36:04.958> if<05:36:05.280> we're<05:36:05.638> not

check if it is in View and if we're not

check if it is in View and if we're not
searching<05:36:06.360> for<05:36:06.600> something<05:36:07.120> so<05:36:07.280> if<05:36:07.360> there's<05:36:07.558> no

searching for something so if there's no

searching for something so if there's no
search<05:36:08.200> value<05:36:09.160> then<05:36:09.440> we<05:36:09.558> want<05:36:09.680> to<05:36:09.840> fetch<05:36:10.400> next

search value then we want to fetch next

search value then we want to fetch next
page<05:36:11.798> and<05:36:12.080> this<05:36:12.240> is<05:36:12.718> my<05:36:12.958> people<05:36:13.638> how<05:36:13.798> you

page and this is my people how you

page and this is my people how you
implement<05:36:14.798> infinite<05:36:15.280> scroll<05:36:16.200> so<05:36:16.400> let's<05:36:16.600> save

implement infinite scroll so let's save

implement infinite scroll so let's save
it<05:36:17.480> let's<05:36:17.718> go<05:36:17.878> back<05:36:18.000> to<05:36:18.520> application<05:36:19.520> and<05:36:19.718> now

it let's go back to application and now

it let's go back to application and now
as<05:36:20.200> you<05:36:20.320> get<05:36:20.440> to<05:36:20.600> the<05:36:20.760> bottom<05:36:21.200> you<05:36:21.320> should<05:36:21.480> be

as you get to the bottom you should be

as you get to the bottom you should be
able<05:36:21.798> to<05:36:21.878> see<05:36:22.040> the<05:36:22.200> scroll<05:36:22.558> up<05:36:23.520> of<05:36:23.718> course<05:36:23.958> it's

able to see the scroll up of course it's

able to see the scroll up of course it's
not<05:36:24.280> going<05:36:24.440> to<05:36:24.558> give<05:36:24.718> us<05:36:24.920> anything<05:36:25.400> right<05:36:25.558> now

not going to give us anything right now

not going to give us anything right now
because<05:36:26.080> there<05:36:26.200> are<05:36:26.360> no<05:36:26.600> new

because there are no new

because there are no new
posts<05:36:28.480> but<05:36:28.718> if<05:36:28.840> we<05:36:29.000> limit<05:36:29.280> the<05:36:29.400> number<05:36:29.558> of<05:36:29.760> of

posts but if we limit the number of of

posts but if we limit the number of of
posts<05:36:30.240> per<05:36:30.558> page<05:36:31.320> and<05:36:31.558> if<05:36:31.638> we<05:36:31.798> create<05:36:32.120> more

posts per page and if we create more

posts per page and if we create more
posts<05:36:32.920> it's<05:36:33.080> going<05:36:33.280> to<05:36:33.480> work<05:36:34.400> we<05:36:34.520> can<05:36:34.680> test<05:36:34.920> it

posts it's going to work we can test it

posts it's going to work we can test it
out<05:36:35.360> really<05:36:36.120> soon<05:36:37.120> so<05:36:37.680> up<05:36:37.798> to<05:36:38.040> this<05:36:38.240> point

out really soon so up to this point

out really soon so up to this point
we've<05:36:39.000> implemented<05:36:39.840> a<05:36:40.120> lot<05:36:40.600> of<05:36:40.878> stuff<05:36:41.600> so

we've implemented a lot of stuff so

we've implemented a lot of stuff so
let's<05:36:42.000> close<05:36:42.400> these<05:36:42.680> files<05:36:43.480> let's<05:36:43.760> expand

let's close these files let's expand

let's close these files let's expand
this<05:36:44.520> to<05:36:44.718> its<05:36:44.878> full<05:36:45.200> glory<05:36:45.878> and<05:36:46.080> let's<05:36:46.280> see

this to its full glory and let's see

this to its full glory and let's see
what<05:36:46.920> we<05:36:47.080> have<05:36:47.280> implemented<05:36:48.160> up<05:36:48.320> to<05:36:48.558> this

what we have implemented up to this

what we have implemented up to this
point<05:36:50.040> we<05:36:50.320> have<05:36:50.878> a<05:36:51.480> phenomenal<05:36:52.638> registration

point we have a phenomenal registration

point we have a phenomenal registration
and<05:36:53.878> login<05:36:54.240> screen<05:36:55.080> so<05:36:55.400> here<05:36:55.718> we<05:36:55.840> can<05:36:56.040> login

and login screen so here we can login

and login screen so here we can login
into<05:36:56.798> our<05:36:57.040> account<05:36:57.558> or<05:36:57.798> we<05:36:57.920> can<05:36:58.120> sign<05:36:58.400> up<05:36:58.520> for

into our account or we can sign up for

into our account or we can sign up for
an<05:36:58.920> account<05:36:59.280> if<05:36:59.400> we<05:36:59.718> don't<05:36:59.920> have<05:37:00.080> one<05:37:00.680> already

an account if we don't have one already

an account if we don't have one already
and<05:37:01.840> in<05:37:02.080> this<05:37:02.280> case<05:37:02.680> we<05:37:02.798> can<05:37:02.958> log<05:37:03.240> in<05:37:03.760> with<05:37:04.000> our

and in this case we can log in with our

and in this case we can log in with our
password<05:37:05.120> and

password and

password and
email<05:37:07.558> immediately<05:37:08.240> we<05:37:08.360> are<05:37:08.558> redirected<05:37:09.160> to

email immediately we are redirected to

email immediately we are redirected to
our<05:37:09.520> home<05:37:09.760> screen<05:37:10.240> where<05:37:10.400> we<05:37:10.480> can<05:37:10.638> see<05:37:10.958> our

our home screen where we can see our

our home screen where we can see our
great

great

great
posts<05:37:13.718> each<05:37:14.080> post<05:37:14.638> can<05:37:14.840> be<05:37:15.040> liked<05:37:15.760> unliked<05:37:16.600> and

posts each post can be liked unliked and

posts each post can be liked unliked and
also<05:37:17.600> saved<05:37:18.600> let's<05:37:18.798> not<05:37:19.040> forget<05:37:19.638> that<05:37:19.798> we<05:37:20.000> also

also saved let's not forget that we also

also saved let's not forget that we also
have<05:37:20.480> a<05:37:20.680> phenomenal<05:37:21.400> explore<05:37:21.920> page<05:37:22.280> where<05:37:22.440> we

have a phenomenal explore page where we

have a phenomenal explore page where we
can<05:37:22.638> see<05:37:22.920> more<05:37:23.400> posts<05:37:23.840> that<05:37:23.958> are<05:37:24.160> popular

can see more posts that are popular

can see more posts that are popular
today<05:37:25.400> if<05:37:25.480> you<05:37:25.600> want<05:37:25.920> you<05:37:26.000> can<05:37:26.200> add<05:37:26.440> additional

today if you want you can add additional

today if you want you can add additional
filters<05:37:27.878> and<05:37:28.040> we<05:37:28.200> have<05:37:28.558> complete<05:37:29.240> search

filters and we have complete search

filters and we have complete search
search<05:37:30.000> so<05:37:30.160> if<05:37:30.240> you<05:37:30.360> search<05:37:30.600> for<05:37:30.798> something

search so if you search for something

search so if you search for something
it's<05:37:31.558> going<05:37:31.718> to<05:37:31.840> show<05:37:32.120> up<05:37:32.520> and<05:37:32.760> also<05:37:33.080> lead<05:37:33.360> you

it's going to show up and also lead you

it's going to show up and also lead you
to<05:37:34.000> that<05:37:34.200> post<05:37:34.520> Details<05:37:35.240> page<05:37:36.240> also<05:37:36.878> don't

to that post Details page also don't

to that post Details page also don't
forget<05:37:37.638> that<05:37:37.878> everything<05:37:38.280> is<05:37:38.600> completely

forget that everything is completely

forget that everything is completely
mobile<05:37:39.840> responsive<05:37:40.840> and<05:37:41.080> it<05:37:41.280> has<05:37:41.558> this<05:37:41.840> native

mobile responsive and it has this native

mobile responsive and it has this native
mobile<05:37:43.000> UI<05:37:43.958> we've<05:37:44.280> laid<05:37:44.638> down<05:37:44.878> the<05:37:45.040> foundation

mobile UI we've laid down the foundation

mobile UI we've laid down the foundation
for<05:37:46.080> creating<05:37:46.520> something<05:37:46.920> extraordinary<05:37:47.920> a

for creating something extraordinary a

for creating something extraordinary a
fullblown<05:37:48.958> social<05:37:49.280> media<05:37:49.920> application<05:37:50.920> of

fullblown social media application of

fullblown social media application of
course<05:37:51.520> there's<05:37:51.760> a<05:37:51.920> couple<05:37:52.120> of<05:37:52.320> pages<05:37:52.600> that

course there's a couple of pages that

course there's a couple of pages that
are<05:37:52.878> missing<05:37:53.718> such<05:37:53.878> as<05:37:54.040> the<05:37:54.200> People<05:37:54.600> page

are missing such as the People page

are missing such as the People page
where<05:37:55.120> we<05:37:55.240> show<05:37:55.558> all<05:37:55.760> the<05:37:56.080> users<05:37:57.080> the<05:37:57.200> saved

where we show all the users the saved

where we show all the users the saved
page<05:37:58.000> where<05:37:58.120> we<05:37:58.280> simply<05:37:58.600> have<05:37:58.718> to<05:37:58.920> fetch<05:37:59.638> all

page where we simply have to fetch all

page where we simply have to fetch all
the<05:38:00.040> saved<05:38:00.480> posts<05:38:01.120> and<05:38:01.240> then<05:38:01.440> display<05:38:01.878> them

the saved posts and then display them

the saved posts and then display them
these<05:38:02.798> two<05:38:03.040> pages<05:38:03.360> look<05:38:03.680> like<05:38:03.920> this<05:38:04.520> here<05:38:04.840> you

these two pages look like this here you

these two pages look like this here you
fetch<05:38:05.360> people<05:38:05.798> and<05:38:05.920> you<05:38:06.000> show<05:38:06.320> them<05:38:06.920> and<05:38:07.160> if

fetch people and you show them and if

fetch people and you show them and if
you<05:38:07.400> notice<05:38:07.798> the<05:38:08.000> saved<05:38:08.440> it's<05:38:08.600> going<05:38:08.760> to<05:38:08.958> look

you notice the saved it's going to look

you notice the saved it's going to look
almost<05:38:09.718> exactly<05:38:10.200> the<05:38:10.360> same<05:38:11.040> as<05:38:11.200> our<05:38:11.558> explore

almost exactly the same as our explore

almost exactly the same as our explore
that's<05:38:12.798> because<05:38:13.040> we're<05:38:13.320> reusing<05:38:13.958> the<05:38:14.120> same

that's because we're reusing the same

that's because we're reusing the same
grid<05:38:14.718> component<05:38:15.718> finally<05:38:16.520> there<05:38:16.798> is<05:38:17.040> the

grid component finally there is the

grid component finally there is the
profile<05:38:17.680> page<05:38:18.400> where<05:38:18.558> we<05:38:18.638> can<05:38:18.760> see<05:38:18.958> the<05:38:19.120> likes

profile page where we can see the likes

profile page where we can see the likes
as<05:38:19.680> well<05:38:20.680> and<05:38:21.040> the<05:38:21.200> edit<05:38:21.638> profile<05:38:22.638> but<05:38:23.120> I<05:38:23.200> want

as well and the edit profile but I want

as well and the edit profile but I want
you<05:38:23.558> to<05:38:23.798> pause<05:38:24.160> here<05:38:24.320> for<05:38:24.520> a<05:38:24.680> second<05:38:25.520> first<05:38:25.760> of

you to pause here for a second first of

you to pause here for a second first of
all<05:38:26.400> congratulations<05:38:27.040> on<05:38:27.280> coming<05:38:27.760> this<05:38:28.000> far

all congratulations on coming this far

all congratulations on coming this far
into<05:38:28.718> this<05:38:28.878> tutorial<05:38:29.600> it<05:38:29.760> has<05:38:29.920> been<05:38:30.120> a<05:38:30.280> long

into this tutorial it has been a long

into this tutorial it has been a long
one<05:38:31.320> you've<05:38:31.558> shown<05:38:32.040> a<05:38:32.240> lot<05:38:32.480> of<05:38:32.680> dedication<05:38:33.280> to

one you've shown a lot of dedication to

one you've shown a lot of dedication to
learning<05:38:34.040> and<05:38:34.240> trying<05:38:34.680> new<05:38:34.958> things<05:38:35.240> out<05:38:35.878> so

learning and trying new things out so

learning and trying new things out so
pat<05:38:36.638> yourself<05:38:36.958> on<05:38:37.120> the<05:38:37.280> back<05:38:37.680> and<05:38:37.840> be<05:38:38.400> proud

pat yourself on the back and be proud

pat yourself on the back and be proud
over<05:38:39.680> the<05:38:39.878> years<05:38:40.520> many<05:38:40.760> of<05:38:40.920> you<05:38:41.120> have<05:38:41.320> asked<05:38:41.638> me

over the years many of you have asked me

over the years many of you have asked me
how<05:38:42.600> I<05:38:43.160> approach<05:38:43.798> something<05:38:44.360> or<05:38:44.600> develop

how I approach something or develop

how I approach something or develop
something<05:38:46.080> that<05:38:46.320> mindset<05:38:46.878> that<05:38:47.080> developers

something that mindset that developers

something that mindset that developers
have<05:38:48.558> and<05:38:48.718> today<05:38:49.200> I<05:38:49.280> want<05:38:49.440> to<05:38:49.558> do<05:38:49.798> something

have and today I want to do something

have and today I want to do something
special<05:38:51.120> I<05:38:51.200> want<05:38:51.360> to<05:38:51.520> tell<05:38:51.680> you<05:38:51.840> how<05:38:52.040> I

special I want to tell you how I

special I want to tell you how I
approach<05:38:52.718> things<05:38:53.240> for<05:38:53.558> the<05:38:53.798> rest<05:38:54.040> of<05:38:54.200> the

approach things for the rest of the

approach things for the rest of the
features<05:38:55.040> that<05:38:55.200> we'll<05:38:55.400> be<05:38:55.558> building<05:38:56.120> today<05:38:57.120> if

features that we'll be building today if

features that we'll be building today if
you<05:38:57.360> see<05:38:57.958> many<05:38:58.240> people<05:38:58.478> are<05:38:58.718> successfully

you see many people are successfully

you see many people are successfully
able<05:38:59.718> to<05:38:59.840> do<05:39:00.080> something<05:39:00.520> by<05:39:00.638> following<05:39:01.080> a

able to do something by following a

able to do something by following a
tutorial<05:39:01.840> like<05:39:02.120> this<05:39:02.520> or<05:39:02.798> other<05:39:03.160> content<05:39:04.080> but

tutorial like this or other content but

tutorial like this or other content but
their<05:39:04.478> real<05:39:04.840> struggles<05:39:05.400> begin<05:39:05.920> when<05:39:06.080> they're

their real struggles begin when they're

their real struggles begin when they're
faced<05:39:07.000> with<05:39:07.160> something<05:39:07.600> new<05:39:08.600> most<05:39:08.840> of<05:39:09.040> us<05:39:09.240> will

faced with something new most of us will

faced with something new most of us will
still<05:39:09.718> be<05:39:09.958> clueless<05:39:10.718> even<05:39:11.000> though<05:39:11.160> we<05:39:11.280> have

still be clueless even though we have

still be clueless even though we have
done<05:39:11.680> something<05:39:12.040> similar<05:39:12.478> before<05:39:13.160> by

done something similar before by

done something similar before by
following<05:39:13.920> a<05:39:14.120> YouTube<05:39:14.558> tutorial<05:39:15.558> this<05:39:16.000> is

following a YouTube tutorial this is

following a YouTube tutorial this is
known<05:39:16.600> as<05:39:16.840> tutorial<05:39:17.400> hell<05:39:18.200> and<05:39:18.478> in<05:39:18.600> our<05:39:18.760> nextjs

known as tutorial hell and in our nextjs

known as tutorial hell and in our nextjs
course<05:39:20.120> we<05:39:20.280> have<05:39:20.400> tried<05:39:20.680> to<05:39:20.798> solve<05:39:21.638> that<05:39:22.638> we

course we have tried to solve that we

course we have tried to solve that we
have<05:39:23.000> created<05:39:23.760> a<05:39:24.040> So-Cal<05:39:25.040> active<05:39:25.600> lesson

have created a So-Cal active lesson

have created a So-Cal active lesson
learning<05:39:27.040> where<05:39:27.400> you<05:39:27.638> still<05:39:27.958> have<05:39:28.240> all<05:39:28.360> of<05:39:28.520> the

learning where you still have all of the

learning where you still have all of the
lessons<05:39:28.958> that<05:39:29.080> we<05:39:29.160> usually<05:39:29.400> us<05:39:29.760> have<05:39:30.360> such<05:39:30.558> as

lessons that we usually us have such as

lessons that we usually us have such as
setting<05:39:31.280> everything<05:39:31.638> up<05:39:31.958> and<05:39:32.200> coding<05:39:32.520> things

setting everything up and coding things

setting everything up and coding things
from<05:39:33.000> scratch<05:39:34.000> but<05:39:34.280> soon<05:39:34.600> enough<05:39:35.120> we<05:39:35.400> dive

from scratch but soon enough we dive

from scratch but soon enough we dive
into<05:39:36.080> something<05:39:36.478> special<05:39:37.478> and<05:39:37.718> that<05:39:37.878> is

into something special and that is

into something special and that is
active<05:39:39.160> lessons<05:39:40.160> they<05:39:40.360> start<05:39:40.680> from<05:39:40.840> the

active lessons they start from the

active lessons they start from the
sidebar<05:39:41.878> and<05:39:42.080> then<05:39:42.638> whenever<05:39:42.958> you<05:39:43.120> want<05:39:43.240> to

sidebar and then whenever you want to

sidebar and then whenever you want to
implement<05:39:44.000> something<05:39:44.760> before<05:39:45.040> we<05:39:45.160> do<05:39:45.320> it

implement something before we do it

implement something before we do it
together<05:39:46.160> you<05:39:46.360> have<05:39:46.478> to<05:39:46.638> do<05:39:46.798> it<05:39:47.000> on<05:39:47.160> your

together you have to do it on your

together you have to do it on your
own<05:39:49.160> let<05:39:49.280> me<05:39:49.440> give<05:39:49.520> you<05:39:49.638> an<05:39:49.798> example<05:39:50.638> for<05:39:50.840> the

own let me give you an example for the

own let me give you an example for the
homepage<05:39:51.558> here<05:39:51.878> you<05:39:52.040> have<05:39:52.160> to<05:39:52.360> create<05:39:53.080> a

homepage here you have to create a

homepage here you have to create a
question<05:39:54.080> card<05:39:54.680> UI<05:39:55.680> so<05:39:56.240> here<05:39:56.600> we<05:39:56.760> have<05:39:56.878> a

question card UI so here we have a

question card UI so here we have a
complete<05:39:57.840> active<05:39:58.240> lesson<05:39:58.840> that<05:39:59.040> guides<05:39:59.478> you

complete active lesson that guides you

complete active lesson that guides you
how<05:39:59.718> to<05:39:59.878> do<05:40:00.120> that<05:40:00.760> specifically<05:40:01.360> with<05:40:01.520> the

how to do that specifically with the

how to do that specifically with the
mindset<05:40:02.080> part<05:40:02.638> teaching<05:40:03.040> you<05:40:03.440> how<05:40:03.558> to

mindset part teaching you how to

mindset part teaching you how to
approach<05:40:04.120> it<05:40:04.360> like<05:40:04.520> a<05:40:04.680> real<05:40:04.958> developer<05:40:05.878> it

approach it like a real developer it

approach it like a real developer it
gives<05:40:06.240> you<05:40:06.400> something<05:40:06.638> to<05:40:06.840> think<05:40:07.040> about

gives you something to think about

gives you something to think about
additional<05:40:08.240> resources<05:40:09.240> and<05:40:09.520> even<05:40:09.878> hints<05:40:10.558> that

additional resources and even hints that

additional resources and even hints that
you<05:40:10.840> can<05:40:11.040> uncover<05:40:11.798> by<05:40:12.000> hovering<05:40:12.440> over<05:40:13.040> and

you can uncover by hovering over and

you can uncover by hovering over and
then<05:40:13.280> in<05:40:13.400> the<05:40:13.558> next<05:40:13.798> module<05:40:14.478> I<05:40:14.638> teach<05:40:14.840> you<05:40:15.000> how

then in the next module I teach you how

then in the next module I teach you how
to<05:40:15.240> do<05:40:15.440> it<05:40:15.760> from<05:40:16.080> scratch<05:40:16.558> in<05:40:16.718> a<05:40:16.878> long<05:40:17.200> lecture

to do it from scratch in a long lecture

to do it from scratch in a long lecture
and<05:40:18.320> why<05:40:18.440> am<05:40:18.520> I<05:40:18.638> telling<05:40:18.920> you<05:40:19.120> this<05:40:20.080> well<05:40:20.400> I

and why am I telling you this well I

and why am I telling you this well I
don't<05:40:20.718> really<05:40:20.958> believe<05:40:21.478> in<05:40:21.638> tutorial<05:40:22.160> hell

don't really believe in tutorial hell

don't really believe in tutorial hell
watching<05:40:23.400> tutorials<05:40:23.920> is<05:40:24.160> great<05:40:24.840> but<05:40:25.120> what<05:40:25.240> I

watching tutorials is great but what I

watching tutorials is great but what I
believe<05:40:25.638> is<05:40:25.840> missing<05:40:26.440> is<05:40:26.638> the<05:40:26.798> thinking<05:40:27.638> part

believe is missing is the thinking part

believe is missing is the thinking part
when<05:40:28.760> you're<05:40:28.920> watching<05:40:29.400> a<05:40:29.520> video<05:40:30.240> you<05:40:30.400> have<05:40:30.478> to

when you're watching a video you have to

when you're watching a video you have to
stop<05:40:31.080> and<05:40:31.280> ask<05:40:31.520> yourself<05:40:32.440> how<05:40:32.638> would<05:40:32.878> I

stop and ask yourself how would I

stop and ask yourself how would I
approach<05:40:33.440> it<05:40:33.958> and<05:40:34.200> only<05:40:34.718> then<05:40:35.200> watch<05:40:35.478> the

approach it and only then watch the

approach it and only then watch the
solution<05:40:36.558> but<05:40:36.760> very<05:40:36.958> few<05:40:37.280> of<05:40:37.360> us<05:40:37.520> do<05:40:37.760> that<05:40:38.400> and

solution but very few of us do that and

solution but very few of us do that and
this<05:40:38.718> is<05:40:38.878> why<05:40:39.000> we<05:40:39.120> blame<05:40:39.320> it<05:40:39.478> on<05:40:39.638> tutorial<05:40:40.120> hell

this is why we blame it on tutorial hell

this is why we blame it on tutorial hell
and<05:40:41.320> why<05:40:41.478> you're<05:40:41.718> missing<05:40:42.080> that<05:40:42.240> developer

and why you're missing that developer

and why you're missing that developer
mindset<05:40:43.878> that's<05:40:44.160> why<05:40:44.360> in<05:40:44.478> our<05:40:44.600> next<05:40:44.840> GS<05:40:45.280> course

mindset that's why in our next GS course

mindset that's why in our next GS course
we<05:40:45.798> have<05:40:46.000> scattered<05:40:46.600> around<05:40:47.440> so<05:40:47.680> many<05:40:47.920> of

we have scattered around so many of

we have scattered around so many of
these<05:40:48.400> active<05:40:48.760> lessons<05:40:49.360> so<05:40:49.520> that<05:40:49.638> you<05:40:49.760> can

these active lessons so that you can

these active lessons so that you can
actually<05:40:50.400> learn<05:40:50.958> by<05:40:51.120> building<05:40:52.120> remember<05:40:53.000> good

actually learn by building remember good

actually learn by building remember good
developers<05:40:53.920> don't<05:40:54.200> have<05:40:54.440> someone<05:40:54.760> holding

developers don't have someone holding

developers don't have someone holding
their<05:40:55.320> hands<05:40:56.120> they<05:40:56.320> figure<05:40:56.718> things<05:40:56.958> out<05:40:57.240> on

their hands they figure things out on

their hands they figure things out on
their<05:40:57.718> own<05:40:58.718> because<05:40:58.958> they<05:40:59.120> have<05:40:59.440> developed

their own because they have developed

their own because they have developed
their<05:41:00.080> mindset<05:41:00.878> I<05:41:00.958> don't<05:41:01.200> have<05:41:01.360> any<05:41:01.638> graphics

their mindset I don't have any graphics

their mindset I don't have any graphics
right<05:41:02.320> now<05:41:02.760> but<05:41:02.920> just<05:41:03.200> pause<05:41:03.478> for<05:41:03.638> a<05:41:03.840> second

right now but just pause for a second

right now but just pause for a second
and<05:41:04.520> listen<05:41:05.400> there's<05:41:05.600> an<05:41:05.760> old<05:41:06.040> saying<05:41:06.638> that

and listen there's an old saying that

and listen there's an old saying that
says<05:41:07.440> give<05:41:07.558> a<05:41:07.680> man<05:41:07.878> a<05:41:08.040> fish<05:41:08.478> and<05:41:08.600> you'll<05:41:08.760> feed

says give a man a fish and you'll feed

says give a man a fish and you'll feed
him<05:41:09.160> for<05:41:09.280> a<05:41:09.478> day<05:41:10.080> teach<05:41:10.320> a<05:41:10.440> man<05:41:10.680> how<05:41:10.798> to<05:41:11.000> fish

him for a day teach a man how to fish

him for a day teach a man how to fish
and<05:41:11.638> you'll<05:41:11.840> feed<05:41:12.040> him<05:41:12.200> for<05:41:12.320> a<05:41:12.798> lifetime<05:41:13.798> for

and you'll feed him for a lifetime for

and you'll feed him for a lifetime for
that<05:41:14.320> reason<05:41:14.878> in<05:41:15.040> this<05:41:15.280> free<05:41:15.478> YouTube<05:41:15.840> video<05:41:16.360> I

that reason in this free YouTube video I

that reason in this free YouTube video I
want<05:41:16.558> to<05:41:16.718> give<05:41:16.840> you<05:41:16.958> a<05:41:17.120> glimpse<05:41:17.440> of<05:41:17.600> what<05:41:17.718> we

want to give you a glimpse of what we

want to give you a glimpse of what we
have<05:41:18.000> in<05:41:18.080> our<05:41:18.280> course<05:41:19.120> by<05:41:19.320> introducing<05:41:20.000> some

have in our course by introducing some

have in our course by introducing some
active<05:41:20.680> lessons<05:41:21.360> for<05:41:21.558> the<05:41:21.878> remaining<05:41:22.240> pages

active lessons for the remaining pages

active lessons for the remaining pages
to<05:41:23.040> see<05:41:23.360> how<05:41:23.680> you<05:41:24.080> will<05:41:24.320> approach<05:41:24.680> building

to see how you will approach building

to see how you will approach building
them<05:41:25.718> I<05:41:25.840> hope<05:41:26.000> you're<05:41:26.240> excited<05:41:26.760> to<05:41:27.000> continue

them I hope you're excited to continue

them I hope you're excited to continue
with<05:41:27.558> this<05:41:27.840> project<05:41:28.558> by<05:41:28.718> learning<05:41:29.638> while

with this project by learning while

with this project by learning while
doing<05:41:30.878> so<05:41:31.120> let's<05:41:31.360> get<05:41:31.798> started<05:41:32.798> and<05:41:33.080> I<05:41:33.280> proudly

doing so let's get started and I proudly

doing so let's get started and I proudly
present<05:41:34.000> to<05:41:34.160> you<05:41:34.878> active<05:41:35.280> lessons<05:41:36.000> for<05:41:36.400> our

present to you active lessons for our

present to you active lessons for our
snapgram<05:41:37.520> application<05:41:38.520> the<05:41:38.680> link<05:41:38.958> is<05:41:39.080> going

snapgram application the link is going

snapgram application the link is going
to<05:41:39.400> be<05:41:39.600> down<05:41:39.878> in<05:41:40.000> the<05:41:40.200> description<05:41:41.000> the<05:41:41.200> first

to be down in the description the first

to be down in the description the first
active<05:41:41.878> lesson<05:41:42.360> is<05:41:42.520> about<05:41:42.878> implementing<05:41:43.558> the

active lesson is about implementing the

active lesson is about implementing the
infinite<05:41:44.320> scroll<05:41:45.320> and<05:41:45.600> this<05:41:45.680> is<05:41:45.840> the<05:41:45.958> feature

infinite scroll and this is the feature

infinite scroll and this is the feature
that<05:41:46.440> we<05:41:46.558> have<05:41:46.718> already<05:41:47.040> built<05:41:47.680> so<05:41:47.920> I<05:41:48.040> have

that we have already built so I have

that we have already built so I have
specifically<05:41:48.878> introduced<05:41:49.440> this<05:41:49.558> one<05:41:49.920> to<05:41:50.120> go

specifically introduced this one to go

specifically introduced this one to go
over<05:41:50.558> it<05:41:50.920> and<05:41:51.040> to<05:41:51.200> show<05:41:51.440> you<05:41:51.798> how<05:41:51.920> you're<05:41:52.080> going

over it and to show you how you're going

over it and to show you how you're going
to<05:41:52.400> do<05:41:52.638> the<05:41:52.760> future<05:41:53.200> ones<05:41:53.600> on<05:41:53.760> your<05:41:53.920> own<05:41:54.600> now

to do the future ones on your own now

to do the future ones on your own now
that<05:41:54.958> you<05:41:55.080> know<05:41:55.440> how<05:41:55.638> we<05:41:55.798> did<05:41:56.080> this<05:41:56.200> one

that you know how we did this one

that you know how we did this one
together<05:41:57.360> so<05:41:57.600> the<05:41:57.798> task<05:41:58.200> and<05:41:58.360> the<05:41:58.478> mission<05:41:58.840> is

together so the task and the mission is

together so the task and the mission is
to<05:41:59.360> think<05:41:59.718> and<05:41:59.920> try<05:42:00.320> the<05:42:00.478> infinite<05:42:00.840> Scrolls<05:42:01.240> in

to think and try the infinite Scrolls in

to think and try the infinite Scrolls in
the<05:42:01.520> application<05:42:02.360> for<05:42:02.600> the<05:42:02.798> home<05:42:03.478> users<05:42:04.080> and

the application for the home users and

the application for the home users and
profile<05:42:04.798> Pages<05:42:05.680> even<05:42:05.958> though<05:42:06.120> we<05:42:06.240> have

profile Pages even though we have

profile Pages even though we have
already<05:42:06.798> implemented<05:42:07.360> it<05:42:07.520> for<05:42:07.718> the<05:42:07.878> explore

already implemented it for the explore

already implemented it for the explore
page<05:42:09.040> you<05:42:09.160> can<05:42:09.400> also<05:42:09.680> make<05:42:09.878> it<05:42:10.040> go<05:42:10.400> right<05:42:10.638> here

page you can also make it go right here

page you can also make it go right here
in<05:42:11.080> the<05:42:11.558> homepage<05:42:12.558> so<05:42:13.160> here<05:42:13.680> we<05:42:13.878> provided<05:42:14.320> you

in the homepage so here we provided you

in the homepage so here we provided you
some<05:42:15.080> examples<05:42:16.080> saying<05:42:16.520> that<05:42:16.718> you<05:42:16.798> can<05:42:17.000> visit

some examples saying that you can visit

some examples saying that you can visit
the<05:42:17.478> original<05:42:18.040> Instagram<05:42:18.600> application<05:42:19.440> and

the original Instagram application and

the original Instagram application and
then<05:42:19.798> see<05:42:20.160> how<05:42:20.400> every<05:42:20.600> time<05:42:20.760> you<05:42:20.878> scroll<05:42:21.280> down

then see how every time you scroll down

then see how every time you scroll down
new<05:42:22.000> posts<05:42:22.440> appear<05:42:23.360> and<05:42:23.478> then<05:42:23.600> some

new posts appear and then some

new posts appear and then some
additional<05:42:24.240> resources<05:42:24.798> as<05:42:24.958> well<05:42:25.520> such<05:42:25.680> as<05:42:25.798> the

additional resources as well such as the

additional resources as well such as the
query<05:42:26.320> key<05:42:26.798> query<05:42:27.200> function<05:42:27.840> infinite<05:42:28.280> query

query key query function infinite query

query key query function infinite query
app<05:42:29.400> pagination<05:42:30.160> aate<05:42:30.600> queries<05:42:31.000> and<05:42:31.240> more<05:42:32.000> all

app pagination aate queries and more all

app pagination aate queries and more all
of<05:42:32.320> the<05:42:32.520> resources<05:42:33.240> you<05:42:33.440> need<05:42:33.840> to<05:42:34.040> make<05:42:34.240> this

of the resources you need to make this

of the resources you need to make this
possible<05:42:35.320> of<05:42:35.478> course<05:42:35.840> most<05:42:36.040> of<05:42:36.200> these<05:42:36.360> are

possible of course most of these are

possible of course most of these are
actual<05:42:36.878> documentation<05:42:37.600> sites<05:42:38.478> and<05:42:38.638> then

actual documentation sites and then

actual documentation sites and then
there's<05:42:39.160> also<05:42:39.400> a<05:42:39.600> mustre<05:42:40.240> resource<05:42:40.958> which<05:42:41.080> is

there's also a mustre resource which is

there's also a mustre resource which is
a<05:42:41.360> react<05:42:41.760> query<05:42:42.200> article<05:42:42.840> on<05:42:43.160> infinite

a react query article on infinite

a react query article on infinite
scroll<05:42:45.160> finally<05:42:45.798> we<05:42:46.000> have<05:42:46.200> some<05:42:46.440> hints<05:42:46.958> as

scroll finally we have some hints as

scroll finally we have some hints as
well<05:42:47.920> the<05:42:48.080> entire<05:42:48.558> process<05:42:48.958> needed<05:42:49.240> to

well the entire process needed to

well the entire process needed to
develop<05:42:49.840> this<05:42:50.200> is<05:42:50.478> nicely<05:42:50.840> laid<05:42:51.160> out<05:42:51.478> in<05:42:51.638> form

develop this is nicely laid out in form

develop this is nicely laid out in form
of<05:42:52.120> hints<05:42:52.920> and<05:42:53.160> not<05:42:53.360> only<05:42:53.760> that<05:42:54.120> it<05:42:54.280> urges<05:42:54.718> you

of hints and not only that it urges you

of hints and not only that it urges you
to<05:42:55.360> think<05:42:55.920> and<05:42:56.120> develop<05:42:56.638> that<05:42:57.000> developer

to think and develop that developer

to think and develop that developer
mindset<05:42:58.558> so<05:42:58.718> it<05:42:58.840> asks<05:42:59.080> asks<05:42:59.320> you<05:42:59.638> what<05:42:59.760> do<05:42:59.878> we

mindset so it asks asks you what do we

mindset so it asks asks you what do we
need<05:43:01.000> how<05:43:01.120> should<05:43:01.280> it<05:43:01.440> work<05:43:01.638> or<05:43:01.920> Ro<05:43:02.760> does<05:43:02.920> that

need how should it work or Ro does that

need how should it work or Ro does that
mean<05:43:03.240> that<05:43:03.440> Instagram<05:43:03.840> is<05:43:03.920> showing<05:43:04.240> many

mean that Instagram is showing many

mean that Instagram is showing many
posts<05:43:04.718> in<05:43:04.840> one<05:43:05.120> request<05:43:06.120> and<05:43:06.280> then<05:43:06.520> even<05:43:06.798> some

posts in one request and then even some

posts in one request and then even some
code<05:43:07.360> blocks<05:43:07.878> to<05:43:08.160> get<05:43:08.320> you<05:43:08.600> to<05:43:08.878> implement<05:43:09.400> this

code blocks to get you to implement this

code blocks to get you to implement this
on<05:43:09.798> your<05:43:09.958> own<05:43:10.638> in<05:43:10.798> case<05:43:10.958> you<05:43:11.120> get<05:43:11.320> stuck<05:43:11.878> and

on your own in case you get stuck and

on your own in case you get stuck and
need<05:43:12.320> any

need any

need any
assistance<05:43:14.200> as<05:43:14.320> you<05:43:14.400> can<05:43:14.558> see<05:43:15.080> it<05:43:15.240> goes<05:43:15.718> on<05:43:16.320> and

assistance as you can see it goes on and

assistance as you can see it goes on and
on<05:43:16.878> and<05:43:17.080> on<05:43:17.680> and<05:43:17.840> gives<05:43:18.040> you<05:43:18.160> the<05:43:18.280> code<05:43:18.600> needed

on and on and gives you the code needed

on and on and gives you the code needed
to<05:43:19.360> implement<05:43:19.878> these<05:43:20.080> features<05:43:20.920> within<05:43:21.200> the

to implement these features within the

to implement these features within the
application<05:43:22.320> we<05:43:22.520> have<05:43:22.638> been<05:43:22.798> building<05:43:23.558> so<05:43:23.878> far

application we have been building so far

application we have been building so far
how<05:43:25.280> cool<05:43:25.600> is<05:43:25.798> that<05:43:26.280> it's<05:43:26.400> a<05:43:26.558> completely<05:43:27.000> new

how cool is that it's a completely new

how cool is that it's a completely new
paradigm<05:43:27.680> to<05:43:27.798> learning<05:43:28.360> so<05:43:29.080> just<05:43:29.240> give<05:43:29.360> it<05:43:29.478> a

paradigm to learning so just give it a

paradigm to learning so just give it a
go<05:43:30.120> and<05:43:30.240> tell<05:43:30.400> me<05:43:30.600> how<05:43:30.718> you<05:43:30.878> like<05:43:31.080> it<05:43:32.000> and<05:43:32.240> once

go and tell me how you like it and once

go and tell me how you like it and once
again<05:43:32.958> if<05:43:33.080> it's<05:43:33.240> not<05:43:33.440> working<05:43:33.760> as<05:43:34.000> expected

again if it's not working as expected

again if it's not working as expected
don't<05:43:35.000> feel<05:43:35.360> frustrated<05:43:36.320> it's<05:43:36.478> a<05:43:36.638> part<05:43:36.798> of<05:43:36.920> the

don't feel frustrated it's a part of the

don't feel frustrated it's a part of the
developer's<05:43:37.680> life<05:43:38.160> so<05:43:38.400> start<05:43:38.760> again<05:43:39.120> and

developer's life so start again and

developer's life so start again and
debug<05:43:39.878> everything<05:43:40.280> line<05:43:40.558> by<05:43:40.798> line<05:43:41.440> see<05:43:41.638> if

debug everything line by line see if

debug everything line by line see if
you're<05:43:41.878> getting<05:43:42.120> any<05:43:42.360> documents<05:43:43.040> and<05:43:43.160> check

you're getting any documents and check

you're getting any documents and check
if<05:43:43.520> the<05:43:43.680> last<05:43:43.958> ID<05:43:44.240> is<05:43:44.360> being<05:43:44.600> calculated

if the last ID is being calculated

if the last ID is being calculated
properly<05:43:45.878> and<05:43:46.040> whether<05:43:46.280> it's<05:43:46.440> being<05:43:46.718> passed

properly and whether it's being passed

properly and whether it's being passed
to<05:43:47.120> the<05:43:47.240> query<05:43:47.600> function<05:43:48.120> or<05:43:48.400> not<05:43:49.080> just<05:43:49.280> keep

to the query function or not just keep

to the query function or not just keep
trying<05:43:50.200> if<05:43:50.320> you<05:43:50.440> get<05:43:50.638> stuck<05:43:51.240> just<05:43:51.440> refer<05:43:51.798> to

trying if you get stuck just refer to

trying if you get stuck just refer to
the<05:43:52.080> finished<05:43:52.440> code<05:43:52.680> repository<05:43:53.440> on<05:43:53.718> GitHub

the finished code repository on GitHub

the finished code repository on GitHub
this<05:43:54.798> right<05:43:55.000> here<05:43:55.320> was<05:43:55.558> just<05:43:55.760> the<05:43:55.958> first<05:43:56.320> of

this right here was just the first of

this right here was just the first of
the<05:43:56.680> active<05:43:56.958> lessons<05:43:57.680> we<05:43:57.840> have<05:43:58.040> implemented

the active lessons we have implemented

the active lessons we have implemented
it<05:43:58.680> for<05:43:59.120> explore<05:43:59.558> page<05:44:00.200> but<05:44:00.400> you<05:44:00.478> can<05:44:00.638> do<05:44:00.760> it

it for explore page but you can do it

it for explore page but you can do it
for<05:44:01.040> the<05:44:01.200> homepage<05:44:01.718> as<05:44:01.878> well<05:44:02.878> and<05:44:03.080> then<05:44:03.558> we

for the homepage as well and then we

for the homepage as well and then we
have<05:44:04.478> five<05:44:05.080> more<05:44:06.080> the<05:44:06.240> top<05:44:06.478> creators<05:44:07.080> is<05:44:07.200> the

have five more the top creators is the

have five more the top creators is the
next<05:44:07.558> feature<05:44:07.878> you<05:44:08.040> have<05:44:08.160> to<05:44:08.760> implement<05:44:09.760> and

next feature you have to implement and

next feature you have to implement and
in<05:44:10.200> this<05:44:10.440> case<05:44:10.840> we<05:44:11.000> have<05:44:11.240> even<05:44:11.520> provided<05:44:11.878> you

in this case we have even provided you

in this case we have even provided you
with<05:44:12.280> a<05:44:12.440> figma<05:44:13.080> design<05:44:14.080> you<05:44:14.200> can<05:44:14.320> see<05:44:14.520> it<05:44:14.718> here

with a figma design you can see it here

with a figma design you can see it here
so<05:44:15.440> you<05:44:15.558> have<05:44:15.680> to<05:44:15.878> implement<05:44:16.400> the<05:44:16.600> top

so you have to implement the top

so you have to implement the top
creators<05:44:17.798> right<05:44:18.760> sidebar<05:44:19.760> once<05:44:20.040> again<05:44:20.520> you

creators right sidebar once again you

creators right sidebar once again you
have<05:44:21.200> everything<05:44:21.600> you<05:44:21.760> need<05:44:22.080> here<05:44:22.440> we<05:44:22.600> even

have everything you need here we even

have everything you need here we even
recommend<05:44:23.360> to<05:44:23.520> play<05:44:23.680> a<05:44:23.760> little<05:44:23.958> flexb<05:44:24.638> game<05:44:25.040> to

recommend to play a little flexb game to

recommend to play a little flexb game to
test<05:44:25.478> out<05:44:25.638> your<05:44:25.798> Flex<05:44:26.160> skills<05:44:26.958> and<05:44:27.080> then<05:44:27.320> again

test out your Flex skills and then again

test out your Flex skills and then again
we<05:44:27.920> dive<05:44:28.200> into<05:44:28.400> a<05:44:28.520> large<05:44:29.040> number<05:44:29.360> of<05:44:29.520> different

we dive into a large number of different

we dive into a large number of different
hints<05:44:31.040> they<05:44:31.200> go<05:44:31.440> linearly<05:44:32.320> from<05:44:32.600> start<05:44:33.040> to

hints they go linearly from start to

hints they go linearly from start to
finish<05:44:33.798> so<05:44:33.958> you<05:44:34.040> can<05:44:34.240> try<05:44:34.440> coding<05:44:34.760> it<05:44:34.920> on<05:44:35.040> your

finish so you can try coding it on your

finish so you can try coding it on your
own<05:44:35.760> and<05:44:35.920> then<05:44:36.160> try<05:44:36.360> to<05:44:36.600> think<05:44:37.160> in<05:44:37.360> layouts<05:44:38.120> try

own and then try to think in layouts try

own and then try to think in layouts try
to<05:44:38.520> implement<05:44:39.000> different<05:44:39.280> things<05:44:40.000> try<05:44:40.240> to<05:44:40.400> do

to implement different things try to do

to implement different things try to do
it<05:44:40.878> on<05:44:41.080> your<05:44:41.280> own<05:44:42.120> but<05:44:42.360> if<05:44:42.478> you<05:44:42.638> get<05:44:42.798> stuck<05:44:43.440> you

it on your own but if you get stuck you

it on your own but if you get stuck you
can<05:44:43.798> visit<05:44:44.240> the<05:44:44.400> hints<05:44:45.400> then<05:44:45.600> again<05:44:45.878> we're

can visit the hints then again we're

can visit the hints then again we're
going<05:44:46.160> to<05:44:46.320> implement<05:44:46.760> the<05:44:46.920> all<05:44:47.400> users<05:44:48.000> section

going to implement the all users section

going to implement the all users section
next<05:44:49.400> here<05:44:49.718> you<05:44:49.840> can<05:44:50.000> check<05:44:50.200> out<05:44:50.400> the<05:44:50.558> design

next here you can check out the design

next here you can check out the design
and<05:44:51.440> then<05:44:51.638> we<05:44:51.798> go<05:44:52.200> through<05:44:52.520> different<05:44:53.040> must

and then we go through different must

and then we go through different must
plays<05:44:53.718> or<05:44:53.958> must<05:44:54.240> reads<05:44:55.160> as<05:44:55.360> well<05:44:55.558> as<05:44:55.718> some

plays or must reads as well as some

plays or must reads as well as some
additional<05:44:56.440> hints<05:44:56.920> you<05:44:57.000> can<05:44:57.160> follow<05:44:57.520> to

additional hints you can follow to

additional hints you can follow to
implement<05:44:58.080> the<05:44:58.200> feature

implement the feature

implement the feature
and<05:44:59.680> I<05:44:59.760> don't<05:44:59.920> think<05:45:00.040> I<05:45:00.160> got<05:45:00.280> to<05:45:00.440> say<05:45:00.638> it<05:45:01.000> but

and I don't think I got to say it but

and I don't think I got to say it but
this<05:45:01.240> is<05:45:01.400> repeated<05:45:01.840> for<05:45:01.958> the<05:45:02.120> save<05:45:02.520> posts<05:45:03.120> for

this is repeated for the save posts for

this is repeated for the save posts for
the<05:45:03.478> edit<05:45:03.840> profile<05:45:04.840> and<05:45:05.120> finally<05:45:05.638> for<05:45:05.878> the

the edit profile and finally for the

the edit profile and finally for the
profile<05:45:06.478> page<05:45:07.080> itself<05:45:08.080> I<05:45:08.200> truly<05:45:08.558> believe<05:45:08.878> that

profile page itself I truly believe that

profile page itself I truly believe that
this<05:45:09.160> is<05:45:09.240> a<05:45:09.440> new<05:45:09.680> way<05:45:09.840> to<05:45:10.000> learning<05:45:10.840> of<05:45:11.040> course

this is a new way to learning of course

this is a new way to learning of course
feel<05:45:11.638> free<05:45:11.840> to<05:45:12.080> let<05:45:12.200> me<05:45:12.360> know<05:45:12.600> what<05:45:12.718> you<05:45:12.920> think

feel free to let me know what you think

feel free to let me know what you think
down<05:45:13.600> in<05:45:13.718> the<05:45:13.920> comments<05:45:14.558> and<05:45:14.760> if<05:45:14.920> you'd<05:45:15.040> like

down in the comments and if you'd like

down in the comments and if you'd like
me<05:45:15.280> to<05:45:15.360> do<05:45:15.558> more<05:45:15.840> things<05:45:16.120> like<05:45:16.320> this<05:45:16.600> in<05:45:16.718> the

me to do more things like this in the

me to do more things like this in the
future<05:45:17.840> with<05:45:18.040> that<05:45:18.280> said<05:45:18.920> give<05:45:19.040> it<05:45:19.160> a<05:45:19.320> go<05:45:19.840> try

future with that said give it a go try

future with that said give it a go try
to<05:45:20.240> go<05:45:20.478> through<05:45:20.840> as<05:45:21.040> many<05:45:21.320> of<05:45:21.520> these<05:45:21.798> active

to go through as many of these active

to go through as many of these active
lessons<05:45:22.478> as<05:45:22.680> possible<05:45:23.478> see<05:45:23.760> how<05:45:23.878> you<05:45:24.040> like

lessons as possible see how you like

lessons as possible see how you like
them<05:45:24.600> try<05:45:24.840> to<05:45:25.040> implement<05:45:25.478> some<05:45:25.600> of<05:45:25.718> the

them try to implement some of the

them try to implement some of the
features<05:45:26.958> and<05:45:27.160> then<05:45:27.558> come<05:45:27.798> back<05:45:27.958> to<05:45:28.120> this

features and then come back to this

features and then come back to this
video<05:45:28.840> to<05:45:29.000> deploy<05:45:29.360> the<05:45:29.558> project<05:45:29.920> to<05:45:30.120> the

video to deploy the project to the

video to deploy the project to the
Internet<05:45:31.798> so<05:45:32.400> how<05:45:32.558> did<05:45:32.718> it<05:45:32.878> go<05:45:33.520> I<05:45:33.638> hope<05:45:33.798> you<05:45:33.920> are

Internet so how did it go I hope you are

Internet so how did it go I hope you are
able<05:45:34.400> to<05:45:34.600> take<05:45:34.760> your<05:45:35.000> time<05:45:35.638> and<05:45:35.920> I<05:45:36.080> know<05:45:36.320> it<05:45:36.440> can

able to take your time and I know it can

able to take your time and I know it can
take<05:45:36.798> a<05:45:36.920> lot<05:45:37.080> of<05:45:37.240> time<05:45:37.558> maybe<05:45:37.878> even<05:45:38.200> more<05:45:38.600> than

take a lot of time maybe even more than

take a lot of time maybe even more than
the<05:45:38.958> entire<05:45:39.360> video<05:45:39.638> you've<05:45:39.840> been<05:45:40.040> watching

the entire video you've been watching

the entire video you've been watching
because<05:45:41.120> implementing<05:45:41.760> things<05:45:41.958> on<05:45:42.120> your<05:45:42.280> own

because implementing things on your own

because implementing things on your own
actually<05:45:43.440> challenges<05:45:44.000> you<05:45:44.320> a<05:45:44.558> lot<05:45:45.240> so<05:45:45.600> I<05:45:45.718> hope

actually challenges you a lot so I hope

actually challenges you a lot so I hope
you<05:45:46.000> did<05:45:46.280> good<05:45:46.958> if<05:45:47.120> not<05:45:47.440> there's<05:45:47.718> more<05:45:47.958> things

you did good if not there's more things

you did good if not there's more things
to<05:45:48.280> do<05:45:48.520> and<05:45:48.680> more<05:45:48.878> things<05:45:49.080> to<05:45:49.240> learn<05:45:49.920> but

to do and more things to learn but

to do and more things to learn but
learning<05:45:51.040> means<05:45:51.638> improving<05:45:52.638> so<05:45:53.040> in<05:45:53.240> any<05:45:53.520> case

learning means improving so in any case

learning means improving so in any case
now<05:45:54.558> however<05:45:54.798> much<05:45:55.000> of<05:45:55.120> the<05:45:55.320> project<05:45:55.638> you've

now however much of the project you've

now however much of the project you've
finished<05:45:56.520> let's<05:45:56.760> go<05:45:56.878> ahead<05:45:57.160> and<05:45:57.320> deploy<05:45:57.760> to

finished let's go ahead and deploy to

finished let's go ahead and deploy to
the<05:45:58.040> internet<05:45:58.478> to<05:45:58.638> get<05:45:58.920> together<05:45:59.558> we'll<05:45:59.840> be

the internet to get together we'll be

the internet to get together we'll be
deploying<05:46:00.558> our<05:46:01.000> project<05:46:01.400> to<05:46:01.680> versell<05:46:02.400> so<05:46:02.520> you

deploying our project to versell so you

deploying our project to versell so you
can<05:46:02.798> head<05:46:02.958> to<05:46:03.160> versell<05:46:03.718> decom<05:46:04.400> and<05:46:04.680> log<05:46:04.920> in<05:46:05.280> or

can head to versell decom and log in or

can head to versell decom and log in or
sign<05:46:05.958> up<05:46:06.920> once<05:46:07.080> you<05:46:07.240> log<05:46:07.520> in<05:46:07.840> you<05:46:07.958> should<05:46:08.160> be

sign up once you log in you should be

sign up once you log in you should be
able<05:46:08.478> to<05:46:08.600> see<05:46:08.798> your<05:46:09.080> projects<05:46:09.798> and<05:46:10.000> you<05:46:10.160> might

able to see your projects and you might

able to see your projects and you might
not<05:46:10.718> have<05:46:10.958> as<05:46:11.080> many<05:46:11.440> as<05:46:11.638> I<05:46:11.840> do<05:46:12.718> as<05:46:12.840> you<05:46:12.958> can<05:46:13.080> see

not have as many as I do as you can see

not have as many as I do as you can see
we<05:46:13.558> have<05:46:13.798> hundreds<05:46:14.240> and<05:46:14.440> hundreds<05:46:14.840> of

we have hundreds and hundreds of

we have hundreds and hundreds of
projects<05:46:15.520> right<05:46:15.718> here<05:46:16.400> most<05:46:16.638> of<05:46:16.840> them<05:46:17.040> belong

projects right here most of them belong

projects right here most of them belong
to<05:46:17.840> our<05:46:18.200> JSM<05:46:18.760> masterclass<05:46:19.400> experience

to our JSM masterclass experience

to our JSM masterclass experience
students<05:46:20.958> so<05:46:21.638> in<05:46:21.798> our<05:46:22.040> master<05:46:22.440> class<05:46:22.840> which<05:46:22.958> is

students so in our master class which is

students so in our master class which is
the<05:46:23.200> JSM<05:46:23.680> boot<05:46:24.000> camp<05:46:24.718> we<05:46:25.200> actively<05:46:25.958> teach

the JSM boot camp we actively teach

the JSM boot camp we actively teach
people<05:46:26.638> how<05:46:26.760> to<05:46:27.000> develop<05:46:27.520> projects<05:46:28.080> on<05:46:28.320> their

people how to develop projects on their

people how to develop projects on their
own

own

own
within<05:46:29.920> a<05:46:30.120> team<05:46:30.958> and<05:46:31.240> this<05:46:31.360> can<05:46:31.478> be<05:46:31.680> considered

within a team and this can be considered

within a team and this can be considered
even<05:46:32.360> an<05:46:32.558> additional<05:46:33.120> step<05:46:33.440> to<05:46:33.680> these<05:46:33.920> active

even an additional step to these active

even an additional step to these active
lessons<05:46:35.120> the<05:46:35.360> active<05:46:35.638> lessons<05:46:36.120> though<05:46:36.280> are

lessons the active lessons though are

lessons the active lessons though are
reserved<05:46:36.878> for<05:46:37.000> the<05:46:37.080> nextjs<05:46:37.638> course<05:46:38.240> Andy<05:46:38.638> will

reserved for the nextjs course Andy will

reserved for the nextjs course Andy will
also<05:46:38.958> gotten<05:46:39.200> a<05:46:39.360> chance<05:46:39.600> to<05:46:39.840> experience<05:46:40.400> them

also gotten a chance to experience them

also gotten a chance to experience them
in<05:46:41.000> this<05:46:41.200> video<05:46:42.080> so<05:46:42.320> with<05:46:42.478> that<05:46:42.680> said<05:46:43.000> let's<05:46:43.200> go

in this video so with that said let's go

in this video so with that said let's go
ahead<05:46:43.558> and<05:46:43.760> click<05:46:44.080> add<05:46:44.320> new<05:46:44.958> and<05:46:45.080> we<05:46:45.200> can

ahead and click add new and we can

ahead and click add new and we can
select<05:46:46.200> project<05:46:47.200> you<05:46:47.320> can<05:46:47.478> notice<05:46:47.760> that<05:46:47.878> it's

select project you can notice that it's

select project you can notice that it's
going<05:46:48.200> to<05:46:48.440> ask<05:46:48.680> us<05:46:49.000> to<05:46:49.320> import<05:46:49.680> a<05:46:49.878> get

going to ask us to import a get

going to ask us to import a get
repository<05:46:50.920> which<05:46:51.080> means<05:46:51.320> that<05:46:51.478> we<05:46:51.600> have<05:46:51.718> to

repository which means that we have to

repository which means that we have to
upload<05:46:52.360> our<05:46:52.558> project<05:46:52.958> to<05:46:53.280> GitHub<05:46:54.280> and<05:46:54.478> to<05:46:54.638> do

upload our project to GitHub and to do

upload our project to GitHub and to do
that<05:46:55.200> you<05:46:55.320> can<05:46:55.520> go<05:46:55.638> to<05:46:55.920> github.com

that you can go to github.com

that you can go to github.com
slne<05:46:58.440> and<05:46:58.798> create<05:46:59.000> a<05:46:59.120> new<05:46:59.400> project<05:46:59.840> called

slne and create a new project called

slne and create a new project called
something<05:47:00.600> like

something like

something like
snapgram<05:47:02.600> you<05:47:02.718> can<05:47:02.920> make<05:47:03.040> it<05:47:03.280> public<05:47:03.638> or

snapgram you can make it public or

snapgram you can make it public or
private<05:47:05.400> I'm<05:47:05.558> going<05:47:05.638> to<05:47:05.798> make<05:47:05.920> it<05:47:06.080> private<05:47:06.360> in

private I'm going to make it private in

private I'm going to make it private in
this<05:47:06.760> case<05:47:07.160> and<05:47:07.360> click<05:47:07.680> create

repository once the repo is there we can

repository once the repo is there we can
push<05:47:13.400> our<05:47:13.558> code<05:47:13.798> to<05:47:14.000> it<05:47:15.000> by<05:47:15.200> dragging<05:47:15.638> this<05:47:15.760> to

push our code to it by dragging this to

push our code to it by dragging this to
the<05:47:16.120> side<05:47:16.878> opening<05:47:17.280> up<05:47:17.440> our<05:47:17.638> terminal<05:47:18.558> of

the side opening up our terminal of

the side opening up our terminal of
course<05:47:18.920> we<05:47:19.040> have<05:47:19.160> to<05:47:19.320> stop<05:47:19.558> it<05:47:19.680> from<05:47:19.920> running

course we have to stop it from running

course we have to stop it from running
and<05:47:21.120> then<05:47:21.520> you<05:47:21.638> can<05:47:21.798> run<05:47:22.400> get<05:47:23.000> init<05:47:24.000> get<05:47:24.360> add

and then you can run get init get add

and then you can run get init get add
dot<05:47:27.120> get<05:47:27.718> commit<05:47:29.120> Dash<05:47:29.878> first

dot get commit Dash first

dot get commit Dash first
commit<05:47:33.040> and<05:47:33.200> then<05:47:33.320> you<05:47:33.400> need<05:47:33.558> to<05:47:33.718> copy<05:47:33.958> a

commit and then you need to copy a

commit and then you need to copy a
couple<05:47:34.280> of<05:47:34.400> command<05:47:34.798> from<05:47:35.040> here<05:47:35.558> such<05:47:35.760> as<05:47:36.000> git

couple of command from here such as git

couple of command from here such as git
Branch<05:47:36.920> M<05:47:37.440> main<05:47:38.400> get<05:47:38.600> remote<05:47:39.040> at<05:47:39.360> origin<05:47:40.240> and

Branch M main get remote at origin and

Branch M main get remote at origin and
get<05:47:40.680> push<05:47:41.000> you<05:47:41.360> origin

get push you origin

get push you origin
Master<05:47:43.920> once<05:47:44.080> you<05:47:44.240> do<05:47:44.400> it<05:47:44.798> our<05:47:45.000> code<05:47:45.240> should

Master once you do it our code should

Master once you do it our code should
now<05:47:45.638> be<05:47:45.920> live<05:47:46.240> on<05:47:46.600> GitHub<05:47:47.240> which<05:47:47.360> you<05:47:47.440> can<05:47:47.600> see

now be live on GitHub which you can see

now be live on GitHub which you can see
if<05:47:48.000> you<05:47:48.160> simply<05:47:48.920> reload<05:47:49.920> and<05:47:50.120> there<05:47:50.240> we<05:47:50.440> go<05:47:50.878> our

if you simply reload and there we go our

if you simply reload and there we go our
code<05:47:51.320> is<05:47:51.558> here<05:47:52.360> now<05:47:52.600> that<05:47:52.840> repo<05:47:53.240> is<05:47:53.400> live<05:47:53.840> we

code is here now that repo is live we

code is here now that repo is live we
can<05:47:54.080> go<05:47:54.320> back<05:47:54.478> to<05:47:54.718> versel<05:47:55.600> and<05:47:55.760> it

can go back to versel and it

can go back to versel and it
automatically<05:47:56.478> figured<05:47:56.840> that<05:47:56.958> we<05:47:57.080> have<05:47:57.200> a<05:47:57.320> new

automatically figured that we have a new

automatically figured that we have a new
V<05:47:58.000> project<05:47:58.360> right<05:47:58.478> here<05:47:58.718> here<05:47:59.080> which<05:47:59.240> we<05:47:59.360> can

V project right here here which we can

V project right here here which we can
import<05:48:00.680> once<05:48:00.840> you<05:48:01.000> import<05:48:01.320> it<05:48:01.520> you'll<05:48:01.718> have<05:48:01.840> to

import once you import it you'll have to

import once you import it you'll have to
add<05:48:02.200> your<05:48:02.400> environment<05:48:03.000> variables<05:48:04.000> so<05:48:04.320> back

add your environment variables so back

add your environment variables so back
in<05:48:04.638> our<05:48:04.878> code<05:48:05.400> you<05:48:05.520> can<05:48:05.798> go<05:48:06.080> to<05:48:06.478> our<05:48:07.160> env.<05:48:07.920> looc

in our code you can go to our env. looc

in our code you can go to our env. looc
copy<05:48:09.200> all<05:48:09.440> the<05:48:09.638> variables<05:48:10.600> and<05:48:10.840> simply<05:48:11.240> paste

copy all the variables and simply paste

copy all the variables and simply paste
them<05:48:11.760> right<05:48:11.958> here<05:48:12.478> it's<05:48:12.638> going<05:48:12.760> to

them right here it's going to

them right here it's going to
automatically<05:48:13.558> figure<05:48:13.878> out<05:48:14.280> all<05:48:14.680> the

automatically figure out all the

automatically figure out all the
individual<05:48:15.638> variables<05:48:16.638> and<05:48:16.920> click<05:48:17.400> deploy<05:48:18.400> as

individual variables and click deploy as

individual variables and click deploy as
you<05:48:18.600> can<05:48:18.760> see<05:48:18.958> the<05:48:19.120> deployment<05:48:19.638> is<05:48:20.000> cued<05:48:21.000> so

you can see the deployment is cued so

you can see the deployment is cued so
let's<05:48:21.440> give<05:48:21.558> it<05:48:21.680> a<05:48:21.798> minute<05:48:22.320> and<05:48:22.520> let's<05:48:22.760> see<05:48:23.040> if

let's give it a minute and let's see if

let's give it a minute and let's see if
it's<05:48:23.600> successful<05:48:24.600> and<05:48:24.798> in<05:48:25.000> just<05:48:25.200> 30<05:48:25.558> seconds

it's successful and in just 30 seconds

it's successful and in just 30 seconds
our<05:48:26.360> website<05:48:26.920> is<05:48:27.160> now<05:48:27.478> live<05:48:28.400> and<05:48:28.638> and<05:48:28.798> let's<05:48:28.958> go

our website is now live and and let's go

our website is now live and and let's go
ahead<05:48:29.280> and<05:48:29.478> click<05:48:29.798> here<05:48:30.040> to<05:48:30.320> visit<05:48:30.638> our

ahead and click here to visit our

ahead and click here to visit our
deployed

deployed

deployed
application<05:48:33.000> there<05:48:33.320> we<05:48:33.638> go<05:48:34.160> our<05:48:34.400> sign<05:48:34.638> in<05:48:34.840> is

application there we go our sign in is

application there we go our sign in is
looking<05:48:35.360> great<05:48:35.958> but<05:48:36.160> if<05:48:36.240> you<05:48:36.360> go<05:48:36.558> to<05:48:36.878> inspect

looking great but if you go to inspect

looking great but if you go to inspect
and<05:48:38.120> if<05:48:38.240> you<05:48:38.400> look<05:48:38.600> into<05:48:38.840> the<05:48:39.080> console<05:48:40.080> you<05:48:40.200> can

and if you look into the console you can

and if you look into the console you can
notice<05:48:40.958> that<05:48:41.280> we<05:48:41.440> cannot<05:48:41.760> really<05:48:41.958> make<05:48:42.160> a

notice that we cannot really make a

notice that we cannot really make a
request<05:48:43.000> to<05:48:43.240> our<05:48:43.478> new<05:48:43.760> domain<05:48:44.400> or<05:48:44.798> rather<05:48:45.360> the

request to our new domain or rather the

request to our new domain or rather the
access<05:48:45.958> to<05:48:46.200> ight<05:48:46.840> is<05:48:46.958> being<05:48:47.280> blocked<05:48:47.680> from<05:48:47.798> our

access to ight is being blocked from our

access to ight is being blocked from our
new<05:48:48.200> domain<05:48:49.160> that's<05:48:49.400> because<05:48:49.600> of<05:48:49.760> the<05:48:49.920> course

new domain that's because of the course

new domain that's because of the course
policy<05:48:51.160> something<05:48:51.520> that<05:48:51.718> developers<05:48:52.200> don't

policy something that developers don't

policy something that developers don't
really<05:48:52.878> like<05:48:53.600> but<05:48:53.760> thankfully<05:48:54.160> there's<05:48:54.360> an

really like but thankfully there's an

really like but thankfully there's an
easy<05:48:54.760> way<05:48:54.958> around<05:48:55.240> it<05:48:56.000> you<05:48:56.160> need<05:48:56.320> to<05:48:56.478> go<05:48:56.638> to

easy way around it you need to go to

easy way around it you need to go to
aight<05:48:59.000> and<05:48:59.160> then<05:48:59.280> you<05:48:59.400> need<05:48:59.520> to<05:48:59.760> add<05:49:00.000> a<05:49:00.160> new

aight and then you need to add a new

aight and then you need to add a new
platform<05:49:01.160> in<05:49:01.360> this<05:49:01.520> case<05:49:01.680> we're<05:49:01.840> going<05:49:01.920> to<05:49:02.040> do

platform in this case we're going to do

platform in this case we're going to do
web<05:49:03.440> the<05:49:03.600> name<05:49:04.040> is<05:49:04.200> going<05:49:04.360> to<05:49:04.520> be

snapgram and the host name can be

snapgram and the host name can be
everything<05:49:09.718> ad<05:49:10.040> verell<05:49:10.600> thata<05:49:11.360> and<05:49:11.478> we<05:49:11.558> can

everything ad verell thata and we can

everything ad verell thata and we can
click

click

click
next<05:49:13.760> finally<05:49:14.200> let's<05:49:14.558> skip<05:49:14.798> optional

next finally let's skip optional

next finally let's skip optional
steps<05:49:17.320> and<05:49:17.558> this<05:49:17.798> created<05:49:18.240> a<05:49:18.440> new<05:49:18.680> integration

steps and this created a new integration

steps and this created a new integration
with<05:49:19.798> a<05:49:20.000> web<05:49:20.320> platform<05:49:20.958> where<05:49:21.120> we<05:49:21.240> have

with a web platform where we have

with a web platform where we have
deployed<05:49:21.878> our<05:49:22.040> snapgram<05:49:23.040> and<05:49:23.280> every<05:49:23.478> single

deployed our snapgram and every single

deployed our snapgram and every single
host<05:49:24.080> name<05:49:24.240> on<05:49:24.478> verell<05:49:25.120> should<05:49:25.440> work<05:49:26.120> so<05:49:26.280> let's

host name on verell should work so let's

host name on verell should work so let's
go<05:49:27.040> back<05:49:28.040> clear<05:49:28.360> the<05:49:28.520> the<05:49:28.638> console<05:49:29.040> and<05:49:29.200> reload

go back clear the the console and reload

go back clear the the console and reload
the

the

the
page<05:49:31.840> we<05:49:32.280> immediately<05:49:33.280> get<05:49:33.478> logged<05:49:33.840> in<05:49:34.120> into

page we immediately get logged in into

page we immediately get logged in into
our<05:49:34.558> new<05:49:34.718> domain<05:49:35.520> if<05:49:35.718> that<05:49:35.878> hasn't<05:49:36.120> worked<05:49:36.320> for

our new domain if that hasn't worked for

our new domain if that hasn't worked for
you<05:49:36.798> you<05:49:36.920> can<05:49:37.080> just<05:49:37.280> manually<05:49:37.680> log<05:49:37.958> in<05:49:38.680> and

you you can just manually log in and

you you can just manually log in and
with<05:49:39.120> that<05:49:39.320> said<05:49:39.760> you<05:49:39.840> should<05:49:40.040> be<05:49:40.160> able<05:49:40.360> to

with that said you should be able to

with that said you should be able to
have<05:49:40.760> this<05:49:40.958> explore<05:49:41.440> features<05:49:42.200> the<05:49:42.360> people<05:49:42.798> as

have this explore features the people as

have this explore features the people as
well<05:49:43.280> if<05:49:43.400> you<05:49:43.520> have<05:49:43.718> implemented<05:49:44.240> it<05:49:44.638> saved

well if you have implemented it saved

well if you have implemented it saved
features<05:49:45.478> as<05:49:45.638> well<05:49:46.320> everything<05:49:46.840> is<05:49:47.160> working

features as well everything is working

features as well everything is working
flawlessly<05:49:48.520> on<05:49:48.760> our<05:49:48.958> newly<05:49:49.360> deployed<05:49:49.878> website

flawlessly on our newly deployed website

flawlessly on our newly deployed website
how<05:49:51.280> great<05:49:51.718> is<05:49:51.958> that<05:49:52.718> so<05:49:53.200> how<05:49:53.320> did<05:49:53.478> you<05:49:53.600> like

how great is that so how did you like

how great is that so how did you like
the<05:49:53.878> build<05:49:54.600> if<05:49:54.718> you're<05:49:54.920> watching<05:49:55.320> all<05:49:55.558> the<05:49:55.638> way

the build if you're watching all the way

the build if you're watching all the way
until<05:49:56.080> the<05:49:56.200> end<05:49:56.760> I<05:49:56.878> hope<05:49:57.040> you<05:49:57.280> loved<05:49:57.558> it<05:49:58.200> Andy

until the end I hope you loved it Andy

until the end I hope you loved it Andy
and<05:49:58.680> how<05:49:58.798> did<05:49:58.920> you<05:49:59.000> like<05:49:59.160> the<05:49:59.280> new<05:49:59.478> active

and how did you like the new active

and how did you like the new active
lessons<05:50:00.798> I<05:50:00.920> hope<05:50:01.120> they<05:50:01.280> truly<05:50:01.638> tested<05:50:02.080> you<05:50:02.400> and

lessons I hope they truly tested you and

lessons I hope they truly tested you and
helped<05:50:02.878> you<05:50:03.080> build<05:50:03.360> your<05:50:03.520> own<05:50:03.840> developer

helped you build your own developer

helped you build your own developer
mindset<05:50:05.920> if<05:50:06.040> you<05:50:06.120> want<05:50:06.240> to<05:50:06.478> improve<05:50:06.798> your<05:50:07.000> game

mindset if you want to improve your game

mindset if you want to improve your game
and<05:50:07.478> build<05:50:07.840> even<05:50:08.120> better<05:50:08.478> applications<05:50:09.478> now

and build even better applications now

and build even better applications now
using<05:50:10.040> nextjs<05:50:10.798> instead<05:50:11.080> of<05:50:11.240> react<05:50:12.040> you<05:50:12.200> can<05:50:12.360> do

using nextjs instead of react you can do

using nextjs instead of react you can do
so<05:50:12.840> in<05:50:12.958> your<05:50:13.120> nextjs<05:50:13.680> 13<05:50:14.120> course<05:50:14.760> so<05:50:14.958> just<05:50:15.120> go

so in your nextjs 13 course so just go

so in your nextjs 13 course so just go
to<05:50:15.600> jm.pro<05:50:16.600> and<05:50:17.200> check<05:50:17.400> it<05:50:17.680> out<05:50:18.680> within<05:50:18.958> it<05:50:19.320> we

to jm.pro and check it out within it we

to jm.pro and check it out within it we
have<05:50:19.958> many<05:50:20.240> more<05:50:20.600> active<05:50:20.958> lessons<05:50:21.638> and<05:50:21.920> a<05:50:22.080> lot

have many more active lessons and a lot

have many more active lessons and a lot
of<05:50:22.520> interesting<05:50:22.958> things<05:50:23.200> to<05:50:23.360> learn<05:50:23.878> to<05:50:24.080> land<05:50:24.478> a

of interesting things to learn to land a

of interesting things to learn to land a
developer<05:50:25.400> job<05:50:26.400> and<05:50:26.718> finally<05:50:27.360> huge<05:50:27.798> thanks<05:50:28.080> to

developer job and finally huge thanks to

developer job and finally huge thanks to
aight<05:50:29.120> not<05:50:29.360> only<05:50:29.600> for<05:50:29.878> sponsoring<05:50:30.440> this<05:50:30.600> video

aight not only for sponsoring this video

aight not only for sponsoring this video
but<05:50:31.360> for<05:50:31.638> building<05:50:32.080> such<05:50:32.240> a<05:50:32.478> phenomenal

but for building such a phenomenal

but for building such a phenomenal
open-source<05:50:34.040> platform<05:50:34.718> that<05:50:34.840> lets<05:50:35.080> us<05:50:35.280> add<05:50:35.638> OD

open-source platform that lets us add OD

open-source platform that lets us add OD
databases<05:50:37.160> function<05:50:37.520> and<05:50:37.760> storage<05:50:38.718> in<05:50:38.920> a

databases function and storage in a

databases function and storage in a
matter<05:50:39.400> of<05:50:39.600> minutes<05:50:40.520> once<05:50:40.798> again<05:50:41.280> thank<05:50:41.440> you

matter of minutes once again thank you

matter of minutes once again thank you
so<05:50:41.718> much<05:50:41.878> for<05:50:42.120> watching<05:50:43.040> and<05:50:43.360> I'll<05:50:43.520> see<05:50:43.760> you<05:50:44.040> in

so much for watching and I'll see you in

so much for watching and I'll see you in
the<05:50:44.320> next<05:50:44.638> one<05:50:45.320> have<05:50:45.478> a<05:50:45.680> wonderful<05:50:46.280> day