Okay so we're going to quickly set up our project using chakra 1
to be able to quickly design and layout our application okay 2
you'll see that in this application we're going to keep 3
the styling simple we're not going to really focus on the 4
responsive and all of that because I want you really to 5
focus on what is different with Typescript okay so all the 6
typings all of that okay because the styling etcetera is 7
pretty much the same so we're going to use this library earn 8
a bit of time while styling so we're going to set up chakra in 9
the project so you can go on get started and we're going to 10
go on vit and here they provide the comment that you have to 11
run to install chakra so you can copy that in a new terminal 12
so that's what I've done and I'm going to add a space after 13
framer motion and I'm going to add two other libraries I'm 14
going to add chakra dash UI slash icons to be able to have 15
some icons in the application and I'm also going to add Axios 16
to perform HTP request easily in the application. You can run all 17
of that and in the meantime we're going to finish the 18
setup. So they say that we have to use the chakra provider at 19
the root of the project so that's what we are going to do 20
super quickly so we're going to do that in main and as you can 21
see you're going to already notice that you have some 22
typings already here as you can see here you can see that this 23
document.getElementById root has been cast into an HTML 24
element so there is indeed typescript in this project and it's 25
working that's the proof that it's working for now we're not 26
going to really dive in what's going on here we'll see that 27
later so we're going to import the chakra provider and we're 28
going to call it around our app and finally so we could add a 29
theme but we don't need one we're going to use the default 30
theme that is provided by default in chakra and they say 31
that we have to add this little piece of config into our vite config so I'm 32
going to go in my config in server and I'm going to add 33
this watch. Okay? This probably help with reloading correctly 34
once there is something that changes in the chakra config 35
or something like this. And yeah I think we are good okay 36
so we can include all of that and we're just going to make 37
sure that everything is working by going in app here and 38
replacing this by for example a chakra component for example 39
heading and now technically if I save okay everything's good 40
and here yes we have a real title so everything is working 41
and chakra is set up in the project so cool okay so see you 42
in the next to continue.