Data Modeling

Speaker 0: Hey, everyone. I'm Matt here with the Directus Marketing team. I am joined by my friend and confidant for this call, Bryant Gillespie. Bryant, how are you?

Speaker 1: I'm awesome.

Speaker 0: Great. Yeah. I feel like I don't have to introduce you because you're, like, on every show here. But, you know?

Speaker 1: I I appreciate the intro, man. I you know? Like, I it's always nice when people pretend not to do me. My wife does that all the time.

Speaker 0: You're just too famous around these parts. I get it. I get it. But yeah. So Bryant was literally just asking because I roped him in right before this.

What are we doing again, and what is the concept for this show? So as a person on the direct marketing team, 1 of the few here that is actually very, nontechnical, I sit more on the marketing side of things. I just am trying to learn how to become more technical in my role and learning how to use Directus and things like that. So, concept for this show, technically, I'm lost, is gonna be me kinda navigating a lot of these trials and tribulations that it comes with being a nontechnical person that's trying to learn how to actually use technology and code and direct us to the product itself, and I'll be doing so with help from guests like mister Bryant here. We'll be building various things that we actually have to use internally, that we have coming up, and I figured why not delay the timeline and try to build it myself.

So here we are. Bryant, was that a pretty good breakdown of everything?

Speaker 1: III like it. I like the trials and tribulations part of it really got me.

Speaker 0: Yeah. I feel like, I don't know what to expect out of this, but I expect it to be painful. Like, there's a forecast of pain coming. That's about all I know.

Speaker 1: This will be fun if this is your version of 100 apps, 1 100 hours, where there's, like, a a public shaming portion of it, where it's like, oh, hey, like, hey. You start out really overconfident, or at least I do. And then, like, by the end of it, you're either, like, yeah, you do the Tiger Woods thing, or you're like, oh, wow. Really humbled at that point.

Speaker 0: Yeah. I'm gonna try not to turn this into 1 app 100 hours, but we'll see what happens. So

Speaker 1: what's on the dish for today, man?

Speaker 0: So today's episode, I'm gonna give you a lay of the land. So we have just revamped our partner program here at Directus. You know, in the past, we've we've tried to put things together. It's been very, loosey goosey, I think, is the technical term for it. So we've brought on a partner manager, Colton, who's heading that up.

He's put a really awesome program in place. The next step for this and the evolution of it is to create a partner directory on our website. So figured directory, I don't know if you've built 1 of those on a 100 apps, a 100 hours yet, but, director seems like the perfect use case to build a directory directory of some sort. A couple things, and actually, what I'll do is I'll pull up Excalidraw because I know that's what you do. And Oh, yeah.

The way that you do things.

Speaker 1: I'm I'm a, like, FigJam guy just because Oh, you're

Speaker 0: a FigJammer? Yeah.

Speaker 1: Hey. Excel I like Excel draw as well. To each their own.

Speaker 0: FigJam's pretty cool. I have nothing against FigJam. But, okay. So a couple of things. Partner directory.

So it's gotta be accessible for our partners. We want partners to be able to update their own, instance, and put in things like their their part their agency name, main point of contact, where they're located, and, like, upload things like showcase work. So Okay. Obviously that name, point of contact, location,

Speaker 1: and Description, summary. Description slash summary,

Speaker 0: areas of expertise. What are

Speaker 1: you thinking as far as, like, location data?

Speaker 0: Location data. So that's probably what we'll filter on the front end is, you know, I'm thinking of the user experience they land on, like, direct us dot I o slash partners, and then they filter down based on a partner that's, you know, the general location because I like to support local. So, if I was looking for an agency, I would look for someone here in the East Coast of the United States. So I think by country, and then they can just drill down from there. But I would say, like, country top level.

Speaker 1: Okay.

Speaker 0: Areas of expertise is interesting because I'm trying to think of, like I guess it would be like they wanna like, is it, like, a website or is it, like, app development? Or is it more granular than that, do you think? Like, like, actually, like, flows and insights and, like, direct us things like that?

Speaker 1: If for an agency, I would think, like, areas of expertise to me is like, hey. Like, what do we specialize in? Is it, like, web development? Is it mobile app development? Is it, UI, UX?

Is it all of it, I guess? At least that's the way that I see a lot of these things handled. Right? At other companies or or other spots online, I guess.

Speaker 0: That makes sense. That makes sense. Cool. Trying to think of what else. We'll have a showcase area where people can upload upload projects.

Speaker 1: You're probably gonna want a logo. Yes. Logo. And then the I always hesitate to, like, throw, like, pricing, if we've got some, like, freelancers in there, if we've got some, like, freelancers in there, you know, they're, like, stacking them up directly with an agency that has a 100 developers is not is not fair to either 1 of them. Yeah.

Speaker 0: Yeah. I think I have to figure that out. Maybe it's like a pick list with, like like, 0 to not 0. It wouldn't be a agency. But 1 to 9, 10 to 49.

Speaker 1: Oh, he's getting it very granular. I like it.

Speaker 0: Yeah. I'll say 10 to 99, and then a 100 plus. Seems like a pretty good 3 to 3. Small, medium, large. What else do you think?

Actually, this feels like a pretty good, v 1.

Speaker 1: This is a this is a good jumping off point.

Speaker 0: Yes. V 1 is my favorite and not because I'm lazy. It's just because it's good to just get something out there, and also because I'm sort of lazy. So, feels like a good scope of work.

Speaker 1: So I like it.

Speaker 0: First

Speaker 1: steps. I'm I'm just monitoring the environment. That's, I Oh, yeah. Yeah. Yeah.

We we've stepped up the difficulty level for this episode because I've got 3 kiddos downstairs who've been sick all week. Fully expect 1 of them to bust in the office. And so that might make this more interesting.

Speaker 0: You know, that's technically, I'm lost. We roll with

Speaker 1: I that could be could be set for me as well at this point. Like, technically, parental wise, I am lost right now.

Speaker 0: Technically, I am totally lost. Alright. Cool. Alright. So next step, hopping into Directus.

