Creating a Card UI Component

[00:00:00]
>> Brian Holt: All right, let's, that's that. Let's go create a wiki card. So again, my process here is I would go to the components here. Knowing that I'm going to create like a card on the homepage for all the wiki articles, I'd see like, oh cool, they have a card thing here, and it looks like this, right? I'm not going to do a login menu, but I am going to do like a containing card kind of element here. It gives you a nice little, you know, hierarchy.

[00:00:31]
Like we don't need the footer, for example, but we could use that. There's a bunch of cool stuff here. So I would see that. I would come in here, I would say npx Shad CN. At latest, you might ask me like, why are we doing at latest every single time? NPX has a tendency to try and use whatever is in cache, right? And with something like with CLIs like this, you want to always use the latest one, right?

[00:00:58]
There's nothing that you'd want to use the CLI, the cache version of it. You might want like to pin the version of like Next or something like that, but for CLIs you always want the latest version. That's why they always have you put at latest. This forces NPX to go grab the latest version of it. As opposed to just like, oh, I have this in cache. I'm going to use it from cache. OK, so at latest add.

[00:01:33]
At Shad CN slash card. OK. Easy peasy. Coming here, we now have a card.tsx. You can dump this import at the top. You can save this, because it's going to, that'll like, at least for me it's running like the autofix from biome. But again, you probably do want to come in here and say, not that one, this one and say, I'm going to stop my server and say, npm run lint fix unsafe. And this will, because their styling is not going to be the same as ours, right?

[00:02:10]
You probably don't even need unsafe, probably fix would be enough here. And then now we can run our dev server again. And here we go. I mean, you can look at this. But you can see here we end up with a card, header, footer, title, action, description, so on and so forth. Cool. All right. So we, I'm going to come and create a wiki card.tsx. So again, there's two ways you could go about this. You could say, I'm just going to modify card directly because this is the only way that I'm anticipating using card in my codebase.

[00:03:00]
I'm more of the opinion is like, let's just leave card as it is, it's perfectly fine, it's also like googleable, there's like, hey Shadcn and card, how do I do this, as opposed to modifying it myself. So I prefer to come in here and just say like, I'm going to make wiki card, which consumes card. This is totally up to you though. I am not going to make you write this again. So you can just come in here and we are going to do this one, wiki card.tsx.

[00:03:53]
You can skip this line up here. And copy and paste this bit. Not sorted. God, you're picky sometimes, aren't you? I want that. Or does it want those to be sorted. I don't even know. Will you just fix that for me, biome? Here we go. No, I, personal pet peeve here, I hate sorting imports. It's like the least useful thing to me. I don't know, like I worked in a codebase, I think this was at Netflix where I had some developers that I worked with that demanded everything be like sorted alphabetically.

[00:04:27]
I'm like, why, why am I wasting so much of my developer time just like singing the ABC's in my head, it's like, OK, F comes after G and like moving stuff around. I hate it. Anyway. That, I don't know if that was a merited rant, but it did feel a little cathartic to say it, so, here we are. OK, so let's just look at what we moved in here. We could, I could have had you write this, but it would be relatively the same exercise of what we just did.

[00:04:56]
And it does have an interface here for TypeScript. And it's just a card that's going to pull stuff from our database and display it, with a summary, it's going to show the date, the author. And it has a bunch of Tailwind in here. So, any questions? Does that make sense? I have a question. Do you find tools like Vero that are like integrated with Shadcn and Next and React Tailwind to be helpful? Like how do you see those fitting into the development and design process?

[00:05:35]
Yeah, I mean, specifically V0 is a really interesting one. I love them because they use Neon. But to, I use it all the time, right, even for this, the code, the UI code that you're using right now is not written by Vero, but my initial prototype for this was V0. So I went to V0, said like, I'm writing a simple wiki app that has these requirements and does these things. I think if you come in here, I can even show you maybe, I might be able to show you the prompt that I wrote for this.

