Mission: Virtual Events Platform

Speaker 0: Hi.

Speaker 1: Welcome back to another episode of 100 apps. 100 hours where we try to build your suggestions or some of your favorite apps in 1 hour or less using Directus or publicly fail, die on the vine trying to build something. If you're new to the show, there are only 2 rules. The first rule is we have 60 minutes to plan and build, no more, no less. The second rule is the anti rule.

Use whatever you have at your disposal. So then the brakes. Let's dive into today's episode. Right? We're gonna be building an events platform, a virtual events platform.

Now that sounds to me very very vague, could mean a lot of things to a lot of different folks. But, what kind of products are we talking about? So Zoom comes to mind as far as, like, registering a meeting and performing that meeting. You know, maybe you've got some interactivity like a chat, some registration. You know, you've seen this beautiful, beautiful, beautiful registration page before, I'm I'm sure.

Not knocking you Zoom, but, like, with all the engineers that you guys have, why is this the best that we get for a registration page? I don't like it. Other softwares that I've looked at, like, DemoHop is an interesting one that, you know, has, like, a science fair where each there's a bunch of different booths, some of the other ones, like, Livestorm. There's a ton of these different webinar platforms every way that you slice it. But what I've discovered and and just in my own experience with these over the years, it's nice to have your own.

So that's what we're gonna be building today. We're gonna be building our own events platform. Let's run through it. We'll start the clock, pull up 60 minutes, and away we go. Okay.

So, I am in FigJam here. Let's just kind of mock out our functionality that we like or what we're looking to see out of this particular app. So, as far as our functionality, this is a nice serif font. Maybe we underline that as well. Great.

Alright. So what do we wanna do? We wanted to set up we can't have all of it underlined. That's not cool. Set up an event.

You know, allow registrations. You know, have a public landing page, registration page. What else do we want? We wanna have chat during the event. Maybe we wanna have different rooms for the event.

You know? You think a virtual event, it could just be just, hey. It's a workshop. It's a webinar.

Speaker 0: Could also be

Speaker 1: like a week long leap week like we do here at Directus. So maybe we have rooms for that. This this seems like I'm getting way in over my head, so we'll stop there. And then let's let's kinda just flesh out our data model for this a bit. So in my mind, what are we gonna have?

We're gonna have events. K. And we got that nice purple color. Maybe we'll make this a little bit bigger so we could see it. So we've got events and then we're gonna have, users or attendees.

You know, that's gonna be our Directus underscore users collection. We'll just pick that up. Directus gives us that out of the box. No reason not to use it. Amazing.

And then I would imagine there's a junction table here, right, where we have could have multiple events. So these will be, like, registrations, maybe. Naming stuff is always the hardest part of development. So we got registrations, draw some arrows, just connect these, connect these in your mind as well. Great.

And then what else? You know, if we jive with the rooms, you know, we could have rooms as well. Right? Each room has a different topic, some schedule, etcetera. If we think of, like, our events, they're gonna have a date, start date, duration, or maybe an end date,

Speaker 0: title, description.

Speaker 1: What else do we have? Registrations, obviously. Probably an image. Schedule, potentially. Cool.

Alright. Getting too carried away. Anyway, let's actually start building something. Right? This feels just roughly what we're looking for.

So let's dive into it. Right? What have I got set up for this? Just gonna close all these other things. I have a Directus instance.

I've got a Nuxt 3 application, just a starter application set up. It's got a login and register function. I don't even think the register actually works on this thing, but that's what we're working with. Let's go ahead and get logged in to

Speaker 0: our Directus instance. What

Speaker 1: did I set the password to? I think it's just password. Real secure. Alright. So we've got a blank instance.

I've got my FigJam over here on the left. Got Directus on the right, a 125% zoomed in, and let's just dive in. Right? Our first collection, we're going to start here with our events and we'll create a new collection for that. Let's give it a UUID, When it was created, when it was updated, those are all great.

Let's do status as well for like published events, draft events, completed events. Let's just take a look at that. Right? So we have published, we have draft, we have archived. I could go in and flesh these out further if I wanted to or we could just leave it at that.