So for anybody that doesn't know, we use Directus internally for basically everything on the marketing side. So our entire website's powered. These are all our pages here. We use it for our docs, for publishing and and maintaining. Also, like, when you leave reviews, we capture that stuff.

We have our direct to stop pizza. That's in here too. This is the main place where we can make changes to all that stuff, the the interactive demo. We capture metrics, and we capture key marketing metrics in here. It's my weekly dashboard that I put together.

So the partner portal is gonna fit nicely in here because it gives us 1 place to access everything, and we'll just limit things with roles and permissions at some point, in this episode and all of this stuff. But yeah. So, Bryant, starting from scratch with this partner directory, where do you suggest we start?

Speaker 1: Where do you well, like, you've already got a, like, start of a data model kind of mapped out in a scale draw. Like Yeah. Why wouldn't we start there?

Speaker 0: I think that is a great place to start. So, again, I'm just completely, doing this as a nontechnical person. I wanna caveat that. I'll probably say it a 100 times in this episode, but I'm, yeah, starting from scratch here. So what I assume, and just correct me if I'm making a mistake here, we're gonna wanna create a data schema, which we will do inside of collections, inside of settings.

Speaker 1: Yeah. We will create a new collection. Now, you get to encounter the hardest part of development, which is naming things.

Speaker 0: Naming conventions or So, hey, like, hey, what

Speaker 1: are we gonna call this new collection? Like, is it gonna be

Speaker 0: Do we call it is it so that's the thing. Is it, like, the high level thing? Could we just call it partner directory and then all of the fields would be within that? Or do we have to get, like

Speaker 1: so I like, typically, like, the way that I name my tables, and this is I say this in every video. It's 1 of my favorite features inside Directus is the ability to, like, translate that. Right? So, usually, when I name tables, it is like a what's the object? And then I I usually end up with, like, a plural.

So it's pages or posts or partners or agency partners or, you know, trying to think on, like, the partner side, we've got agencies, we've also got tech partners. Do those live in the same directory? And they're you know, do they have a lot of the same characteristics as as far as, like, the data or totally different thing?

Speaker 0: It's a great point. So I think at some point, as we start to grow out the tech partner side of things, we'll have kind of the same concept for them, and we'll have, like, integrations pages maybe or, like, you know, something like that. We wouldn't wanna conflate the 2. So maybe it is just agency partners for this because that's what the hyperfocus is on. So are all you think all partners would be considered agencies or if there's any, like

Speaker 1: Again, right? That's the and now you're waiting into developer land where it's like, hey, I I know what I wanna do with this, but what do I name the thing? Because it's gonna confuse somebody later.

Speaker 0: I've been in developer land for 10 minutes, and I'm already not liking it. So I don't know I don't know how you guys do this. But I it let's roll

Speaker 1: with it. And, you know, again, like, within the interface, we can rename it. Now before you move on here, the other thing I want you to do, and this is mostly just out of habit for me, when I'm building all of these, like, direct us plus starter kits. The primary key field, set the type on that to UUID. The type not no.

No. No. No. No. No.

No. No. No. No. Slow down, cowboy.

There you go. Let's go. It's the type 2 generated UUID. Yeah.

Speaker 0: Here. What the hell? I mean, what the heck do any of these mean? This is where I get lost, and I don't wanna turn this into, like, a long,

Speaker 1: like, discussion. So, basically, every table in the database has to have a or every row within a table. Right? So when you're adding this collection, you're creating a table inside the database called agency partners. Every row within that has to have a unique identifier so that the database knows what that is and how to reference it.

I got you. So you can you can basically generate that identifier either, like, a auto incremented integer, which is, like, 1, 2, 3, 4, 5, 6, 7. When you are I I doubt we'll use this for a starter kit. But, when you try to transfer those IDs to a different database, like, you've gotta reset, like, the the increment count on that database. Okay.

Our things get squirrelly. So using a UUID prevents that because it's just a random string of 36 characters.

Speaker 0: Okay. I'm tempted to go big or go home, but I will go give you ID.

Speaker 1: Oh, yes. Now you could also do the manually entered string, but, like, like, I I see people will use that for slug a lot. But the problem there is you can't change that after the fact. So if somebody renames their agency, that primary key would still be the same thing because you can't change that.

Speaker 0: Okay.

Speaker 1: So if it's Matt's agency and then you sell it, it becomes my agency. Like, I'm stuck with Matt's agency.

Speaker 0: Yeah. Should've bought it. Okay. Your UID. That makes sense now.

So, everything will have a automatically generated, identifier that if we decide to pull all the stuff out of Directus at some point, it'll follow it. If we wanna integrate it with something like a tool like clay, when we pull that in, it'll be able to keep everything in rows nice and clean.

Speaker 1: Nice and easy.

Speaker 0: I'm learning. Technically, I'm lost. TIL today. Learning.

Speaker 1: Yeah. There you go.

Speaker 0: Cool. I know there's a lot of things with, optional fields here, but, you know

Speaker 1: Best thing to do is just check them all. You could delete them later if you don't need them. Right? So these are just, like, the helpers within the system.

Speaker 0: Nice. Okay.

Speaker 1: Like, they created whenever you create a new record, it will populate the timestamp for you. Automatic? Same thing. Yep.

Speaker 0: Genius. I created a collection, like, a little while ago before this episode, and I forgot to check that. And I'm, like, oh, crap. It's not generating.

Speaker 1: You could you could do it. It's just easier to check the boxes and then delete it if you don't need it. Alright.

Speaker 0: Beautiful. Alright. So we've got our agency partners data model. Now, next step for me is gonna be to pick a color because I'm in marketing. So I'll just, do this nice little

Speaker 1: Colors and icons, baby. Yep.

Speaker 0: There's a I hate this shirt search. Oh, handshake. I found 1. Nice. Alright.

The search always busts for me, with those icons. Me and icons have a lot of hate.

Speaker 1: I the Google naming team on those. Guys, hit me up. I'd like to make you guys need some help.

Speaker 0: Yeah. But, anyways, next steps. We got our handshake. We got our nice green color. Green is great.

I love Luigi. So we're all there. Good there. Now the next step is gonna be creating those fields that we had mapped out earlier. Correct?

