Hello? Hmm. Because just playing. So I Okay, thank you. That's it. Okay. At the screen time. Sorry, 10. Uh usually wait a couple minutes. Yeah. All right, okay. So you guys can go check and make up the page. I sketch two links you can uh use those linked to to join the slack channel that we have for react dojo. And also code cast a link. Actually show you guys don't need code. You might you need code cats. Think because you want to see what I'm writing if you're falling behind. So you can use that link to see and get the court from my computer. Yeah. So, if you go to the meet up dot com and then search react dojo, you get this page and then in the event you join this one, if you have some questions you can ask during time there. And also any time if you have questions you can always ask me. And we have this code casting, which is we're gonna use today to share code with you guys. Hmm. So, let's see. Go to general channel. Okay. So this is gonna be there. Close everything here. Okay. Right, okay. Mhm. What's wrong? Yeah. Yes. All right. Question I Mhm. Mhm. Mhm. You can go uh uh okay. Oh, okay. For those came recently. Um just now please go to the meet up even page and there's two link. One of them is a code cast link, which is we're gonna use it to share the code today. So you can, anytime I change the codes, you have access to everything I do. So you can get the code if you fall behind but the team of the meat top is hands on so I'm writing code and I explain you on the fly so it means you can follow me and then if you have any question you can ask me there, I'll try to answer it. And if not you just can get the quote from that court cast link I provide to you and and then we have a slack channel for the reactor. So um you can join that if you like. So we we will share the talk like some tutorial, some material or if you have any question there you can always pick me there. Uh Usually I answer it quick there. Um and that's pretty much and we're gonna wait a little bit for five minutes or 67 minutes to other like come and usually we have this threshold 10 minutes to before we start. And yeah, that's pretty much guys join and and meanwhile if you guys want, if anyone wants to introduce himself, feel free to do it, you can't solve on anyone. Hence who is a student in C. I C C. Oh, almost everyone. Nice who's not. So let's so probably you guys know each other. Let's start with the non students go ahead. Yeah. What do you do if I'm a soft engineer but now I'm working with some of that science broad project. Nice to meet you. Nice to meet you too Lucas. Right. So hello everyone. I'm, I'm new in Vancouver. So, and I work for uh technology company, software developer, technical support. And I came to meet people and learn Hi, welcome to And who are not in the, in the C. I C. C. Who else? So Oh, okay. Welcome back to C I C C. So let's start from students. Right, go ahead. Mhm. Nice. Nice. Nice Rodrigo. Right, Okay. My name is and I'm from, so work in that this year. Okay. Sounds good. You're in the right place and in the right time you can you want to stop? Okay. Okay. Nice. 22 so, you know, react stuff. Everything very well ready to find a job good. You want to go ahead? Okay. I'll try to keep it simple as much can. Hi, I'm, I'm a student here. I'm here to study what is. Okay. Okay. We're excited to have you in the community too. Nice. You guys? Yeah girl, I can't hear just too hard. Nice. Nice. You're a good place if you weren't after finished the meter, like your, your classes and instead of following the process of learning and then joining different meters, you're on the right path. Always. And uh, you already good. Okay. And next person. Okay. Okay. I'm taking a course, Same as my classmate. Okay, how about you. Okay. Okay. Okay. Nice to meet you too. Do you wanna go next. Hi. I'm and I have very excited also. And I am really curious about show. Hi. Nice. Nice to meet you too. And we're glad to have you here. And yeah, I think he introduced himself. Right? Yeah. Hello? I'm student is a student and I'm thinking I mean of course, but I'm not so interested in telling nice. Um Yeah, I was a student here but now I've been here. Don't worry, you are new. So everything by the time gonna make sense for you. So usually like when you're new developers, like maybe some things like when you learn new things are like coding or programming is a bit like complicated but like a year later or months later you see like oh this is like so makes sense now everything's come to your mind out of the box. You don't need to worry about anything. Just just never say that you're stuck because it's like that's a phase like everyone was the same. Right? Okay. Next one question we got. Next one. Uh So my while just those people like you join uh we have this link in the mid top channel like a side page. So please grab it and then open it in browser. So that shows the when I want coding and you can't access to the my projects and uh and then if you fall behind you can just copy and paste the code so you don't need to uh Do you worry about that? So that's a good and then we have a slack channel of the reactor, you can join if you like. And you can always drop the question later on day after or any time like next year or year after. Okay, next person. Uh uh then I moved to here. Nice, nice. Nice to meet you too. And God, you Right, okay. No more. We have more. But o uh started working as a developer around two years and there was this one project I worked on, which was based in next year, so a little bit of experience working on it, but I didn't really understand, like the details about next year. Just worked on it on a high level as a developer. Okay, So, and yeah, I'm currently working on a project which uses strapping. It's been a pain point for us because it's been all used because it's A CMS and sometimes it's possible to use it. You know, sometimes you need to come back so, you know, use the custom back end of it. Like you can just make a different like custom for yourself. Like we describe it, you have used it. Nice, nice, cool. You're in a good place then I don't know what we're gonna go down at Lance Low, but we're gonna introduce and then we talk about Okay, that's that's good. That's good for a couple of good here, who was before? Uh something like sometimes if you have questions each other. Right, So um not the last person. Okay. Um my name is Greg, I'm a student at a school down the road called train station. Um I just found this uh this meet up this morning and uh it's gonna rush rush over here and uh yeah, most of this stuff, but okay, we'll come. Probably gonna have another meeting like soon on the to like have a meet up there too. But I mean, I'm not 100%. Yeah, we'll come. So let's get started. But you send a message. You're gonna get come later. Okay. Yeah, no ways. So we got everyone here. Welcome, welcome everyone. Um just let me bring up the, I'm not, I'm not good at talk person. So I don't go detail about a lot of things. How can I play this like, okay, it was somewhere here. Yeah. So about react jojo um, react started at 2017 with the gold, the with the goal of helping students with or new grads and anyone wants to get involved in attack industry in Vancouver. Uh So you started between me and my wife and one of my friends at the beginning and um, we run more than 35 m for the reactor ho and around like 5 to 10 m up and and other groups. Um and that's pretty much react dojo. We have a slack channel available and usually we answer very quick. We're not too much active because most of us um busy but anytime anyone asked question, I always answer without any like delay on it, but we don't share too much because of busy. So this is me. I'm a front end engineer at uh build direct and love learning LA which don't go too much so you can reach me with my impersonal email there and then join the slack and then give me that anytime you want it. And that's me. Okay. Um so I don't have time, I didn't have time to much to prep representation and make it nice. Sorry for that. I hope everyone see it. I can see it. Right, okay. So today we're gonna go a little bit different from what you learned from before. So one of the topics recently come up. It's about headless CMS. What's a headless? Yes. Um so what what was the old CMS? Uh, architecture and what is the new? So we're talking about the old one, old one was you had back in front and and then all of them together as one CMS and that provide everything for you. So that was all started uh CMS. But recently the people comes up, okay, let's separate the back end from the front end. And then uh and then let's CMS just provide api and data to the different platforms to different front and whatever it's gonna be or who we need the data. You just provided data. So at that time has come out and the idea of it, it's not new. So we had it in a different uh different way, like for example you had uh all this kind of back end which is like or or whatever technology they had and so has come from that. So he said that okay we want to come manage the content but we want to provide it with the way uh back and forth, you don't want to detach anymore, any content to to the CMS. So they have the CMS. So there's a lot of good things about the Headless CMS so you can go search and I believe I have the link there. So like that is striking share very good article about it. So you can go with, I'm gonna share this presentation later. And so there's a lot of good things come in so you can go and buy yourself so you are in the hands on programming decisions so we don't go to too much detail and I'm not as I said I'm not with so and then we're gonna go see what we learned today. So um so I I personally I use many different Headless CMS is for work and uh question all this stuff, but one of the favorite my favorite Headless CMS called strappy strappy is uh at the CMS give you um um allow you to make a P. R. Really fast. We have any knowledge to having knowledge about the back like back in developing developing your back in and then log authentication, set our database and everything so you just came up and I quote running in your journal and get back in and then you just can't log in and then have all the features available to you. So that's what people have learned about the first part of the and then we're gonna go about the next year. So we're talking okay and then some feature like next year's provide to you and then why you have to use it. And then we're gonna start setting setting up the next year I think that our computers and then we're gonna learn how to sew tailwind. CSS. CSS is a CSS framework which allow you to write the um let's give you a lot of utility too run make a beautiful website without like any CSS and you just use the utility classes to make a nice looking website. We don't go to detail on that one too because it's really big topic. So but we're gonna then uh and then uh and write some code with it and let me show you how to use the documentation, how to go through it and how to use it. So the good thing is about today is we because I'm going to show you um we're gonna go hands on. So it means I'm going to go through the all the documentation one by one and I'll show you how to find them and I'm gonna grab a quote from there and then I'll show you like you if you want to do it for yourself, how to do it and how decision because part of the learning part of the development is reading the documentation and it's really important as developers to know how to do it. How how uh if you could do it faster and you get used to more documentation, you you can't learn more later on and then do your job, your daily tasks faster because as you always have, you will have 100 tabs open from flow and other source of documentation or anything you work on. So um that's about that. How do you? S also in in today we uh today we're gonna talk about and how to use them in your application and what are they and then how they can help you with your um for black. So let's go I think I believe I'm done with Oh yeah. Okay, um presentation is done. So let's go with the code. So about the podcast, podcast is a tools allow me to share my the project that I'm working on and then also anyone in like outside of the this meet up, they can just join use this link and then seeing my screen. So if you open it in your browser. So let me show you how this works. So I grabbed this code I shared and then I'm facing it here. I believe I need to disable my microphone. Okay so right now I don't have anything in the directory so they don't see anything but you will see all the changes in the left side and then any time I walk on any thing so I don't play this one yet. This shows my and that's pretty much so I encourage you open this link and open it in your browser volume working. So if sometimes code something you you didn't get it so you can just copy it from there anytime I say you will see that safe version in your pc. So let's go about the strapping. So strapping is pretty straightforward. So as you say design api fast managed content. Is it? What does it mean? So um so um when you install instance of this strategy to your computer so for creating a cloud version of model or any um any data or any content you wanted. So you don't need to go code for it and it will automatically generate for you schema uh round authentication, everything you need for managing that content. So let's just start to show you in life so you can see get more sense of it. So very simple. I just copy that line of code from there and then I'll go to my terminal, let me make it bigger so you can see it. So I have this meet up directed in my uh my computer. So I'm just gonna copy that uh code a copy and then so you say here nps np it is a kind of newest version of Npm. I don't globally solid version of it. So which is allow you to install node module or any cli without installing in the little local machine. So um so I'm gonna use that N. P. X. Create strappy app and it means use the creative strappy app cli and version at latest to get the latest and then at the end of it we're gonna add our name of the project we want to name. So it's just really simple, we call it back end. So it asked because a couple of questions if you want to use the um custom manual sitting for it for example, it's like setting up a different database or they have some like Prigel pre configured. Uh so you want to use those but but we're just gonna go quick and start recommended. So I'm installing it so it's going to install so it will install the dependency and we'll run the project in my pc. So one more thing that you need in order to run any no javascript projects you need to have a no no Js and machine. I believe everyone knows that. So I don't go that that way. Okay so it's probably in china just let it slow. Mhm. Yeah. Oops. Mhm. Okay fine. Okay I believe installation on the stance so you have to tina side now. 21 students. Okay so while this is stalling which is done. Okay so it's done. So this is like when you install it claimed one um Use a screw light in your computer as a data list. So if you want to configure anything else like a hostess or other databases supported by the hostess. So by strategy you need to go in beginning. I highly suggest you if you want to go with any other in the beginning of the project do not develop anything and then change your later because that's gonna be let me give you a headache to convert a lot of things. And so that's a that's I suggest you so if you want to change it so do it. If not just keep it as it is for for this tutorial we don't want to go to detail about that. So there's a very good documentation it's very clear very way easy to understand documentation they have. We will show you later. So here there's a question comes so this is the admin. So this user the first user units sold is the admin to the strategy. So you can long limited and then has all the privilege the admin can have and almost do everything in the platform in the back so I'm just in my name and filling out this form so we test that. Um So I'm putting a password here tell us about yourself. I'm not gonna I don't want to upset. Okay so we got a very nice looking um Dark mood is happy. Um Probably yours is gonna be white because I enabled it the dark moods so it's gonna be dark mood. Uh I'll show you how to disable it later. Let me make it bigger. So when you got this, so it's as you see in the address bar is accessible with address local host colony. Um 1337 slash admin. So this is the U. R. L. You can access to the dashboard always and give you the marketplace. So the marketplace is the place you can develop a plugging or anything you want and then share it with the community. So if you get that level advance so you can do it. So you can always find some providers and plug in there to to grab the code in solid in your computer and do it. So for now we because I want to show you documentation and how the strap to generate the documentation for you. So I'm gonna grab the documentation for for this. Uh So where's the documentation? So I kept. So it's very easy so you just cooking, install the court and then go to your church channel. And because I am closing my channel and then I go to the um let me see. So I named the project the back end. So generate the back and directly for me. So I go inside and then yawn at um Sorry I just had the code so I just copy that paste copy paste that code to install the package I wanted. So this plug in is generating documentation for the all the API. And then I'll show you how to use it to get the access and a reference for your calling API when you need it. So I'm gonna start it again. I'm gonna say you are developed to run a strappy in your computer again. So it's running the building command too because I think the um admin ui and then run it for you. So it shows you hear how you can access to it, how you can access to the server and how you can access to the admin. So because I was logging and then I don't need to do anything but now install the plugging. I have a documentation here wow. Okay so like I got documentation. So now I can click on the open documentation and in an open documentation, I can see a couple of aPI here. So what this API do. So usually because when you install the strategies that become with authentication so it gives you some privileged api for logging for registering a new user forget password and everything you need to to do that. So rest password, change password in a confirmation and then so on. So now what if I want to add a new content for example you want to learn how to write a blog for how to create a personal blog. So now we want to add some new content new model to the our strappy for for doing that, it's really easy. So we go to the stripe dashboard and then we go to content type builder. So in a content type building we have different many uh type of content we can create. So I don't go to the single type or components but I can explain you to topics. So for example collection side is imagine you have a database and then in a database you have a table or collection in like a non school. So that name is for example is vlog and then in the blog and then you have a blog and blog has many poles and or content or article. So each on content article going to be one role for you or 11 content. But the blog by itself is a table or collection. So how we can create that collection or table Very easy. So you just need to click on clear new collection type and then name it. So for example in the in our case we call it call it blog. So and when you talk about blog it's automatically generating a plural version of it and single a version of it. And then we give you some advanced stuff so we don't go too much detail on it. And so we just for now we just create our blog uh collection and then it gives you allow you to add a different type of feel to your table. For example a blog post an article what what kind of type type of data we need to collect for article. Can can someone name it title? Right Yeah title. So let's go a title. So I put a title here and so it's like okay this is not gonna be a string right because it's not very crazy thing you're just gonna be a string. And then we have a long test and short text. So for a title which is like kind of be like 100 characters or something like that. 100 50. So we just go with a short text and then we can kinda add another film. So what else can be anyone description? Yeah so so for description I add the, okay so this one is I added text rich text field which is allowed me to add a mark down to it. So for that one I'm just gonna get content this one. Um Okay so add another one and then and usually if you really like go far you want to add a short description for uh about your article. So I'm gonna get text because I want to show you how this works and I get the long test because short description gonna be like the longer text and I'm gonna say um short description. So for short description usually you can use it for S. C. O. And then added for description tag, meta tag. And also for if you have like downloading list of the content for the least paging like the list page or whatever case you have. And then you want to just get up some part of the text. So so this short description is very useful if you want to later have your own blog. So it's very good to know. Uh And then you're gonna let's go add some other type. For example I want to add the media. Media is gonna be so you media for type of adding any kind of media type like an image, video pdf. I'm not sure video actually but those kind of stuff right? So you can have their here I'm gonna just call it image and then you can select multiple or single. So it means when you select multiple it's allowed you to add multiple image for single film. So for example you have when you're fetching it so you get multiple image but if you get single media it's always return you one image. And then you can only add one image to the film to the day as a data. So let's go and and another field. Um so there's a lot of field. So for example I have you I. D. Your idea is kind of unique identifying. So it means that it should be unique always. So if you add like a multiple content multiple content in your in your all of them should be. This bill should be you cannot have same same um Whatever your name is, same multiple U. I. D. In the same table. So what I call the I'm gonna call it like S. U. R. L. So you are elegant or maybe a slug or whatever you wanna name it. So let's tell you are to make it easier so and then you can attach to it. So for example I want to attach title or short description short description gonna be longer but I want to use the title to generate my uh my U. R. L. Okay so let's create it and finish. And then the only thing like so this is like our type of data we need. So I create all the collection and everything I needed. So I'm gonna save it. So what did happen in the background. So it's the content type is sending workers to like uh run the code and then generate the table collection and all the fields and then generate A. P. I. And then generate everything for me. And then now it's allowing me to do whatever I want. So as you see here we have one more collection called blog. We've actually added recently. So now how can add the data to this blog content blog table. So fortunate like the um this CMS allow me to do it very easy, very easy to understand you are here. So I click on content manager and then I click on a blog or user you can add a new user to to your to your platform and you have a blog and then now I'm gonna add one new entry so a new injury. So you see every field we put on there so we're gonna get it here titled content and short description image boro and everything there. So you're gonna see it here so you can uh some sometimes you feel like you want to have a diff so it's allowed you to reorganize uh stuff for yourself. For example I add the title and your is not very important so because it's auto generated but I'm gonna have a short description at the top and then we're gonna have your l maybe image and then you are well some something like that and then save it and I confirm so it will save this configuration for me. So now if I create so now I see like this reorganized the way I want it. Um guys if you have questions feel free to ask. I felt sometimes I go fast yeah is there anything you don't understand what you want me to explain. It. It I control seat out of my, I don't know what if there's a back in so you have to go to the and then you're in the city on the name of the active space, name of. And then. Okay so let's add one or two articles to our blog and then we're gonna show you how to this api works and how we can access to this data. So um let's say um let's go to the median. Um Who have a medium account? Who hasn't made your account. Just two guys go medium dot com. Open your account always for read, set up to set up your personal um sitting and then to get the newsletter. That's very important. This is your career you want to follow that you want to read every day, otherwise you're gonna fall behind that's happened for many hours. And then you can just follow with you there. So so let's grab one article randomly article from. Um Here here is a this is a very good article, you have to read it later. Uh So I'm gonna add this. Uh Yeah okay so I'm gonna grab the content here and then paste it here and then I have a short description about this content so I'm gonna put it in a short description and I have a full content so I'm just copying it. I don't care about the too much detail of it right now but you can have the later. So one more thing like you need to know the default um default plugging for content here is marked down, it's not like tiny M. C. Or a CK editor. So it's a markdown, whatever you have generated here is gonna be as a markdown who is familiar with martin? Okay we have a couple. Okay nice. So um who can explain martin? Okay let me set about it because I don't remember to marduk. Markdown. Markdown is kind of like syntax for creating content the way for example you have to hashtag and that's when the browser with it. So oh this has to hashtag before it means H two. So they have some convention and syntax you can follow and then learn about the market so I don't remember exactly um detail and stuff as I said, I'm not that kind of person but but you can go ahead and then read the martin guide and there's a syntax cheat sheet and everything is there so you can learn about it. So for example as I said so you want to make HTM O H one tag, so you just needed more time energy and you just need one hashtag space. And then and then when browser reading it with the use the use of tools so you can convert that to the H one tag or H T H T H. One element in the browser. So so let's go that's uh explained and now so unique identifier as I said, See you have a content here and it's automatically generate that for the U. R. L. This is very important because we're gonna use this as um as you are for accident to each block course in our front end let's add one image to it. So I'm just gonna add the browse here. The tools. Very simple. I don't have any much that's really okay. So let's see. Oh yeah that's true. Oh hey I don't have it. It doesn't have article that's weird. Let me get one image from here whatever save image and then call it whatever and then here I'm gonna copy it. Okay so I'm uploading it and I'm selecting it and finish wow okay I got safe documents safe and then I have published. So when I'm publishing it's gonna be available to the A. P. I. To anyone quality to my field but in order to get to make this public inaccessible. Also s traffic has this mechanism. It's um you call it um authentication token which in order is by default any content you create. You need to have that token which is a sequel for you and it's generated when you're creating um you go to that section and generate that but it's gonna be just created for you and no one has access so no one can have access to your data so which is like very good feature and if you want to have same future for and if you want to have a future for out of the box or develop it by yourself you're gonna have you're gonna go have a lot of pain but stopping allows you to have it out of the box so let's see let's see how to use that features. So I'm gonna go to the plug in. Sorry let me see doesn't show me that section so I need to go to sitting so the setting has a different configuration so you can use for you can use them so later on so we will go over some of them. One of them is api token so that token I was talking is here so you can generate a token for example you create a token and then say anyone has this book and have access to this certain certain data for example can access to the blog post but they cannot delete it or they can access to the all the everything they can do everything on the on a on a strap through the api so let's generate one token here and I'm calling it um Ellie whatever and then just description to do not remember so you can you have multiple and then um you can say okay I want to have a read only so if anyone has this token can only read the data or have a full access. So I'm gonna just select read only maybe yeah read only because today we don't need and then you can select unlimited or whatever and uh so I say that so that unlimited was for the time. So it means um let's copy this before it disappeared. Okay So um all limited time is for security questions. So you can generate the api token and then say okay 30 minutes later, 30 minutes and 30 days later this token is gonna expire and they're not going to have access to my api anymore. So you have anyone has it you have to generate or refresh the token or whatever they need to do. So that's a security purpose. So we're not going to do that part and then we're gonna go over the rules. So we have two different rules. Final rules. So you can have multiple like set up multiple rules for music person who access to the dashboard. So you can say okay we have an editor. Editor wants only access to the content. Writing content in a blog section. Not access to the city, not access to anywhere else. So that's that's the way you can do it and then you have access to the u. Admin users and then we have the user permission plug in which is here here you can have for normal users who using your Api or who is using your platform. So here we have a two different by default authentication public. Let's go to the public. And then you have here um kind of permissions so you can set up okay? Anyone in the public which is not authenticated. Can access to um to my to find operation and find one operation, find operation means according to the database attorney to the body and then get all the content for the blog or in this case is a blog and then find one is according to the specific api to get just one article so I'm gonna show you what it is so I'm gonna save it now so saved and then now now is the time to go documentation again. So do you remember now if you don't have the blog because I didn't refresh the page. So now if I refresh I got blocked so strappy create a crowd operation for me so what it is so I can go now according to the this endpoint and then get the data of the blog. Whatever we have for someone article we have 10 articles, we have 100 article we have it come with a lot of good um Cody filter pagination and stuff so you can you can use them in the land and in the documentation but let's try it out see how it works. So I'm gonna click on a tryout and then execute command. So you see I call I could request is this one let me see make it bigger. So because you are l is this one so I can see local horse, quantity seven api bloods. And that allows me to get articles whatever number of articles we have but by the four there's a pagination which is why if you're familiar with allowing you to have a second amount of data in one, all by default, I believe it's a 15 article. So if you have Tony articles you have to call it two times or you can just change the default value to 20 or you should not recommend it. And so that gives you this article and then it gives you like a pagination information. So with this pagination information you can have your own logic and create your imagination for your blood, which is we don't go today over that part. So um what do we got here? Short description? So we got how to do it. So this is pretty much about the strategy and how to use the strappy. Uh Is there any questions? No. Since that means I'm explaining very well. Okay so what do you got one more thing I want to explain to you that content type builder. So we we went over connection collection type, we have a single type. It means like sometimes you want to have you don't want to have a collection of articles but you want to have a page for example about page. Right? So about the state doesn't have a multiple content. It's just one content. You don't want to go over and make a collection. So you may use a single type collection and then sometimes you want to use you want to make a multiple components which use it for your your pages for your content. So in that case you always use the uh components. So it means I create one S C. O section, S C. O. Component. And then in when I'm adding the content time I can't decide. Okay I want this uh S. C. O. Section to this post for now. So that case you have this more flexibility to create a dynamic type of content and allow you allow the designer or whatever you work with to have a more option to customize the page, customize the data and doing stuff. And then it allows you to add like some very nice um Dragon Drop looking. I wish I had that open somewhere so I could show you in my other projects but but that should be fine. And then you have all the media access here and let's go on the next years. Um Next yes. Uh That's a really good who's familiar with the next yes. Who knows next year. What does the next years go ahead. Oh okay. So next year is the of the reactor so it's like uh runtime right then reactors is actually client side rendering. Um And also with next year as we believe we can write 5 10 to some ap eyes for the connection with the database. We have complete full stack application. Yes, that's correct. So it's really well explained. So I can't say we can't say is a full stack framework to top of the next year is to allow to uh, to allow you to write the type or making any type of project for you and it gives you a lot of tools out of the box. Like as you mentioned, S S R S S C I S R and we should like go detail on it. And a lot of good tools, like enhanced optimized version of like um, image for example or the projects or C B N and a lot of things confident. So we'll go one by one, some of them we need today. So as you know, like a lot of companies using it and um, I used all my projects, I don't go and react anymore things I forgot to react how to credit, react project anymore. I don't know how to do it, but the next year is, is awesome. It's allowed you to do not. Do not. Um, so if you create a react project, you have to learn and react wrong. So you having a lot of work or if you want to have an SSR so you need to create a custom, necessary things for it and then configure a lot of things but vessel. So, so next year's handle everything for you. So you don't need to, you need to think about it. So I'm in the wrong documentation, um, wrong page. So I go to the next year's Okay to view. We have a conference coming um, get to participate in that one. Okay. So, and this is like everything the next year's provide guys, you can go learn there. Okay, so let's go to the documentation. So in the documentation very easy. So it's really have a good documentation. Also have a tutorial. So you can always go follow tutorial to create and then teach you how to use that that and then give you a score. So now I don't go to detail about those stuff. So how can I create next year's app? So as we said before, we have N. P. X. So let's go use N. P. X. Or if you want to use your own, you can use your own crate and yarn crate is the same thing as N. P. X. And let's see. Okay, so I'm gonna come and open another channel and then I'm gonna go out after my back end and extract the dark territory and now I have a one back and back and then I'm creating another one called, Sorry, I'm just want to get uh cleared copy this one. Okay. Run it. So Nps create next app latest and the name of the project. You wanna name it? So what do you want to name it? We just call it Franken and is doing all the magic for us. It's insulting all with divinity as you see it's coming knows what is, anyone can explain about this thing and what, Okay anyone what else you can you can you develop you can you have to some you need some rules for the rules and mentor gives some uh Okay, that was very close. So yeah. Yes, let's allow you to write the code in the same syntax uh and then allow you to keep your code clean. So technically it's force you if you set out very well, so it forced you to write um some follow some standard on the coding, you cannot just write whatever you like because no one can understand it later on in your production. And everyone see that code gonna like some say some sort of behind you, so you don't want to do that. So you need to follow es, lint and lint er or preacher, whatever the tools you're gonna, your company want to use it. So let's go to the main topic now. So we have installed our next years. So how can you run it? So I'm gonna just LS And let's see, LS is a command to see whatever you have in a directory with, if you have met book. So I'm gonna go to the front end and now I have uh some directory here. Um and these are generated by by cli kurt next up. So let's open the code editor who is using, Is there anyone not using it? And using other tools? Anyone using good job. Okay, let's go what we have here as uh fronted. So I'm gonna display, explain a little bit about the directories and what are they? So we have a one next dot config file. So next year's come, you can configure it the way you want it, but it's not like very very detail but it does give you some features you can disable, enable or customize it like a backpack configuration, like image, uh, optimization or enabling disabling some features after next year's. So you can go detail on that. We don't go there. So that's the next year's conflict. We have some edit on this one because we want to insult some um congregation for adding some confirmation for images. So that's later. So package that Jason is all the list of the packages we have and some scripts we have to run the next year's and other commands we needed and uh we have because we are using Yarn, we have yarn the lock. If you have, if you're using Npm, you're gonna have npm um package is locked dot Jason, yep. Thank you. We have a styles directory. So which is like include all other styles by default. So you mean you can see some CSS fall like the global CSS and then home module CSS and uh we have a public directory. Public directory is a dietary in the build time. So anything you have, there is going to be public and then gonna copy to your project in a build, production version and then we have a pages. Directory. Pages, directory. So the pages started to have by default we have after Js dis file after Gs is technically doing a lot of things for us. So you can have global confirmation in this world like uh important global CSS and some some confirmation you want to run in a new entire like you some some providers like application providers like stripe provided whatever you have, you can add it here and that's automatically run on all your pages in the projects. For example your project is 10 page 10 different pages. So all of this code will run for all of them automatically so you don't need to add them manually to each page and then we have index dot Js index dot Js is gonna be like um anything inside that pages directory except after G. S and like document and for foreign like which is like a custom pages, anything in that actually gonna be having your projects index dot Js, Js gonna be your memory? Local host 3000 or your domain name for now. How to run these projects Very simple. I'm gonna go ahead and run deaf in the same direction, you have to be in the same directory, you are a deaf and the local host will run on my computer um and now I can access to um so I don't know this one running my computer and so now we have this local horse 3000 regard first our next projects here so we're gonna see how this works. So very simple. Next year's come with the hot reload refresher. So it means anything I change in the code and then save it and for example I do this. Right, so it, it's one. Hello friend. Right. Oops. Oh, you see, immediately gonna change here, a lot of optimization, a lot of things going there. They did a very good job on the optimizing this um and newer version is very fast um compared to the other um things like react project I think, but but it's very good so you can go and use it. And so this is the project removing extra stuff from here and we're gonna have this start CSS we don't need it later. Don't need it to be honest. Um so this is the project and so let's create a simple route to see how this routing works. Okay, so 10 years, so I'm creating one route called whatever you name it, we don't need it, but about about J. S or in your case it's gonna be like portfolio and then you can share your portfolios and whatever you want it. And then I have uh here export Biffle ah and I'm just collecting function. You can, you can use an arrow function or fat function. Whatever you wanna do, it doesn't matter. And then I'm calling it a portfolio, then I'm gonna just gonna return and at this we called portfolios and save it. So I, so in this page, do not forget to export it as a default. And if you do it so that next year to year and if you want to do like a other syntax to easier like newer syntax or the way you want it, probably all of, you know, so you can do this one too, you can create a constant and then call it portfolio and then you assign an error function or both of them the same whatever you prefer or syntax you follow in your company or anywhere you work or anything you like portfolios. Okay, so both of them works and when you do this way so you don't forget to export as a default. Um Okay, so now how can I access to? So what do we name the name, file is portfolio, whatever name here it means you can access with that name. It's created, generate the U R. L. For us, routes for us. So I'm gonna call portfolio and then I have access to that one. So in your react in your reactivation you need to create, you need to install react out of dog react router, dom or any other navigation packages that you use and then you install go to insult routing and then do a lot of nested or whatever you have there and then then to how that works. But next year's provide you out of the box which is very cool. So this is how we create a page now. How to create um nested like for example I have a blog, I have a local for example my website uh and blog and then there's a list of the contents there and then when I want to go to one of them which is gonna be a name, space blog slash you are, how can do that? So for doing that, it's very simple, it's not complicated. So you created dietary and Pedro's dietary. So we're calling it block and then that block is the name of space for us and now I can have a finder and I call it um article. So let me see. So this one because jesus so it's a little bit different because I want to access to this article as a parameter and I. D. So the syntax that this is allowing is open to bracket and then put the name slot or E. Or value. You want to have access later inside of it so you can have multiple or you can have one and then if you want to have a multiple and then return as array. So you can just add three dots and if you don't want to have you just can't access okay article and then that's gonna be just like that and then same thing I'm gonna make my um article component page and I'm gonna return here and this and then high. Okay so so because I don't have any path or anything So this is gonna be access to be available for any route of the article for me. So let me export this. Um, so the order was blocked and then one see anything I put in after the blog idea is gonna be the same because I don't have any validation to and see okay, this pages exist or not so I can see this one. See you have all these oil available for. It's not nice. It's very nice. Right so let's do something now. Now we have this um, in the next years allowed they have something to hook called co has a router. The router has a mitigator including a data of each page your and some some functionality to allow you to navigate to different pages. For example, you want to go to from page one to page. You need to use around it and then main function framework in order to use the, all the, all the features of the project. Otherwise you're gonna be having a multiple like a normal page anytime you click on the link, the page refresh and stuff but if you want to do that so you have to use next year as a daughter. So let's see what the rapper has one account, sorry, input um right so okay, I'm gonna import um news router from next um drought there fight on stage. Um okay so now here is a const router, is it called to use router? Pretty simple. It's a hook used who knows what the hook is react books. Books any explain about books. Okay I don't know too don't worry so um I don't want to go to detail about the books. Books um it's allow you to control the state and do some magic in their functional components. That's only just you you need to know. So before a long time ago in the react 16 we have the class component if you have still have it but you can use it always but from 2016.8 the interviews the functional component. And then they had a lot of folks that use the which is like to do some magic with or change the state, change data, fetch data in the functional component without or having access to the life cycle of which like previously they have it in and now you can have it in a functional component. So if two you want to learn more about it, I really suggest you to go to the react documentation and learn it from there. And if you you don't need if you don't have the link so you can pick me, I will send it to you. But let's I want just want to show you something about the router then router and then I just logged this router in my browser. So if I refresh the page and then go to the console and then do here. So I got object. So this object is represent of my router which just has so many things there um for example before the state components events and name which is what we need and then push. Cory and many other things it's supposed to happen. I'm here. Okay that's that's how they got. So now so let's do um some installation we need for projects and do a little CSS stuff and create our block. So it's like all the documentation you need. Okay. Really. Just one more thing I want to explain to here. So before we go to the CSS and so we have been previously in the past usually member users request page. So he said oh I'll open the who presented to the service and just process your records dot com and then generate the page and send it to generate and send it to the browser and can get all the articles and other content and content. So that was the way we had it before. But now we got the different things you got I. S. S. C. I have a client side. So when the came they said no you don't need to do that, let's still generate a page in the browser. So it means so you I request to the server and I want to open the block page and they open I want to run some jobs to to and then generally like what react. And so that way it came to the single page application and then the other stuff so blah blah blah. And then regarding that they said, okay this is not react family. Now what you have to do, let's come to some solution. S. S. S. S. S. R. A bit more. So S. S. Our service, our lending means it's kind of like a general same idea of the you send a request to the server and the server generates a bit and then send the content to the browser. And and then after that it's still some jobs data and there's no problem. But but that was a problem with uh expensive and it's a bit slower. So this comes from, okay. So what is uh there is um generated when you like to call that everything is done. So you want to build. Okay. So oh I want to know this website and high production made it. So what it is is coding and getting all the time and then for example all the content from and generate all the page. And then save it as a static pages in the server. So when you call the serial uh this post, for example, right? And then go to the directory and create content. The content and content. So this process because there's no data there is no any calculation of computing so it's gonna be very fast. So it's very uh or user friendly and and so that called S. S. G. And there's a lot of tools for it. So it's not just next just provided like a gas penises and other tools uh blah blah blah framework. And then um there's an new welcome from called in demand. In demand is a page if if the pages exist, it's not from the uh from the server that's that graduated from the server and then CBN and send it to the client. If it's not, it's generating for you and with different techniques which uh its generating those content. And I said it and then after generation load that content for other users. So it means you're generating static pages on demand. Very simple I. S. R. In demand, static rendering, something like that. Let me see actually, I don't forget what is I saw I stand for but I hope I was right. Yeah, incremental static regeneration or. Yeah, that's a rendering. Sorry for that. But that's the thing. So it's really simple. They explained very well how to do it and how to do not do it and what you can do what you cannot do. So let's go with our block page. And then so here in the home page we want to insult um tailwind. So let's explain what the tailwind is and then show you how great it is. So tell them it came out in like 24,019. Somewhere around that immediate before I'm not exactly remember, but is give you a utility to or classes to do some magic without writing CSS for example you want to have a bottom use class or if you want to change the color, just add your quote to the your color quote to the our class's name and then use a change of color or you have a lot of customization for example. Um You know here there's a lot of example they have so you can go you see it and then documentation. So documentation, installation is really easy if you use it with the next year. I suggest you to search um next year's telling ex es Yeah. So it gives you installation so very simple. I'm just following that. So it's a like create your next project. So we did it already. We don't need to do it. And then they said you need to install some of these packages and because these are running in the build time so we're gonna add it to the deaf dependency. This dash d it means added to the debt dependency and do not ship it with the production build version, which is very important. If you work on a big project, if you work for your personal project, it doesn't matter. But if you want to show it to as a reference and then you share your get up quote to someone. I really suggest you to follow the pattern and then to show how your precise about things. Right? So for now we're just gonna add same quote. So I don't I don't do anything because we are using the yarn. Uh Instead of install we're gonna use uh add so I'm just cooking that code and then I'm creating another channel. You're an AD and then coat so this installing dependencies in my project. So if I go now to the package that so I see some new so you see the dependency dependency and dependency that dash D is adding to under this one. So now we have post CSS and tailwind CSS here with these two package being installed uh with Auto Professor. So so now our next command is basic run tailwind in it. Um Well whatever T. Dash p. So what am I doing the same thing? I'm gonna n P x tailwind CSS in it. So that generates um that generated adding detail in conflict Js in and post CSS dot conflict Js inside my root directory. So if now if I go to um to my V. S. Court and the root practically I see two new fale com and then one of them is stable CSS and wanted with conflict but adding that to the next years, we need to add some new configuration which is like we have to identify like specify telling go to my content which you need to process and then generate the CSS out of it is in this directory pages and components. So if you have any other projects and then you have some react components in it and then you want to compile and then get the um get it the CSS what? So you need to add it there, but if you don't have it you just keep copy this one and add it to the let me cook the entire effort. So let me get a mistake and I'm adding it here. So now I'm saving it so now I can use tailwind CSS in my actually so it's very good. So I'm gonna just remove everything from here and one last thing is adding utility to their global CSS so this three line adding all the utility and um pre default CSS and classes to my to my projects. So what I'm gonna copy it and then adding a top of tailwind, sorry, Global CSS. Where is this? Global CSS added? Because it's global and we want to try for every single directly every single file we have in the projects or every single page is um we need to add it to um app dot Js c here, we have it in app dot Js anything globally go to the app dot Js in order to look um and then that's pretty much you can just npm run this. So right now as you see here we have high, high high high which which is like very um like not very well. So let's run, we're on our project again. I'm closing it and running it again and let's see if it changes in my file, see the phone size is changed. Style is changed but because we didn't apply any CSS to it so it's not gonna be too much difference. But later on I'm gonna show you how to do it. So tell the income with some utility and plug ins. So a couple of plugging we need to for this to today. One of them is a typography typography is we have some standard of typography like H one H two P. Tag stuff so you can without adding like worrying about the mismatching your like H. One and then like phone sizes in different places you can use this one and then use the standard to doing that. It's very simple. You need to install this plug in called tailwind CSS typography. I'm gonna add it to my project now done at that one. And then in in entailing that conflict that Js I need just copy this line of code and add it to the plug in section so you guys can see my coat in the court cast right? So if you fall behind you can just get caught from there. So don't alan is there any question. No always ask questions. Don't worry no one's gonna judge or no one's gonna do it seem. It's good to always ask questions. That's a question. Okay so we got to go how to use it. So to using this typography we need to add the class and then class should be pose and you can use the different sizing effect for example post LG post Excel. So let's see like how this work. So what I'm gonna do is because I want to apply this pose to all my directories so and after J. S. I'm gonna wrap my um my component to it and then I'm gonna add class name forwards. Mm Okay so now let's see oh it didn't change because we didn't add anything to I guess to this one. Yeah so let's add this one to each one. So this one has a style. Now where's this style come from? Where is this size come from? All of them come from? If if you want to do the same thing you need to write CSS and then for example like that if I want to do such a thing um for example I have to write class name and then say for example um blood let's say article and then say H. One and say like title for example and then H. One something like that. And and then you come to your CSS or global CSS or you're engaged CSS file and then say um that and then we're gonna see like phone size whatever 15 or 25 40 maybe 10 RAM something like that. But when you use it well wind um you don't need to do anything. So and I also like kelvin's give you some really cool if you don't want to use this pose typography. So that's okay so you can just go to tailwind and then search for insights on size makes sense four times so you can size, your phone's really simple. Like say okay I want to use text excel maybe two weeks low for my son. This is the case you don't want to use them like this one. So um you can just say size your phone with the utility and the class names tail and provide you. So they have very good search and then if you're familiar with the CSS and properties so you can find the equivalent classes and then how to use them. Probably takes like if you're really new on this uh takes you like maybe five days or three days to lend. But after that you're gonna be super fast on development which I'm not I don't use too much to be honest. You always work on customs cases. But yeah um this helps you a lot personally. I work with it a couple times and I love it and you can do it too. Uh So let's go with that uh things back and you're gonna have this one back and then I don't need to have any class to my external elements. Um So now that's uh that's pretty much so let's go to the to my home that J. S. So usually like um you have a navigation in the page, website, it's a website, right? So think about like when you want to write something cold or think about this how to do not repeat yourself. That's really important. Part of the coding part of your day jobs. So it means if you have the other website and then that has a navigation or footer or some links, it's in every single place on your website or platform and that you don't want to write that every patient grab the code and put it there. Right? So how you can do that so you create the layout or component and then we use that component and layout every every bar every time the rex is as we said we have this app Js anything in this app that jay is gonna load every single page. For example if I add th one and then say like that and then if I page um I'm in the block page, I see that and if I go to the homepage I'm going to see that again. To wait, style is not defined. I think I'm seeing it that too. So it means it gives me an opportunity to write some code there and unloaded every page. So in our blood we have we assume we have a navigation there, we have one logo and then we have some link to route to the different pages. So let's create that and then uh and then the place place is after Js but and then we're gonna show you how to create another component and then extract that quote from after Js. We don't want to just go right every single shared component inside after Js because we want to clean and writing nice coat. So, but because we don't want to get confused for now, we're gonna add it here and then we'll just show you how to uh remove it from here. So um my um my webpage has really simple navigation, doesn't have something crazy so for them that I have it if maybe I have a nav section, schimmel five syntax. So I'm gonna have a knob and then my nav has to section one of them is the least ul list and one is a logo. So for the list logo, I'm gonna have image tag and then I'm adding SRC and then maybe a logo. I don't know where it's come from. Let's find the logo. Random logo. Hmm. But this logo here and then I have a renewal um A list, then I have a L. I. And then this L I has many and then we have home and then we have and maybe about portfolio portfolio Julio maybe have a block. Okay, so let's refresh our page to see what we got. So we got it because we didn't have any ideas filing. So it's expected, I want to show you something else to really really cool. So tailwind and there's a lot of website too. So always you can go to the template and then download the template and then grab the code you need from the template and add it to their website for example. Um in this case we want to get something, let's see, let me see, go to the components here and then grab one component from maybe hero section and then here we have this logo code. So I just can grab the code, copy the code and then add it to my page for example in here. So this is the one way you can do that and remove all every code you don't need it if you want to do that, you can do it. So this will this give you a very nice um very nice uh navigation and header section. So you see here. Very nice. Cool. But if you don't want to use it so like what we want, we don't want to use it right now. So what we're gonna do is um I'll show you a good top reports to you later. I made another version for myself so you can follow that if you like it then get up the quote from there but I'm gonna just add a class name. So let's add one container needs it's competitive. Have a class name called, container, container is um container container this in give you very nice um nice um container size and different Breakpoint. breakpoint. So it doesn't go over that for example you can see all the breakpoints it has and then this allows you to keep the code and then all the content in a in a one container in the one area. Um If I show you the action so I don't know it's just templates go here and then go here. So let me see if I have live vision. Yeah so you see all the content and this white area here in the section. These are can be one container and they use the class container so everything's gonna be stick inside of it. So if you don't push the elements outside of it manually you're gonna be sick inside. So very cool. So let's use that one and keep everything inside. So I'm moving all the code inside that container. And now I still I have my nav. Um So I have my I think. Okay so now I need to let me see. Make it smaller. So right now you see like this one um Yeah sorry this skin is so small. Okay where did it go? What? Yeah so you see the continue. Has this size of um elements. So now what you're gonna do is uh so there's something I need to add to that cause non in close. No four weeks over the next week. Okay max Vietnam. So I had this one I think I need to add that one to in order to get size. Yeah. So now you see here we have a gray area then cement our container is this area is our continue. So if you could make this container margin in the center so it means our article and every content we have in the pay is going to be in the center. So how to do that? Very simple. Um uh you can just say mx also and everything now is pushed middle. So if I go click on the container you see we have a nice edge both sides. So you can keep it that way. And then also we want to add a little bit padding to the right side. All the content. We don't want to just everything just shrink to the age of the skin if there's smaller skin. Right? So we're gonna say S. M. So in a tailwind in order to use the break points. So you have a different break point. So you can use Sm for example sm means a small screen. So and then if you want to say specify say okay in a smaller screen, this phone size before like this font size be like this text be like 14 pixels and and you want to be 20%. So the the way we do is very simple for example, in in a text size. So we say in a smaller skin text be um for example so right? And in the end the size which is the medium size of screen, like a tablet. We want to phone size be um for example hate. Right? So that's the way we use the breakpoint. So break point, there's a lot of big point sm MD large explosion double X. Large. So you can go over them. So right now we just want to add sm for sm it's just like a little padding of um padding of maybe then maybe P. For something like that. So it doesn't affect on the bigger skin because we don't need to push out of the bigger screen. So we do that. So now let's make our image is small, last name. And then so let's please see do something here too. So in a network we want to um now we have one image we have at least so we want to push them after each other. So for doing that we can use a grade or we can use the um you can you can use a grade or we can use the flex so and if any of them your choice. So let's say indicates we're gonna use great but in a great template role so you just allow you to do great like this or just the only thing you need to add is like say great and great um uh called one or two. That means we want the two columns and and two columns um to be there. Right? So class. Oh yeah so now we've got to both sides. So and now we want to make the image size smaller and um I think it's sweet. Um So you can say with so there's a utility so you can add it like that. And then also there is um you can't size add the size to it. For example, with specify your number. For example, I want to add a bit size for my image to be w and then you're gonna be um 40 pixel. So now if I check your image is a 40 pixel very simple. Like if you want to write CSS probably all of you guys, right, so probably is gonna be a lot more complicated. So I'm gonna write 100. Now we have a Uo so for you all we're gonna have the same thing and then um let's see your list style decoration. So I'm gonna just start the question on uh also solid double dr nash, why they need to write some? Okay hmm. So let's say let's just do added um class names and then so we want to have a great again and then we have a three level. So it's a great uh calls, okay and now we have a tree should be there but I didn't play again. Ah It's funny like the first one always go, right, okay, so now we have that so we can remove this style of it. I think it's tight decoration. Um This decoration type, least decoration style type, um least none. Okay, so I'm gonna add the least none. And I got it. So we don't go to detail. You can go learn more about it. So let's go with the next years we want to fetch. So for fetch we're gonna use we can use the fetch library from like a native of the javascript or node Js fetch. But we're gonna go with the make it nicer use access easier to handle. We're gonna add yarn, add access. Access is a no Ajax library. No Js library to call Ajax request. So for doing that, I'm just gonna import my um in my index dot Js so import X. Access uh from access. So now let's go say what kind of page we want to have. You want to have a S. S. R. Or S. S. C. For this page? So by default, next year optimizing all the page for you and then create this page as um do a aesthetic side. But if you want to have it converted to the S. S. Are so very simple, you need to do it. Um just add to get um export function a sync function and then call it um get several side crops and then that get serious props and then here this one is have to always return um crops and then you want a day to get in the service side. So what it is you can do in the here first of all when you have this service side in your in your home, in your occasional next year's you generate this page as SSR and it's generally this page always in service. So when someone's requested the service on the service, go to read all the files and then generate this page and then serve it to the coin if you have a lot of calculation so it can be slower. So that's why SSC is more really depends to the situation is better or so now let's see how we can call excuse and get and get our post from strapping. So you can say x can't um for example data and then let's see like very clear first um response and is equal to await X. Years and you pass your U. R. L. You want to call. So in our case is for now it's basically local host 1237 and then A. P. I. Um A P. I. And um blog I think it's blog. Let me see uh it's a blocks, blocks and then you've got this data and then we're going to console log response, response has many different things like some of them added by the access now is like data and then we're gonna pass um blogs and then in the blog we're gonna pass our response dot data I guess. So let's run this one and let's see what his response and then we got there and now because we passed this uh logs as the props to the this component so this is gonna be available as a props to my home component so I can get it from blogs here and then also I can just come to log it in my client side to see what is it glides how it looks like. So let's refresh the home page and then see how what you're gonna get. So you see like blowing has some data and then then the data we got the blogs and then we got the metadata metadata is include the pagination information like that. And then we got the data and inside the data we have a list of array and then we just like contain all the content we are getting back. So in our case because we have just only one article so we got 11 article but if you want to have more so you just need to go to content type and then go um called double duplicate this code duplicate. And because we have this one I'm gonna add to and publish let's create four or five. And where is the coat? Okay so now um now in my local was I'm refreshing this place and I'm going to see um three data comebacks now so my data has three data and then each of them has object which is like has attributes and I. T. I. D. In the attributes we have regarding our contents but our content doesn't have some of information like like image. So I'll explain how to fetch those information too but right now we have this and then in the documentation say like if you want to populate any data extra so you can just any sub data for example you have a um you have relational database and then you have a user who is writing the article and then you want to get the user information. So you have to populate that user to in order to extract to give you this data back. So you can just add the user if you have user or if you're not that in our case we have image. So I'm gonna just executed the image and now if I check here I got the image uh data back which has included a lot of things. I'm gonna show you like how cool is that. Um So if I refresh so I don't get to say I'm not getting anything for my data because I don't have been populated so to doing it populated yet. So um in the next year sorry in a strappy documentation it shows you how to fetch that image. So you just need to add this code to uh to your content. So like that very simple I'm adding it. So I'm gonna just refresh here so I get some data back and data is include all my image. So if I want to use it. So the good thing is about the stripey stripey has some plugging behind the scene anytime you upload the image to generate the subnets and a different version of your image. It means so you get a different format for example a small some nail and original format so if if you want to so you have a blood right so and then you upload the image main feature like a future image for two to make a week. And that's a pretty big for your website and then you have 10. You want to list 10 of them in your page which is make it very heavy. That means the client has to download 10 multiplied to Emily in your browser in order to load all the pages. So the straps come here with this ball game and give you say okay do not load tab on. Just fetch the smaller version and the low tab on which is like very smaller size wise and then very like size wise. And so and then it helps you to look very faster. For example here you see like the original limit is 42 megabit. Sorry kilobyte probably and then the subnets small version is 38 which is like in maybe it doesn't look a lot but when you have a bigger app and then you're not gonna have this small image that uh you're gonna have a lot bigger. For sure. So let's use this one and then load this data in our app. So I'm gonna just here I have a data. So what I passed blogs has a data. Okay so now so let's create a list with this one and then load them in the page. So let me say give and create um class name. Great and great. So I want to just make it delivered. Um Thanks see sm in smaller screen I want to have one grade and calls the one and then in a medium size we want to um create it calls me here. And then in a large size we want to create great size B um four. So that leaves me four. So now if lets me create a couple of beers one, two G. Four. So let's see how we're gonna see it. I think I great. Again, I don't know you're just like the first one is okay so it didn't work. And great. And small called great coz that's correct. Calls for. Okay. Yeah. Okay. So in the biggest smaller size is we have one and then in the medium size, what is wrong with you? Okay? S. M. We have M. D. Right calls team get calls for and then we have a bigger size. Let's see. Excel great pose for. So now we have four. So as you see it's responsive and it's interact with our browser size. And so this one we like our like thing. Um So now if what if I have five of it. Right? So let's see what's gonna happen. So 5/5 1 go to the next line. Automatic. It's very simple if you want to complete like I don't think that that's hard with the CSS to but if you don't have a knowledge so it's very easy to allow you so to do it in a tailwind. So if you want to say even more about it so you can just great overall so you can click it and then you can get everything you want from here and then um so they have documentation to so little bit example so how you can use them for some great column and start so how you can how you can spend one of them. For example if you have a very complicated uh great. So you can use this one to do it for example um Number four columns, you want to be like double size. So just adding the calls that span two and then escape to if you want to take three space just add three, three out of three. And that's pretty much so now let's let's uh let's create our blog um blog posts. So you have a blog here and blogs has the data, you know react to load the data of array, list of the data then you have so you have to use map in order to do that. So how did you this? So blogs dot data dot map. And then let's see in the data what we have. So here we got these blogs and blogs has data and the data has multiple object in it. So what we do is here same thing blogs dot data. And then here we have um let me see so we got data attributes and id's. So we're gonna get or like that creates and I. D. And then I'm gonna return um He is um So I got this one so um yeah this one is this one then I got this one and okay so now here I just want to H. One to maybe and then actively start. Okay so we didn't get anything at previous title is like that. So because we didn't include it inside my collar bracket. Hey we got the titles here. Nice. But it's super big. We don't want to go that big. So we're gonna say H. Five probably. Okay so now we've got a five and then we got three contents and each content shows there. Um And the title. That's nice. So let's create a card now. Very simple. Um I want to add this one for example. Class name and my court has a border. So let's go to the border area to see how the border adding border border of it. It's gonna be border too. So okay I'm gonna add border to class border too. And then so my grade has a gap so I want to have a space between each card so I'm gonna add gaps that four. So each court has between little space you see. Now my court has a little bit um Maybe not the space because I want to do something good. Um But let's add an image, HHS has a very good component called Image. I really suggest you guys to use that one because that gives you a lot of optimization and a little bit like tricky to use but really good to use for. But for now we're just gonna use the regular image we have so the content has the image and let's see how the images so attributes dot image dot data dot attributes. And the you are so okay, attributes. That image the data that attributes the U. R. L. Is the U. R. L. Of the image. The original image. If you want to get the smaller one you have to go to the deeper down format and a small or some nail. And the subnet has a 15 K. V. C. Like very small version half almost less than half. But for now we're just gonna use the normal version. Um So I get this upload directly but this direct this U. R. L. Is not completed. Right? So it the first part is missing what the first part. First part is the U. R. L. Of our server, whatever it is. If it's like if you deploy your server in the like a cloud and then give you the U. R. L. So you have to put it behind of it or if it's like the local, we just add local whole street 1237 behind us. So for doing that I'm just gonna adhere to the SRC. I'm just gonna add use a string interpolation and then sell a local house http. And then um local host and 1237. And yeah that's pretty much so I don't need anything and then uh wrapping it like this and on two. Oh yeah that's thank you. Get off. Okay so that's our image. They're so very nice. Uh Let's see how it is. See we got our blog post so you can you have all the information so you can add whatever you want it to be honest because you are really out of time. Um So I'm just gonna not going to the detail on the CSS I'm trying to wrap it up and but this is like the way you, you learn how to, you learn how to use the um how to use the table CSS and how to if you want to add more CSS stuff so you can add it there. They have a good stuff. For example one more thing I want to show you like if you want to do for example if you want to be, hold on hover like anyone hover in your cart. Uh no this one is not. Yeah this one is howard. So any anyone, how would your cart you want to like for example transform transfer to scale to like something like that transform scared to pension translate. Yeah translate and then translate two. So I translate y six translate wise six um yeah translate this dab on a scale is the one you want scale. A scale one. Okay. We want to scale too when to for example. Right, so that's the number you have to come with it. Which number you like? Um but doesn't do anything unfortunately. No, it should be scale because you have here scale so trance firm scale I think so let me see skill. Our translation transition all hmm no that should be fine translation. Oh something like that and state no you don't have translation. Oh yeah translation no translation on, on the television you have to add another library called uh unless you want something that want to come with some translation effect but maybe have a transition. You mean transition. Right? So let's add transition but know that the scale didn't work. So without animation it's just flicking it and it's just like jumping from one place to do size. But then you add a transition. So it's gonna add like elevate effective animation is just smoothly low but I don't think that that was a problem. I have to find it out but but for now it should be fine. Huh? Our scale to maybe more 50. I don't know. Yeah so I guess the number we put on it was very small so it didn't affect but that's how it is. So you see like um you make it very big like probably if you want to do um we're here should be minus minus. So and then if you don't do transition so if you don't have that smooth effect anymore see you can just transition. So I suggest do not use transition all always use a specific transition for a specific element because that's gonna be flaky and then making box and we get application but for now it's just fine. So let's use how do we navigate in our next years. So this is very important. Always keep in mind when the single page application load we shouldn't refresh the page if you use a normal attack or a link. So always those are gonna refresh your page and then the client have to download all the assets again. So to prevent that you have to use a link. So let's use link import link from next next link. And then I'm gonna wrap my image. So I'm gonna say okay anyone click on the image um best uh new. So let me see this one should have a peck. So anyone could click on a link. I want to go to that specific how to do that. So I'm just gonna just H. R. F. And then click on here and then you say my has a blog. So I want to go to blog Z. I think blog write this blog. So and then I want to use the link. Sorry um I want to use the attributes. God you are L. So I think the U. R. L. Is is that you are all we have for that content. So you can use I. D. For simple fights because you have a coded uh in um in the next year in a scrappy. They give you this route for a specific content with I. D. But because I. D. Is just number 123 it's not S. E. O. Friendly. So that's why we have that added that you are a so for doing that so we add the activities that you are for the U. R. L. And now say this one because we forget something here. Very important. Always do not forget to add the key when you use the map and loading at least a fighting, identify a key. And that's pretty much so now our image are clickable when I'm clicking on it. Let's go to the to the to the which is this one. So so now we want to know how to code this this specific data data for this route and then show it in the page. Right? So I don't go to um that but let's see in the article so there's a couple like in a detail page, this page we use a. S. S. Arctic SSR but now we want to use another technique that's going to be get maybe we can go I. S. R. Because I. So sometimes you want to you write an article and then you don't want to deploy and build command. So I really suggest you to use the I. S. Are for the I. S. Are very simple idea if you go to the next documentation. I. C. H. I. S. R. And then I started to give you a sample how to do it. So let's see. Undermanned validation. So I'm gonna go over here and copy this one. Not this one whatever we have here. Okay so I'm gonna explain you what it is. Get started props, we have to get a static props and get aesthetic path. Get a static pad, it's running in the build time when you're right. Okay and next bill this will run and then fetch all your data and generated. And so it means you have 10 10 data and then generate the password and then that pass pass to the next next year, you know okay we have 10 posts. You have to create 10 aesthetic pages. So and then they have something like you can do so you can fit your data. So as you see here is they call the api they call the we have the one we have and then they got the data and then in the data they have they generate the path with this syntax prams, I. D. Pads that one. And uh and then just pats returning as a fallback uh returning as a path and then fall back blocking. So fallback can be true, can be false, can be blocking and then blocking will service explained it very well with several rendered page on demand if the page doesn't exist. So imagine you have and then you added one expert to the europe strapping and then that page does not exist right? So someone's come to the page and then because that does not exist that are generated noted in the in the browser with the S. R. Technique. And then because that look is generated on the S. S. G. Like in A. And cash in the city and you have and the stories in the city and so and the next time anyone hit the same round it will look from the S. S. C. So that's the beauty of it. So because before this technique, anytime you add the content you have to regenerate the build time it means like like in a bigger company you have to like maybe run 2020 times 30 times per week. Or maybe they depends on how much classical day adding it. But this technique it will allow you to do not do it. So there's another technique to like if you can put it false or two. So those are different things and then if you don't have a page at all and you don't have, you don't want to add any page at the beginning and then you want to, you don't know how many page you have and you don't want to add anything, you just pass Pat's as um empty. So this one is meant so we have so many, so many anytime in the next year is no okay in the build time we don't have any page and then you just create that anytime we hit uh any blog posts or any article people generate that and generate that and loaded for the second one from the cash. So this is another technique so you can't do that otherwise you can just generate your patch past uh your articles. So which is like very simple to do it in our case. We just need to grab this access thing and then put it here. Same thing and then we got that so we don't need uh U. R. L. Or image. So we're just removing it and then you do all the operations we do have here and that's pretty much so for now because we don't want to do too much confused so we're just adding it um like that. Sorry, I'm just removing a lot of things from what I was trying to teach should have Sun and then we have the aesthetics props get aesthetics props will um um in the build time and sometimes in in the wrong time too if the page does not exist so what does it mean? Um So um let's do something really quick so get aesthetic props had some value. Right? So for example here you have problems for crimes has a data of U. R. L. For example this next this data. So how can you find it? Console log and crimes groups, console log prams. And then I don't need anything of this one because it's not relative to me and then I don't have this. Okay this validation so you can read it about that. Um I explained it actually and then here we have um and nothing it's safe. So now I'll refresh this page. It doesn't load anything here because it's running in the server and the server. If I load here I have um see my promises load here and then promise has article and an article is equal to article U. R. L. The what's the name of the article comes from whatever we put inside this bracket it's gonna be there accessible as a promise or you can be your l you can this log you can be whatever you like. So right now if we have that one so now let's go actually call access to get the data. So I'm gonna show you how to do that. Excuse that. Um access. Okay and the response and then is equal to a weight excuse And then I'm just gonna have my euro. Um So usually like in an actual life you create your service work services and then we call that so you don't need to repeat yourself always. Um But so right now for in a repository I add some service so you can just follow that pattern if you like blood. And then um I think I believe it's like something like that filters and then you kind of have your oral and then your L. Is equal to the value offer filters and then here is a friend that article. Uh So so let me show you what you can do. So we're calling the same endpoint blocks. But what do you want to do? You want to filter here with the content? You are L and then pass our um whatever we have here. Uh So like something like this. So I believe we should work. Yeah so I got the content here back. So if it's one article that should be fine. Yeah so and then you can see that you are all here how it is. We didn't have the population so yeah we need popular and so I'm gonna have the public and then and so that should be fine. Okay so this one is giving me a list of content, right? So what I'm gonna do so you can structure your data. If your content comes from the data like object in structure so you can restructure it on the fly. So for example, I'm going to just get the data from that response. I don't want to know everything. So now I'm just gonna come to lock um actually I'm gonna pass that data as the post then say data. That data and I'm passing the first element of that. Or just let me send our data. I believe that should work. So now I get the post and then and my parameters. I'm just distracting the props and then get post and then console log um logging my post. So let's see what do you get. Okay, access is not defined. Nice import X Years from access. Crumbs. Crumbs. So am I typing wrong? Cramps, cramps, yeah, hmm. Okay. So I get the access across, feel the status code 404. four or four means who knows what the four or four means. Yes. So it means the article does not exist or the path is wrong or something like that. So let's find out what is going on. Um hmm. Oh yes, that's that's it. Hey, you got it. Thank you. God knows. How long was I was trying to figure out what's going on. Okay, so you saved me a lot of times. So I got the data. So now the only thing I need to know to do is loading this content age. Right? Very simple. Um so let's do so for the markdown. Um so there's a library called react markdown. Um So react so you need to install it so you can just go ahead and grab it mm Npm. Okay so this is a package so I'm gonna get it and then um you're on and that one down. So import import, react more from the organ. And now we get post post has uh let me see what the post has. Post is. One. Post is a least you see it at least. So it's very careful like when you have a list if you want to access it you have to say post zero that one. So for preventing that what I'm doing here, I'm just passing the post first element first object of the post. So now if I refresh the page I don't see the list anymore and I see that directly the object. So I'm gonna just attribute so object postal attributes and and then for making myself life easier. So what I do is um the structures again and then I get my attributes again buttes those idiots. So I don't have that one. So I'm gonna just here uh previous title and then I'm wrapping it in an object and then and I have react marked down at the police, I'm importing it wrong. I should be another way so react martin. It should be like that. Yeah so that's um import and import Jack more than and then we got activites got um description content. I think it's content. Yeah. Okay, so now if I refresh the page, I see the content. So now if you if you want like this because this is marked down. So if you change the content in the block three, which is this one, and if I add 11 of them to add a title H one. So, and I save it. So in the front tent should be capital to you see, So our markdown markdown works fine. So that's that's your decision how we want to make your website looking and designer. You're out of time. Sorry guys, then, um, that's pretty much for today. If you have any question and any anything just uh, thank you. Thank you. Thank you for coming guys. So it was probably I was a little bit fast. It should be. Yeah, that one is much a little bit more nicer because I have more time to do it and just brush