Maybe draft is the default. That's good. Solid. Alright. So here, we're gonna have a name for the event or a title.

The event title, that's just gonna be a string. A description of this, we want to be the anti zoom here, so we're gonna make this a text field using the WYSIWYG interface for Directus. We're going to call it description. That's our key. And I could adjust our toolbar if I wanted to.

Maybe I want to add undo and redo. I'm not a big fan of underline, so I'll just remove that. If I need to, I can dive into advanced field creation mode, and specifically with the WYSIWYG editor, you can you've got some formatting options here and options overrides that you can pass to the tiny MCE instance if you need to. Like, you know, maybe you have a special class for buttons or something like that that you want to display inside that WYSIWYG editor. Alright.

Let's add an image for this. So just a single image. You know, we could potentially have, you know, multiple images, but we'll just keep it simple. That's what we're going to show on a card. As I'm imagining this, on the front end, it's It's just like a running list of events or maybe a grid of cards for the events.

When you get inside the event, you've got to register. Then once you register, maybe you can see the schedule for the event. Cool. So as far as something like a schedule, right, how should we set this up? If I'm not really sure, like, one of the things that I do a lot, I'm not really sure what this is gonna look like immediately.

Instead of creating another table, I may use something like the repeater, which is basically a JSON type field. That's what it's going to save as our, inside our SQL database. But let's just call it schedule, and then I could go within this and edit fields to repeat, like a set of fields. So, I don't know. I like a speaker.

It'll probably be something else. Let's just say the name or label. Okay. We'll do string. That requires a value.

What's the name of this thing? And the interface would be an input and then we could do something like time, date, time, time. Start time, Start time. Sounds great. That's what we'll roll with.

Let's make that full width and then we'll use the timestamp format. We'll require value. Maybe we don't require value. May not need to pick a time. Maybe we're just showing scheduling order.

When does this thing start? Cool. Alright. Sweet. So now we have some events or at least the the start of something for events.

Let's go in and go back to the data model settings. We're just gonna do registrations and we'll do, like, a date created, user created. Do we even I don't even think we need this. Status. Do we have a status for the registration?

Maybe it's canceled or something like that. I'm reading too much into it. Right? So here's the date created. Maybe I wanna show this, so I'll click the drop down, show that field.

Maybe we make it full width, just in case. And for our registrations, we're gonna start digging into our relationships. Right? So when I think of a registration, we've got the event that that registration belongs to, and we've got the user that made the registration. So those are both gonna be basically many to one relationships.

So we'll go in for the key, we'll add the event, we'll just do events. And for our display template, let's use the title. I can already tell that I forgot to input my start and end date for the event. Amazing. So we'll have to go back and fix that as well, but there's our event.

Let's go ahead and create our relationship to the users. So we'll say the user that's registered or, you know, this could be like the attendee. Again, naming stuff is hard. Cut me some slack. Alright.

So I want to pick the directus underscore users collection. I'm just going to dig into the systems drop down here, or system, choose direct us users. I can get fancy with the display on this. Give them the avatar with a nice little thumbnail. We'll do first name, last name, and behind the scenes, this is just mustache syntax.

So I can edit these raw values if I want, do it that way, or I could just pick from the drop down. That's great. We don't wanna create new users from this. We could potentially select users. Great.

Okay. So that's our basic data model. Why do we have event? Some type of bug. Alright.

Regardless, we have events, we have registrations. Let's go in and add our start time for this. How could I forget? So in this case, we wanna save the time zone value, so we're gonna use time stamp. This could be the start date.

Maybe we have an end date for this or, you know, potentially a duration. I guess you could do either or or both. You know, you could potentially even use flows to calculate that if you wanted to. But this is good. Let's add some icons just to fancy it up a little bit.

My friend Kevin on the team here will be sweating if you watch me add these icons, but, there's always room for design. Cool. Alright. So we got events. Let's create our first event.

Right? What are we gonna call this? Let's call it Leap Week number 2 1000. Leap Week 2 1000. We are taking a huge leap forward for Directus.