Speaker 1: Yeah, baby. You got it.

Speaker 0: Alright. So, this is 1 of my favorite parts of directors actually because of these nice little visualizations that give you a a clear preview of what you're getting into. Let's see. So input seems like the 1 that's generally used.

Speaker 1: For just like a string of text? Like, what do what what are we starting with? Like, the agency name?

Speaker 0: Yeah. So we're gonna start with name. Actually, you know what I'm gonna do? A little arc magic here. Yeah.

Alright. So we've got our window. Alright. So side by side here. I think the important thing to start with is gonna be, obviously, the name of the agency.

So input, just a string of text, name, unless we have a specific name field here, which I don't think we would because it seems very unique.

Speaker 1: Nope. You got it, boss.

Speaker 0: So question I had here was, should we, in the grand scheme of, like, all of the other fields and collections and things inside of Directus, when I'm naming things, should the naming convention be, like, instead of name, should it be, like, agency underscore name, or does it really matter in the grand scheme of everything else?

Speaker 1: This is the the fun. Yeah. I would probably just call it name because, like, within this, you're not gonna have, like, a lot of related items. Right? Like, you're probably gonna have some projects to showcase, you know.

I guess, in that sense, you could have, like, a partner name and a project name. I only, like, start adding prefixes when it really starts to get confusing. Like, if I've got a bunch of nested relationships that I'm going to be, like, dealing with all that data at once. So, like, the name of a page and, like, the name of a block and, like, the name of a button and stuff like that. Like, at that point, you might wanna, like, start adding prefixes so that you it doesn't get confusing.

Or or, like, if you think of, like, organizations and contacts, you know, that might be organization name and then, like, contact name type of convention.

Speaker 0: Yeah. Maybe I'll because we're gonna have a point of contact in here, so they'll wanna enter their name. So maybe I just I'll I'll just go with agency name here.

Speaker 1: Or it could be partner name.

Speaker 0: Partner name. That's right. Partner name. String, we wanna keep it empty. And go to fill it out.

Obviously, that's gonna have to be required. I don't think any placeholder. If I wanna get fancy, I can add an icon. I'll hold off on that. Is there anything in the advanced field creation mode that I should be aware of?

It doesn't seem like it's that advanced other than, like, maximizing the length of what they'll input.

Speaker 1: Unique?

Speaker 0: I'm not worried about that 1.

Speaker 1: Yeah. So the name is probably not yeah. You're not really concerned about a unique name. The advanced field settings just gives you, like, more control over it. And you can always go back in later, like, after you create this and edit that.

Right? When we get into, like, how you're gonna reference this on the front end. Right? That would probably be, like, the next thing that I would tackle as well as, like, a slug of, like, hey. We we've got this random string of characters, like, in the URL.

We don't wanna use that. We wanna use, like, a slug. So

Speaker 0: Okay.

Speaker 1: That that's where we'll get into advanced.

Speaker 0: And we don't wanna allow a null value.

Speaker 1: Yeah. It it like, required is probably gonna take care of that. Like, that is gonna be on, like, the database side as well. Okay. Like, if you had any existing records in this, I probably wouldn't let you, like, check that or uncheck that box because, you know, like, you might have records that don't have a value for that specific field, like, if that field already existed.

Speaker 0: Right. Okay. Cool.

Speaker 1: Today, I'm in the weeds. Not sure what the acronym is for that 1. But

Speaker 0: I do.

Speaker 1: Yeah. So we're gonna keep editing. Alright. So your next field, I vote for slug. Slug.

That is gonna be a string.

Speaker 0: Having trouble with this.

Speaker 1: You're gonna you're arching yourself. Yeah. Time for a page refresh.

Speaker 0: Page refresh. Save. I lost it. Found it. Okay.

Slug.

Speaker 1: Alright. It's gonna be an input. Okay. Same thing. The key of slug.

Okay. Yeah. Yeah. I would just call it slug. Be fine.

Alright. So now then you have a a go into the Advanced Field Creation Mode.

Speaker 0: Mhmm.

Speaker 1: And we need to make sure this is URL safe. So you are going to go to the interface section, and there is a slugify option.

Speaker 0: And what does that do? Prefix it?

Speaker 1: Basically, like, anytime you try to add a space, it's gonna add a hyphen. Or if you try to use any, like, special characters that aren't allowed in a URL, it's not gonna allow you to input those.

Speaker 0: Nice. Okay. Very cool.

Speaker 1: And then in that case, you also are probably gonna want this to be unique. Right? Because, on the front end, this is gonna be part of the URL, and it's gonna be the unique identifier that we're 1 of the unique identifiers we're using to fetch that data for the agency. So, yeah, you could certainly set it to be required if you want to, or we could have, like, a flow that generates the slug. But on the, the schema page or the schema tab, you set that value to unique.

Speaker 0: Feeling good about it. Alright. Bam. Now question. So we'll have agency name.

We'll have their website. When it comes to adding, like it's just kind of jarring, I think, when you're filling out a form, when it's like these 2 questions and then 3 completely unrelated questions, which in this case would be like, here's about your agency. Oh, tell me about yourself. Let's talk about, like, something else. Is there a good way to maybe split up this?

Like, use, like, maybe add in a header or some sort of field that breaks it up, or is it just, like, best best use case, best scenarios? Just like

Speaker 1: you know, what I like to do in my forms is just make them all, like, half width. So you got, like, this, and then just add as many as you can in a row so that it's really confusing. Love it. No. There there's there's lots of great settings for that.

If you open back up the create field, like, the ones that you're looking for, like, we call them alias fields, which basically, like, it's not really storing any, like, specific data inside the the actual database.

Speaker 0: Right? Mhmm.

Speaker 1: It is just controlling, like, the layout within the form. So those are gonna be under the group section.

Speaker 0: Group. Groups.

Speaker 1: Presentation. So you see there's a couple there. You have, like, presentation wise, there's, like, a divider. You can add some button links. You can add a notice to the form, and you can make that conditional.

But if you wanna group related fields together, you got, like, the group options. So depends on how you want to slice it. Most of the time, I end up using, like, the detail group, which is basically, like, I could throw 35 group or 35 fields in that and hide them all with, like, a collapsible accordion type thing. The accordion is basically 1 field at a time, pops open. So, okay.

