Give code demos & overviews

Hi everyone. My name is Tru. I'm a developer advocate Loom, and I wanted to just make a quick Loom to kind of demo how I would do a code demo using Loom.

So here I would just start right now. So hello. Here we have the card page itself. And what I added was this feature to invite people to the cards.

If you click on add friends here, it pops up this modal that says share on the bottom, we have two tabs, you have members and then invites.

And so what you do is you and you click on create invite. It creates this new URL, and then it generates, it sets the invite here as well on this list.

And so this is just a random URL that you can go to as a user and yet creates an invite in their database.

So now, if we hop over to the code here, is that a react component for the invite card? As you can see here, the create invite that gets called is using CRPC.

And so basically I'm calling this invite and then on success, I'm just refreshing the page. So it just refreshes the cache so that it shows the invite suite.

And so if you go down here, you can basically see right here when we click on this button, it creates the link and then we can grab the actual code and display that.

So yeah, on click, we mutate, we pass and the card ID that comes in through the router, which is this URL up here and sweet.

And then we generate a link based on the data that we returned from that. So now, if we hop over to the card here, you can go and see this mutation invite that's written out.

And so the input is a card ID. We use <inaudible> to do the input validation for this. So that's Zod and our resolve is basically grabbing that card ID seeing if there's a card that exists with that ID and we're going to reject on that found.

And if we do have that, basically we're going to create a card invite and we're going to return this. So this would return that code, that displays.

So, yeah, hopefully that was a good, thank you so much.