Join us as we take a huge leap forward for Directus. Lots of cool stuff. Let's add some formatting to this as well. You know, thing 1, thing 2, thing 3. Cool.

Alright. And then let's add an image for this. Right? So let's just search Directus Leap Week and see if we can grab, do we have any images? Yeah, we got a couple laying around.

Cool. So we'll save this image. Is that right? Hope that's the right image. We'll just upload that.

Everything announced at our 1st Leap Week. And let's set a start date for this. Let's say May 15th is a good date. Maybe this runs 2, 3 days. Yeah.

Great. So for our schedule, we've got workshop with Bryant. That is the I forget what day we did this now. 17th. Oh, that's it.

May 17th. Not April 17th, Brent. Alright. Let's say that is at 3. Great.

Cool. So I'm gonna fill out the schedule workshop with Kevin. Go for 15th at, at 16th at 1 PM. Great. Alright.

So now we've got our event. Maybe let's just drag this out a little bit, move this around. Okay. One of the other things that I forgot here is probably like a slug. Right?

I want a nice URL on the front end. So we'll go back into events, we'll just create a new field for it, we're going to use the input, call it slug. The other thing that I'm going to do is go in and make this URL safe, so we could slugify this thing. Now one of the other cool things with the addition of the marketplace, let's look for a slug, Permalink interface to enter URL slugs. Is this what we're looking for?

No. WP slug interface. Yeah. This is cool. Alright.

Let's try this out. We'll hit refresh, install this extension. I didn't have this on the first season of 100 apps, 100 hours, But now I can go into our interface and we can choose the slug interface. And our template is going to come from the title and we'll auto generate on create. Let's try that and see what we've got.

We shrink the title and the slug. Cool. Alright. So now we got a couple settings. We can hit auto generate.

Generates this nice slug, and it looks a lot like the old days of WordPress. I mean WordPress is still around, obviously, but this is this is nice, I like it. Alright. So we've got events, we've got registrations. What do we do next, right?

We're gonna look at access control. So this is our settings of who has access to what inside Directus. There's 2 default roles, public and administrator. Let's make the public roles, we want to be able to view the events, We don't want anybody to edit events. And then, for as far as registrations, maybe we want to be able to create registrations and then maybe just read, you know what?

Let's give full access to that. And, that should be maybe what we want, enough to play around with. Right? So now what are we going to do? Right?

Let's dive into the front end of this application. Alright. So I'm going to pull this up. Again, I've just got a a Nuxt application here, and let's flesh out a couple of routes. Index dot view.

We can make this just a list of our events. Alright. So we're gonna go in. I've got Directus configured as a Nuxt plugin here. It's just got some authentication in it.

We've got real time in case we ever needed it. And then we've just got the REST client. That's the way I prefer it. And we just provide that to the Nuxt application. So we'll call that up like this, const directives equals use Nuxt app, and in this case, we're probably gonna do, like, read items as well.

So we'll grab that from import items from the atdirectus SDK. And, alright, what's next? Right. So we're gonna do some data. We'll use await, use async data, and we'll do return directus dot request read items.

And we're reading from the, what, events collection. And then I have a, query for different parameters. Right? We wanna show maybe we only wanna show published events, right, so I could do this. We'll just say status equals published.

Thank you, GitHub Copilot. Let's see what that gets us. Directors. Cool. Maybe we scrap all of this.

Would do we even need this to be flexed? Probably not. Alright. Let's see what we got. Data.

Just wrap this in like a pre tag. See if we get any actual data. Right. So we've set up this filter. We're not getting any data because I'm assuming we did not publish this event.

So if I go in and publish this, let's see what we have now. Okay. Cool. So we have our event information. What can we do with this, right?

So I do also have the, like, Nuxt UI library built into this. So if you just go to ui.nuxt, using that, it's got, you know, some components already built in for buttons and cards and things like that. Cool. So without getting too fancy on the UI, let's just mock something up now that we can see we've got some actual data. Right?

We got a diff. We add some padding. Y 12p y 6. We add a, do we even need an h one? Let's call it h 2.