Gotcha. Yeah. Most of the time, I end up using detail group.

Speaker 0: Nice. I'm gonna try that. So then I'll call this, contact.

Speaker 1: Yeah. And, usually, like, this is just like an OCD thing for me. What I end up doing is, like, a like, underscore details or group or, like, put, like, a meta prefix underneath it just so, like, I know, like, this field is just for, like, grouping.

Speaker 0: I like it. Point of contact group. So, so we're gonna nest things underneath this group, or is it the once we hit save

Speaker 1: Yeah. Just hit save. Do we can come back.

Speaker 0: Question on this. Would we want it required, or do we require the separate ones? No.

Speaker 1: You don't have to require that 1. I'm not even actually sure what what that would be.

Speaker 0: Feels dangerous.

Speaker 1: That might be a good feature request of, like, hey. We should probably do something within that. Alright. So now, basically, what you got, you've got a container within the form that you can drag fields into. But you gotta create some fields first for the point of contact.

Speaker 0: Great. First name, last name, any like, just 2 separate inputs side by side, I guess.

Speaker 1: I yeah. Are we going to use is there a situation where for your point of contact, you're gonna, like, use the just the first name?

Speaker 0: I would say if we automate emails from Directus when they register their company, we're gonna wanna obviously personalize it, and we don't wanna say, hey, Bryant Gillespie. Thanks for signing up. It'd be much more casual to be like, hey, Bryant. So probably in that case, would it make sense to split up the 2?

Speaker 1: I I would break them up in that case. Now the other consideration here is that you're gonna have a user that logs into this as well. And, like, are you gonna send that email to the user from that agency? Or, like, who the the designated point of contact is?

Speaker 0: I would think whoever the designated point of contact is.

Speaker 1: Okay.

Speaker 0: So, like, as they they will give them ability to add other people under their their agency. And then when we can trigger notifications, like, when, hey, so and so from your team has signed up or maybe we put into delay that's like, hey. You sent an invite. They never signed up. Go, you know, strangle them.

Not that

Speaker 1: Go strangle them. Yeah. I got you. I got you. I I so and, like, POC to me, like, proof of concept, not point of contact.

That's just because I'm building. So I would just call this, like, either, like, contact first name.

Speaker 0: Contact first name.

Speaker 1: Or you could probably I mean, yeah. That's probably fine.

Speaker 0: Cool. Like it. Require. Save. This is the boring part of the show where I just fill in these things.

Nat, you might wanna fast forward this part.

Speaker 1: Get, like, some Benny Hill or something playing in the back. Right. Alright.

Speaker 0: So here's

Speaker 1: a question.

Speaker 0: Let's say I wanna bump these 2 together. So I click here. Obviously, half width. I might be able to figure this 1 out myself, Bryant. I don't think You got

Speaker 1: it, boss. You got it. Alright. So You can Now yeah. Go ahead and add your other field there.

What are you you're gonna have, like, a point of contact email or contact email?

Speaker 0: Point of contact email will be just another input field? Is there any special

Speaker 1: Yeah. There is there's not like, as far as the database is concerned, it's just a string of text. Okay. You could go in and, like, apply some validation to it. You you can use, like, regex.

We'll we'll leave that 1 for another call.

Speaker 0: I've had my time I've served my time in regex. So let's let's say I wanna add a validation. Right? So, validation here, I wanna add, like it has to have an at, obviously, if it's an email. Just a little quick little validation.

I would add a filter contact email. And this is must, like Contains. Yeah. Contains just a at symbol? Yeah.

Speaker 1: It has to contain an at symbol somewhere. Now I didn't like That's The the other, like, fun bit of this, right, is what if they put 2 at symbols. Right? That your validation there would pass. So this is where, like, you could reach for reg x, but, you know, again, that's just we could spend, like, 45 minutes to an hour just like, what is reg x?

Yeah.

Speaker 0: Is this, do you think this is something that can be well, not think, but once I create these fields, are they set in stone? And what I have to, like

Speaker 1: so the only thing that you can't change here is gonna be, like, the keys. So, like, the key of the field that you set on the schema. Like, once you commit this, or that can't go back and change the key of that field because there's a lot of references inside the database.

Speaker 0: Right. Okay.

Speaker 1: Now if I've got database access, I could, but I I wouldn't put that evil on you.

Speaker 0: Yeah. We'll try it without.

Speaker 1: Alright.

Speaker 0: Cool. So that makes sense. I can change that validation later in that case. So it didn't require it. Edit field, required.

So I can go in. Look at that.

Speaker 1: You can do all that. Reach.

Speaker 0: Okay. Cool. So I feel like that's good for the point of contact. The next thing is gonna be location.

Speaker 1: Yeah.

Speaker 0: So for this section, and just because I saw this divider thing, and I'm just gonna add that in there. I'm just gonna save a divider. Location. Now I know we have, like, a map, geospatial fields, things like that. I don't know if it makes sense to have the map as your input for the location.

But if we're doing it by country, it would make sense to do it as a pick list or a drop down. Right?

Speaker 1: Yeah. Or you could just have it as an input as well. It depends on, like, the like, if you wanna normalize it. Right? So So on the

Speaker 0: front end yeah.

Speaker 1: So on the front end

Speaker 0: if we're gonna do it on the front end, like, thinking of the filter ability is it'll be a drop down for them. Like, I'm imagining, like, a bar at the top, and then they can just drop down, list of countries, pick it, and then it'll propagate all the ones that have that. As an input, would that if somebody misspells, if somebody enters the USA as opposed to, like, United States or America, all of those little, like, side use cases cases, it would run into an issue there. We'd have to figure a way to normalize them on the back end.

Speaker 1: Correct. Yeah. It'd be a pain in the ass, basically.

Speaker 0: Technically speaking, that would be a pain in the ass. Thank you, doctor.

Speaker 1: Drop down? You could. You could do a drop down. Like, the the trouble here, right, is you gotta get a list of all the country codes or all the countries that that we have partners in if you're gonna do a drop down. Right?

