Build a Fullstack Music App with Next.js Artists List UI Layout

[00:00:00]
>> Let's finish out this homepage. Now that we have our artists, if we go back and look at the design, it's just a left to right, it's just like a row of artists. And this will be pretty easy we have some titles at the top, we got a title or a subtitle and then like a row.

[00:00:13] This card here, it's a little artists card little thing. So let's do that first thing is we'll make a like a div or a box for this whole section here so we'll make that box. So we have that box there. And then we'll make another box for just the content at the top.

[00:00:32] And then we'll make another box for this row, right. So inside that box, here's that content at the top. And then here's the row, which will probably be a flux. I'm actually just gonna say flex for this second one. There we go. So then for the content at the top I'm going to use the text component like we've done before and it just says top artists this month, and then only visible to you.

[00:01:04] So, that's what we'll say top artists this month. And underneath it, Only visible to you and we'll get the sizing right in a minute. And then for this flex, we just got a bunch of artists cards here. So I'll just render the artist name for now until we make an artist card.

[00:01:28] So I'll just say, artists.map, get an artist, and then render a text for now until we actually make an artist card with the artists.name. Cool, now I got to import all that stuff because it's freaking out. So got ourselves a box. There we go. And then we have a text and then we have a flux.

[00:02:05] Okay, so I render all those and just to make sure the color is white, so I'm just gonna put color white up here and I think the justify stuff is cool. So we should be good there. So let's go back check it out and yeah, here is our text, the top, our text right underneath it and then all of our artists names just mushed together.

[00:02:27] So the layouts good. It doesn't look like it with the layouts fine. It's exactly what we wanted. Obviously to add some padding you need to adjust the size of the text and then make some artists box. So let's do that. So if you look at the design, we need some padding on the left so we do some left padding.

[00:02:44] Probably on the right as well. Need to make the title a little bigger than the bottom one. It looks like on a magnitude of at least three. And then we obviously need the artist box. So that's what we'll do so we'll add some padding here, padding x. That will do like 40 pixels.

[00:03:04] We'll play around with that number. And then this one's a little bigger so we'll say font size. 2xl and then fontWeight. I think that was bold. It looked pretty bold. And as long as it's way smaller it was like font size of like let's do medium. I think that's one.

[00:03:33] There we go. So we'll try that. We'll see what that looks like. Yeah, it's a lot better. Padding looks good. I think this one's still a lot smaller but we could play around with it. And then now we just need to get the artist card and I'm going to change it from green.

[00:03:49] I actually like green but I'm sick of looking at it so I'm gonna change it to purple. There we go, purple is a lot better to look at. Okay, so now we need to add some margin underneath this box that has the text so we can push our artists down a little more.

[00:04:06] And then we need to make our artist cards. What's in fake avatars and we should be good. So let's do that. So here's the box that's housing our text, this is why I added a box around this. Cuz I knew we were gonna have to add some margin to the bottom.

[00:04:18] So if we had both of these texts and and all the artists in the same container, there would be no way to put some spacing between them. So, again, I think really good UI just comes with putting divs around everything. But not too many. So we're gonna say margin bottom, and I don't know 20 pixels, okay, so 20 pixels is not enough.

[00:04:43] To be a little more generous, so like 40. And now for the artist cards. Typically when I make a new component, what I'll do is I'll just make it in the page or the other component that I'm using it in and then I'll move it out so it's on file.

[00:04:58] That way I can see it immediately. So I'll just make the component right here where this text is. So this will be a box, And looks like he just has a bigger avatar the top some rounded corners and it's slightly brighter. It's not affected by the gradient. This is a solid like gray color.

[00:05:20] I wonder if it's solid gray because this background's gray, or if it's always gray, no matter what the background is. I don't have another screenshot another color to say. We're just gonna make it great no matter what. And that looks funky then I guess we could just make it the color of the background.

[00:05:39] We'll go from there. So we have our box here. We're going to give it a background of gray dots. Something a little darker. Let's try 100 we'll play around with that. It has a border radius of like four pixels because it's slightly round, and then it has padding, but not too much looks like ten to 15 pixels.

[00:06:02] All around. I'm gonna try 15 and I'm just gonna put the artist's name here so we can see it right quick. Yeah, that it looks way too light so maybe like 900 that's a little better, okay. So, we got that. And then now we got to add some spacing between them.

[00:06:31] So, I think what we can do here is in the flexbox we can say, justify, and then space-between we could try that. See what happens. There we go. That'll put some space between them. Power flexbox so we got that. I'm not sure that's what we want, though because it'll evenly spaced them.

[00:06:50] Whereas in the UI, they're all close together and if there's just not enough it'll just end off on the right. So maybe space between is probably not what we want and instead, I might just add some. What I'll do here is follow my own advice that I've given you and make another div so another box like this.

[00:07:13] Then I'll put the card in that box. And then this new box that I created is gonna act as a container that has padding on the x and y for however much pixels in between each one of these switch, looks like no more than 20 pixels. So, we'll say padding x, 20 pixels.

[00:07:33] And that will give us the space that we want. Or that nice gutter there. All right 20 pixels is too much. Let's do ten, there we go. So now we got the ten pixels gutter without doing the space between which evenly distributes all the way to the end which is probably not what you want.

[00:07:49] This will just put spacing between them and not going to then. So usually when I do flexbox, I don't like to have the element that I want to be in the flexbox be the direct child of the flex container. I usually wrap that in another div. That way I can treat that div as a container and add padding around it to control the gutter sizes.

[00:08:11] Whereas if you added padding to the actual element, you'll be adding padding to the inside of this box. And that's not what you want. So, yeah, that's typically why and how I do that. The other thing is that these boxes have a fixed width. So right now they're just based off the width of the text of the artist.

[00:08:31] So we don't want that. So we got to give these a fixed width. And we can just say, I don't know each of you will be. I don't know, 20, that's too big. Let's just say 10% and then you will be whatever your parent is with of 100%.

[00:08:54] As to small, almost do 20%. There we go. That's a lot better. So now they're fixed width, they're really cool and looks like we need to add the avatar image. And then we need to put the text underneath it, and we should be good to go. So for the image we will use the image tag from chakra.

[00:09:20] So let me import that. Let me get that image tag from chakra, there we go. Got the image tag from chakra UI/react. Gonna go up here add a source and then we can go find a placeholder. Let's add some cats. So placeholder kitten some placekitten. There we go.

[00:09:48] We'll add some cats as our avatars. Super, cute cats. So we got some cats. I'll make a square because we're we're making it round. So make this thing round border radius will be 100%, I think we got to give this thing a width and stuff but we'll play around with it later.

[00:10:09] And then underneath the image, we're gonna put the text, but because there's two lines of text. I'm gonna wrap both of them in a box so I can control that text together and not independently so I'll make another box of this image and I'll make one text two texts.

[00:10:37] Cool the first text will just say the artist his name. And the second one will just, I think it literally just says the word artist. That's it. There we go. Got our artists cats. That's pretty cool. Just both cats hanging out. So then I'll just add some margin.

[00:11:05] Got some margin top to this text right here. Have like 10 pixels scoot that down a little more maybe a little more 20 pixels there we go. The scroll works perfectly, and now we just need to set this to be a bigger font size. Let's say extra large, too big, large, much better.

[00:11:36] And then I think this one's just small. There we go. Maybe even smaller x. There we go cool and it is left aligned so I think we're good there that seems cool.