[00:06:14]
So, to, while I'm looking for this, the answer is yes, I use it all the time. It's perfect for prototyping quickly, like rather than going to my designer and saying, hey designer, I need something that looks like this, does these things. I go to V0 first, typically. Sometimes it's Replit, sometimes I use Lovable, I use it like I try to use all of them. And then I'll say like, here's what I'm thinking, here's what I like, here's like the functionality that I want to see, like for these kind of like rapid prototyping, it's amazing for that kind of stuff, because it gets something interactable back, it's usually pretty fast, it's because I'm coming at it from like a kind of a technical bent, I'm usually able to go pretty fast.

[00:06:57]
I have used the actual outputted code from V0 before, but I'll say generally I use it for the prototype and then I go back and do it myself. Nothing against the code they're generating, it seems like it's perfectly adequate Next code. I just don't want their opinions. I want my opinions. If it's something that I'm actually going to write and maintain and stuff like that. Does that answer your question?

[00:07:19]
Yeah, it's kind of like how I've been thinking about it too. There's a big discussion at my job right now about how to use it and yeah, rapid prototyping, but maybe not like a high fidelity design tool and we feel like we're going to have to clean up the code quite a bit. Yeah, well, and like who owns it, right? And like if something goes wrong, you can't say, well, this is V0's fault. It's like, no, V0 did exactly what you asked to do.

[00:07:44]
I might still have it in here. Let's take a look. Yeah, this is pretty close to what I had as the prompt. So this is not a class about prompting. There's another much better person that knows about prompting than I do that teaches for Frontend Masters. I usually go to something that has some sort of plan mode. Cursor has a really good plan mode, even just asking Claude or ChatGPT to do it for you, and I'll go in and say, I am building this kind of app that has these kind of features.

[00:08:07]
Help me create a plan that I can then pass into the LLM. It'll give me some sort of like plan. I'll refine that a bunch. I'll frequently kind of put it into like the Anthropic 10-step prompt. If that's not something you've heard of, I would suggest go looking it up. Basically like, here's the context, here's the tone, here's the target audience, here's the things that I need, and then after that, I'll refine that into a much larger prompt like use these technologies, build these, and then create for me a task list, and then we'll go task by task and try and finish the thing together, so you're not giving the LLM too big of work all at once, unless it's Claude Sonnet, and usually I'll just say like, all right, Claude Sonnet, now spawn out to 10 different Claudes to go do each one of these things.

[00:08:56]
So, that's some of the steps I took here to kind of get the prototype working and then I went back and coded it myself, which is a pretty normal pattern for me. I mean, at the end of the day, like everything that I ship I own, and so I want to make sure that like, if it's going to fail, like I'm going to own the failure, because I don't want to go back and say like, well, Claude wrote that, and I didn't know that Claude wrote that.

[00:09:22]
That feels like a much bigger failure than I wrote this and it sucked, because then I get to own that, right? And I know how to fix that. So like, all the code that you're seeing in here, some of it would have been maybe at least initially prototyped by Claude, I was using Claude for this particular course. But at the end, like I went through and I rewrote basically everything in here. OK. So again, we're going to redo our page.tsx here.

[00:10:15]
And we're going to copy and paste this one as well. So just come in here to page.tsx. Copy paste. And again, I reorganize this and it looks like this is not what it has, so this isn't in UI. Which I'll fix later in the course notes, but this said Nav up here. I think I had more Nav components before, and then I realized at the end of this that I really wanted to have one nav bar, so, I moved this into being just in the UI directory.

[00:10:50]
But yeah, that's why I love TypeScript because it's really quick to point out those kind of errors. I'm trying to think if there's anything interesting in here. We're using our wiki card that we just made together. And beyond that, it's really just that nav bar, wiki card. Yeah, I think we're actually going to have to go drop that nav bar because we put it in the layout, didn't we? Yeah, we did. So you don't even necessarily need that.

[00:11:38]
That's probably why. All right. So make sure your server is running as mine. Mine still is. And we look at our create next app, and we should see something like this. So I don't feel like we did anything too wild here and we ended up with like a pretty nice looking site, right? Just kind of relying on Shadcn and we didn't really end up having to write too much Tailwind ourselves. But one could look at this and like, if I took one look at this site, I'd be like, oh, that's a Shadcn website, right?

[00:00:00]
It looks very, very Shadcn. This is generally like when I'm just working on projects for myself or at work, this is my loop for styling a site.