Because I got it. Like, you you could oh, you've got it. Well, then, yeah, go for it, dude. Is this the same

Speaker 0: or, like, GitHub country list? And there's a plain text list of countries that you can copy and paste, from directly from GitHub.

Speaker 1: Woah. They

Speaker 0: also have it in a JSON format, but with the ISO code. But Alright.

Speaker 1: So, like, underneath the hood, when you are setting up that drop down feel, like, if you wanna click on it, those like, the choices there. So, yeah, if you just call this you might as well just call it country. Right? So we'll give it a key of country. The choices that you've got there, if you go in and you just add 1, right, You've got a text and a value.

Right. So the text is gonna be what's displayed inside the application, and then, like, the value here could either be, like, the same thing or or the probably the way that I would do it would be, like, the the 2 digit country code, like, the ISO standard or whatever that is. I'm not sure what that is for Afghanistan.

Speaker 0: Yeah. I'm gonna go with the easier 1 here.

Speaker 1: Yeah. And I would honestly, it'd probably be, Yeah. I don't know. What's your does your GitHub data have it in, like, all caps or lowercase?

Speaker 0: I will share the screen. Actually, I'll pull it up here. Cool.

Speaker 1: Oh, yeah. They're all uppercase.

Speaker 0: So all uppercase, and then they've got somebody did the due diligence of typing in the things down here in a JSON format. So what do you think is the best way to go about this?

Speaker 1: I would grab the JSON data. You if you got Versus code?

Speaker 0: I do. I do, actually.

Speaker 1: Okay. Alright. And we're gonna make a giant drop down here. Like, the the other thing that we could do, there's a there's an auto complete option where you can call an API, but I don't know I don't have a good country code API right off the the top to get just like the the ISO codes, so it'd be fine. Open up Versus Code.

Speaker 0: Alright. I gotta change my streaming here. Getting me all twisted. Versus Code.

Speaker 1: Alright. So copy that list. Create a new file here. Copy your list of the data from GitHub. Paste the

Speaker 0: JSON list that was created?

Speaker 1: Alright.

Speaker 0: This is a long list.

Speaker 1: Yeah. Let's, alright. It it gets more interesting when you, like, hey. Are you gonna reference this again somewhere else? And then at that point, you might as well add it as a table in the database and reference it that way.

So you could use it in other collections without having to either copy the field or maintain this thing. Alright. So what are you gonna do here? Like, basically, this is not in the correct format for Directus. Right?

We've got an ISO code, and we've got the country. Directus, as far as like your choices for the drop down, is expecting a text and a value. So this what are you gonna do here? You are going to, like, highlight where it says ISO code, and hit command f or you're on a Mac, so it should be command so just pick 1 of those those values. Go over there where it says ISO code.

Just highlight that part.

Speaker 0: Mhmm. 1 second. I think this list might be wrong, actually, because I don't see will the USB enter a different name?

Speaker 1: United States.

Speaker 0: I'm not finding it.

Speaker 1: Do you is it is your search case sensitive?

Speaker 0: Is it? I don't know. No. No results. America only turns up.

Samoa Americana. Yeah. This is wrong. This is the hazard. We're using GitHub.

I'm gonna go ahead and just use this standard list that this person didn't falsify because this 1 looks right, which is just the list of countries, not in a JSON format.

Speaker 1: Okay, boss man. Alright. What do you think? So, alright. This is gonna be the wizardry on the keyboard.

Alright. So select all, command a. Mhmm. Alright. Now hit command right.

Or is it shift command right? No. I I don't know how you got yours set up. Hold shift and do command right.

Speaker 0: Shift command right.

Speaker 1: Okay. Yeah. We don't have you set up right. If you have this list, is it if I select all yeah. It's not we need to get you to split this into lines.

Is it Command P? Do Command P. Is that the Toolbar? Okay. Alright.

Now do a greater than symbol, and search for, like, split into lines. What is it? Split? Hang on. I'll tell you.

I'm trying it now.

Speaker 0: Split join tag.

Speaker 1: Print that lines, join lines, expand line selection.

Speaker 0: Insert line?

Speaker 1: No.

Speaker 0: Insert line below?

Speaker 1: No. It should be, what is the I know the command on mine. Add cursor. Is it add cursor? Endo.

Line. Add cursors to line ends is the name of it.

Speaker 0: Add cursor to line end.

Speaker 1: Yep. Alright. So what that's gonna do. Shift option. Oh, yeah.

Yeah. I've I've got a different command. Alright. So now, you see you got, like, a cursor on all of those. Woah.

It's pretty pretty dope. Right? Alright. So now what you're gonna do, now you should be able to hold command and shift and left. That's gonna select all those individual yeah.

Go left. Alright. Alright. Selected. So now you get them all individually.

Now you're gonna pop the, quotation mark.

Speaker 0: Just put in a quotation mark.

Speaker 1: Yep. Shift quotation. Yeah. I mean, not shift quotation, but just quotation mark. Alright?

Yeah. Now you're gonna do command left. Command left. That'll get you to the start of the line. Now you're gonna add a left code bracket or mustache syntax there.

Left. Yep. Alright. Do, what are we looking for? We're looking for a value.

Mhmm. So you're gonna do quotation mark value. Type type

Speaker 0: in value?

Speaker 1: Yep. This is gonna be proper JSON now.

Speaker 0: Oh, boy. Quotation mark.

Speaker 1: Quotation mark, comma, or no. Not comma. I'm sorry. It's a, colon. There you go.

Alright. Now go to the end of the line.

Speaker 0: Command right. Yep.

Speaker 1: Command right. Yep. Add your What's that? Is your right mustache. And then you are going to add a comma.

Alright. Now, go hit command up. And because this is an array of values, we gotta use the, I don't even know what that's called. Bracket? What is that called?

It's it's not it's it's not the shift key.

Speaker 0: Yep. And then I'll do this.

Speaker 1: At the very bottom, you gotta add another 1.

Speaker 0: And then it's gonna be the closed.

Speaker 1: This is an array of values. There you go. And then on that last 1, what you're gonna do, the very last value there, remove that comma. And now you have a valid JSON array that you can copy that whole thing. The formatting doesn't matter.