This will be font bold. Text, let's make the text large. And let's make it mono, font mono. Alright. So will be events.

See what we got there. There's our events. And now let's do a grid. Right? So we'll just do a div to wrap this.

Just grid, maybe grid calls to like a break point, maybe we set the gap to 8, and then we're gonna do a v 4. Right? So, for our events, let's just use this card. I think there's a card component in here. I feel like a nice card component is ucard.

We've got, like, a header and a footer, or we could just throw it in the middle. So let's do that. Right. V 4. We're gonna do events and data.

You know? And, usually, I like to destructure those.

Speaker 0: Yeah. Yeah. Maybe we call it events.

Speaker 1: And for the key here, we'll use event ID. That way, we don't have to, use, like, an index or something like that, and then we'll actually do this. Alright. So is there actual I think there's, like, a text component here, so let's just do, like, an h three. Maybe we just take the auto completion here from, GitHub Copilot.

We'll do a little Nuxt image to optimize these images. Works very well with Directus. There's a provider for it. Then we've got the event dot image. We use the event title.

That seems pretty good. Let's see what we come up with here. Sweet. Except for our description. Right?

This kind of sucks because it is not what we want. So in this case, we'll do div. Let's do v h t m l event dot description, and remove that. Great. It has no formatting.

Maybe we've got, do I have to tell when? We got pros class. Yeah. There we go. Alright.

So we've got that, and let's add a link for this. Right? Maybe we add a little spacing here, n t 4. Maybe we make that add a little spacing here. MT2, MT8.

It's great. Cool. So now we've got an event looking really nice. You know, I could duplicate this event if I wanted to. Let's just see what this looks like with a couple of more events.

We're going to call this Leap Week 3000. Flush this out. And what I'm going to do here, we're just going to open this image up. I'm going to get really fancy on this, guys. And we'll just mark this up.

Scroll this out. 3000. Oh, so fancy. Alright. For Leap Week 3,000, we're going to close this out, upload a new photo, we can see that's Leap Week 3,000.

And then what I'm going to do here is click Save and Copy from the 3 dot menu button and now I've got 2 events. We've got Leap Week 2000, Leap Week 3000. There we go. Amazing. Okay.

Alright. So now we need a route for our actual event. Right? So let's set this up. Let's actually add a folder for it just in case we have a couple of other routes within that.

And then for our events, we're gonna have a slug dot view. So that's just gonna be a dynamic route. We'll view I think it's init. View init. What does that give me?

That's not the syntax that I like. It'll do. Trying to make it fancy. I need to get my snippets set back up. I had to scrap Versus code.

Lost all my snippets. Alright. So we got a slug. We're gonna use the route here. So we've got route equals use routes.

Cool. And then, on the individual page, right, we want to call the specific data. And, you know, maybe we don't even need this full description on our index page, so we could, you know, potentially leave that off. Maybe we just make it the event start date, but we may wanna use that in here. And let's use just, like, a date function.

I think it's format from date f n's. Formats

Speaker 0: oh,

Speaker 1: not currency. I'm gonna do format. What we got? DDD, month month, DD. Where does that get us?

Doesn't get you anywhere because it breaks it. Forgot the year year. I guess it's all lowercase. And then okay. Yeah.

Still still got a ways to go memory wise. So date f and s, just a handy library. We got format. What's the date? What are we looking for?

Like, month is gonna be m m m. Like that one. So we'll do m m m. And what if we do, like, the ordinal of the dates, day of the month,

Speaker 0: d o?

Speaker 1: That's what we want. Now we're looking nice. Okay. And then we wanna do the time. Right?

So maybe we show the time. Local day of the week, AM PM. What's this gonna

Speaker 0: be? H. What minute? M

Speaker 1: m m. And then we've got AM, PM, AAA. Wasting too much time on this. Okay. Alright.

So we got that. Let's go in and just wrap this card in a NuxLink, or at least the content of the card. We'll do 2. And let's make this dynamic. That'll be /events/ event.slug.

Uh-oh. Oh, forgot to close that. Cool. Alright. So now we've got the links set up, so we can click on these and and move to the route.

