Congratulations! You now have the knowledge that it takes to be effective with few components. In this lesson, I want to give you a practical challenge to create a practical component. What is it?
Well, I'm glad you asked. Our challenge in this lesson is to create a GitHub card component. This will allow you to pass in the username of a GitHub user and then display information about that GitHub user in the form of a card. So...
Here I am grabbing the image for the user, this is me, the name of the user, the number of followers I have, and how many I am following. Finally, I've provided a button that when clicked will take you to my GitHub user profile. In order to get all this information about the user, you can use this URL structure right here in order to make a request to the GitHub API. I will leave a copy of this in the lesson description as well, so you can just copy it and paste it.
Of course, you need to change out the username to whatever username is passed in as the prop to the component. Now as far as styling goes, how you want to style your card is completely up to you. I'll tell you what I did if you want to do the same thing. I chose to install Tailwind CSS, which is an amazing utility-first CSS framework that I use all the time.
And I've paired it with daisy UI in order to get some quick classes that allowed me to just copy and paste code from the daisy UI website to create this card right here. Essentially, I just copied this HTML and replaced the certain pieces of it with the data from my GitHub. user. If you want to do the same thing you can follow this documentation here to set up Tailwind CSS with VEET.
I've left a link for this in the description below and of course on the daisy UI website there are install instructions for setting up daisy UI with Tailwind CSS. So there you have it. Go ahead and pause the video and when you are done with the challenge come on back and I will show you the solution. Alright, I have TOEN CSS and DAISY UI already installed.
Now let's get to work creating that GitHub card. view three times with my username and the username of a couple of my colleagues. The GitHub card is basically empty at this point. So what I'm going to do is I'm going to copy the HTML as a starting point for my card from the daisy UI website.
Then I'll paste that inside of the template. In the browser, now you can see the card repeated three times because we have used the component three times. Now let's grab the username that's being passed in as a prop. js?
Well, you should know this because that's what this course is about. And I'm sure you do this part swimmingly. So define props is the way we're going to accept a username prompt. Now we could say that this was a string or we could be more specific.
Say it was the type of string, but also say it was required. I think that's important in this case because our component just won't work unless we have a username. So we'll make username required. Our next step is to actually fetch the data from the API.
Now I'm gonna grab this URL here, you could have grabbed it from the lesson description, and I'm going to make a fetch request here to that URL, but I need to replace this placeholder username with the actual username from the props. So in order to access the props inside of script setup, I first need to grab the results of defined props, and now username will be a property on the props. object. username into the URL.
If you weren't sure how to do this fetch part, absolutely no worries. js. Oftentimes in your Vue projects, you don't have data defined inside the project itself. Rather, you're getting that data from some API.
So you'll probably be using fetch a lot and this is how you'll do it. json and await this. Essentially this gives us the data from the API in a JSON format. So here is our data.
Now, how do I get this data? to work with it in the template. Well, I have to create a reactive variable here called user. We'll define it as an empty ref to begin with.
And of course, this means we need to import ref from view. value equal to that data we've gotten from our API. So let's print out that user down here now to see what we're working with. Over here in the browser, you can see it looks pretty messy, but this is all the data from the API Let me write this in a pre tag so we can see it a little bit better and That's easier to read now.
It's just a matter of picking out what information we want to use in the card So it looks like the HTML URL here is the link to my github profile So I'll replace the watch button down here. That's this button right here I'll replace this with the label view profile. And then we want to turn it into a link instead of a button so that we can give it an href that is equal to the user dot, what did I say it was? HTML URL.
So now this updated, it says view profile. When I click on it, sure enough, I go to my profile on GitHub. Now it's just a matter of replacing the other pieces of information. Here for my h2 the card title.
I'll use the user dot What is it over here? I'm looking for the name. Yep name simple enough and then for the p tag under that I Wanted to display the number of followers. So I'll put a strong tag here with followers and we'll say user dot Where is it in our data?
followers, and then we'll just copy that and change this to following. And that as well. All right, let me remove the data dump there. And you can see here we have Daniel Kelly, followers, following.
I still have the image of Spider-Man. Let's change that image to my avatar. avatar. That's incorrect, maybe avatar URL.
And there it is. So now we have a card with my information on it. It's totally dynamic. It fetches it based on the username, but we still have one more thing to do.
Let me give the page a refresh so you can see what it is. OK, right now it is only showing my first card. There's not a really clear reason for this, but if I open up the console, you'll see we have an error. cannot read properties of undefined reading avatar URL.
So what is the issue here? Well, if we go back to GitHub card, you'll see that we're trying to read avatar URL on the user, but the user is fetched asynchronously, right? In the beginning, it's only undefined. It only exists after our request to the API is complete.
Therefore, we really need to wait to display everything in the template until this request is done. The way we can do that is just checking to see if user exists and only display all the markup after the user has been fetched. Back in the browser now, I give the page a refresh and everything works as expected. Now the cards are all butting up right next to one another.
We could add a little bit of margin here to make that better and perfect. During this challenge, I hope you were able to see a practical use case for a component as well as successfully implement the component so that it took in the username prompt and then used that username prompt in order to fetch data from the GitHub API. Finally, displaying the data to the page in the form of a user card. Congratulations!
You now have the knowledge that it takes to be effective with few components. In this lesson, I want to give you a practical challenge to create a practical component. What is it? Well, I'm glad you asked.
Our challenge in this lesson is to create a GitHub card component. This will allow you to pass in the username of a GitHub user and then display information about that GitHub user in the form of a card. So... Here I am grabbing the image for the user, this is me, the name of the user, the number of followers I have, and how many I am following.
Finally, I've provided a button that when clicked will take you to my GitHub user profile. In order to get all this information about the user, you can use this URL structure right here in order to make a request to the GitHub API. I will leave a copy of this in the lesson description as well, so you can just copy it and paste it. Of course, you need to change out the username to whatever username is passed in as the prop to the component.
Now as far as styling goes, how you want to style your card is completely up to you. I'll tell you what I did if you want to do the same thing. I chose to install Tailwind CSS, which is an amazing utility-first CSS framework that I use all the time. And I've paired it with daisy UI in order to get some quick classes that allowed me to just copy and paste code from the daisy UI website to create this card right here.
Essentially, I just copied this HTML and replaced the certain pieces of it with the data from my GitHub. user. If you want to do the same thing you can follow this documentation here to set up Tailwind CSS with VEET. I've left a link for this in the description below and of course on the daisy UI website there are install instructions for setting up daisy UI with Tailwind CSS.
So there you have it. Go ahead and pause the video and when you are done with the challenge come on back and I will show you the solution. Alright, I have TOEN CSS and DAISY UI already installed. Now let's get to work creating that GitHub card.
view three times with my username and the username of a couple of my colleagues. The GitHub card is basically empty at this point. So what I'm going to do is I'm going to copy the HTML as a starting point for my card from the daisy UI website. Then I'll paste that inside of the template.
In the browser, now you can see the card repeated three times because we have used the component three times. Now let's grab the username that's being passed in as a prop. js? Well, you should know this because that's what this course is about.
And I'm sure you do this part swimmingly. So define props is the way we're going to accept a username prompt. Now we could say that this was a string or we could be more specific. Say it was the type of string, but also say it was required.
I think that's important in this case because our component just won't work unless we have a username. So we'll make username required. Our next step is to actually fetch the data from the API. Now I'm gonna grab this URL here, you could have grabbed it from the lesson description, and I'm going to make a fetch request here to that URL, but I need to replace this placeholder username with the actual username from the props.
So in order to access the props inside of script setup, I first need to grab the results of defined props, and now username will be a property on the props. object. username into the URL. If you weren't sure how to do this fetch part, absolutely no worries.
js. Oftentimes in your Vue projects, you don't have data defined inside the project itself. Rather, you're getting that data from some API. So you'll probably be using fetch a lot and this is how you'll do it.
json and await this. Essentially this gives us the data from the API in a JSON format. So here is our data. Now, how do I get this data?
to work with it in the template. Well, I have to create a reactive variable here called user. We'll define it as an empty ref to begin with. And of course, this means we need to import ref from view.
value equal to that data we've gotten from our API. So let's print out that user down here now to see what we're working with. Over here in the browser, you can see it looks pretty messy, but this is all the data from the API Let me write this in a pre tag so we can see it a little bit better and That's easier to read now. It's just a matter of picking out what information we want to use in the card So it looks like the HTML URL here is the link to my github profile So I'll replace the watch button down here.
That's this button right here I'll replace this with the label view profile. And then we want to turn it into a link instead of a button so that we can give it an href that is equal to the user dot, what did I say it was? HTML URL. So now this updated, it says view profile.
When I click on it, sure enough, I go to my profile on GitHub. Now it's just a matter of replacing the other pieces of information. Here for my h2 the card title. I'll use the user dot What is it over here?
I'm looking for the name. Yep name simple enough and then for the p tag under that I Wanted to display the number of followers. So I'll put a strong tag here with followers and we'll say user dot Where is it in our data? followers, and then we'll just copy that and change this to following.
And that as well. All right, let me remove the data dump there. And you can see here we have Daniel Kelly, followers, following. I still have the image of Spider-Man.
Let's change that image to my avatar. avatar. That's incorrect, maybe avatar URL. And there it is.
So now we have a card with my information on it. It's totally dynamic. It fetches it based on the username, but we still have one more thing to do. Let me give the page a refresh so you can see what it is.
OK, right now it is only showing my first card. There's not a really clear reason for this, but if I open up the console, you'll see we have an error. cannot read properties of undefined reading avatar URL. So what is the issue here?
Well, if we go back to GitHub card, you'll see that we're trying to read avatar URL on the user, but the user is fetched asynchronously, right? In the beginning, it's only undefined. It only exists after our request to the API is complete. Therefore, we really need to wait to display everything in the template until this request is done.
The way we can do that is just checking to see if user exists and only display all the markup after the user has been fetched. Back in the browser now, I give the page a refresh and everything works as expected. Now the cards are all butting up right next to one another. We could add a little bit of margin here to make that better and perfect.
During this challenge, I hope you were able to see a practical use case for a component as well as successfully implement the component so that it took in the username prompt and then used that username prompt in order to fetch data from the GitHub API. Finally, displaying the data to the page in the form of a user card.