Speaker 0: How do I copy? Just kidding.

Speaker 1: It's I can't help you with that.

Speaker 0: This is amazing, by the way. I just learned how to do JSON.

Speaker 1: TIO. Yeah. You you learned a couple things. Right? You learned, hey.

Like, the some of the keyboard shortcuts for Versus Code, especially when you're trying to do reformatting and stuff like this. Super helpful for that.

Speaker 0: I'll never remember him. But, so I'm gonna discard this because this was what we were trying to do earlier. But, am I on the wrong page? On the wrong page.

Speaker 1: So Yeah. Nobody could see what you're doing.

Speaker 0: I didn't mean what we just did. I meant what and yeah. That would've been terrible.

Speaker 1: Yeah. I'm gonna jump through the computer and strangle you at that point.

Speaker 0: Show me all the shortcuts again. Okay. So we've got our JSON copied. Yep. We're using this drop down unless you

Speaker 1: So where it says choices. Mhmm. Paste your JSON. So click where it says choices. Just the header.

There you go. Paste raw value or yeah. You could hit edit raw value and paste it in there.

Speaker 0: Done? Done. Done. Done. Done.

Speaker 1: Except we forgot to add text to all of those, do we?

Speaker 0: Did we? Oh, from the front end. Because it won't show the presentation of it. Right? We forgot.

Speaker 1: Now what do you do?

Speaker 0: Should I restart? I think we're we're really, like, pretty fast. Right? We should be able to do that pretty fast. Or wait.

Can I just take the no?

Speaker 1: You could just copy the values. Yeah. For now, just save it. It should let you save it. Yeah.

And I don't know if it's going to

Speaker 0: throw an error on.

Speaker 1: Yeah. I'm actually not sure how the drop down will behave. It'll let you save it for sure. But I I don't know if when you actually test it out, if it will show that value because it doesn't have the actual text to to do that with. Okay.

We can we can look at it, though. We'll sort that out in a moment. Alright. What's next, man?

Speaker 0: So next.

Speaker 1: Yeah. It's driving me freaking crazy. The OCD part of him, like, the x designer in me. Like, you've you've got the point of contact group. Just drag those contact fields into that.

Because, otherwise, they're not gonna display inside that group or or not be collapsible.

Speaker 0: How's this helping your OCD?

Speaker 1: Gotcha. That's that's why I call myself a recovering designer.

Speaker 0: Gotcha. Gotcha. Okay. Cool. So I think we're in a good spot here.

I'm gonna add this quick, for, like, a description or something like that. Just use, like, a text area probably. Makes sense.

Speaker 1: Yeah.

Speaker 0: Agency description.

Speaker 1: Yeah. So, like, the in the database, it's gonna be stored as, like, text no matter what which you whether you use, like, a WYSIWYG editor or a text area. The difference with the text area is you're not gonna have any, like, rich text formatting. So it depends on if you need that. You know, you could have hey.

This is where you go back to, like, modeling your data of, like, hey. Do we have, like, a short description? Like, if we're showing cards on a page, we probably have, like, a short description. And then maybe on, like, if you click into a partner, you might have, like, a longer section of content or something.

Speaker 0: That's a great point. So, yeah, this is actually gonna be structured as 2 pages. So we'll have the directory, which is this, gonna be the main thing. And then when they click into it, we'll have a separate page that is a little bit more and we'll have the WYSIWYG there. But this will just be like a short description of partner that'll be on the front.

And honestly, like, I would probably limit this to a certain number of characters, setting a softer limit to I don't know. What do you think? 300 characters? What's the old Twitter thing? 250?

Speaker 1: You're asking the wrong guy. 170. Is that was that what it is? 270?

Speaker 0: 280. We'll set that.

Speaker 1: Yeah. Soft limit. So, hey, that soft limit that you just set there, that is only on the the UI. Right? Like, the there's no particular limit there on the the actual database.

Speaker 0: Okay. That's fine. I, no. Actually, it's not fine because they're That's where, like, the building this out in the database. Right?

Speaker 1: No. No. No. It's fine. Yeah.

Hey. Like, because we're interacting through this, this layer, right, this Directus Studio, and through the Directus APIs, it's not a problem. Like, Directus will give us that validation. Great. If I wanted to enter validation.

Speaker 0: Let's say I just want to say in the field itself, by the way, only 280 characters. Placeholder would not be the 1 to do that because they'd have to, like, erase that. Right? Would there be

Speaker 1: a placeholder is basically just like, hey, what do I want? You know, like, a an extra hint for somebody, like, on a

Speaker 0: Maybe a note here. Like

Speaker 1: Yeah. A note is, like, a description below the field basically.

Speaker 0: Let's try that. Great. Feeling good about it. Description, areas of expertise, we'll probably wanna keep this limited to, the ones that we have so we can fill use those as filters as well at some point. We'll do that as a drop down, multiple because you're gonna have multiple special specializations, I guess.

Yay? You and A?

Speaker 1: Yeah. Yeah. I mean

Speaker 0: I see it says JSON here. I always get Or Expertise.

Speaker 1: Yeah. It's a JSON. It's just gonna just the way it's being stored. Like, are we going to are you gonna allow them to filter based on those specializations or no?

Speaker 0: I think at some point, I think it would be country and specialization would be the 2 things that you're gonna that you're gonna be searching for when you land on, like, a directory page.

Speaker 1: Okay. So on that point, like, the the current operation, like, I cannot set I I can't query the data within that individual, like, JSON column. That should be coming in the future. As of right now, we don't have support for

Speaker 0: it. Okay.

Speaker 1: So at that point, then we need to look at a different way to do it, which would probably be, like, adding a database table for it. Or, what you can do do is just change the type to CSV, and that would allow us to get, like, a, hey, does this specialization field contain x? Okay. Because III think that's probably the extent of it. Right?

Like, you're just gonna use it as a criteria for filtering this 1 thing. Probably, it should be fine. We'll do CSV.

Speaker 0: Nice. Okay. So then we'll do website, development. Website. Web

Speaker 1: web development.

Speaker 0: You developers. So cool. Why say long word when short word work better?