We don't really have anything inside our route though. Right? So I could take this function here, just copy that in, and here we're still going to be reading items. Right? I'm going to call this event, in addition to status.

I guess we can set this up where if you call it directly, even if it's a draft, maybe you wanna see it. It. So let's just do this. We'll say slug equals route dot params dot slug. That should get us the event that we want.

And then, the actual event here, we're gonna do, like, a transform function. The nice little part that's baked into the use async data call, that composable inside Nuxt, where basically this is gonna return an array. I could transform this and just pick up the first item of this array. And now if we do this, just do pre class. Again, I always like to do this just to see what data I'm getting back.

And now we've got just the specific data object for this item. Alright. What's next? Right? We're gonna dive into building this actual page.

Right? So let's give it a nice h one tag. We've got font bold, font mono, text let's make this giant. We're gonna do the event dot title. Okay.

Leap week 3,000. What else do we have? If I dig into the clipboard, I've got that event description. We can make this pros large. We wrap that.

Let's move down. We'll do another div. Throw this into an image, event

Speaker 0: dot image,

Speaker 1: class w 96. Where's our actual image at? Okay. There's our image. We could flex these 2, add a little bit of padding.

I mean, this is not gonna win any design awards, but, hey, it'll be alright. We'll just take these items from the first one. Let's put this below. Do we have our dates? Oh, gotta actually import that function, don't we?

Import format from datefns functions, I guess. Alright. So we got our date. Add a little margin to the top. Looking great.

And then what if we wanted to show that schedule? Right? So, maybe we drop down over here on the left. We have a list. And within the list, take a little GitHub completion.

That's not really what we're looking for. It's gonna be the item inside the event dot schedule. For the key, we used you the item dot label. And then we have yeah. I was wasting more time using the GitHub suggestions.

Item dot label. Item. We'll just steal this format, and can we do this as well? Dash hmmaa. What does that give us?

Does that get us where we want? Okay. So now we can see the schedule. We can drop a little schedule class. List.

List inside

Speaker 0: list disk. I guess,

Speaker 1: is that the

Speaker 0: list item? Why are we why does that

Speaker 1: look weird? Not sure. Not gonna bother with it. Let's do font bold, font mono, empty 8. Okay.

Cool. What else we got? So we got the schedule right. Good. We got a page.

We could go back to our events. Yeah. Maybe we add a link for that up here somewhere in the top. Next link to equals slash slash I think it's

Speaker 0: just slash.

Speaker 1: Back to main list of events. Alright. Cool. We got all this going on, we could go into Leap Week 3000, we could go to Leap Week 2000. How are we doing on time?

We are cruising on time. Alright, so how do we set up registration? Let's go in and what we're going to

Speaker 0: do, we're going to need to

Speaker 1: basically authenticate the user first. So we've got to have a user to register. And I am going to cheat here and use, like, a SSO, like, register with GitHub. I've used this in a past project. So I've just got some code over here.

We're gonna go in and inside my env or my Docker Compose file, I would set this up. I'm missing the client secret and client ID from GitHub, so go inside my GitHub account. We're gonna go to developers, we'll go to applications, is it authorize no. Developer settings, OAuth apps, we're going to create a new OAuth app. We'll call it Events Platform.

Super secret. The homepage URL will be HTTPS. We'll just use Directus. Do we need we need this callback. And just from past experience, the structure for this is gonna be my directus instance slash auth /login/provider.

So we're using GitHub, that's gonna be the provider. We're gonna use that callback. Great. And then I can get my client ID. I can get my client secret.

We'll just have to use a password, log in, get the secret, they'll steal my secrets, bro. Okay. And then the last piece of the puzzle here is we need a default role for that, for that specific user. So what we're gonna do, we'll go into Directus. Let's create a new role for attendee.

And we're not going to give them app access, we're just going to save it. I'm going to pick up the actual ID for this role, I can see it over here. That's the primary key. We'll paste that in there. I'm going to save that, and then I'm going to stop this container, Docker Compose up one more time, and the effect I should get if I load this again, now I can see this login with GitHub function.

