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