Speaker 1: Well, it could be like a web app. Alright. So these are these are the things that go through your mind, like the average developer, like, 100 times a day when you're building a project. If you see, like, a a puzzled look on their face, they're probably trying to figure out what to name the thing that they're trying to create. They know what the they already know what the thing looks like.

It's all going up here, but it like, naming it is like, what

Speaker 0: do we call this? Number 1. The number 1 thing. Okay. Mobile application, mobile app.

Is that fine? Can I shorten application to app? It What about that?

Speaker 1: It is. It's fine, man.

Speaker 0: Alright. If you you being a previous agency owner, you're probably the best 1 to ask for this. What are some other specializations you can think off the top of your head?

Speaker 1: Like UX, UI.

Speaker 0: Should I And you get When I'm doing the value here, do they have to be a specific

Speaker 1: like, option? It it doesn't. Like, it you know, like, technically, it could just be, like, UXUI.

Speaker 0: Like this without an underscore?

Speaker 1: It doesn't have to be. You see me start to sweat, like I'll do doing. Like, what whatever you do, it like, it's just gotta be normalized. Right? Like, you the most important part is, like, whatever convention you decide on, it's the same across the board, so you don't have major issues.

Speaker 0: Okay. How do you feel about the spaces between this?

Speaker 1: That's fine. I like it.

Speaker 0: Alright. Web development, mobile application. I should probably change that to apps. Mobile applications. UXUI.

Speaker 1: Digital transformation? That was that was the 1 that came up. Yeah.

Speaker 0: Digital transformations.

Speaker 1: Yeah. And and, like, technically, like, you could also like, do you get into, like, the specific frameworks here? You know? That's I I don't know. I would say,

Speaker 0: you know, you come in with you need a project. There's only a few there's the way executing the project, you can do it building in a reactor view or whatever, but the actual project itself is what I'm trying to zoom in here on. And I feel like the 4 of these would probably touch most of those because we're, you know, we're not gonna skew into, like, public relations or, like, digital marketing, whatever that means. But,

Speaker 1: yeah, it's like I'm I'm saying, like, hey, would you be, like, a yeah. We're like a a Laravel agency or, like, we are, you know, like a a React agency or, you know, those sorts of things.

Speaker 0: That's another consideration and probably not for this episode, but I would probably add that as another field here of like this these are the things we specialize in React view.

Speaker 1: Yeah. That could be, like, your expertise, I guess.

Speaker 0: I don't know. Yeah. Specialization in expertise. These feel good. I'll, I'll leave them as the for now, for the sake of this episode and update those later.

Let's see. Just exit that.

Speaker 1: I was also a friend to you and and updated your country codes for you as well.

Speaker 0: Oh, thank you. Much appreciated. So for logo, image, or file? What do you think?

Speaker 1: Either 1. So, like, behind the scenes is basically the same. It's just like how you want it to display. So in this case, you probably wanna see, like, a nice image. We'll just call it logo.

Yeah. That's fine. Partner logo. Yeah. So just use the image.

Like, it it files there is gonna create a junction collection. So, like, if you need, like, a gallery, we would use that. But in this case, we just want a single logo to display.

Speaker 0: Nice. Okay. Feels good. We can update this file library route later. We'll have, like, an agency specific folder.

Speaker 1: Yeah. That's what I would do.

Speaker 0: Crop to fit. Anything to be aware of in the advanced field creation for this sort of thing? Like, images or anything?

Speaker 1: If you go into, like, display, like, you could control, like, how you want this to actually display. Right? So you wanna see, like, a tiny image preview, and then you can control, like, how it crops, basically.

Speaker 0: Okay. Cool. Partner logo. And then this last bit is gonna be actually, we'll do size, 2 more fields. So size, numbers, but it'll still be kind of a drop down situation, I'm assuming.

Speaker 1: So is it a is it like a are you storing a number, or is it like a it'll be a string? It'll be a Is it like 1 to 10 or, like, hey, like, we have a 100 or we have 56, we have 7.

Speaker 0: I don't wanna get, like, too specific because I'd rather group it into, like, small, medium, large because at some point, we can filter that on the front end too. Yep. I need the enterprise company. I'm an enterprise company, enterprise agency, yadayada. So drop down

Speaker 1: with Just hit me with the Seinfeld.

Speaker 0: Yeah. Seinfeld references into 2024. Let's go. Agency, partner size. Let's say partner size.

Speaker 1: Yeah. Yeah. I would get, like, team size or something. Right? Like, hey.

That's the the other thing here is, like, do you need to, like, prefix each and every 1 of these fields or or just the ones that, like, could get confusing?

Speaker 0: Now you're making me sweat about naming conventions. I'm not gonna

Speaker 1: It's it's seriously like the hardest part.

Speaker 0: Not today, Satan. I'm gonna leave the the naming confessions away for for now. Let's do 109. That'll be small. For value, here we go.

1 underscore 9? No.

Speaker 1: Just just do 1 to just keep it the same for it.

Speaker 0: What about 5?

Speaker 1: Alright. No. Just keep it the same, like, 1 to 9. Just the exact same thing. Right.

Speaker 0: 19. 10 to 99.

Speaker 1: It it it's just a string of text. It doesn't really matter.

Speaker 0: It's a string of text, yet it's numbers. How's that for some

Speaker 1: Yeah. I get yeah. Confucius wisdom. Confucius. Yep.

Yeah.

Speaker 0: Alright. That feels good. Those are the 3 required. At some point here's a question. Here's a question for you.

Alright. So let's say at some point down the road, I want to have a field that is, if choice is 1 through 9, show small or, like, show another type of text. Is that something that's doable through here?

Speaker 1: Like, what are you gonna show?

Speaker 0: Like, if I wanted to Small,

Speaker 1: like, you are small.

Speaker 0: Like Yeah. Like Yeah. Yeah.

Speaker 1: Like, that feels unfair. Like, yeah, I did. Like, III didn't have a team larger than 9.

Speaker 0: Let's say, I said that.

Speaker 1: Partner program. Hey. You are small.