So I could actually log in with GitHub, and let's see. Oh, yeah. I'd have to actually do my username. Maybe we swap this out. Alright.

We get a local host, 8055. Log in. Admin, example, password. Alright. And then I log out here.

We could test this out. But I could also do this on the front end as well. Right? So let's go back to our page. Alright.

So I'm gonna stick a big registration button over here somewhere, and I think I've got one in register. Is it the register form or the login form? Do I have it? Yeah. There we go.

I got this button that I've used previously. We're gonna go to our event page. We'll save this. Uncomment this button. I don't really need the divider label.

Alright. Signing with GitHub to register. Cool. And here you can see I've got a redirect, just basically to a different page. We're going to make this size excel, giant button, just add a class to it, give it a little more padding.

Duplicate Attribute. Oh, MT 12. We don't want to duplicate that class. Alright. So what is this going to do?

This should ask me to log in once accessed to my GitHub account. We authorize, and now I've got, like, the index page. So if I go here, if I actually if I signed in, right, probably getting some errors here because we did not give permissions to those specific accounts or that specific role. Right? So for our attendee role, we want them to view all the events, we want them to create registrations, maybe they can view the registrations where the user equals current underscore user.

Alright. We're gonna have to run like hell here. Apologies for the curse words. Right? So okay.

If you I look at my Nuxt state. I've got a use state composable that's actually storing our user data. So I should be able to see that user data. I've got the ID of the user. Do I have any other information about it?

Maybe that's really all I need. Right? So let's try this. We'll do const user equals use state, user. Will that give us access to the user?

And if we have a user, we can hide this button And maybe if if no user. Okay. And then maybe we add another button. Register. And on this one, we're gonna add a click handler.

It's gonna be register for event. Okay. How's that looking? V f user. Cool.

And now we need a function for that. Right? This is gonna be an async function because we're gonna call directus. We are going to import, we need the create item. Okay.

Async function, register for events. We're gonna call that. K. We'll do a try. Await direct us request registrations event dot ID.

That's gonna be an actual reactive value, so we'll just add on that. We can add that around the user too just to be safe. And cool. What else did we do? Response.

You know, I could just console log this response just to verify. Alright. So let's take a look. If I clear out my network request, we hit register, We've got registrations. Cool.

Great. So now we're registered for this event. If I open my Directus Instance back up where are you, mister Directus Instance? We have registered for this event. I could see this specific user here.

Maybe I wanted to send an email for this. Let's see how we're doing on time. Roughly 20 minutes remaining. Oh, we're cruising. So let's send an email event for the registrations.

Send registration email. Registration email. Great. We'll go in. Event hook, so anytime an event happens, in this case we want the action, so after this action happens, we're not gonna block the thread.

Anytime the

Speaker 0: new registration

Speaker 1: It's great. Let's fetch the actual data. Right? So we're going to read the let's just call it get registration. Find registration, whatever you want to call it.

From the trigger, we're gonna use full access and collection here. It's gonna be registrations. And basically, what we're going to do here, I'm going to drill through the related fields. So we're gonna do this. We're gonna get all the root level fields of the registration.

I don't

Speaker 0: really need to do that, but,

Speaker 1: we've got the event. I'm gonna do dot dollar symbol or dot asterisk. I'm sorry. And then the user, we're gonna get the user details. User dot k.

Savvy. Am I forgetting? Oh, Should only be using quotation marks. Alright. Okay.

So that should give us the fields for the registration and should give us our related data. And now we're gonna actually send this email out. So we'll send the email. Oh, actually, let's back up. We'll save that.

I do need the key for this. So I need to figure out what IDs we have. That's gonna be dollar sign trigger dot key. I think it's just gonna be trigger dot key. We're using that dollar sign as a special operator just to access the actual trigger data.

That's the only operation though that we need to append or prepend that dollar sign to to actually access that data. Alright, so we've got the get registration. So this is what our email is gonna be. It's gonna be get underscore registration dot user.email. That's what we'll save that to.

