What's up, everybody? So take a look at this. At Larracast, we have team accounts. So as a manager, you can sign up and then grant unlimited access to everyone on your team versus using the company card register one by one by one, which you don't want to do. So anyways, this is what the team dashboard looks like for a manager and it needs some work. It needs a refresh.

for a manager and it needs some work. It needs a refresh. So I have a look there very quickly. You can see we track team experience collectively. We have a leaderboard. If you want to see who's using the site the most, then this is quite outdated at this point. It's just a demo. We have an activity feed. We can view all the members.

We have an activity feed. We can view all the members. And again, we just have three. We can add developers to our team and we even have assignments. But notice this assignments feature is incredibly bare bones. You just search for a series and then it notifies them and we can track when they've completed the series. This is almost bad, I would say, and it needs to be almost quite good.

This is almost bad, I would say, and it needs to be almost quite good. So we're going to use AI to rebuild this based upon some designs that I currently have. Let's take a look. All right, so here is our refresh. And it's just an image in this case. We have our team name. Here's our list up to a point. We have our graph, our activity feed leaderboard.

Here's our list up to a point. We have our graph, our activity feed leaderboard. Now we show assignments directly in the main dashboard and we even promote new content. Okay, you'll see I have a handful of images for all of the various states. So for example, what happens if you sign up and we don't have any experience yet and there's no activity, you can see we have some examples

and there's no activity, you can see we have some examples for what that might look like. And that's always very important and often forgotten. We have some notes here for how to render the team size. What if you have a hundred people? Well, we don't want a list of a hundred people at the very top, right? Next we have some modals. So here's how we manage our team

Next we have some modals. So here's how we manage our team and now displays within a modal. Here's how we can invite people to our team. Here's what happens after we invite them, right? All of these things are very important. And here is how we assign a series to a team or a member now. We can select a series. We can choose who's watching that series

We can select a series. We can choose who's watching that series and everything should be represented here. Okay, so now I'm gonna pass this off to AI. We're gonna make a plan and we're gonna see how it performs. So let's boot up Claude. And we're gonna make a plan here. But you know what? I find developers very much disagree on this.

But you know what? I find developers very much disagree on this. Some would say you need to sit down and work on this plan document for two hours before you hit start. I do think it's important to get the plan, right? But you know what? I think you can ramble and mumble and you can work with the AI to make your plan. I think it's getting increasingly good

and you can work with the AI to make your plan. I think it's getting increasingly good at meeting you where you currently are and figuring out the gaps in your plan. So let's just go. Let's just ramble a voice to speech and see where we end up. We have an existing team dashboard that needs a design pump. And we do have images for this design refresh that I want you to implement.

And we do have images for this design refresh that I want you to implement. So your job will be to analyze each of those images, absolutely ask me questions along the way to confirm a handful of things. And then you will migrate the existing dashboard design and components to this new format. As you will see, we have restructured things, the way we invite users or a signed series have changed. And we need to reflect that in our implementation.

the way we invite users or a signed series have changed. And we need to reflect that in our implementation. So go ahead and have a look at those images, review each of the states that they represent, and then ask me questions as you prepare a plan to migrate us to this new design. And then I'll say have a look at, and I believe it's in team assets, yeah. Okay, so notice, yeah, I'm kind of rambling there, right? I didn't sit down with a plan document for an hour.

Okay, so notice, yeah, I'm kind of rambling there, right? I didn't sit down with a plan document for an hour. Maybe it would be worth it, I'm just not sure. It probably depends on what you're working on, but I feel like even at this stage with just something off the top of your head to get us going, the AI's gonna help you. It's gonna go back and forth with you. It's gonna ask you questions that maybe you didn't think of, and then you will continue iterating on this plan

It's gonna ask you questions that maybe you didn't think of, and then you will continue iterating on this plan and figuring out does this look good? Is there anything we missed? And then you can start it. (upbeat music) All right, more questions. So the recently released card, is this a new feature? Should it show the most recently published series

is this a new feature? Should it show the most recently published series on the site? Yes, most recently one. And the assignment wizard, step two, select a series. Can the team manager select multiple series at once, or is it one series per assignment flow? Great question, let's allow for multiple. The my team modal shows manager subscription at the bottom, should this link to the existing settings page?

The my team modal shows manager subscription at the bottom, should this link to the existing settings page? Yes. Yeah, so notice in this scenario, it's asking questions that maybe I wouldn't have immediately brought up. And that's why I feel like if you're gonna use AI, use it in every possible way. If there's a situation where you're gonna sit down for two hours to work on a plan,

If there's a situation where you're gonna sit down for two hours to work on a plan, I feel like you're missing some. Maybe sometimes that's necessary for extensive projects, but for little features, leverage AI as much as you possibly can, and then fill in the blanks. (upbeat music) Yeah, notice right here. It sets up three different agents on its own to explore the code base.

It sets up three different agents on its own to explore the code base. So in the past, these are the sorts of things you would need to be explicit about. You'd have to tell the AI, fire up three agents to explore the code base, right? Now, you don't really have to do it at all. It will do it on its own if it's necessary. All right, so let's have a look. It's done.

All right, so let's have a look. It's done. So back in changes, it wants to add a recently released prop to the controller. That's fine. It wants to create a new endpoint for bulk inviting members. So team bulk invite controller, okay. It's keeping it credit, which is kind of a requirement for this code base. All right, it's adding tests.

which is kind of a requirement for this code base. All right, it's adding tests. It's adding a new dialogue components. All right, that's what we use for the little notals that pop up. They're actually native dialogues. It's using our existing view components, which is good. We have an invite dialogue and assignment wizard. All right, we'll take a look at that. And then for the rebuild,

All right, we'll take a look at that. And then for the rebuild, it's gonna add some new sub components, a new file, a stats section. Yeah, you can see it's quite extensive. It's modifying existing components that we have and it's rewriting. Okay, so as part of a video, I think this is pretty good. In real life, I might take a little longer,

I think this is pretty good. In real life, I might take a little longer, but this actually looks reasonably good to me. So we're gonna get started. Clear context and begin. (upbeat music) Here we go. Okay. So it's done, it's split it into four phases, which is really cool.

So it's done, it's split it into four phases, which is really cool. We have a back end phase, the dialogue components, the dashboard layout and the cleanup. Okay, be quiet. Okay, so I'm excited. Let's have a look in the browser. Okay, so here is the first stab at the design. Already, I can see a bunch of issues. And then at the same time, it's 80% of the way there.

Already, I can see a bunch of issues. And then at the same time, it's 80% of the way there. We have the general structure. I can manage our team. I mean, that's not a horrid. We just need to make a few tweaks. Our graph is not populated only because I don't have that local data here. Next, these are old assets from a long time ago. They shouldn't be present anymore.

Next, these are old assets from a long time ago. They shouldn't be present anymore. And this should not take up as much width as it currently does. So we have a column or a grid issue. Our assignments, okay, this is now on the page. I can create a new assignment. That now displays the modal. And again, it's like, it's not 100% by any stretch. I can see lots of little issues.

And again, it's like, it's not 100% by any stretch. I can see lots of little issues. And then at the same time, the general structure is there, which is so cool. So for example, let's see if I can assign Jeremy his own course. So I can see for this course, it has been assigned to Jeremy. Yeah, so definitely we need, if I zoom back in, we need to make a number of tweaks, but it's a good first start.

but it's a good first start.