Speaker 0: You're just like a shrimp. Alright. So instead of that, let's say internally, we wanna have some, like, normalization and, like, it when you're just talking about internally or showing, like, we have, we have 10, 1 through 9 agencies. It's kinda confusing as opposed to, like, we have 10 small agencies or agencies on the small side.

Speaker 1: I so I mean, you could you could, like, for the values, like, if you really wanted small, you could. But, like, you know, my question to you would be, like, what does small mean? Right? So, like like, I I think what you've got here is fine. You might you say, like, 1 to 9 employees or something.

You know? But, like, if you wanted to, like, do something based on this data, it it depends on where you're doing it. Right? If I'm doing it on the front end, like, I could just add that to my front end logic. Like, hey.

If this is a small agency or if the value is 1 to 9, we show a badge that says, hey. This is a freelancer, or this is a small agency, or boutique, or something like that. You know, that always sounds nicer than small boutique. Bespoke.

Speaker 0: Yeah. Boutique. It's not the size of the dog, Bryant. It's the fight in the dog.

Speaker 1: There you go. Yeah. So you can certainly do something like that. Or if you wanted to, like, gather some additional information, like, if if they were, like, a a larger company, if you needed, like, some type of like, hey. We need a a VAT number or something.

You can set up conditional fields for that as well if you need to.

Speaker 0: Okay. Cool. Sorry to digress. But, yeah, good to know. Yeah.

We we can do that down the road. Last thing here is we wanna showcase. So we're we want them to be able to upload a couple of their projects that they've completed with Directus. So would we use files for that? Multiple uploads?

The idea is gonna be the deliverable, I guess, is gonna be we want them to upload

Speaker 1: Are they gonna is it just images, or are they describing the projects and, like, talking about them?

Speaker 0: It would probably be screenshots with some a little bit of text about what the project was. So a little bit of, like, descriptor. So maybe treating that like a caption to the image. I'm not really quite sure the best way to deliver it unless it's a different out outside of this initial form where they would have a different form where they could upload all this project information.

Speaker 1: This is a relationship in my mind. Because 1 of the other stated goals that I heard, when we were initially putting this together was we wanna have a page, that showcases these projects. Yeah. So to me, that would be, like, a separate table, separate collection called projects, partner projects, could just be projects. I don't think we've got a I don't think we have a project table in here right now.

We have what do we have? We have a project management folder. Yeah. So you're you're you're clear. Right?

Speaker 0: Mhmm.

Speaker 1: What are you gonna do now? Now that you know the way forward.

Speaker 0: Something to something. I I don't know the difference between many to many or 1 of many, but I feel like it's 1 of these. 1 to many, I would assume. Because you're gonna have this 1 record attached to many different projects. Or is it the other way around?

Speaker 1: So in this case, you can't have the same project belonging to 2 different agencies. Right. So it would be a 1 to many in this case because you're on the agency. Mhmm. 1 agency could have many projects.

Now if you were, like, inside of a a project, it would be reversed. It would be, many to 1.

Speaker 0: Okay.

Speaker 1: I I would just call it projects. Projects. Killing me. We don't have we don't have, we don't even have a project stable. So that's gonna be fun as well.

Right? So whenever you're creating these relationships, you have to have a related collection, which is basically just a table in the database underlying that.

Speaker 0: Okay. Cool. Great. So that'll be what I'm thinking is for this show, we'll split it up into, like, a few different episodes because I've we've we're coming up on an hour here, having just built, like, this initial form. So we'll do, like, the next part.

Let's set up those the showcase pages and potentially get into, like, role based access control a little bit. But, yeah. Is it Don't

Speaker 1: leave me hanging here, bruh. Finish this guy out.

Speaker 0: I can't. I'm unable to.

Speaker 1: It's because you get to pick a related collection. Oh, this is the cliffhanger.

Speaker 0: Yeah. This is where, you know, the end of every ER show, there's, like, something that happens. A helicopter explosion. This is our helicopter explosion. But, to move forward here on the next episode, I will have created just a simple projects collection with no data in it, and then this will be saved to that collection because I'll pick it here.

Right?

Speaker 1: You can actually create it right here.

Speaker 0: Can I?

Speaker 1: Yeah. In like 2 seconds. So where you have the related collection, it's it's 1 of the required fields. Those are the ones that have the stars beside them. Yes.

Speaker 0: Stars Alright. Equal required. Yeah.

Speaker 1: Alright. It it doesn't show up in the drop down, but what you could do, just type in projects. Alright? Now you're gonna need a foreign key. A foreign key is in that other table.

How does it link back? Right? So that would be your partner, Or that's what I would call it anyway. Like, what is the field gonna be called inside the projects table, inside that projects collection?

Speaker 0: That will

Speaker 1: Is gonna be the part.

Speaker 0: To this table? Okay.

Speaker 1: Yep. Now this is it's not apparent what's happening here. So what are you gonna do? Go to Advanced Field Creation Mode, and go to the Relationship tab. Alright.

So do you see down at the bottom what's happening here?

Speaker 0: Problem that we created within your data model. So they're gonna create projects and then the identifier for that project of, like, where it ties back to.

Speaker 1: Yep.

Speaker 0: Okay. I mean, that's, I think, a great stopping point for this first part 1. We didn't know it was gonna split into parts, so I'm cool with that. This feels good. Now everything auto saves was 1 of my favorite features ever.

If I go to content right here, agency partners, and then this is kind of the base thing that they'll see. Obviously, we can tweak this a little bit. But, yeah, everything we've set up is here. Great. Technically, I'm found.

Speaker 1: I don't know. I I think you're still in the yeah. Okay. It's like you started moving towards the target there. Like, you're still, like, a 100 clicks off.

Where would you be for this?

Speaker 0: I've left the trials, and I'm officially in the tribulations. So, we're making our way there. But awesome. Bryant, I appreciate you joining, helping guide me, shepherd me through this, you know, data forest.

Speaker 1: Data forest. Yeah.

Speaker 0: Next episode, we're gonna tackle setting up the showcase pages, and we will start to get into role based access control for those partners to access this stuff. Thanks everybody for tuning in. Looking forward to the next 1, next episode of Technically, I'm Lost.