You are registered for git_registration.event.title. I think that's what it is. And what are we gonna do? Here's the URL to access the event. Alright.

And then we'll say link, and then we're gonna add the link for this. And for our link, we're gonna have what? HTTP local host 3000/events /getregistration.event.slug. Okay. Alright.

So we've got this. Let's hit save. We save. And now we cross our fingers. Right?

I'm gonna go back. We probably need to get our registrations for each user, but I'm just gonna go in and register. We'll see if this flow actually ran. So I can see the flow here. Did we get anything wrong?

That looks really nice. Let's check my email address. Boom, there's our email. And if I click the link, boom, there's our page. Right?

Amazing. Alright, so, what do we want to do? We probably need to check registration, but, you know, what happens if they're registered, the time is starting, we want to show this specific event. Alright. So one of the tools that I've used in the past, is called Whereby.

They have this nice embedded functionality where you can create a video call or a webinar experience on your own site. So that's huge, especially for folks like me that that want to build their own tools that are very design oriented. I refer to myself as a recovering designer. We're gonna go in. I could create a room with no code, but the more interesting bit here is creating this via the API.

So let's take a look at how we do this really quickly. We want to embed Whereby into our app. They have a web component for this, but we have to generate the the room first. Right? So here is create a transient room.

I don't know what a transient room means, but, bedding I I guess that's what we want is a transient room. Create some transient room that is available between creation and an hour after the given end date. Alright. So here's the post request, here's the structure of this. We probably need to get an API key to do this as well.

So let's go into my Whereby application. We'll go to developer guide. No. Go to settings. Members, profiles.

Where where is my API key? Configure. Generate an API key. Okay. Event platform.

Okay. There's our API key. We close. We've got that. Alright.

So let's change up our data model just a little bit where we're gonna add the event. So for our event, we've got a Whereby Room. Actually, let's go back in and we'll just set this up. Let's add our rooms to this. Right?

Room. Alright. Take created. Just add all of this. Fancy, fancy.

Alright. Each room is gonna be attached to an event, so we'll have a mini to 1 on the events collection or to the events collection. And if I go into advanced field creation mode, I'm going to go in and add the reverse. Right? So on the events collection, we're adding a rooms field that will have an array of the rooms.

Cool. Alright. So we got events, and then we're just gonna have, what, a whereby room URL. Alright. Let's see if we can get this done in time.

We are crunching for time. Alright. Okay. So now we'll say anytime we create a room, let's create a Whereby Room. Create Whereby Room.

So anytime we create a new room within an event, we're gonna trigger a webhook request. So Action Non blocking, Items Create, Rooms, and we're going to call the API for Whereby. Whereby. We're going to I think it's a post request. Right?

The header, we're gonna be authorization. Bear. Might include that token that I had. Alright. So where'd we go?

Create meeting. API

Speaker 0: meetings,

Speaker 1: post request, Content type, I'll add that header. Content type, application, JSON. Amazing. We'll go in. The end date is what we need.

End date is the only thing that is actually required. So we'll do end date. Just copy what they have here. I think I missed 1. 202411.

I'm just gonna hard code this for now. We'll say 425. Push it a couple weeks out. So the room mode is probably something we're gonna set as well, just because we want it to be a large room. Room mode.

Group. Okay. And then we've got our request body. That should give us what we want. And then the response is gonna be a room URL.

Alright. So then we're going to update. Oh, I had it right. We'll update update room. K.

We got rooms. We got from the let's do full access, and we'll say, what's it gonna be? Trigger dot payload trigger dot key, actually. Should be. Alright.

And then the payload what did I call this? Whereby room URL. K. And then we'll populate that data, whereby dot data. What's gonna come back from this?

It'll say room URL. Cool. Let's run it and see. See what we got. So we'll go to this event, Leap Week 2000.

We'll create a new room. Maybe we need a title for this room as well. Let's add that. Title. Alright.

So we add a new room under Leap Week 2000. Let's add a new room. This is a test room for Whereby. And we had saved we saved this. Did it update?

No. It didn't. There's something going on. Create whereby room. What did we get?

Bad request. Why did we get a bad request? Whereby body, end date room mode. Is there something else that we're missing? Content body dot JSON dot stringify.

Room mode

Speaker 0: equals group. Room URL.

Speaker 1: Whereby embedded? Where is this? Configurable room pages. Directs plus. Where's this developer guide?

Embedding whereby in an application. The web component is included in our SDK. I'm gonna man, we're just gonna cheat. It's not cheating. Right?

We'll just create a room. This is gonna be a large room. No cloud recording. We're not gonna record this. We're not gonna do any automatic streaming.

We'll set this up for the end of April. Room prefix, Leap Week 2,000. Create the room. Alright. There's a participant link for the room.

Yeah. We could go in and customize this room, but, hey, we're running short on time. Alright. So now we go back. How do we where's the embed?

Alright. We got this web component. We are going to install. Alright. So we go to node, pmpm@wherebybrowser.

Ppmi@wherebybrowser. We're cutting this extremely extremely close. We'll wait for that to install. Okay. PMPM dev.

Alright. So we're gonna go back to our events. We'll do rooms, slug. No. This will be room ID.

That's what we'll roll with. Room dot ID. Just gonna paste basically all of this. Right? Alright.

We'll sort this out. We're gonna request the room. We're gonna actually read an item because we're gonna have the ID. Read item. And then it should be the route dot params.id.

I think that's gonna give us what we want. We don't need to transform that. The room data, And then we're gonna need to import this as well. So we got this imported. Read room.

Direct to site request. Alright. Let's see if we can actually get this working in time. Proom.title. Nothing fancy.

And then we have this whereby embed, and we can make this pull in. We've got room dot whereby room URL. Is this actually gonna get us done? And then within the event, we actually need to list those rooms. So class l

Speaker 0: I v four

Speaker 1: i.roominevent.roomskey equals room dot ID. Okay. Okay. Hit me. Where we at time wise?

We're we got, like, 3 minutes left. Let's see if we can actually get a list of the rooms. Where's the rooms? Where are the rooms? We did not set this up.

We need to view all the rooms. Do we actually see the room? Where did I put that room? Where is it? What event is it under?

Leap week 2,000? It's under leap week 2,000. Why are we not seeing it? Why are we not seeing you, mister rooms? Slug.

Event. We don't see the rooms. Okay. Alright then. Again, we'll

Speaker 0: just improvise. Rooms,

Speaker 1: rooms slash. Not the right route. Events slash rooms. Document is not defined, it's, client only, isn't it? Whereby room?

Maybe we wrap this in client only. Is that gonna fix it? Oh, no. What is it? Can you do I think you could do client only pages.

Let's see what we got. Page not found. Pnpm dev rooms dot ID. Come on, man. We can do this.

We can do this. Are we gonna get it? I don't think we're gonna get it. Page not found. Why are we not finding the room?

What am I doing wrong? Rooms. Duh. There it is. Is that right?

No. Directus dot request dot readitem rooms, route dot params dot ID. Why are we not getting the rooms? What is our request coming back from? Direct to snow match found.

Events rooms. We are running out of time. We don't have time for this. Document is not defined. Okay.

So that was working correctly. We're just not finding the room. Return request. Read items rooms.route.params.id. Should be events slash rooms dotid.

Boom. We ran out of time. Not sure exactly where things have went wrong here. Things happen sometimes. The page

Speaker 0: not found. We are not

Speaker 1: finding it. Don't know where we went wrong. Route.params.id should be there. It is not. Sometimes you have to admit defeat.

So unfortunately, we have not completed the things that we needed to. Let's take a run at this and and just give a recap. Right? So what did we do? We had set up an event, allow registrations, we had a public landing page, we had room support, but we did not get to the actual event platform.

So this is a pretty neat experience, though. If you wanna check out Whereby, they're really cool for building these things. You can actually, go to this room. Now you can see that I can request permissions from this. And, you know, you can actually serve this inside your application.

Yeah. Super helpful thing. So that is this episode of 100 Apps, 100 Hours. I hope you enjoyed it. What a fun ride.

We'll catch you on the next one.