[{"data":1,"prerenderedAt":458},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"i-made-this-platform-to-monetize-communities":121,"i-made-this-platform-to-monetize-communities-next":187,"sales-reps":207},{"items":4},[5,29,49,69],{"id":6,"title":7,"url":8,"page":8,"children":9},"522e608a-77b0-4333-820d-d4f44be2ade1","Solutions",null,[10,15,20,25],{"id":11,"title":12,"url":8,"page":13},"fcafe85a-a798-4710-9e7a-776fe413aae5","Headless CMS",{"permalink":14},"/solutions/headless-cms",{"id":16,"title":17,"url":8,"page":18},"79972923-93cf-4777-9e32-5c9b0315fc10","Backend-as-a-Service",{"permalink":19},"/solutions/backend-as-a-service",{"id":21,"title":22,"url":8,"page":23},"0fa8d0c1-7b64-4f6f-939d-d7fdb99fc407","Product Information",{"permalink":24},"/solutions/product-information-management",{"id":26,"title":27,"url":28,"page":8},"63946d54-6052-4780-8ff4-91f5a9931dcc","100+ Things to Build","https://directus.io/blog/100-tools-apps-and-platforms-you-can-build-with-directus",{"id":30,"title":31,"url":8,"page":8,"children":32},"8ab4f9b1-f3e2-44d6-919b-011d91fe072f","Resources",[33,37,41,45],{"id":34,"title":35,"url":36,"page":8},"f951fb84-8777-4b84-9e91-996fe9d25483","Documentation","https://docs.directus.io",{"id":38,"title":39,"url":40,"page":8},"366febc7-a538-4c08-a326-e6204957f1e3","Guides","https://docs.directus.io/guides/",{"id":42,"title":43,"url":44,"page":8},"aeb9128e-1c5f-417f-863c-2449416433cd","Community","https://directus.chat",{"id":46,"title":47,"url":48,"page":8},"da1c2ed8-0a77-49b0-a903-49c56cb07de5","Release Notes","https://github.com/directus/directus/releases",{"id":50,"title":51,"url":8,"page":8,"children":52},"d61fae8c-7502-494a-822f-19ecff3d0256","Support",[53,57,61,65],{"id":54,"title":55,"url":56,"page":8},"8c43c781-7ebd-475f-a931-747e293c0a88","Issue Tracker","https://github.com/directus/directus/issues",{"id":58,"title":59,"url":60,"page":8},"d77bb78e-cf7b-4e01-932a-514414ba49d3","Feature Requests","https://github.com/directus/directus/discussions?discussions_q=is:open+sort:top",{"id":62,"title":63,"url":64,"page":8},"4346be2b-2c53-476e-b53b-becacec626a6","Community Chat","https://discord.com/channels/725371605378924594/741317677397704757",{"id":66,"title":67,"url":68,"page":8},"26c115d2-49f7-4edc-935e-d37d427fb89d","Cloud Dashboard","https://directus.cloud",{"id":70,"title":71,"url":8,"page":8,"children":72},"49141403-4f20-44ac-8453-25ace1265812","Organization",[73,78,84,88],{"id":74,"title":75,"url":76,"page":77},"1f36ea92-8a5e-47c8-914c-9822a8b9538a","About","/about",{"permalink":76},{"id":79,"title":80,"url":81,"page":82},"b84bf525-5471-4b14-a93c-225f6c386005","Careers","#",{"permalink":83},"/careers",{"id":85,"title":86,"url":87,"page":8},"86aabc3a-433d-434b-9efa-ad1d34be0a34","Brand Assets","https://drive.google.com/drive/folders/1lBOTba4RaA5ikqOn8Ewo4RYzD0XcymG9?usp=sharing",{"id":89,"title":90,"url":8,"page":91},"8d2fa1e3-198e-4405-81e1-2ceb858bc237","Contact",{"permalink":92},"/contact",{"items":94},[95,101,107,113],{"id":96,"title":97,"url":8,"page":98,"children":100},"8a1b7bfa-429d-4ffc-a650-2a5fdcf356da","Cloud Policies",{"permalink":99},"/cloud-policies",[],{"id":102,"title":103,"url":81,"page":104,"children":106},"bea848ef-828f-4306-8017-6b00ec5d4a0c","License",{"permalink":105},"/bsl",[],{"id":108,"title":109,"url":81,"page":110,"children":112},"4e914f47-4bee-42b7-b445-3119ee4196ef","Terms",{"permalink":111},"/terms",[],{"id":114,"title":115,"url":81,"page":116,"children":118},"ea69eda6-d317-4981-8421-fcabb1826bfd","Privacy",{"permalink":117},"/privacy",[],{"description":120},"\u003Cp>A composable backend to build your Headless CMS, BaaS, and more. \u003C/p>",{"id":122,"slug":123,"vimeo_id":124,"description":125,"tile":126,"length":127,"resources":8,"people":128,"episode_number":138,"published":139,"title":140,"video_transcript_html":141,"video_transcript_text":142,"content":8,"status":143,"episode_people":144,"recommendations":175,"season":176,"seo":8},"fd462afa-f23e-4f5b-a242-5e7364f872fb","platform-to-monetize-communities","894102457","In this episode of I Made This, Pedro and John chat with Bryant to learn why he chose Directus and walk-through how he built a community monetization platform.","51ab7dd2-9eef-487f-84e3-b4469285d530",43,[129,132,135],{"name":130,"url":131},"Bryant Gillespie","https://directus.io/team/bryant-gillespie",{"name":133,"url":134},"John Daniels","https://directus.io/team/john-daniels",{"name":136,"url":137},"Pedro Pizarro","https://directus.io/team/pedro-pizarro",2,"2023-03-17","Building a Platform to Monetize Communities","\u003Cp>Speaker 0: Hello, everyone. Welcome to this episode of I Made This. My name is Pedro.\u003C/p>\u003Cp>Speaker 1: And I'm John. Thanks for joining us today. We also have Bryant here. Bryant, why don't you give us a brief introduction into who you are?\u003C/p>\u003Cp>Speaker 2: Yeah. Absolutely, guys. Thanks for having me. My name is Bryant Gillespie. I am a jack of all trades, I guess you could say.\u003C/p>\u003Cp>I do a ton of different things. I've got a design background. Been in the sign and print industry for probably too many years at this point. I would say, like, 15, 16 years. Yeah.\u003C/p>\u003Cp>I've worked in kinda all facets of that industry. Like, I previously ran and helped manage a sign and print shop for probably 5, 6 years. We grew that business, and I burnt myself out and was looking for the next thing. And then I got hooked up with a software company that made software for the sign and print industry. So it was a great fit there, but, yeah, I've got a ton of experience in just a little bit of everything from business management to design, marketing, even a little bit of sales at my former company there for a while.\u003C/p>\u003Cp>And I've also got this development streak that I'm on at this point. I'm not a professional developer by any means, so let me preface everything that we talk about here. With that, Last 2 or 3 years, I've picked up JavaScript development. Mostly, like, working at a software company, I always wondered, k. How hard is it to do what we're talking about on the product side of things?\u003C/p>\u003Cp>How challenging is it to build this certain feature? And, yeah, I've got a nasty habit of scratching my own itch that sometimes gets me bogged down into crazy projects like the one we're gonna talk about today.\u003C/p>\u003Cp>Speaker 0: Awesome. And through that software development streak and kinda learning software development, is that how you found Directus, or what was your first touch with Directus?\u003C/p>\u003Cp>Speaker 2: Yeah. I can't remember exactly how I came across Directus. I know hey. Like, the background story there is I used to be really heavy into Airtable, and I think it's a really great tool, great platform, great company. But I had a client that we built a really nice Airtable base.\u003C/p>\u003Cp>And over the course of 2 or 3 years, this thing just kept getting more and more complex as any project does. And so when we first started, it was just simply, hey. Let's keep track of our orders. And then we started bolting on things like, hey. We wanna be able to send an online proof to our clients and let them approve the artwork for this order, and then, hey.\u003C/p>\u003Cp>Let's let them pay for the order. And then it graduated into a full blown website where a the client could come on sight unseen and place their own order for decorated apparel. We as we kept iterating on that, things got more and more complex, and there were more moving pieces. And we rapidly started hitting the limits of Airtable, not just, like, what it was built to do. There's some API rate limits there that kind of affect how you call their API and what you can actually do with it.\u003C/p>\u003Cp>But there's also, I think we were on one of the we weren't on the enterprise plan, and the enterprise plan at the time was probably, like, 3 dollars 1,000 a month, which is kind of out of reach for yeah. We did. Definitely chump change. Yeah. So it's kinda out of reach for a small company that has 15, 20 employees.\u003C/p>\u003Cp>So that's a lot of money for them to spend on a platform where they were at maybe several $100 a month with all their employees on there and all the platforms and things that we had built around AirDance. That makes sense.\u003C/p>\u003Cp>Speaker 1: Yeah. I think you're on a similar journey, or I guess I'm on a similar journey to you. And if for anyone who's out there watching, Brian's face probably does look familiar because Brian also does videos for Directus. And so as I've come along on this Directus journey and as Pedro and I have started doing some videos, I also have an entrepreneurial spirit inside me. I've started several companies on the side and kind of have ideas that are floating around inside of my head too.\u003C/p>\u003Cp>And so I've been on this similar sounding journey to you of exploring these other platforms out there. A lot of these platforms are great for what they do, and they all have their limitations as any software does. But, you know, the more I've been creating these videos for Directus and working for Directus and seeing what it can do, one of the nice things as I'm building out these platforms and some of them actually make their way to actual companies, whether they're small or medium sized, some of them fizzle out. One of the great things that I've kinda come to discover about Directus is there there is no limitation, especially if you're starting off in self hosted. You're not gonna hit that $3,000 a month mark right right away.\u003C/p>\u003Cp>And so it it's so great for a beginner developer begin I have some experience in web development and websites and things like that. But as you're starting to explore, you're not gonna hit any wall in regards to pricing. You can kind of build it out and get a full fledged platform without having to worry about, oh, I can't get the full traffic tested. I can't gonna have to pay $500 a month starting off. I think that's kind of a similar journey that I've come to uncover and have more creative ideas flowing as I've been creating these videos for Directus.\u003C/p>\u003Cp>So it sounds very similar to kind of the journey that you are ahead of. You've been making these videos longer than we have, but sounds like a very similar journey.\u003C/p>\u003Cp>Speaker 2: Kind of\u003C/p>\u003Cp>Speaker 1: creating you found Directus. You started using it. You started creating videos for it. More ideas come to light. Does that kinda sound right?\u003C/p>\u003Cp>Speaker 2: Yeah. A 100%. And so like I was saying, we were hitting the limits of Airtable, and then it was like, well, what's the next jump? Like, where do we go from here? Hey.\u003C/p>\u003Cp>This could be a stand alone app that we could have somebody program or develop the back end. And at that stage of the journey, I wasn't comfortable enough to say, hey. This is something I could take on myself. So I started looking at, okay. Are we gonna have a developer or an agency or somebody, like, build this into a full blown app?\u003C/p>\u003Cp>Because we're running out of runway here on this no code tool like Airtable. And and I'm not knocking those tools at all, but, you know, like you mentioned, there's certain limitations that you run into that you you don't know at the outset. You don't know that you're gonna run into those things or we probably had I known where we were gonna end up with the tool, it probably would not have started where we did with Airtable. Yeah. But Fortunate\u003C/p>\u003Cp>Speaker 0: enough that you grew at that pace. Right? Like, people underestimate their abilities and they grow a company or grow a software or an organization much faster than anticipated. So that's a good thing.\u003C/p>\u003Cp>Speaker 2: Yeah. Absolutely. So we were looking for the next thing and I don't know if it was through Product Hunt or Hacker News or some other group that I like, a random Discord or Slack group or something that I'm a part of. I had stumbled onto the Directus website and I saw I think it it was really close to when version 9 launched, I think. And I was, like, like, what is it?\u003C/p>\u003Cp>This open data platform. And I saw the screenshots, and I was, like, hey. This kinda looks similar to the other tools that I'm used to, but it looks way more powerful because they're talking about a full SQL database that I own and immediate generated APIs and all the things that I could do through the UI, through the no code app that I'm used to doing in other platforms and more. So Directus did not work out for that particular client. We kind of made a few changes that extended the runway on their existing platform, but I kinda took up the mantle, and I was like, hey.\u003C/p>\u003Cp>This is I could use this for all my other things, like my own personal projects and get a leg up because now this is actually going to scale. This thing is, like, I'm driving the Ferrari on day 1 instead of effectively driving the Pinto for a little bit and then trying to figure out, hey. Do we slap a turbo on this or get some new wheels or what do we do with it?\u003C/p>\u003Cp>Speaker 1: Yeah. As someone who owns a Ford Fiesta vehicle, I feel I feel slighted that, you know, my car\u003C/p>\u003Cp>Speaker 0: is great.\u003C/p>\u003Cp>Speaker 1: It's a great car, but I would take a Ferrari over it. Yeah. And so I think that's a that's a good lead in because a lot of people you know, I I come I came into Directus just thinking you were somebody who created videos, but you've created a whole platform on top of Directus. So why don't you give us a look into the most recent project that you built on Directus because I think it's really cool. I think it kind of ties into a lot of what Pedro and I have heard on calls with prospects and customers as well.\u003C/p>\u003Cp>So why don't you give us a little insight into the most recent project that you have?\u003C/p>\u003Cp>Speaker 2: Yeah. Yeah. Absolutely. Give me a second here, guys, and I'll share my screen. BetterSignShop kinda started when I left my previous company.\u003C/p>\u003Cp>I was the head of customer success there. I managed a team of customer success managers that would implement and train people on how to use our software that was designed for sign and print. So I've got this this bug, shop manager, being the 2nd in command for 5 years and experiencing every facet of the business through that, and then working on the tech side as a software provider, I probably worked with 350, 400 shops directly over the course of 7 years at my previous company. It was one of those things. It's like, hey.\u003C/p>\u003Cp>I'm it's time for me to move on to the next thing, and I immediately jumped into consulting with sign and print shops. Just that was the background that I had. That's where I've got the most leverage. Why not explore that? So that morphed into a lot of random projects.\u003C/p>\u003Cp>Like, the best thing to come out of it was probably this platform that I'm gonna show you guys. But we started a podcast, we started a mastermind group where we meet once a month, we bring in like an outside expert that talks about a specific topic. Maybe that is online marketing for sign and print shops or how to hire sales reps because it's traditionally not a it's a it's a small business type of industry. There are some very large printers and very large sign companies in the world, but traditionally it's it's a small mom and pop type industry. Most shops have fewer than 20 employees.\u003C/p>\u003Cp>So we had all these resources that we're putting together, and we said, hey. Let's build a platform to contain all those. So we had just a bunch of random stuff that we were building, and we were like, hey. How do we connect all the dots? Right?\u003C/p>\u003Cp>Like, we were doing interviews with industry experts. We had 100 of we had a 150 members inside a private Facebook group. We've got some calculators on, hey, should I buy that piece of equipment, or should we keep outsourcing this service? So we had all these things, and the challenge was, like, what do we do with it? Like, how do we bring it all together?\u003C/p>\u003Cp>And that's when we decided to create this platform, My Better Sign Shop, to bring it all together.\u003C/p>\u003Cp>Speaker 1: I like that you chose a color scheme that fits with Directus, the purples and pinks and\u003C/p>\u003Cp>Speaker 2: Yeah. Yeah. So how I got into this industry was as a graphic designer. So everything I do, I've got that designer OCD type of thing going on where I always hate working on my own stuff because it's so hard for me to pick something. And when we started this, I was like, like, I'm just gonna go wild with this.\u003C/p>\u003Cp>Like, we gotta go over the top. So my kids, my 3 daughters are into pink and purple, and I said, let's leverage that, and we'll just own those colors. Hey. If you see pink and purple in this space, like hot pink, that's gonna be us. I like it.\u003C/p>\u003Cp>Speaker 1: Yeah. Why don't you why don't you give us a quick walk through kind of how you built it out in Directus and then maybe even an insight into what did you build the front end? What did you build the actual website with? You know, what what technology Yeah.\u003C/p>\u003Cp>Speaker 2: Yeah. Absolutely. So I the thing about Directus, it was so nice building out the data model. And I've you know, I since I graduated from Airtable, like, I I was kinda used to already, like, how do I map out this data relationally? How do I make sure that I'm not duplicating data that that I could just link using a relationship?\u003C/p>\u003Cp>So the first piece that we started with was probably like the LMS, our learning management system, because we kind of had this course called Profitable Sign Pricing that I was working on prior to this platform, and we just kind of rolled it into the platform. Platform. So inside Directus, I'm not sure if you guys can see this, I could probably zoom in just a little bit. We started, that was the piece that we started with first. So and maybe while we're See\u003C/p>\u003Cp>Speaker 0: your nice custom icons as well.\u003C/p>\u003Cp>Speaker 2: Yeah. Again, that's the design OCD part where everything has to be nightly nicely organized. Yeah. The system, we did all module based because, like I said, it was originally just a bunch of stuff that we had built. And we were like, hey.\u003C/p>\u003Cp>Let's give people one simple way to access it. So I'll just throw some of these out. And then we have our so we've got our library here, where the library has some resources that are, like, downloads for you guys. Hey. What questions should we be asking to qualify customers?\u003C/p>\u003Cp>So building this out, it was a really super simple indirectus. If I hop into, like, our library data model here, this is just a folder where we put all of our other collections. So we've got our resources, which are just kind of one time offerings, and then we have our courses. So the data structure here, we have a course that sits at the top level. Then each course has several modules, and each module has lessons.\u003C/p>\u003Cp>So if we open up the course, we can see we've got, hey, is this a free course? What's the status of this? Is it published? Is it draft? What's the title of the course?\u003C/p>\u003Cp>What are we gonna use for the slug, which is the URL that we're gonna access that at? The description, we've got a featured image. Then we have the modules for that course. That is a one to many relationship that links to the modules. And inside the modules very similar, title, status, what's the course that this module belongs to, what's the description of the module, and the lessons for that module.\u003C/p>\u003Cp>So the meat and potatoes is probably in the actual lessons. So we've got the module it belongs to, stylus, title, slug, description. And then we have some interesting things like content, which is the WYSIWYG editor in Directus, which is super nice. Other platforms that I've used, Airtable specifically, like, it does not have a WYSIWYG editor. So doing long form content there does not it's just not helpful.\u003C/p>\u003Cp>We've got a video input. So this is just a string. On the front end, we've got, a function that will clean this up. So you can paste Vimeo, you could do YouTube, you could do Loom videos. Whatever that is, it'll clean that up and generate, like, an embed code.\u003C/p>\u003Cp>We also have, like, a form schema here. So some of the courses that we are going to do, we've got let's actually just flip over to one of the lessons maybe here.\u003C/p>\u003Cp>Speaker 1: So you're saying a school or a university could build an entire learning platform modernized indirect us. So, you know, that's kind of what you've built here in one one module of your platform.\u003C/p>\u003Cp>Speaker 2: Absolutely. Yeah. A 100%. Yeah. Yeah.\u003C/p>\u003Cp>Speaker 0: We actually have a university.\u003C/p>\u003Cp>Speaker 2: Yeah. Could be yeah. School, university, anything, really.\u003C/p>\u003Cp>Speaker 0: We actually have a an LMS use case for one of our one of the clients that I work with. I don't know if I'm allowed to say their name or not, so I just won't I'll avoid that. But they've built essentially in a very similar schema with the modules, the courses linked. Yeah.\u003C/p>\u003Cp>Speaker 2: Yeah. And eventually, I think we'll add, like, some completion percentages and some niceties onto this. But, yeah, you can see here, this is one of our lessons here. And I on the front end, we've also got, like, this profitable sign pricing course has it's almost like a calculator, like a worksheet type of offering. It's not like a quiz per se.\u003C/p>\u003Cp>Let me just, show it to you guys, and I'll go back to the side by side here. So this is the front end of the application. We've got our main navigation over here, and it's divided into the different modules that we have. This my shop is a new one that has not released yet. So I'm giving you guys the local flavor here that's got the latest updates also so I don't break anything.\u003C/p>\u003Cp>And then we have, like, a community module, some other things. But if we enroll in our course here. Okay. Alright. So this is what the initial view looks like.\u003C/p>\u003Cp>You can expand these modules over here. But I'm going to show you the same calculating your shop rate lesson. It looks like I've got the wrong video here, but I'll just go ahead and hide this menu so we can go full screen. So the format here, we've got a nice video that they'll follow along with. We've got a short description.\u003C/p>\u003Cp>And then this particular one is all about calculating their shop rate. So in custom sign and print you're building a custom order every single time. Your unit of work there is your time. So how much should you charge for your time? Big question for everybody.\u003C/p>\u003Cp>So here, basically, we give them the ability to go in and enter in their monthly expenses, how many days a week they're working, how many team members they've got, how often those team members are working, and\u003C/p>\u003Cp>Speaker 1: I don't work 7 hours\u003C/p>\u003Cp>Speaker 2: a day. And what target profit they want and then it will spit out what their hourly cost is to operate. We got 2 guys working 6 hours a day. We wanna make a 100,000 or 30,000 in profit at the end of it. Shows us their hourly cost, so this is what that what it costs to keep the lights on, and then what they have to charge per hour or per day to actually make those profit numbers.\u003C/p>\u003Cp>So those are the things that we're putting together inside this platform, and it's all dedicated to helping sign and print shop owners grow and improve their business.\u003C/p>\u003Cp>Speaker 1: That's awesome.\u003C/p>\u003Cp>Speaker 0: That that's sweet. And I noticed that the front end takes a lot of visual cues from the back end. Is that intentional? And what technology do you use for the for the front end of the site?\u003C/p>\u003Cp>Speaker 2: Yeah. Yeah. I'm glad you picked up on that because Yeah. Yeah. I like, when we started down the road of modules, I was that's a kind of a design challenge.\u003C/p>\u003Cp>It really is. And Directus has done such a great job with it of, like, how do I show hierarchy? How do I make sure that people know where everything is at? And I kinda took cues from that. Yeah.\u003C/p>\u003Cp>We used intercom a lot at my previous employer. They've got, like, a similar, hey. Our modules are on the left hand side kind of set up. And I thought that was a great design pattern. But, yeah, a lot of this has been taken cues directly from the back end inside Directus.\u003C/p>\u003Cp>That's awesome.\u003C/p>\u003Cp>Speaker 0: Yeah. We've even seen people, because of the way Directus is designed on the back end, using the back end as if it is an internal tool for a business, like, using the back end as an actual front end as well. It's just like this is the tool that we log into as employees.\u003C/p>\u003Cp>Speaker 2: And that's it's easily doable. Like, you can log in and you can white label this. And if you wanted to be a little more stingy about it, you could even turn off the documentation where, like, it didn't have any, like, references to direct us at all. But Right. Yeah.\u003C/p>\u003Cp>Speaker 0: From And then using roles and permissions to just hide everything that wouldn't be relevant to that user or that group of users.\u003C/p>\u003Cp>Speaker 2: Absolutely. Yeah. And that that was, like, an option that I considered. That would've dramatically cut the time to get something launched, but I like, being design oriented,\u003C/p>\u003Cp>Speaker 0: I Yeah.\u003C/p>\u003Cp>Speaker 2: That OCD kicked in. Okay. We're gonna build a custom front end on this.\u003C/p>\u003Cp>Speaker 0: That looks great.\u003C/p>\u003Cp>Speaker 1: So And I think that's one of the I think that's one of the beautiful things about Directus is if for any reason in the future you decided to move away from Directus, if your front end was also the back end, you're kinda stuck there. But with your front end being built separately, you can pull that SQL database because as you mentioned, it's just your it's your SQL database. You could pull that information out. All the tables are there. Directus had injected nothing into it, and you could move to another back end.\u003C/p>\u003Cp>So I I think that some people find the benefit. We we do think Directus can fit long term, but it is nice to sometimes separate those front end things out because if for any reason you needed the SQL database for somewhere else, you could put it somewhere else as well.\u003C/p>\u003Cp>Speaker 2: Yeah. I mean, this is my actual SQL database here. Right? Everything Directus is namespace there. Again, like you said, that's this is just the kind of metadata that enables Directus to do its thing.\u003C/p>\u003Cp>So, yeah, we've got books. We've got all the lessons. Like, they're all there. Directus, none of this is intertwined with the Directus system data, which it which is very nice. Yeah.\u003C/p>\u003Cp>I like that aspect of it. I don't see moving this from Directus because, like, the speed at which I can put something together is that's the craziest part of this whole thing for me. I'm not being a professional developer, I'm, like, self taught developer. I've mostly played, like, the get it done guy role, is what I like to call it. Every company that I've been in or even on my own stuff, I'm the guy that if I don't know or I if I don't have somebody that'll do it for me or if, you know, there's a problem, like, I'll figure it out however I need to.\u003C/p>\u003Cp>And that's what led me into development in the first place. But Directus gives me that tool, like, you know, almost almost too easy for me to go down a rabbit hole and build something.\u003C/p>\u003Cp>Speaker 1: Did you say go down a rabbit hole on purpose?\u003C/p>\u003Cp>Speaker 2: I didn't. No. But that's the bunny puns could come easily, though. So, you know, this new module that we've been working on is basically like a knowledge base of Oh, awesome. SOPs and standard procedures.\u003C/p>\u003Cp>Yeah. Like I mentioned, a lot of these small shops are they don't have things like this in place. So we're gonna give them a template for this. K. Here's your employee handbook.\u003C/p>\u003Cp>Go in and customize the pieces that you need, but we'll get you 80% of the way there. And using Directus, like, building something like this out, is super on the back end, I probably spent the most of the time here to build this feature of like cards and collections. So if I open up one of these cards, here's what the back end of this card looks like. Probably the most time spent was just trying to map out how I wanted the data to look. So here we've got collections that hold the cards, collections could be nested into each other, so coming up with that schema, like on paper was probably the hardest part about it, but as far as actually getting an API that I can use on the front end it probably took me 10, 15 minutes to put together these 2 collections inside Directus and actually start building something on the front end, which is huge.\u003C/p>\u003Cp>Speaker 0: This is really cool.\u003C/p>\u003Cp>Speaker 2: If I would have done something previously, I don't have the back end knowledge or skill set. So I would have either been mutts trying to learn that and put that together and maybe something like Laravel or Rails or something that gives you a leg up or been paying somebody 1,000 of dollars a week probably to build something like this. And just like the speed and flexibility that Directus gives me. K, if I've got an idea and my girls are off shopping for the weekend, which is exactly how this feature came about, You know, it's it's easy enough for to build something that's gonna deliver value in in a weekend. Yeah.\u003C/p>\u003Cp>Speaker 1: So so people just need to take more trips away from their family and you could do more projects.\u003C/p>\u003Cp>Speaker 2: Is that\u003C/p>\u003Cp>Speaker 0: what you're saying?\u003C/p>\u003Cp>Speaker 2: I'm not saying that at all. No. If you get a if you get a random weekend where and you have 3 kids and your wife takes them shopping, use that for project time. 100%. Yeah.\u003C/p>\u003Cp>So seeing\u003C/p>\u003Cp>Speaker 0: this seeing this knowledge base really gets my gears turning on a lot of different ideas that you could start implementing. And I'm not gonna impose any of those on you, but I'm sure you have a lot of ideas and future plans around this project. Could you maybe Oh, yeah. Fail some of those or other things you plan to add on to the this project with Directus?\u003C/p>\u003Cp>Speaker 2: Yeah. I I mean, even yeah. Like, we've got onboarding checklists that are\u003C/p>\u003Cp>Speaker 0: Oh, wow.\u003C/p>\u003Cp>Speaker 2: Like a thing that we're putting into this. So one of the big things in any business really, is how do you onboard new employees? And this is specifically generic enough that it doesn't have to be used for onboarding. But, you know, since we're focused on the team aspect, that's the primary use case here. But, you know, we're working on this onboarding checklist structure where, hey, Whenever we hire somebody, we want them to be able to go in and have just a, hey.\u003C/p>\u003Cp>Here's how your next 6 weeks or your first 6 weeks are gonna go with the company. And not only does that improve morale, but, you know, it it's easy. It improves retention as well. Like, if you start a new company and you've got the 1st 6 weeks laid out for you, here's everything you need to do to be successful in this new role, that's gonna skyrocket retention. So we've got this set up where you can assign the specific user to a task within the checklist in case, like, a manager needs to be assigned to a certain task instead of the new employee.\u003C/p>\u003Cp>You could set up due dates, all of that, And then you just run the checklist, and we'll have a couple dashboards in here. This is still very much a work in progress, but that's, that's probably the newest thing. We've got tons of different ideas of what we're gonna implement in the future, but, you know, that's kinda what we're working on at the moment.\u003C/p>\u003Cp>Speaker 1: Yeah. I can see this specific feature being really useful for a lot of smaller startups or companies who just don't have the time to build this. Do you have any plans to list the setup or at least some sort of instructions in the upcoming marketplace. You could be able to to list this up there for other companies to be able to use this as well. Have you thought about that?\u003C/p>\u003Cp>Speaker 2: Yeah. Yeah. I'm totally open to it. I need to learn more about the plans there and how we could make that work.\u003C/p>\u003Cp>Speaker 1: Or you could just send people use the your platform too.\u003C/p>\u003Cp>Speaker 2: Yeah. No. I for me, I don't see this I don't wanna get this thing outside of sign and print. So this is probably gonna be, like, a really niche thing, but, totally, what we built here, it's like, there would be nothing stopping you from taking this and either generalizing it to any company or, for me, I mean, like, you could take this and and focus on your if you had a specific intersection, and that's kind of my philosophy of where I bring value anyway is at the intersection of sign and print and tech, automation, integration. Hey.\u003C/p>\u003Cp>Bringing those 2 together is like a space that that I have, bring the most value. So if you're out there and you're listening to this and that's that describes you, you got a passion on the tech side, you've got some industry knowledge, you could take something like Directus and build a tool that will help bring in recurring revenue for you or, honestly, if I were to focus on this full time, it could probably be a full time business that that we could grow and scale. But, yeah, I've got a few other priorities, and I quite like the lifestyle aspect of\u003C/p>\u003Cp>Speaker 1: it at this point. That's a perfect segue because I was gonna ask you guys as we kinda start to wrap this up, advice for those people who are building platforms or similar platforms. You obviously have access to the Directus team directly as you kind of work with us week by week. But did you research things on GitHub, or did you reach out to people on Discord? Or did was it kind of just playing around?\u003C/p>\u003Cp>What advice would you give to those, either new or relatively well versed in direct us? What did you run into that you would advise people to sidestep or hop over if we use a budget plan?\u003C/p>\u003Cp>Speaker 2: Yeah. I've always been, like, action oriented, and I don't know if that's sometimes that's a fault. A lot of times, I think that's a strength because and I know, like you said, you were getting into development, John. There's a lot of, like, courses out there on here's how to become a full stack developer, here's how to become a Vue JS developer, and it's just module after module after module after module. And I've tried those, and I discovered that it didn't work for me because it it's either a project that we're building that I don't care about or it's just too abstract in the moment.\u003C/p>\u003Cp>The it's like, I don't know when I'm gonna use this. That's the same reason that I couldn't give you if you gave me a calculus test right now, I couldn't tell you the first answer on any of it because I haven't used any of that stuff in so long even though I learned it. So the first thing that I would say is, hey. If you got a decent idea or one that you think could be a good side project or a business side. Get into Directus.\u003C/p>\u003Cp>It's simple enough to build out your data model. I've even got if you're looking for a starter on the front end, where is this thing? So our platform is built on Nuxt, which is based on Vue. Js, but if you need a good starter that already has the plumbing connected with Directus, we've got a starter that you can use as well. So you can pull this down, it's just Brian Gillespie slash nuxt3 dashdirectus dash starter on GitHub.\u003C/p>\u003Cp>It's getting a little popular, I think. Not that 55 stars is anything compared to the 18 or 20,000 at Directus, but this is a good starting point. Like, just set up a couple collections inside Directus, start building something. And then as you run into challenges, the direct to stocks will be your best friend. Shout out to Aaron on that side of things.\u003C/p>\u003Cp>I've seen a lot of great improvements on the documentation recently. I really love this cookbook section, like some of these things, how to do a content hierarchy. This was kind of one of the things that probably tripped me up when I first started with Directus, some of these more specific things, which I'm sure that's a challenge for you guys as well because Directus us can could do so many different things.\u003C/p>\u003Cp>Speaker 1: Yeah.\u003C/p>\u003Cp>Speaker 2: Like, how do we tell people how to set these things up? And then the community has been great as well. Even even before I was doing the videos on YouTube for DirectUs, if I would run into any gotchas, k, I I don't know how to do this. I think Brain Slug was one of the guys that reached out and helped me before he was working with the team as well. Yeah.\u003C/p>\u003Cp>Like, initially, I was trying to set this up and, like, tenancy is a big question that came up as well, and it was one of the things that I had trouble navigating of, like, how do I set up not just, like, an account inside here, but each account has many different users. So, how do I manage all of that inside Directus? I know Directus will do it, but how do I figure it out? And the guys in the community, guys and gals, I should say, were very helpful in that regard of just hopping into the discord, which I like a lot more so than, like, a support forum or some of those other it's nice just to hop in and just kinda post a question and see who's already had experience doing this thing.\u003C/p>\u003Cp>Speaker 1: Yeah. Shout out to BrainSlug as well. I'll second that. I think his name is the one I see the most in Discord, and I believe he was on vacation a couple months ago, and it got a little quiet in Discord. I'm like, we need brain slug back.\u003C/p>\u003Cp>So shout out to him.\u003C/p>\u003Cp>Speaker 2: Yeah. Yeah. And there's quite a few names that I see popping up time and time again. So one of the other kinda nice things that I really like about Directus here is the insights module, where I've just been able to set up, like, a quick dashboard that shows me our accounts. So this was back in October.\u003C/p>\u003Cp>That was when we initially launched, and I could see how many accounts are being created each day, the total number of accounts. So we've got a free plan, and we've got a pay plan. I could see how many people have published their shop listing within our community, what our recommended book numbers come from, and this is all community driven stuff. Hey. This is one of my favorite vendors to work with, or this is a book that I recommend reading.\u003C/p>\u003Cp>But Direct has made this really easy, whereas, again, like, if I wanted to do this, I would either be exporting the data from Directus and doing a pivot table and some charts inside Google Sheets, which would be a\u003C/p>\u003Cp>Speaker 1: blast. Pivot tables.\u003C/p>\u003Cp>Speaker 2: Or I would have to build I would have to build the same functionality somewhere into my own app, which would be kind of a pain to do. So Directus makes this super simple for me. And this has this has been helpful to share with the other guys that are working on the podcast and this platform with me just to give them motivation. K. We signed up 3 accounts today, and we've done very little promotion on this thing at all.\u003C/p>\u003Cp>So\u003C/p>\u003Cp>Speaker 1: Have you played around with flows at all? I know for me, flows can get pretty technical pretty fast. Yes.\u003C/p>\u003Cp>Speaker 2: Yes. So we do have several flows going on. One of the cooler features that I really like about the, like, the community module that we have, in addition to like the list view of here's all the member shops that we have where you can browse what their capabilities are. Hey, if I are you UL certified? Which means, hey, can you do electrical work?\u003C/p>\u003Cp>Or do you have a wide format printer? One of the really nice things here is this map view. Sign and print is locally, it's mostly a regional, local type market. You're not gonna, with the exception of really large signage, if you want a banner or something simple, you're probably going to be dealing with a local person. So this is another thing that I stole from Directus.\u003C/p>\u003Cp>You guys were using Mapbox on the admin side for geolocation. Previously I'd used Google Maps and I found Mapbox to be a lot easier, but I wouldn't have known about that had it not been through Directus. But being able to, like, filter these based on a map, tremendously helpful. Okay, I'm located in West Virginia, who around me has a bucket truck that can go do an install, so here's a couple different options that I can find. So it's all about collaboration.\u003C/p>\u003Cp>But on the Directus side, when somebody edits their listing, and it looks like I've managed to break something there, when they edit their listing they add their address information. So on the flow side of things we've got a Flow set up that will send that address to Mapbox and pick up their latitude and longitude geocode data anytime that listing is updated. So if they go in and change the address, that will store their location correctly. See I've got so many different modules I can't even find them. Directory.\u003C/p>\u003Cp>You need\u003C/p>\u003Cp>Speaker 1: a little map icon. You're all iconized, you just need a little\u003C/p>\u003Cp>Speaker 2: map. Yeah. That's what I need. Yeah, so the geolocation data here, it will automatically generate this for us. So that was been a that was a huge, like, one up for using flows, so I didn't have to, like, custom code any of that or do it manually.\u003C/p>\u003Cp>Some of the other flows that we've got on our Mastermind calls, We've got, let's open that up. So we've got these thumbnail images that show when you go through and browse through these previous calls. That is a flow that is set up whenever the recording is posted for that previous call it will go out to Vimeo and capture the thumbnail image so we could show it here. And I've also got just a nice little anytime a new user account is added, it will ping us inside Slack. So let me see if I can open this up for you guys just to give you a taste.\u003C/p>\u003Cp>Yeah. So we've got an inbox inside Slack that whenever a new user and a new account is created, that happens through flows as well.\u003C/p>\u003Cp>Speaker 1: Very cool. I assume you used a little bit of just toying around till it worked, which is what I do. I just kind of change one thing until it works. Probably a little bit of the dots. Is that kinda how you figured some of those out?\u003C/p>\u003Cp>Speaker 2: Yeah. So my new method for flows is basically taking it step by step. Like, I will create the initial flow or, like, the trigger setup, and then I will trigger that flow to make sure to see what data I've got coming out of it, and then I will just kind of march step by step after that. That kinda makes it easier for me to stay focused instead of building, like, 30 steps at once and then trying to figure out why I'm not getting what I want at the end of it. I've also my wife makes fun of me.\u003C/p>\u003Cp>I've got sausage fingers. So a lot of my trouble with flows is usually just just because of typos that I'm not paying attention to.\u003C/p>\u003Cp>Speaker 1: Yeah. I think the I think I was working on a flow on one thing that I'm kind of toying around with here yesterday or the day before. I think I had about 70 iterations where I was just changing 1 step by step like you kinda do, but also why isn't this working? Okay. Let's change this one thing.\u003C/p>\u003Cp>Oh, let's change this let's change it to another thing. That's my method of figuring out how it works. Because you you kinda mentioned just starting Yeah. I yeah. I think you get\u003C/p>\u003Cp>Speaker 2: you learn how to\u003C/p>\u003Cp>Speaker 1: do it.\u003C/p>\u003Cp>Speaker 2: Yeah. I yeah. I think you get you learn how to learn at that point. That's probably the biggest skill is, like, you could go through and you could certainly read all the docs or watch all of the YouTube videos that you guys have done or the ones that I have done. But until, like, you actually need that knowledge, like, you may forget some of that.\u003C/p>\u003Cp>So, like, I really prefer, like, an action oriented approach where you just dive in and try to figure it out, and then there's plenty of resources available when you get stuck.\u003C/p>\u003Cp>Speaker 1: Yeah. Correct me if I'm wrong, Pedro. I think even as sometimes when we're filming these from the field episodes that are also on our YouTube, I think sometimes people ask questions and on those phone calls where sometimes those questions are asked, our engineer, Jonathan, will answer them. And so when we have to kind of go back and reanswer them on from the field, we kinda have to play around with it until we figure out how to answer the question. Is it the same for you, Pedro, or is it just me who's, we'll figure it out?\u003C/p>\u003Cp>Speaker 0: No. Absolutely. I mean, that there's a little bit of decoding there and going back and reviewing things as they're asked on calls and from the community trying to clarify those things. So definitely feel the pain there.\u003C/p>\u003Cp>Speaker 2: Yeah. There's some of that for me as well where, like, I'm trying to distill a feature into a video. So I've I've got to for me, like, the nuts and bolts of it. Like, you've gotta get into it and do it yourself to actually be able to translate it. So I've it's certainly the it has to be the same way for developers using Directus as well.\u003C/p>\u003Cp>One of the strengths here is obviously this is no code app that anybody can use, not just, like, the technical members of the team, but, you know, I've got my guys on the podcast. They've got access to this. So if they wanna go in and upload a resource or they wanna upload set up a new meeting for the mastermind calls, they can. And it's simple enough for them to do that.\u003C/p>\u003Cp>Speaker 0: Alright. Awesome. Well, Brian, we thank you very much for being a part of the I made this podcast or video series, whatever you wanna call it. And thank you for giving us a deeper look into better sign shop and everything you're doing there and all the work you've done within Directus. I guess maybe to to leave this off, what, the last question would be maybe what would you like to see from Directus that you haven't seen yet?\u003C/p>\u003Cp>Or is there a feature that you've just been dying to see come to Directus?\u003C/p>\u003Cp>Speaker 2: That's a loaded question there. You're getting you're getting me into trouble, Pedro. No. Yeah. I've been consistently impressed with everything that Directus has done.\u003C/p>\u003Cp>And I had this conversation with Wrike, I think, on one of the calls that I was looking for some guidance on. Hey. How do I do this one feature? But I was talking to Wrike, and I was like, man, you're doing the right abstractions. There's that balance that you've gotta strike of, like, hey, flexibility and and just, like, not taking not putting too much magic into it.\u003C/p>\u003Cp>I as far as what I would like to see, I think Flows could probably use a little more work on the developer experience side, like, making it easier to figure out what's gonna come out the other end of it. It. That that would be a tremendous help as I get more into flows. What else? I and I I think I saw this on maybe one of the roadmap pages, like an Airtable like spreadsheet view layout where I could edit a lot of data at once would be very helpful.\u003C/p>\u003Cp>I think there is probably what, like real time, like websockets maybe in the future. I don't know that we have a ton of application for that. Maybe in the future, there'll be, like, a BetterSign Shop chat module where these guys could talk to each other through the app.\u003C/p>\u003Cp>Speaker 1: Yeah. Create your own little discord.\u003C/p>\u003Cp>Speaker 2: Yeah. Yeah. I mean, I'm excited to to play around with that, certainly. I a lot of times now, I feel like a kid with just, like, a a nice set of Legos. Like, I've got the $100 set of LEGOs, not like the cheap $10 set.\u003C/p>\u003Cp>Like, Directus gives you that nice LEGO set that's got all the pieces where you just build whatever you want out of it.\u003C/p>\u003Cp>Speaker 1: Yeah. Yeah. Well, again, I'll thank you for your time as well. I will second that flows. All of that you the things that you mentioned, I think, are in the works.\u003C/p>\u003Cp>But as someone who has already said in this video that flows can get pretty technical pretty quickly, I will second that. We need some one one click easier options for us nontechnical people, but I do agree that it's very powerful in a good and dangerous way for someone like me who can break things. But thank you again for your time, and thanks to everyone who's been watching this. We'll see you on the next one. And if you have any questions, feel free to reach out to us either on YouTube, Discord, via our website.\u003C/p>\u003Cp>Follow along and subscribe. Also, go and follow Bryant on his social media accounts as well. We'll put those in the link and description. Thanks again for your time and we'll see you on the next one.\u003C/p>\u003Cp>Speaker 2: Yeah. Thank you, guys. It's been a pleasure.\u003C/p>\u003Cp>Speaker 1: And scene.\u003C/p>","Hello, everyone. Welcome to this episode of I Made This. My name is Pedro. And I'm John. Thanks for joining us today. We also have Bryant here. Bryant, why don't you give us a brief introduction into who you are? Yeah. Absolutely, guys. Thanks for having me. My name is Bryant Gillespie. I am a jack of all trades, I guess you could say. I do a ton of different things. I've got a design background. Been in the sign and print industry for probably too many years at this point. I would say, like, 15, 16 years. Yeah. I've worked in kinda all facets of that industry. Like, I previously ran and helped manage a sign and print shop for probably 5, 6 years. We grew that business, and I burnt myself out and was looking for the next thing. And then I got hooked up with a software company that made software for the sign and print industry. So it was a great fit there, but, yeah, I've got a ton of experience in just a little bit of everything from business management to design, marketing, even a little bit of sales at my former company there for a while. And I've also got this development streak that I'm on at this point. I'm not a professional developer by any means, so let me preface everything that we talk about here. With that, Last 2 or 3 years, I've picked up JavaScript development. Mostly, like, working at a software company, I always wondered, k. How hard is it to do what we're talking about on the product side of things? How challenging is it to build this certain feature? And, yeah, I've got a nasty habit of scratching my own itch that sometimes gets me bogged down into crazy projects like the one we're gonna talk about today. Awesome. And through that software development streak and kinda learning software development, is that how you found Directus, or what was your first touch with Directus? Yeah. I can't remember exactly how I came across Directus. I know hey. Like, the background story there is I used to be really heavy into Airtable, and I think it's a really great tool, great platform, great company. But I had a client that we built a really nice Airtable base. And over the course of 2 or 3 years, this thing just kept getting more and more complex as any project does. And so when we first started, it was just simply, hey. Let's keep track of our orders. And then we started bolting on things like, hey. We wanna be able to send an online proof to our clients and let them approve the artwork for this order, and then, hey. Let's let them pay for the order. And then it graduated into a full blown website where a the client could come on sight unseen and place their own order for decorated apparel. We as we kept iterating on that, things got more and more complex, and there were more moving pieces. And we rapidly started hitting the limits of Airtable, not just, like, what it was built to do. There's some API rate limits there that kind of affect how you call their API and what you can actually do with it. But there's also, I think we were on one of the we weren't on the enterprise plan, and the enterprise plan at the time was probably, like, 3 dollars 1,000 a month, which is kind of out of reach for yeah. We did. Definitely chump change. Yeah. So it's kinda out of reach for a small company that has 15, 20 employees. So that's a lot of money for them to spend on a platform where they were at maybe several $100 a month with all their employees on there and all the platforms and things that we had built around AirDance. That makes sense. Yeah. I think you're on a similar journey, or I guess I'm on a similar journey to you. And if for anyone who's out there watching, Brian's face probably does look familiar because Brian also does videos for Directus. And so as I've come along on this Directus journey and as Pedro and I have started doing some videos, I also have an entrepreneurial spirit inside me. I've started several companies on the side and kind of have ideas that are floating around inside of my head too. And so I've been on this similar sounding journey to you of exploring these other platforms out there. A lot of these platforms are great for what they do, and they all have their limitations as any software does. But, you know, the more I've been creating these videos for Directus and working for Directus and seeing what it can do, one of the nice things as I'm building out these platforms and some of them actually make their way to actual companies, whether they're small or medium sized, some of them fizzle out. One of the great things that I've kinda come to discover about Directus is there there is no limitation, especially if you're starting off in self hosted. You're not gonna hit that $3,000 a month mark right right away. And so it it's so great for a beginner developer begin I have some experience in web development and websites and things like that. But as you're starting to explore, you're not gonna hit any wall in regards to pricing. You can kind of build it out and get a full fledged platform without having to worry about, oh, I can't get the full traffic tested. I can't gonna have to pay $500 a month starting off. I think that's kind of a similar journey that I've come to uncover and have more creative ideas flowing as I've been creating these videos for Directus. So it sounds very similar to kind of the journey that you are ahead of. You've been making these videos longer than we have, but sounds like a very similar journey. Kind of creating you found Directus. You started using it. You started creating videos for it. More ideas come to light. Does that kinda sound right? Yeah. A 100%. And so like I was saying, we were hitting the limits of Airtable, and then it was like, well, what's the next jump? Like, where do we go from here? Hey. This could be a stand alone app that we could have somebody program or develop the back end. And at that stage of the journey, I wasn't comfortable enough to say, hey. This is something I could take on myself. So I started looking at, okay. Are we gonna have a developer or an agency or somebody, like, build this into a full blown app? Because we're running out of runway here on this no code tool like Airtable. And and I'm not knocking those tools at all, but, you know, like you mentioned, there's certain limitations that you run into that you you don't know at the outset. You don't know that you're gonna run into those things or we probably had I known where we were gonna end up with the tool, it probably would not have started where we did with Airtable. Yeah. But Fortunate enough that you grew at that pace. Right? Like, people underestimate their abilities and they grow a company or grow a software or an organization much faster than anticipated. So that's a good thing. Yeah. Absolutely. So we were looking for the next thing and I don't know if it was through Product Hunt or Hacker News or some other group that I like, a random Discord or Slack group or something that I'm a part of. I had stumbled onto the Directus website and I saw I think it it was really close to when version 9 launched, I think. And I was, like, like, what is it? This open data platform. And I saw the screenshots, and I was, like, hey. This kinda looks similar to the other tools that I'm used to, but it looks way more powerful because they're talking about a full SQL database that I own and immediate generated APIs and all the things that I could do through the UI, through the no code app that I'm used to doing in other platforms and more. So Directus did not work out for that particular client. We kind of made a few changes that extended the runway on their existing platform, but I kinda took up the mantle, and I was like, hey. This is I could use this for all my other things, like my own personal projects and get a leg up because now this is actually going to scale. This thing is, like, I'm driving the Ferrari on day 1 instead of effectively driving the Pinto for a little bit and then trying to figure out, hey. Do we slap a turbo on this or get some new wheels or what do we do with it? Yeah. As someone who owns a Ford Fiesta vehicle, I feel I feel slighted that, you know, my car is great. It's a great car, but I would take a Ferrari over it. Yeah. And so I think that's a that's a good lead in because a lot of people you know, I I come I came into Directus just thinking you were somebody who created videos, but you've created a whole platform on top of Directus. So why don't you give us a look into the most recent project that you built on Directus because I think it's really cool. I think it kind of ties into a lot of what Pedro and I have heard on calls with prospects and customers as well. So why don't you give us a little insight into the most recent project that you have? Yeah. Yeah. Absolutely. Give me a second here, guys, and I'll share my screen. BetterSignShop kinda started when I left my previous company. I was the head of customer success there. I managed a team of customer success managers that would implement and train people on how to use our software that was designed for sign and print. So I've got this this bug, shop manager, being the 2nd in command for 5 years and experiencing every facet of the business through that, and then working on the tech side as a software provider, I probably worked with 350, 400 shops directly over the course of 7 years at my previous company. It was one of those things. It's like, hey. I'm it's time for me to move on to the next thing, and I immediately jumped into consulting with sign and print shops. Just that was the background that I had. That's where I've got the most leverage. Why not explore that? So that morphed into a lot of random projects. Like, the best thing to come out of it was probably this platform that I'm gonna show you guys. But we started a podcast, we started a mastermind group where we meet once a month, we bring in like an outside expert that talks about a specific topic. Maybe that is online marketing for sign and print shops or how to hire sales reps because it's traditionally not a it's a it's a small business type of industry. There are some very large printers and very large sign companies in the world, but traditionally it's it's a small mom and pop type industry. Most shops have fewer than 20 employees. So we had all these resources that we're putting together, and we said, hey. Let's build a platform to contain all those. So we had just a bunch of random stuff that we were building, and we were like, hey. How do we connect all the dots? Right? Like, we were doing interviews with industry experts. We had 100 of we had a 150 members inside a private Facebook group. We've got some calculators on, hey, should I buy that piece of equipment, or should we keep outsourcing this service? So we had all these things, and the challenge was, like, what do we do with it? Like, how do we bring it all together? And that's when we decided to create this platform, My Better Sign Shop, to bring it all together. I like that you chose a color scheme that fits with Directus, the purples and pinks and Yeah. Yeah. So how I got into this industry was as a graphic designer. So everything I do, I've got that designer OCD type of thing going on where I always hate working on my own stuff because it's so hard for me to pick something. And when we started this, I was like, like, I'm just gonna go wild with this. Like, we gotta go over the top. So my kids, my 3 daughters are into pink and purple, and I said, let's leverage that, and we'll just own those colors. Hey. If you see pink and purple in this space, like hot pink, that's gonna be us. I like it. Yeah. Why don't you why don't you give us a quick walk through kind of how you built it out in Directus and then maybe even an insight into what did you build the front end? What did you build the actual website with? You know, what what technology Yeah. Yeah. Absolutely. So I the thing about Directus, it was so nice building out the data model. And I've you know, I since I graduated from Airtable, like, I I was kinda used to already, like, how do I map out this data relationally? How do I make sure that I'm not duplicating data that that I could just link using a relationship? So the first piece that we started with was probably like the LMS, our learning management system, because we kind of had this course called Profitable Sign Pricing that I was working on prior to this platform, and we just kind of rolled it into the platform. Platform. So inside Directus, I'm not sure if you guys can see this, I could probably zoom in just a little bit. We started, that was the piece that we started with first. So and maybe while we're See your nice custom icons as well. Yeah. Again, that's the design OCD part where everything has to be nightly nicely organized. Yeah. The system, we did all module based because, like I said, it was originally just a bunch of stuff that we had built. And we were like, hey. Let's give people one simple way to access it. So I'll just throw some of these out. And then we have our so we've got our library here, where the library has some resources that are, like, downloads for you guys. Hey. What questions should we be asking to qualify customers? So building this out, it was a really super simple indirectus. If I hop into, like, our library data model here, this is just a folder where we put all of our other collections. So we've got our resources, which are just kind of one time offerings, and then we have our courses. So the data structure here, we have a course that sits at the top level. Then each course has several modules, and each module has lessons. So if we open up the course, we can see we've got, hey, is this a free course? What's the status of this? Is it published? Is it draft? What's the title of the course? What are we gonna use for the slug, which is the URL that we're gonna access that at? The description, we've got a featured image. Then we have the modules for that course. That is a one to many relationship that links to the modules. And inside the modules very similar, title, status, what's the course that this module belongs to, what's the description of the module, and the lessons for that module. So the meat and potatoes is probably in the actual lessons. So we've got the module it belongs to, stylus, title, slug, description. And then we have some interesting things like content, which is the WYSIWYG editor in Directus, which is super nice. Other platforms that I've used, Airtable specifically, like, it does not have a WYSIWYG editor. So doing long form content there does not it's just not helpful. We've got a video input. So this is just a string. On the front end, we've got, a function that will clean this up. So you can paste Vimeo, you could do YouTube, you could do Loom videos. Whatever that is, it'll clean that up and generate, like, an embed code. We also have, like, a form schema here. So some of the courses that we are going to do, we've got let's actually just flip over to one of the lessons maybe here. So you're saying a school or a university could build an entire learning platform modernized indirect us. So, you know, that's kind of what you've built here in one one module of your platform. Absolutely. Yeah. A 100%. Yeah. Yeah. We actually have a university. Yeah. Could be yeah. School, university, anything, really. We actually have a an LMS use case for one of our one of the clients that I work with. I don't know if I'm allowed to say their name or not, so I just won't I'll avoid that. But they've built essentially in a very similar schema with the modules, the courses linked. Yeah. Yeah. And eventually, I think we'll add, like, some completion percentages and some niceties onto this. But, yeah, you can see here, this is one of our lessons here. And I on the front end, we've also got, like, this profitable sign pricing course has it's almost like a calculator, like a worksheet type of offering. It's not like a quiz per se. Let me just, show it to you guys, and I'll go back to the side by side here. So this is the front end of the application. We've got our main navigation over here, and it's divided into the different modules that we have. This my shop is a new one that has not released yet. So I'm giving you guys the local flavor here that's got the latest updates also so I don't break anything. And then we have, like, a community module, some other things. But if we enroll in our course here. Okay. Alright. So this is what the initial view looks like. You can expand these modules over here. But I'm going to show you the same calculating your shop rate lesson. It looks like I've got the wrong video here, but I'll just go ahead and hide this menu so we can go full screen. So the format here, we've got a nice video that they'll follow along with. We've got a short description. And then this particular one is all about calculating their shop rate. So in custom sign and print you're building a custom order every single time. Your unit of work there is your time. So how much should you charge for your time? Big question for everybody. So here, basically, we give them the ability to go in and enter in their monthly expenses, how many days a week they're working, how many team members they've got, how often those team members are working, and I don't work 7 hours a day. And what target profit they want and then it will spit out what their hourly cost is to operate. We got 2 guys working 6 hours a day. We wanna make a 100,000 or 30,000 in profit at the end of it. Shows us their hourly cost, so this is what that what it costs to keep the lights on, and then what they have to charge per hour or per day to actually make those profit numbers. So those are the things that we're putting together inside this platform, and it's all dedicated to helping sign and print shop owners grow and improve their business. That's awesome. That that's sweet. And I noticed that the front end takes a lot of visual cues from the back end. Is that intentional? And what technology do you use for the for the front end of the site? Yeah. Yeah. I'm glad you picked up on that because Yeah. Yeah. I like, when we started down the road of modules, I was that's a kind of a design challenge. It really is. And Directus has done such a great job with it of, like, how do I show hierarchy? How do I make sure that people know where everything is at? And I kinda took cues from that. Yeah. We used intercom a lot at my previous employer. They've got, like, a similar, hey. Our modules are on the left hand side kind of set up. And I thought that was a great design pattern. But, yeah, a lot of this has been taken cues directly from the back end inside Directus. That's awesome. Yeah. We've even seen people, because of the way Directus is designed on the back end, using the back end as if it is an internal tool for a business, like, using the back end as an actual front end as well. It's just like this is the tool that we log into as employees. And that's it's easily doable. Like, you can log in and you can white label this. And if you wanted to be a little more stingy about it, you could even turn off the documentation where, like, it didn't have any, like, references to direct us at all. But Right. Yeah. From And then using roles and permissions to just hide everything that wouldn't be relevant to that user or that group of users. Absolutely. Yeah. And that that was, like, an option that I considered. That would've dramatically cut the time to get something launched, but I like, being design oriented, I Yeah. That OCD kicked in. Okay. We're gonna build a custom front end on this. That looks great. So And I think that's one of the I think that's one of the beautiful things about Directus is if for any reason in the future you decided to move away from Directus, if your front end was also the back end, you're kinda stuck there. But with your front end being built separately, you can pull that SQL database because as you mentioned, it's just your it's your SQL database. You could pull that information out. All the tables are there. Directus had injected nothing into it, and you could move to another back end. So I I think that some people find the benefit. We we do think Directus can fit long term, but it is nice to sometimes separate those front end things out because if for any reason you needed the SQL database for somewhere else, you could put it somewhere else as well. Yeah. I mean, this is my actual SQL database here. Right? Everything Directus is namespace there. Again, like you said, that's this is just the kind of metadata that enables Directus to do its thing. So, yeah, we've got books. We've got all the lessons. Like, they're all there. Directus, none of this is intertwined with the Directus system data, which it which is very nice. Yeah. I like that aspect of it. I don't see moving this from Directus because, like, the speed at which I can put something together is that's the craziest part of this whole thing for me. I'm not being a professional developer, I'm, like, self taught developer. I've mostly played, like, the get it done guy role, is what I like to call it. Every company that I've been in or even on my own stuff, I'm the guy that if I don't know or I if I don't have somebody that'll do it for me or if, you know, there's a problem, like, I'll figure it out however I need to. And that's what led me into development in the first place. But Directus gives me that tool, like, you know, almost almost too easy for me to go down a rabbit hole and build something. Did you say go down a rabbit hole on purpose? I didn't. No. But that's the bunny puns could come easily, though. So, you know, this new module that we've been working on is basically like a knowledge base of Oh, awesome. SOPs and standard procedures. Yeah. Like I mentioned, a lot of these small shops are they don't have things like this in place. So we're gonna give them a template for this. K. Here's your employee handbook. Go in and customize the pieces that you need, but we'll get you 80% of the way there. And using Directus, like, building something like this out, is super on the back end, I probably spent the most of the time here to build this feature of like cards and collections. So if I open up one of these cards, here's what the back end of this card looks like. Probably the most time spent was just trying to map out how I wanted the data to look. So here we've got collections that hold the cards, collections could be nested into each other, so coming up with that schema, like on paper was probably the hardest part about it, but as far as actually getting an API that I can use on the front end it probably took me 10, 15 minutes to put together these 2 collections inside Directus and actually start building something on the front end, which is huge. This is really cool. If I would have done something previously, I don't have the back end knowledge or skill set. So I would have either been mutts trying to learn that and put that together and maybe something like Laravel or Rails or something that gives you a leg up or been paying somebody 1,000 of dollars a week probably to build something like this. And just like the speed and flexibility that Directus gives me. K, if I've got an idea and my girls are off shopping for the weekend, which is exactly how this feature came about, You know, it's it's easy enough for to build something that's gonna deliver value in in a weekend. Yeah. So so people just need to take more trips away from their family and you could do more projects. Is that what you're saying? I'm not saying that at all. No. If you get a if you get a random weekend where and you have 3 kids and your wife takes them shopping, use that for project time. 100%. Yeah. So seeing this seeing this knowledge base really gets my gears turning on a lot of different ideas that you could start implementing. And I'm not gonna impose any of those on you, but I'm sure you have a lot of ideas and future plans around this project. Could you maybe Oh, yeah. Fail some of those or other things you plan to add on to the this project with Directus? Yeah. I I mean, even yeah. Like, we've got onboarding checklists that are Oh, wow. Like a thing that we're putting into this. So one of the big things in any business really, is how do you onboard new employees? And this is specifically generic enough that it doesn't have to be used for onboarding. But, you know, since we're focused on the team aspect, that's the primary use case here. But, you know, we're working on this onboarding checklist structure where, hey, Whenever we hire somebody, we want them to be able to go in and have just a, hey. Here's how your next 6 weeks or your first 6 weeks are gonna go with the company. And not only does that improve morale, but, you know, it it's easy. It improves retention as well. Like, if you start a new company and you've got the 1st 6 weeks laid out for you, here's everything you need to do to be successful in this new role, that's gonna skyrocket retention. So we've got this set up where you can assign the specific user to a task within the checklist in case, like, a manager needs to be assigned to a certain task instead of the new employee. You could set up due dates, all of that, And then you just run the checklist, and we'll have a couple dashboards in here. This is still very much a work in progress, but that's, that's probably the newest thing. We've got tons of different ideas of what we're gonna implement in the future, but, you know, that's kinda what we're working on at the moment. Yeah. I can see this specific feature being really useful for a lot of smaller startups or companies who just don't have the time to build this. Do you have any plans to list the setup or at least some sort of instructions in the upcoming marketplace. You could be able to to list this up there for other companies to be able to use this as well. Have you thought about that? Yeah. Yeah. I'm totally open to it. I need to learn more about the plans there and how we could make that work. Or you could just send people use the your platform too. Yeah. No. I for me, I don't see this I don't wanna get this thing outside of sign and print. So this is probably gonna be, like, a really niche thing, but, totally, what we built here, it's like, there would be nothing stopping you from taking this and either generalizing it to any company or, for me, I mean, like, you could take this and and focus on your if you had a specific intersection, and that's kind of my philosophy of where I bring value anyway is at the intersection of sign and print and tech, automation, integration. Hey. Bringing those 2 together is like a space that that I have, bring the most value. So if you're out there and you're listening to this and that's that describes you, you got a passion on the tech side, you've got some industry knowledge, you could take something like Directus and build a tool that will help bring in recurring revenue for you or, honestly, if I were to focus on this full time, it could probably be a full time business that that we could grow and scale. But, yeah, I've got a few other priorities, and I quite like the lifestyle aspect of it at this point. That's a perfect segue because I was gonna ask you guys as we kinda start to wrap this up, advice for those people who are building platforms or similar platforms. You obviously have access to the Directus team directly as you kind of work with us week by week. But did you research things on GitHub, or did you reach out to people on Discord? Or did was it kind of just playing around? What advice would you give to those, either new or relatively well versed in direct us? What did you run into that you would advise people to sidestep or hop over if we use a budget plan? Yeah. I've always been, like, action oriented, and I don't know if that's sometimes that's a fault. A lot of times, I think that's a strength because and I know, like you said, you were getting into development, John. There's a lot of, like, courses out there on here's how to become a full stack developer, here's how to become a Vue JS developer, and it's just module after module after module after module. And I've tried those, and I discovered that it didn't work for me because it it's either a project that we're building that I don't care about or it's just too abstract in the moment. The it's like, I don't know when I'm gonna use this. That's the same reason that I couldn't give you if you gave me a calculus test right now, I couldn't tell you the first answer on any of it because I haven't used any of that stuff in so long even though I learned it. So the first thing that I would say is, hey. If you got a decent idea or one that you think could be a good side project or a business side. Get into Directus. It's simple enough to build out your data model. I've even got if you're looking for a starter on the front end, where is this thing? So our platform is built on Nuxt, which is based on Vue. Js, but if you need a good starter that already has the plumbing connected with Directus, we've got a starter that you can use as well. So you can pull this down, it's just Brian Gillespie slash nuxt3 dashdirectus dash starter on GitHub. It's getting a little popular, I think. Not that 55 stars is anything compared to the 18 or 20,000 at Directus, but this is a good starting point. Like, just set up a couple collections inside Directus, start building something. And then as you run into challenges, the direct to stocks will be your best friend. Shout out to Aaron on that side of things. I've seen a lot of great improvements on the documentation recently. I really love this cookbook section, like some of these things, how to do a content hierarchy. This was kind of one of the things that probably tripped me up when I first started with Directus, some of these more specific things, which I'm sure that's a challenge for you guys as well because Directus us can could do so many different things. Yeah. Like, how do we tell people how to set these things up? And then the community has been great as well. Even even before I was doing the videos on YouTube for DirectUs, if I would run into any gotchas, k, I I don't know how to do this. I think Brain Slug was one of the guys that reached out and helped me before he was working with the team as well. Yeah. Like, initially, I was trying to set this up and, like, tenancy is a big question that came up as well, and it was one of the things that I had trouble navigating of, like, how do I set up not just, like, an account inside here, but each account has many different users. So, how do I manage all of that inside Directus? I know Directus will do it, but how do I figure it out? And the guys in the community, guys and gals, I should say, were very helpful in that regard of just hopping into the discord, which I like a lot more so than, like, a support forum or some of those other it's nice just to hop in and just kinda post a question and see who's already had experience doing this thing. Yeah. Shout out to BrainSlug as well. I'll second that. I think his name is the one I see the most in Discord, and I believe he was on vacation a couple months ago, and it got a little quiet in Discord. I'm like, we need brain slug back. So shout out to him. Yeah. Yeah. And there's quite a few names that I see popping up time and time again. So one of the other kinda nice things that I really like about Directus here is the insights module, where I've just been able to set up, like, a quick dashboard that shows me our accounts. So this was back in October. That was when we initially launched, and I could see how many accounts are being created each day, the total number of accounts. So we've got a free plan, and we've got a pay plan. I could see how many people have published their shop listing within our community, what our recommended book numbers come from, and this is all community driven stuff. Hey. This is one of my favorite vendors to work with, or this is a book that I recommend reading. But Direct has made this really easy, whereas, again, like, if I wanted to do this, I would either be exporting the data from Directus and doing a pivot table and some charts inside Google Sheets, which would be a blast. Pivot tables. Or I would have to build I would have to build the same functionality somewhere into my own app, which would be kind of a pain to do. So Directus makes this super simple for me. And this has this has been helpful to share with the other guys that are working on the podcast and this platform with me just to give them motivation. K. We signed up 3 accounts today, and we've done very little promotion on this thing at all. So Have you played around with flows at all? I know for me, flows can get pretty technical pretty fast. Yes. Yes. So we do have several flows going on. One of the cooler features that I really like about the, like, the community module that we have, in addition to like the list view of here's all the member shops that we have where you can browse what their capabilities are. Hey, if I are you UL certified? Which means, hey, can you do electrical work? Or do you have a wide format printer? One of the really nice things here is this map view. Sign and print is locally, it's mostly a regional, local type market. You're not gonna, with the exception of really large signage, if you want a banner or something simple, you're probably going to be dealing with a local person. So this is another thing that I stole from Directus. You guys were using Mapbox on the admin side for geolocation. Previously I'd used Google Maps and I found Mapbox to be a lot easier, but I wouldn't have known about that had it not been through Directus. But being able to, like, filter these based on a map, tremendously helpful. Okay, I'm located in West Virginia, who around me has a bucket truck that can go do an install, so here's a couple different options that I can find. So it's all about collaboration. But on the Directus side, when somebody edits their listing, and it looks like I've managed to break something there, when they edit their listing they add their address information. So on the flow side of things we've got a Flow set up that will send that address to Mapbox and pick up their latitude and longitude geocode data anytime that listing is updated. So if they go in and change the address, that will store their location correctly. See I've got so many different modules I can't even find them. Directory. You need a little map icon. You're all iconized, you just need a little map. Yeah. That's what I need. Yeah, so the geolocation data here, it will automatically generate this for us. So that was been a that was a huge, like, one up for using flows, so I didn't have to, like, custom code any of that or do it manually. Some of the other flows that we've got on our Mastermind calls, We've got, let's open that up. So we've got these thumbnail images that show when you go through and browse through these previous calls. That is a flow that is set up whenever the recording is posted for that previous call it will go out to Vimeo and capture the thumbnail image so we could show it here. And I've also got just a nice little anytime a new user account is added, it will ping us inside Slack. So let me see if I can open this up for you guys just to give you a taste. Yeah. So we've got an inbox inside Slack that whenever a new user and a new account is created, that happens through flows as well. Very cool. I assume you used a little bit of just toying around till it worked, which is what I do. I just kind of change one thing until it works. Probably a little bit of the dots. Is that kinda how you figured some of those out? Yeah. So my new method for flows is basically taking it step by step. Like, I will create the initial flow or, like, the trigger setup, and then I will trigger that flow to make sure to see what data I've got coming out of it, and then I will just kind of march step by step after that. That kinda makes it easier for me to stay focused instead of building, like, 30 steps at once and then trying to figure out why I'm not getting what I want at the end of it. I've also my wife makes fun of me. I've got sausage fingers. So a lot of my trouble with flows is usually just just because of typos that I'm not paying attention to. Yeah. I think the I think I was working on a flow on one thing that I'm kind of toying around with here yesterday or the day before. I think I had about 70 iterations where I was just changing 1 step by step like you kinda do, but also why isn't this working? Okay. Let's change this one thing. Oh, let's change this let's change it to another thing. That's my method of figuring out how it works. Because you you kinda mentioned just starting Yeah. I yeah. I think you get you learn how to do it. Yeah. I yeah. I think you get you learn how to learn at that point. That's probably the biggest skill is, like, you could go through and you could certainly read all the docs or watch all of the YouTube videos that you guys have done or the ones that I have done. But until, like, you actually need that knowledge, like, you may forget some of that. So, like, I really prefer, like, an action oriented approach where you just dive in and try to figure it out, and then there's plenty of resources available when you get stuck. Yeah. Correct me if I'm wrong, Pedro. I think even as sometimes when we're filming these from the field episodes that are also on our YouTube, I think sometimes people ask questions and on those phone calls where sometimes those questions are asked, our engineer, Jonathan, will answer them. And so when we have to kind of go back and reanswer them on from the field, we kinda have to play around with it until we figure out how to answer the question. Is it the same for you, Pedro, or is it just me who's, we'll figure it out? No. Absolutely. I mean, that there's a little bit of decoding there and going back and reviewing things as they're asked on calls and from the community trying to clarify those things. So definitely feel the pain there. Yeah. There's some of that for me as well where, like, I'm trying to distill a feature into a video. So I've I've got to for me, like, the nuts and bolts of it. Like, you've gotta get into it and do it yourself to actually be able to translate it. So I've it's certainly the it has to be the same way for developers using Directus as well. One of the strengths here is obviously this is no code app that anybody can use, not just, like, the technical members of the team, but, you know, I've got my guys on the podcast. They've got access to this. So if they wanna go in and upload a resource or they wanna upload set up a new meeting for the mastermind calls, they can. And it's simple enough for them to do that. Alright. Awesome. Well, Brian, we thank you very much for being a part of the I made this podcast or video series, whatever you wanna call it. And thank you for giving us a deeper look into better sign shop and everything you're doing there and all the work you've done within Directus. I guess maybe to to leave this off, what, the last question would be maybe what would you like to see from Directus that you haven't seen yet? Or is there a feature that you've just been dying to see come to Directus? That's a loaded question there. You're getting you're getting me into trouble, Pedro. No. Yeah. I've been consistently impressed with everything that Directus has done. And I had this conversation with Wrike, I think, on one of the calls that I was looking for some guidance on. Hey. How do I do this one feature? But I was talking to Wrike, and I was like, man, you're doing the right abstractions. There's that balance that you've gotta strike of, like, hey, flexibility and and just, like, not taking not putting too much magic into it. I as far as what I would like to see, I think Flows could probably use a little more work on the developer experience side, like, making it easier to figure out what's gonna come out the other end of it. It. That that would be a tremendous help as I get more into flows. What else? I and I I think I saw this on maybe one of the roadmap pages, like an Airtable like spreadsheet view layout where I could edit a lot of data at once would be very helpful. I think there is probably what, like real time, like websockets maybe in the future. I don't know that we have a ton of application for that. Maybe in the future, there'll be, like, a BetterSign Shop chat module where these guys could talk to each other through the app. Yeah. Create your own little discord. Yeah. Yeah. I mean, I'm excited to to play around with that, certainly. I a lot of times now, I feel like a kid with just, like, a a nice set of Legos. Like, I've got the $100 set of LEGOs, not like the cheap $10 set. Like, Directus gives you that nice LEGO set that's got all the pieces where you just build whatever you want out of it. Yeah. Yeah. Well, again, I'll thank you for your time as well. I will second that flows. All of that you the things that you mentioned, I think, are in the works. But as someone who has already said in this video that flows can get pretty technical pretty quickly, I will second that. We need some one one click easier options for us nontechnical people, but I do agree that it's very powerful in a good and dangerous way for someone like me who can break things. But thank you again for your time, and thanks to everyone who's been watching this. We'll see you on the next one. And if you have any questions, feel free to reach out to us either on YouTube, Discord, via our website. Follow along and subscribe. Also, go and follow Bryant on his social media accounts as well. We'll put those in the link and description. Thanks again for your time and we'll see you on the next one. Yeah. Thank you, guys. It's been a pleasure. And scene.","published",[145,158,167],{"people_id":146},{"id":147,"first_name":148,"last_name":149,"avatar":150,"bio":151,"links":152},"791e1503-1d88-463d-9347-0b9192933576","Bryant","Gillespie","9013afc8-e8d7-4182-9b18-44db08117bb9","Developer Advocate at Directus",[153,155],{"url":131,"service":154},"website",{"service":156,"url":157},"github","https://github.com/bryantgillespie",{"people_id":159},{"id":160,"first_name":161,"last_name":162,"avatar":163,"bio":164,"links":165},"9610ff1c-bcfd-4e59-9ab8-17ff5f567ccb","John","Daniels","5100c5aa-0455-48eb-bae3-4380bfd82ea2","Customer Success at Directus",[166],{"url":134,"service":154},{"people_id":168},{"id":169,"first_name":170,"last_name":171,"avatar":172,"bio":164,"links":173},"6057329f-2147-4f46-913f-d6b151dc1bf1","Pedro","Pizarro","7940df6a-db0a-4afe-81bb-a136ef93d229",[174],{"url":137,"service":154},[],{"id":177,"number":178,"year":179,"episodes":180,"show":184},"7656df39-eed0-444b-b9af-9e76986b8052",1,"2023",[181,122,182,183],"6444b7b8-734e-4b2e-abf2-844210988c13","9b8ac3af-e201-4429-96de-699aebd117ea","dab588c7-1feb-457f-9cfd-b574b7eea4e0",{"title":185,"tile":186},"I Made This","1e087400-d8fc-417d-a7c2-50283beb9996",{"id":182,"slug":188,"season":177,"vimeo_id":189,"description":190,"tile":191,"length":192,"resources":193,"people":197,"episode_number":199,"published":200,"title":201,"video_transcript_html":202,"video_transcript_text":203,"content":8,"seo":8,"status":143,"episode_people":204,"recommendations":206},"talent-recruitment-platform","894101800","In this episode of I Made This, Erwin and Uwe walk Bryant through one of their recent Directus projects - a engineering job listing and talent recruitment site for their client - Rockstar Recruiting.\n","17109185-a938-45b3-a552-a167c18a56fc",49,[194],{"name":195,"url":196},"Heinrichs & Heinrichs","https://heinrichsundheinrichs.de/",[198],{"name":130,"url":131},3,"2023-06-01","Building a Talent Platform with H&H","\u003Cp>Speaker 0: Hi, guys. Brian here for Directus. Welcome back to another episode of I Made This. Today, I've got very special guests with me, my friends from Germany, Heinrichs and Heinrichs. I've got Erwin and Yueh.\u003C/p>\u003Cp>Guys, welcome to I Made This. I this is gonna be probably one of my favorite episodes. How are you guys?\u003C/p>\u003Cp>Speaker 1: Thank you so much for us. We are fine. Thank you.\u003C/p>\u003Cp>Speaker 0: Excellent. Excellent. I I I would just preface this to the audience and say that these guys build amazing things with Directus and Nuxt and all kinds of other technologies, and I'm really excited to showcase this project that they are going to demonstrate for us. But before we dive into that, guys, give me the story of Heinrichs and Heinrichs and yourselves as well. Yes.\u003C/p>\u003Cp>Sure.\u003C/p>\u003Cp>Speaker 1: Our story is, I think, not not a normal story for front end developer, but a very normal story for designers. So we both did study communication design, and that's a very graphic design related course. Yeah. You can compare it with graphic design, to be honest. And and we did do during our studies a lot with with user interface designs and things like that, and we did love design all the time.\u003C/p>\u003Cp>And we tried to, bring new ideas for the web to life. And at the beginning, we just were the dinos, and so we had freaking ideas, but, had had the opportunity to realize it. And, yeah. So so we thought about, at at first, we we started with, cooperating with programmers, and they had to bring it to life. And after after a a bit of time, it gets more and more frustrated because we hear heard things like, no.\u003C/p>\u003Cp>It's not possible in this way. So we learn about our by ourself, and that's the reason why we are designers and front end developers right now.\u003C/p>\u003Cp>Speaker 0: That's great. So, hey, you guys were working with programmers before, and they just like, they would take your designs and say, hey. This is not gonna work out. And you're like, no. It is.\u003C/p>\u003Cp>It would Yeah. It should be. If we have to do it ourselves, we'll get it done. Yeah. Right.\u003C/p>\u003Cp>I love that. I I I love it. So when did you guys start your agency?\u003C/p>\u003Cp>Speaker 1: We we don't have a agency right now. So we're both working as freelancers, but\u003C/p>\u003Cp>Speaker 0: Oh, okay.\u003C/p>\u003Cp>Speaker 1: We are collaborating the Okay. Of the time. So all all the projects we're doing together. And, we started for, for two and a half years ago, I think. Yeah.\u003C/p>\u003Cp>With full time just doing our stuff, it's, like, two and a half years.\u003C/p>\u003Cp>Speaker 0: So, like, how many in that 2 years, like, how many projects have you guys done?\u003C/p>\u003Cp>Speaker 1: We did a lot of projects, to be honest. So, for the most of the time, we're working as, like, ghost designers or ghost front end developers because we, signed a lot of NDAs and worked for global players and, did very niche things where we, design unique, user interfaces, and then we, more more, started to do things for for our own clients. So not just participating in in a team, and I think for our own projects, we did in the last two and a half year. Didn't count it, to be honest. And so there must be more than 20.\u003C/p>\u003Cp>Speaker 0: That's awesome. That's awesome. And I like, before the the show, I was browsing around on your website, and I love the the interactions that you guys have programmed into it. Thank you so much. It's like do you do you get to like, do clients come to you specifically for that style of, like, hey.\u003C/p>\u003Cp>We want something very interactive, or is that just like you guys flexing your own creative muscles for your own site?\u003C/p>\u003Cp>Speaker 1: Yeah. It's a bit flexing, to be honest, because at the moment, we're just, we just get, our clients not because of our huge, our huge, digital performance. And the digital performance, it's more like, we don't we don't have any we don't have an Instagram account. We, we barely happen on LinkedIn. We I think our website is currently, not, so the robots 16 blocks right now Google and things like that.\u003C/p>\u003Cp>Speaker 0: So it\u003C/p>\u003Cp>Speaker 1: barely happen out there in the in the world wide web, but we're trying to to, yeah, to to reach out more and more. And we also have a plan doing a block and things like that to get more so that we can show more the Heinrichs and Heinrichs approach and not be, we're just ghost designers, and you can place us into a team, and then we will figure something out.\u003C/p>\u003Cp>Speaker 0: Yeah. Yeah. I I mean, I I love it. Like, I think your approach is awesome. And, talk to me about, like, the the tooling that you guys are using.\u003C/p>\u003Cp>Like, first and foremost, like, what are you what are you designing it? Like, how are you how do you come up with this stuff? Does it like, does everything start in, like, a sketchpad, or you, like, go straight to Figma? Like, talk to me through that.\u003C/p>\u003Cp>Speaker 1: Yeah. It depends, to be honest. So sometimes we we, go the the very classic way and start with a mood board and think about so if if it's a if it's a topic where we have to deep dive, then we have to then we start googling a lot. So which are which which what does our client do? So what what does he want how does he want to present himself in the in the Internet or with this idea of his, of his brand?\u003C/p>\u003Cp>And then we start, for example, with the mood board, and then we go straight into Figma or Adobe XD and start there, with some ideas. They can roughly be just some UI components, more more like a rough scratch, not not just so we don't do a pixel perfect design at the beginning. It's more of the direction process where we, where we try to generate look and feel and, to to bring a brand to life. Yeah. And after that, then we go for Yeah.\u003C/p>\u003Cp>For a more precise approach. Yeah.\u003C/p>\u003Cp>Speaker 0: Alright. Cool. Cool. What are what's your your tech stack that you guys are using for, like, most of your clients?\u003C/p>\u003Cp>Speaker 1: Our tech stack is for us. So Nuxt 3 is one of our most used front end frameworks. Yeah. We we also did some things with pew 3, but when it comes to a website for our clients, then Next 3 is our way to go. And for the back end\u003C/p>\u003Cp>Speaker 0: the go to.\u003C/p>\u003Cp>Speaker 2: Use\u003C/p>\u003Cp>Speaker 0: I love Nuxtree.\u003C/p>\u003Cp>Speaker 1: Yeah. We we we do also. And for the back end, now our main way to go is directors. So we all we so whenever there is a a chance to place directive, then we're going to use it. I yeah.\u003C/p>\u003Cp>Yeah. We\u003C/p>\u003Cp>Speaker 0: would. And, of course, that's why we're here. But but yeah. Yeah. Like, what did you guys like, what tools did you use for back ends before Directus?\u003C/p>\u003Cp>Or Like our well, let me preface that. Like, are most of the sites that you're doing, like, very content heavy? Or, like, are you doing, like, apps for clients as well? Or We did both.\u003C/p>\u003Cp>Speaker 1: So we we started with\u003C/p>\u003Cp>Speaker 0: Okay.\u003C/p>\u003Cp>Speaker 1: So when when we when we talk about the the typical client who just needs a website, then we came from, WordPress. So, like, almost everybody who started with just the front end things, and there there we started in the in the very early stages. We just, bought the theme, And then we customized it, changed the colors, had to look out, had to look of which which plugins could we install and things like that. And after that, we started doing our own themes, then we just back introduced Elementor, things like that. Yeah.\u003C/p>\u003Cp>But yeah.\u003C/p>\u003Cp>Speaker 2: Competitive. Yes.\u003C/p>\u003Cp>Speaker 1: Everybody everybody knows WordPress. Yeah. And we don't like PHP, to be honest.\u003C/p>\u003Cp>Speaker 0: It's a it's a solid platform. Yeah. It is. I'm right there with you. Like, WordPress is, it's a solid platform.\u003C/p>\u003Cp>I I my experience has been much the same, though. So I'll I'll echo exactly what you guys said.\u003C/p>\u003Cp>Speaker 1: Yeah. It become becomes very difficult when you start installing plug ins and another plugin, and then you have to to update it, and then you have to figure out if it's still compatible with the new WordPress version and things like that. And then your whole page keeps breaking. Yeah.\u003C/p>\u003Cp>Speaker 0: That's that's great when you log in and see there's, like, 75 update notifications for the plugins. Right? You know it's gonna be a good day. It's so true. So I do did you guys jump directly from WordPress into Directus, or was there, like, a\u003C/p>\u003Cp>Speaker 1: No. No. No.\u003C/p>\u003Cp>Speaker 0: We some other tool that you try.\u003C/p>\u003Cp>Speaker 1: Yeah. We we did a lot of traditional CMS systems. So we also worked with Joomla. I don't know if this says to anyone out there. We also used KontaO, and that's a very small traditional CMS system.\u003C/p>\u003Cp>Then we also used, for ecommerce systems, the WooCommerce plugin. That is WordPress as well, but we also did something with Magento. And, yeah, we we we tried a lot, to be honest. And then there comes the point where we heard about, the headless CMS system at first, and then we also tried things like the Tamek. We also tried, Strapi Strapi and\u003C/p>\u003Cp>Speaker 2: Yeah. Pimcore.\u003C/p>\u003Cp>Speaker 1: Pimcore, and yeah. And then Of course. Also.\u003C/p>\u003Cp>Speaker 0: Gosh. So I know you guys have been through, like, dozens of different tools.\u003C/p>\u003Cp>Speaker 1: Yeah. We tried everything,\u003C/p>\u003Cp>Speaker 0: to be honest. How did you guys originally come across Directus, or how did you find Directus?\u003C/p>\u003Cp>Speaker 1: I was more or less a Google search.\u003C/p>\u003Cp>Speaker 2: Yes. I'm\u003C/p>\u003Cp>Speaker 1: sorry. So we we just Googled, what is the best headless team f you could use, and then you get, yeah, then you get directors, you get, you get\u003C/p>\u003Cp>Speaker 2: Story block, I think, is\u003C/p>\u003Cp>Speaker 1: Story block contentful, things like that. And Yeah. That that we we did try every day.\u003C/p>\u003Cp>Speaker 0: Marketing guys are definitely gonna love that. And and\u003C/p>\u003Cp>Speaker 2: we also love the the open source approach.\u003C/p>\u003Cp>Speaker 1: Yeah. That's awesome.\u003C/p>\u003Cp>Speaker 2: Because, where we we did, we didn't have much experience with headless CMS systems, so, the open source approach was was the best one for us to to give it a a try. So we started out with a Strapi, I think, and then tried directors. And directors, us had much more flexibility in building these relations between between the data we we want.\u003C/p>\u003Cp>Speaker 1: Yeah. I would say, we, as a designer, directors was usable, was very, very was was was was very easy to use in comparison with Strapi. Because in Strapi, you had to the server has time to reload if you fetch anything in the data object, things like that. So it was more or less in the in the daily task. Directus was way easier to use.\u003C/p>\u003Cp>Speaker 2: You change something. You have a real time API, and, this combined with the with the hot module reload, and Nuxt 3 was perfectly efficient workflow for us.\u003C/p>\u003Cp>Speaker 0: Yeah. Awesome. Yeah. So I like, my one of my other questions to you guys, obviously, you've got clients that are using Directus. We kinda internally, we consider it like a a Swiss army knife.\u003C/p>\u003Cp>Like, you could use it for an app back end. You can use it for a headless CMS. There's, like, too many different use cases. So I'm curious, like, how do you guys present Directus to your clients when you're, either, like, in, like, the initial stages of the project or, yeah, later when you're actually, like, building the CMS and and, you know, showing it to them?\u003C/p>\u003Cp>Speaker 1: Yeah. It depends. Sometimes, we we have, clients who does have a a little bit of technical expertise. And when we drop, when we just, make some backward dropping like Hetto CMS, they are, yeah, go for it. We love Hetto CMS.\u003C/p>\u003Cp>But but and sometimes we have clients who came or who does have WordPress sites at the moment, for example, and they are like, Yeah. Okay. It could be faster, but, I think it's already fast. And then you have to deep dive into what what are the, what what are the the opportunities while using a headless CMS and why it's so much better than using a WordPress, for example, in this scenario where you have to, maybe in our example, what we're going to show, that we have, that we have 2 fraud end sites and one director's back end. This is so much more practicable than than a WordPress back end.\u003C/p>\u003Cp>And and then sometimes where where we do a back end for for a web application, for example, then, there's no other possibility than using Swiss Army knife, as you said, as directors, for example.\u003C/p>\u003Cp>Speaker 0: I see.\u003C/p>\u003Cp>Speaker 1: Or you even could use it for the digitalization of portfolio. That's also things we've done with, product information management systems. But, as we deep dive in in directors, we learned that this also could be totally possible doing with directors, and that's also a thing.\u003C/p>\u003Cp>Speaker 0: Yeah. Like, the spoken like a true, champion, I guess. Like, that is he like, you guys are very good. Very good. I also love Let's get into it.\u003C/p>\u003Cp>Alright. Like, are you guys ready to dive in? Oh, go ahead. I'm sorry, Yue. Sorry.\u003C/p>\u003Cp>I also love the the the\u003C/p>\u003Cp>Speaker 2: the the fact that we can, like, outsource the the content task to the to the to a specific person or to a specific team and say, go for it.\u003C/p>\u003Cp>Speaker 0: That's true.\u003C/p>\u003Cp>Speaker 2: Fill it out, play with it, create some content, and we can focus on building, the front end or the actual use case for the date, the the other ones are creating.\u003C/p>\u003Cp>Speaker 1: Yeah. That's so true.\u003C/p>\u003Cp>Speaker 0: Yeah. So you can hey. Like, being able to, like, decouple the content and the the front end the business logic. Useful in that scenario.\u003C/p>\u003Cp>Speaker 1: Yeah. That's true.\u003C/p>\u003Cp>Speaker 0: Great. Cool. So do you guys wanna dive in and and show this project? I can remember, like, seeing it when we had a a quick call before we scheduled the episode, and I was blown away. And I I think the audience is too.\u003C/p>\u003Cp>But\u003C/p>\u003Cp>Speaker 1: Yeah. Sure. I'm going to share my screen.\u003C/p>\u003Cp>Speaker 0: Okay. Alright. So while we're sorting out the details there, Yueh, why don't you kind of give me the backstory of the project?\u003C/p>\u003Cp>Speaker 1: So the backstory was, we had so it it all started, I think, 7 or 8 years ago. I was still a student, when I got the connection to, to Rockstar Recruiting who just, who just, raised their who who just build their company, and, they asked me back then for a logo. And that's still the logo we can see over here. And we did a a small so I I did a small brand design back then. And now after, yeah, 7 years later, they reached out back and said, maybe you could help us, doing a new homepage, a new website, and that's what we did.\u003C/p>\u003Cp>And, yeah, that's what you can see here right now. That's awesome.\u003C/p>\u003Cp>Speaker 0: So 8 years ago, you did the website or the logo for them, and then they like, 8 years later, they're like, hey. This guy is awesome. Let's come back and get the website done.\u003C/p>\u003Cp>Speaker 1: Yeah. It's yeah. That's how it happens.\u003C/p>\u003Cp>Speaker 0: So they are a so they're, basically, a recruiting firm for developers and engineering talent. Is that that's what I gather from the website.\u003C/p>\u003Cp>Speaker 1: Yeah. That's that's exactly what they are. So they are a recruiting agency who, are looking for developers and data engineers and things like that. And, the first thing we did here was, we asked them, how do the users of your website reach to your website right now? And they said, yeah.\u003C/p>\u003Cp>The most of them are not, some some Google search hits. They are more like they go to a lot of showcases and things like that, and they're and they're Mhmm. From there, they go to the website. So we thought about when do most of the people who go to this website already know who Rockstar is? Why don't we start with a huge call to action where you can reach out to the to the point, what you're going to do right here?\u003C/p>\u003Cp>So if you're if you're a company and want to hire a tech talent or, if you're a candidate, meaning a developer or a data engineer or something like that, you could also go right to the to the candidate page. So we just made the animation where you can switch to left and right for, the for the candidates and also for the companies.\u003C/p>\u003Cp>Speaker 0: Nice. Yeah. Nice. And I I love the, like, the black and white aesthetic and and just yeah. It, like, it it feels very much, like, you're specifically targeting developers in it.\u003C/p>\u003Cp>Are those, are those keyboard shortcuts that I see down there as well?\u003C/p>\u003Cp>Speaker 1: Yeah. The the these are keyboard shortcuts inspired by the terminal, meaning you have, for example, here, you can see the control and h button, then you will get the would get to home or you could press control and e to go to the imprint and, for the events or the recruiter or everything like that. And you could can hit it and go straightly to the recruiter page, for example, like I did here. Or, you also could, if you're not, technical, more, more a company, for example, who want who's who's searching for technical developers, then you also could, can also just press the button. So the idea is to have a a user experience for both, for the developers or the tech experience people, but also it should be, able to navigate if you don't have much experience with with the terminal in this scenario.\u003C/p>\u003Cp>Speaker 2: Yeah. And to keep it here, we we used a lot of, look and feel, you know, from from from the one point zero time. So, like, these ASCII borders, and this typing animations and everything. It's feels like like like a bit a long time ago.\u003C/p>\u003Cp>Speaker 1: Yeah. That's so true. And, when we beautiful.\u003C/p>\u003Cp>Speaker 0: How long did you guys spend in, like, the design phase for this?\u003C/p>\u003Cp>Speaker 1: I think the design\u003C/p>\u003Cp>Speaker 0: phase Just curious.\u003C/p>\u003Cp>Speaker 1: In in 8 days, something like that.\u003C/p>\u003Cp>Speaker 2: I think the the whole phase with with finding the right idea and deciding which one to go, it went about, like, a month.\u003C/p>\u003Cp>Speaker 1: Yeah. When you go for the whole process with with thinking about the boot and yeah. Then it did take something like a month. But the the the the designing process where we just made the UI components where the idea was set, then, I think we we wait. We went forward pretty, pretty fast.\u003C/p>\u003Cp>Yeah. And and here we have things like, for example, the ASCII border. In the screen design process, it was pretty simple, and we thought about, yeah, the this this would be something like you would do it in the web 1.0 version. And, we didn't think one second about how it could be used, in a responsive scenario because in the one point zero world, there was no responsive. So we had we had problems that that we never thought about because when you when you want to, make this ASCII border responsive, it gets, it it gets it was quite complicated, to be honest.\u003C/p>\u003Cp>So we made the SVG grid.\u003C/p>\u003Cp>Speaker 0: Yeah. I bet. So yeah.\u003C/p>\u003Cp>Speaker 1: We we just started with just using some CSS and changing the content. Then we learned, okay. It's not possible. Then we used the Busia then we tried to boost JavaScript. Also pretty hard, and then we came to the SVG grid.\u003C/p>\u003Cp>Speaker 0: It there you go. Yeah. That's you guys definitely made it challenging on yourself. Like, the end result, it it looks great.\u003C/p>\u003Cp>Speaker 1: Yeah. Thank you. Yeah. But yeah. The these these are some small things which you didn't think when you're designing that that you never would think about.\u003C/p>\u003Cp>Yeah, it could can could be a problem doing a border like this. So\u003C/p>\u003Cp>Speaker 2: Yeah. These are the things, which which, which which come back with a comment, like, this is not possible.\u003C/p>\u003Cp>Speaker 1: Yeah. That's so true. And I can totally understand that.\u003C/p>\u003Cp>Speaker 0: Yeah. I can totally understand that\u003C/p>\u003Cp>Speaker 1: the the this would be something which can come at yeah. Possible. Yeah. But we made it possible with with a lot of effort, but, yeah, it's it's there. And, yeah, we also did hear the Odenowski animations.\u003C/p>\u003Cp>Speaker 0: Yeah. Those are great. Can you guys or does your client, Rockstar, mind if you show us around, like, the the direct us instance that's powering this?\u003C/p>\u003Cp>Speaker 1: No. Not at all. We asked before, and it's not a problem at all. So we can deep dive into the directest. So and as we told before, they have 2 front end pages.\u003C/p>\u003Cp>So they have 2 websites, And Groxo, the one we just saw, and text executive can also show that. That that's the same thing for, for executive roles in the development process. And, this is\u003C/p>\u003Cp>Speaker 0: Okay. Gotcha.\u003C/p>\u003Cp>Speaker 1: Yeah. The the this is right now, that's not an own firm. It's just by Rockstar Recruiting right now. They will change that, I think. But for the moment, they share a lot of global components.\u003C/p>\u003Cp>For example, the people. There are a lot of people who are working for Rockstar right now and also for the executive, That's the point where directors made so much sense because we could, do some global components and some components for Rockstar or for TechSec in this scenario.\u003C/p>\u003Cp>Speaker 2: Yeah. Like, the locations, the blog post, people, and so on.\u003C/p>\u003Cp>Speaker 1: Yeah. The blog post, for example, goes for both. People goes for both. And also the locations because they, decided not to translate their content. They decided to, just show the different different locations with different content.\u003C/p>\u003Cp>So you can choose between Berlin and Zurich, and there you have different people for, for the team, and you have have some some more Berlin related infos and things like that. So if you we go for the whole Got it. Here you here you can choose Cool. Between Berlin and Zurich, for example. Yeah.\u003C/p>\u003Cp>Speaker 0: Nice. So this is using the Directus translations feature, but not necessarily for translations. It looks like it's all in English.\u003C/p>\u003Cp>Speaker 1: That's true. All is all is in English, but they, we just use the translation feature as a location feature, and it works pretty good.\u003C/p>\u003Cp>Speaker 0: Yeah. That's great. So it looks like I see over in the, like, the nav bar, you've got your globals, and then you've got, like, your different stacks of rock star versus tech executive. And, like, how like, your what do your clients think of of this? Like, was this, like, an iterative process when you built, like, the back end of Directus with them, or you just said, like, hey.\u003C/p>\u003Cp>We've gone through and mapped all this, and then just, like, hey. Go take a look and tell us what you thought.\u003C/p>\u003Cp>Speaker 1: Yeah. That's that's one of the coolest thing in that. Coolest things in directors because we we do draft with, how we want to organize our data or how we want to be more specific when we have a UI component like, this one at the beginning, how we want to, to make it possible to change these these words which are typed over here. And then there are things which just make sense. For example, here, you can add the text for it, and then it will just, be changed in the in the front end.\u003C/p>\u003Cp>And it's, you can extend it with other, with other developer variants, how we called it, or you can erase one just with the tech feature.\u003C/p>\u003Cp>Speaker 0: But Gotcha.\u003C/p>\u003Cp>Speaker 1: Yeah. And and\u003C/p>\u003Cp>Speaker 0: And you guys have it looks like every bit is dynamic on here. Like, the\u003C/p>\u003Cp>Speaker 1: Yeah. Almost.\u003C/p>\u003Cp>Speaker 2: That's so true.\u003C/p>\u003Cp>Speaker 0: Almost. Yeah. Yeah. That's great.\u003C/p>\u003Cp>Speaker 1: And and yeah. Because we we, as designers, we love to give the users a good experience on the front end. So on the website, when they are entering it, we we love a good user experience when they know how to navigate, when they know how to scroll, when they know where all the, most important informations are. But, with Directus, we had the opportunity to also make a good user experience for the back end, and that's the thing we really love because, we have the possibility to say, okay. We can we can, make almost every all yeah.\u003C/p>\u003Cp>Almost, everything dynamic, and then they have the possibility to change some things. But, in this scenario, it's almost not not only almost, it's impossible to break the design, because, all all things are as limitless as they they will always look good. It doesn't matter how much they enter here. And that these are the things when you for example, when our clients had Elementor in WordPress or things like that, they they just started entering a headline, which was, I don't know, 100 and 20 words or something like that. And the whole design breaks, and everything looks awkward.\u003C/p>\u003Cp>And, yeah, with directors, we have\u003C/p>\u003Cp>Speaker 0: I've I've been there a bunch of times.\u003C/p>\u003Cp>Speaker 1: Yeah. And we have the possibility to limit everything that's that's almost impossible to break the design. And that's a huge thing we love about.\u003C/p>\u003Cp>Speaker 0: What are, like, 2 or 3 of your, like, your favorite pieces that you guys have implemented for this?\u003C/p>\u003Cp>Speaker 2: I think the the contact form for tech executive was quite a quite a thing.\u003C/p>\u003Cp>Speaker 1: Yeah. That's true. This one's one of our most loved features. It's a contact form for the tech executive page on, tech executive. And there you have the differentiation.\u003C/p>\u003Cp>So how do you want to start? You can choose between I'm a candidate or I represent a company. And if you choose 1, then you get, to the to the type to to the form wizard where you can enter your name and, your last name, then your email, and, your phone number. Okay.\u003C/p>\u003Cp>Speaker 2: It checks it's a real phone number. Okay.\u003C/p>\u003Cp>Speaker 1: And, all this is completely dynamic, and has has is completely editable. So you have the question groups. You can see over here with data, then the professional track record, technical skills, additional informations, and you can see all these things for the candidate form here. So you have the personal data, and there you have the questions we just go through. So first name and, last name, email, phone, things like that.\u003C/p>\u003Cp>And you always have the possibility to create a new question, and there you can choose between a question type. So we have a question with answers or a question with input or a question with answer autofill. So if you go for the answer, for example, I will show the the front.\u003C/p>\u003Cp>Speaker 0: Yeah. This this looks really amazing. I I can't imagine how many hours you guys have spent just on this one component.\u003C/p>\u003Cp>Speaker 1: Yeah. It was quite hard. But I I think it's very cool because now it's it's a pretty fast wizard for very complex and for a very complex, for a very complex topic because entering all data in from a CV, for example, the technical knowledge in this scenario is a question with answers autofill in short over here. And this is a component where we made, a question with answer autofill. The question is, what's your technical knowledge?\u003C/p>\u003Cp>Then enter your program image you're familiar with and write your experience from 1 to 6. And then you get all the autofill words. These are the, most used programming languages. And then you have the rating enabled, and you get, you can enter a a thumb a hint for each star. So it's a Novitz beginner intermediate advanced professional.\u003C/p>\u003Cp>Wow. This is And when\u003C/p>\u003Cp>Speaker 0: mind blowing, guys.\u003C/p>\u003Cp>Speaker 1: And when you, for example, add JavaScript, you can choose, you're a beginner or a new leads. And this this all comes from directors. And you have the possibility, for example, to do this with technical knowledge, but you could also use this component for, for languages. So are you a fluent speaker of, English, Spanish, or whatever? And then you also could rate it, and you could also, change the the the, the states here with intermediate bonds and things like that.\u003C/p>\u003Cp>And you could also, also, fill in all the autofills, like we did here. This is\u003C/p>\u003Cp>Speaker 0: Wow.\u003C/p>\u003Cp>Speaker 1: Pretty cool thing where we first used the edit draw value because when we when we we we got we were provided the list with, I don't know how many there. I think something like 250 programming languages. That's And then and then we yeah. That's that's that's true. And then we want to add it.\u003C/p>\u003Cp>And the first thing we tried was, like, okay. Yavas, and then we did some commas, but it didn't work because when you enter a comma that makes sense, then it just enters the this, this, this tag. But placing all 250 tags with with just copy paste them, it would be a lot of work. And then we just found out, ah, you you have the possibility to edit the to edit the raw value. And then we just, take all of them, export it as a JSON, and place copy paste it in here, and voila.\u003C/p>\u003Cp>There they are. Yeah. That's pretty cool that that you also want.\u003C/p>\u003Cp>Speaker 0: Is that something that you teach your clients as well? Like, the edit raw value? Do your clients use that? Or just kind of you guys\u003C/p>\u003Cp>Speaker 1: For for this specific use, we didn't have to because it's more like a initial fill. Because after after reporting all the 250 tags, the the only things which can happen in the future is that there will be 1 or 2 more, and you just have to enter them in here. So you you you will never have the the the possibility the use case again where you have to import 250, auto fill words because yeah. Which programming language? I don't know.\u003C/p>\u003Cp>They they just added, I think, OpenAI or something like that, which is pretty new. But, it's not like there are 3 or 4 program languages a month.\u003C/p>\u003Cp>Speaker 0: Right. Right. What's, I'm I'm curious. Like, what do the relationships look like just for, like, this one, like, question and answer, like, form component?\u003C/p>\u003Cp>Speaker 2: Which in the data mode?\u003C/p>\u003Cp>Speaker 1: Uh-huh. Yeah. We we have the question groups with the name, description, and questions. Here, I see many to many relation question. And Look\u003C/p>\u003Cp>Speaker 0: for the questions. Okay.\u003C/p>\u003Cp>Speaker 1: We have the question. No. No. That's the group Where are we? Here the quest.\u003C/p>\u003Cp>Ah, yeah. Okay. So it's it's a credit it's a huge it's a huge question, data model. But it's it's still very easy to use because we made we would did work a lot of conditions in this scenario. So this is what I oops.\u003C/p>\u003Cp>This is what I thought, would which I have shown here. When you go for a new question, we have so many conditions that the first thing you would see is the question type. And after filling that, you will get the, question, question description, author words, and then you have also the condition for, do you want a rating for the answers? And if you enable that, you also, could, can change the, the rating description.\u003C/p>\u003Cp>Speaker 0: So So it's very much yeah. It's a it's a lot of information, but, like, with the conditional fields inside Directus, you don't overwhelm the end user at all. It's very clean. Yeah. Yeah.\u003C/p>\u003Cp>I love it, man. Thank you. What like, are there any other, like, favorite little features that you guys have have built into this thing?\u003C/p>\u003Cp>Speaker 1: Yeah. I think one of the the things we already have shown was, the the thing was the developer variants over here. And, one thing we also done is additional pages, And this is where we didn't use, right now, the many to any relation where you just can, place some components in. But, they had the idea that they want for SEO landing pages for for, different keywords which which they are going to pay for for the, Google Ads. And, that that's when we introduce the the component additional pages, and this is, just the ID in the next, and they can add it over here.\u003C/p>\u003Cp>So they have the page name contracting, for example, then they got a huge where they can implement everything. They also have a script field because they are, they have a good technical expertise. So and they ask for it and we just let them do that. But, yeah. Normally normally, this would be a much too too much for a customer with no technical expertise.\u003C/p>\u003Cp>Right. Yeah. And Yeah. Yeah.\u003C/p>\u003Cp>Speaker 0: Yeah. It's really easy to blow up the site with those script tags. That's so true.\u003C/p>\u003Cp>Speaker 1: But in this scenario, it works, and they have the possibility to enter a page name, and then they are live, the pages. So they you can reach them by entering the slash. And if you want to, if you want to, if you want to place them in the menu, you also have the possibility to go into the menu field, and there you can add the menu and also have the possibility to add the letter for the quick access, for example.\u003C/p>\u003Cp>Speaker 2: So the menu we showed. I mean,\u003C/p>\u003Cp>Speaker 0: like, you guys have literally thought of everything with this.\u003C/p>\u003Cp>Speaker 1: Yeah. It it was very fun because, we we we it was the first time we we we recognized, how many possibilities there are with, not just making it dynamic, and also to make something like conditions and to limit things and to give, things like soft quotas in the in the blog posts for the descriptions, for example. And, yeah, these are a lot of things which which just made so much fun. That's the reason because why we, yeah, why we try to to And not everything dynamic.\u003C/p>\u003Cp>Speaker 2: And also have the the whole control over the the the map. This was also pretty pretty impressive where each page had the type description in which field, which the the the client can use if if he if he wants to. And this Mhmm. Was was pretty neat and pretty pretty, pretty good because he he has the the whole control over over the SEO thing and, over his Google Ads campaigns. This was also, like, a game changer for us.\u003C/p>\u003Cp>Speaker 1: Yeah. That's true. The metadata field was Yeah.\u003C/p>\u003Cp>Speaker 0: And it looks like that is using the the translations feature as well.\u003C/p>\u003Cp>Speaker 1: Yeah. That's true.\u003C/p>\u003Cp>Speaker 0: So you can have different metadata for the different locations.\u003C/p>\u003Cp>Speaker 1: Nice. And we also make\u003C/p>\u003Cp>Speaker 0: And, is it, like, are both of these sites are built on Nuxt on the front end?\u003C/p>\u003Cp>Speaker 1: Yeah. Both both are Nuxt front end pages.\u003C/p>\u003Cp>Speaker 2: Gotcha. And,\u003C/p>\u003Cp>Speaker 0: hey, like, like, obviously, like, you guys are you you mentioned you had a lot of you experience, but, you know, what were your like, as you were building this, like, what would you say are, like, your favorite bits or or, like, why why would you reach for Nuxt versus just, like, regular Vue or, you know, one of the other I think there's several other frameworks on Vue as well.\u003C/p>\u003Cp>Speaker 2: I think Nuxt works best for us because it we test the different render modes, for for example, the hybrid rendering and the the SSG thing, and and the new, we we use I think it was the first time we were using, like, the server side rendering because before we to. We also we we we just did a project with aesthetic Yeah. Just aesthetic aesthetic size, aesthetic stack.\u003C/p>\u003Cp>Speaker 1: That that was two times, but, yeah, we we also did the the the Nuxt generate and, reached out their static sites. But, yeah, the server side rendering thing is way too cool, to be honest.\u003C/p>\u003Cp>Speaker 2: For me, I like the the file based routing because in in in the classical view environment, it's, it's it's it's it's in the ass to to configure the route and to say the these are the children of this route and and to register all the components. And if you want to start a a website with Nuxt, you just hit the CLI, go for it, and, directly start, developing for I think it's it's the perfect way to go. It it it and it keeps the boundaries for for for for get for making progress very low.\u003C/p>\u003Cp>Speaker 0: Love it. Love it. What, it'll, like, did you guys have any trouble integrating Directus with Nuxt?\u003C/p>\u003Cp>Speaker 1: Not at all. We we did we did see, there there was a example online already, I think, with with the block and next, thing, and that's that's something we set up, and then we just get from there. We we are we had everything we we needed, to be honest. So it was very easy.\u003C/p>\u003Cp>Speaker 2: Yes. The beginning I saw, I think it was your guitar repo, Brian, the the one with the nice director's actually\u003C/p>\u003Cp>Speaker 1: True. True. It was his.\u003C/p>\u003Cp>Speaker 2: We built a little wrapper around because, we had to to implement the, our localized functionality. So we had a little wrapper around and around the wrapper, where we check, okay, which local is present and which local should be used. So,\u003C/p>\u003Cp>Speaker 0: Yeah. Great, guys. So I I do wanna be respectful of your time. I know we're I think we've gone a little over what we had planned, but this is, it's so interesting to me to, like, see how you guys have constructed this and put it all together. You know, let's talk about, like, the the future.\u003C/p>\u003Cp>Like, what's, what's the future look like for you guys? I know that's pretty vague, but, like, what are you working on? Like, what do you wanna where do you wanna go with this? Like, what else do you wanna do? One\u003C/p>\u003Cp>Speaker 1: thing we we are going to do for the page we just have shown, I think quite funny because I've seen you you just released, I don't know, 2 weeks ago or something like that, a video with, ChetchyPT and directors. And Yeah. That's the thing we we, did also in the same time, to be honest. And we That's great. We we love it because the idea is to you still have a a a long journey while filling out the whole form for a candidate for, because you have to do, you have to enter your name, your email, your telephone number, and also some some text, like, what are experiences in your technical industries and things like that.\u003C/p>\u003Cp>And our idea is to, just drop down your CV, and then we will pass all the data set it to chat gpt, and chat gpt will sort all the data into the fields we have in our form. Just, we'll prefill the whole form, and in the best case scenario, you just have to press next next next next and send.\u003C/p>\u003Cp>Speaker 0: Wow. That would be amazing. That would be a great dude. Like, we're calling that new series the direct to top line, but that would be that would be a great episode as well. True.\u003C/p>\u003Cp>Oh, and what about the the future for you guys? Like, do you have a a bunch more projects in the works aside from this one? Or\u003C/p>\u003Cp>Speaker 1: Yeah. We we we do have some daily tasks, but, for us as as a Calabrio, we, our next step would be to we we're the moment refactoring our own home page. So our Heinrichs on Heinrichs.ke. And, we we just set up a directors for this site also, and we're trying to to, reach out to the world with more, with more public relation. So we we're just looking forward to, to, release a blog and to do some things on LinkedIn to have the possibility to get more cool projects like Rockstar, for example, and not just to be in our daily task and as a ghost designer and ghost developer.\u003C/p>\u003Cp>Speaker 2: Yes. And also, the website is getting a new a new look and feel, a new, a new design update, a new technical update. We're moving to moving into next 3.\u003C/p>\u003Cp>Speaker 1: So at the moment, Fuse. Right?\u003C/p>\u003Cp>Speaker 2: Yes. And we're also doing trying trying a new thing with directors, where we, we are rendering blocks. And maybe we can show\u003C/p>\u003Cp>Speaker 1: many to any\u003C/p>\u003Cp>Speaker 2: where we where we are where we're trying to like like a home page. The home page contains different blocks. And in the front end, we will have, like like a like a render skeleton where Mhmm. The the API call determines which component gets rendered. So we have, like, like, a front end block and a back end block, which will be which can be used, like, in in in in many ways or for many projects.\u003C/p>\u003Cp>Speaker 1: Yeah. The the main idea is to have,\u003C/p>\u003Cp>Speaker 2: Like like reusable components over and over and over. Like like like a like a like an own component framework.\u003C/p>\u003Cp>Speaker 1: Small library where we just make, can make some, front of UI components and directors and reuse in our Nuxt framework, to to, yeah, to just get things passed down If you have the reusable components\u003C/p>\u003Cp>Speaker 0: that you\u003C/p>\u003Cp>Speaker 1: use all the time I've\u003C/p>\u003Cp>Speaker 0: got some to share with you guys on that front then. Yeah. Yeah. I I I've got a project that is in the works, teasing the audience a little bit, but I'll share it with you guys for sure. I think it'll be helpful for you on that side.\u003C/p>\u003Cp>Speaker 1: Yeah. We can.\u003C/p>\u003Cp>Speaker 0: Yeah. Guys, so if anybody wants to learn more about you guys and, like, look at some of the projects that you've done or or even work with you guys, like, how how's the best way to go about contacting you?\u003C/p>\u003Cp>Speaker 1: You? Reach us our our, to our website. So it's it's a very complicated URL. Many for the English speakers because it's Heinrichs. De, but, we just bought a new, URL, Heinrichs.cool.\u003C/p>\u003Cp>And then you cool.\u003C/p>\u003Cp>Speaker 0: Very good. That's a little easier.\u003C/p>\u003Cp>Speaker 1: That's very easy. There you can reach us via email every time.\u003C/p>\u003Cp>Speaker 2: Yes. I think when this episode will go live, and the new date will also be live. This is this is not me calling you out.\u003C/p>\u003Cp>Speaker 0: Don't put yourself on a timeline. We're gonna I think we're gonna turn this one around pretty quickly. So, yeah, I I I I look forward to seeing the the new site. I could tell you all the the guys on our team played around with your existing site for, like, 20 minutes, and they were like, oh, this is so cool. So I can't wait to see what the new one looks like.\u003C/p>\u003Cp>Guys, been a pleasure. I I really appreciate you joining us, and I I can't thank you enough. And I I look forward to seeing, like, the next project that you guys come out with.\u003C/p>\u003Cp>Speaker 1: Thank you so much for having us.\u003C/p>\u003Cp>Speaker 0: Alright, guys. Thank you. Thanks.\u003C/p>","Hi, guys. Brian here for Directus. Welcome back to another episode of I Made This. Today, I've got very special guests with me, my friends from Germany, Heinrichs and Heinrichs. I've got Erwin and Yueh. Guys, welcome to I Made This. I this is gonna be probably one of my favorite episodes. How are you guys? Thank you so much for us. We are fine. Thank you. Excellent. Excellent. I I I would just preface this to the audience and say that these guys build amazing things with Directus and Nuxt and all kinds of other technologies, and I'm really excited to showcase this project that they are going to demonstrate for us. But before we dive into that, guys, give me the story of Heinrichs and Heinrichs and yourselves as well. Yes. Sure. Our story is, I think, not not a normal story for front end developer, but a very normal story for designers. So we both did study communication design, and that's a very graphic design related course. Yeah. You can compare it with graphic design, to be honest. And and we did do during our studies a lot with with user interface designs and things like that, and we did love design all the time. And we tried to, bring new ideas for the web to life. And at the beginning, we just were the dinos, and so we had freaking ideas, but, had had the opportunity to realize it. And, yeah. So so we thought about, at at first, we we started with, cooperating with programmers, and they had to bring it to life. And after after a a bit of time, it gets more and more frustrated because we hear heard things like, no. It's not possible in this way. So we learn about our by ourself, and that's the reason why we are designers and front end developers right now. That's great. So, hey, you guys were working with programmers before, and they just like, they would take your designs and say, hey. This is not gonna work out. And you're like, no. It is. It would Yeah. It should be. If we have to do it ourselves, we'll get it done. Yeah. Right. I love that. I I I love it. So when did you guys start your agency? We we don't have a agency right now. So we're both working as freelancers, but Oh, okay. We are collaborating the Okay. Of the time. So all all the projects we're doing together. And, we started for, for two and a half years ago, I think. Yeah. With full time just doing our stuff, it's, like, two and a half years. So, like, how many in that 2 years, like, how many projects have you guys done? We did a lot of projects, to be honest. So, for the most of the time, we're working as, like, ghost designers or ghost front end developers because we, signed a lot of NDAs and worked for global players and, did very niche things where we, design unique, user interfaces, and then we, more more, started to do things for for our own clients. So not just participating in in a team, and I think for our own projects, we did in the last two and a half year. Didn't count it, to be honest. And so there must be more than 20. That's awesome. That's awesome. And I like, before the the show, I was browsing around on your website, and I love the the interactions that you guys have programmed into it. Thank you so much. It's like do you do you get to like, do clients come to you specifically for that style of, like, hey. We want something very interactive, or is that just like you guys flexing your own creative muscles for your own site? Yeah. It's a bit flexing, to be honest, because at the moment, we're just, we just get, our clients not because of our huge, our huge, digital performance. And the digital performance, it's more like, we don't we don't have any we don't have an Instagram account. We, we barely happen on LinkedIn. We I think our website is currently, not, so the robots 16 blocks right now Google and things like that. So it barely happen out there in the in the world wide web, but we're trying to to, yeah, to to reach out more and more. And we also have a plan doing a block and things like that to get more so that we can show more the Heinrichs and Heinrichs approach and not be, we're just ghost designers, and you can place us into a team, and then we will figure something out. Yeah. Yeah. I I mean, I I love it. Like, I think your approach is awesome. And, talk to me about, like, the the tooling that you guys are using. Like, first and foremost, like, what are you what are you designing it? Like, how are you how do you come up with this stuff? Does it like, does everything start in, like, a sketchpad, or you, like, go straight to Figma? Like, talk to me through that. Yeah. It depends, to be honest. So sometimes we we, go the the very classic way and start with a mood board and think about so if if it's a if it's a topic where we have to deep dive, then we have to then we start googling a lot. So which are which which what does our client do? So what what does he want how does he want to present himself in the in the Internet or with this idea of his, of his brand? And then we start, for example, with the mood board, and then we go straight into Figma or Adobe XD and start there, with some ideas. They can roughly be just some UI components, more more like a rough scratch, not not just so we don't do a pixel perfect design at the beginning. It's more of the direction process where we, where we try to generate look and feel and, to to bring a brand to life. Yeah. And after that, then we go for Yeah. For a more precise approach. Yeah. Alright. Cool. Cool. What are what's your your tech stack that you guys are using for, like, most of your clients? Our tech stack is for us. So Nuxt 3 is one of our most used front end frameworks. Yeah. We we also did some things with pew 3, but when it comes to a website for our clients, then Next 3 is our way to go. And for the back end the go to. Use I love Nuxtree. Yeah. We we we do also. And for the back end, now our main way to go is directors. So we all we so whenever there is a a chance to place directive, then we're going to use it. I yeah. Yeah. We would. And, of course, that's why we're here. But but yeah. Yeah. Like, what did you guys like, what tools did you use for back ends before Directus? Or Like our well, let me preface that. Like, are most of the sites that you're doing, like, very content heavy? Or, like, are you doing, like, apps for clients as well? Or We did both. So we we started with Okay. So when when we when we talk about the the typical client who just needs a website, then we came from, WordPress. So, like, almost everybody who started with just the front end things, and there there we started in the in the very early stages. We just, bought the theme, And then we customized it, changed the colors, had to look out, had to look of which which plugins could we install and things like that. And after that, we started doing our own themes, then we just back introduced Elementor, things like that. Yeah. But yeah. Competitive. Yes. Everybody everybody knows WordPress. Yeah. And we don't like PHP, to be honest. It's a it's a solid platform. Yeah. It is. I'm right there with you. Like, WordPress is, it's a solid platform. I I my experience has been much the same, though. So I'll I'll echo exactly what you guys said. Yeah. It become becomes very difficult when you start installing plug ins and another plugin, and then you have to to update it, and then you have to figure out if it's still compatible with the new WordPress version and things like that. And then your whole page keeps breaking. Yeah. That's that's great when you log in and see there's, like, 75 update notifications for the plugins. Right? You know it's gonna be a good day. It's so true. So I do did you guys jump directly from WordPress into Directus, or was there, like, a No. No. No. We some other tool that you try. Yeah. We we did a lot of traditional CMS systems. So we also worked with Joomla. I don't know if this says to anyone out there. We also used KontaO, and that's a very small traditional CMS system. Then we also used, for ecommerce systems, the WooCommerce plugin. That is WordPress as well, but we also did something with Magento. And, yeah, we we we tried a lot, to be honest. And then there comes the point where we heard about, the headless CMS system at first, and then we also tried things like the Tamek. We also tried, Strapi Strapi and Yeah. Pimcore. Pimcore, and yeah. And then Of course. Also. Gosh. So I know you guys have been through, like, dozens of different tools. Yeah. We tried everything, to be honest. How did you guys originally come across Directus, or how did you find Directus? I was more or less a Google search. Yes. I'm sorry. So we we just Googled, what is the best headless team f you could use, and then you get, yeah, then you get directors, you get, you get Story block, I think, is Story block contentful, things like that. And Yeah. That that we we did try every day. Marketing guys are definitely gonna love that. And and we also love the the open source approach. Yeah. That's awesome. Because, where we we did, we didn't have much experience with headless CMS systems, so, the open source approach was was the best one for us to to give it a a try. So we started out with a Strapi, I think, and then tried directors. And directors, us had much more flexibility in building these relations between between the data we we want. Yeah. I would say, we, as a designer, directors was usable, was very, very was was was was very easy to use in comparison with Strapi. Because in Strapi, you had to the server has time to reload if you fetch anything in the data object, things like that. So it was more or less in the in the daily task. Directus was way easier to use. You change something. You have a real time API, and, this combined with the with the hot module reload, and Nuxt 3 was perfectly efficient workflow for us. Yeah. Awesome. Yeah. So I like, my one of my other questions to you guys, obviously, you've got clients that are using Directus. We kinda internally, we consider it like a a Swiss army knife. Like, you could use it for an app back end. You can use it for a headless CMS. There's, like, too many different use cases. So I'm curious, like, how do you guys present Directus to your clients when you're, either, like, in, like, the initial stages of the project or, yeah, later when you're actually, like, building the CMS and and, you know, showing it to them? Yeah. It depends. Sometimes, we we have, clients who does have a a little bit of technical expertise. And when we drop, when we just, make some backward dropping like Hetto CMS, they are, yeah, go for it. We love Hetto CMS. But but and sometimes we have clients who came or who does have WordPress sites at the moment, for example, and they are like, Yeah. Okay. It could be faster, but, I think it's already fast. And then you have to deep dive into what what are the, what what are the the opportunities while using a headless CMS and why it's so much better than using a WordPress, for example, in this scenario where you have to, maybe in our example, what we're going to show, that we have, that we have 2 fraud end sites and one director's back end. This is so much more practicable than than a WordPress back end. And and then sometimes where where we do a back end for for a web application, for example, then, there's no other possibility than using Swiss Army knife, as you said, as directors, for example. I see. Or you even could use it for the digitalization of portfolio. That's also things we've done with, product information management systems. But, as we deep dive in in directors, we learned that this also could be totally possible doing with directors, and that's also a thing. Yeah. Like, the spoken like a true, champion, I guess. Like, that is he like, you guys are very good. Very good. I also love Let's get into it. Alright. Like, are you guys ready to dive in? Oh, go ahead. I'm sorry, Yue. Sorry. I also love the the the the the fact that we can, like, outsource the the content task to the to the to a specific person or to a specific team and say, go for it. That's true. Fill it out, play with it, create some content, and we can focus on building, the front end or the actual use case for the date, the the other ones are creating. Yeah. That's so true. Yeah. So you can hey. Like, being able to, like, decouple the content and the the front end the business logic. Useful in that scenario. Yeah. That's true. Great. Cool. So do you guys wanna dive in and and show this project? I can remember, like, seeing it when we had a a quick call before we scheduled the episode, and I was blown away. And I I think the audience is too. But Yeah. Sure. I'm going to share my screen. Okay. Alright. So while we're sorting out the details there, Yueh, why don't you kind of give me the backstory of the project? So the backstory was, we had so it it all started, I think, 7 or 8 years ago. I was still a student, when I got the connection to, to Rockstar Recruiting who just, who just, raised their who who just build their company, and, they asked me back then for a logo. And that's still the logo we can see over here. And we did a a small so I I did a small brand design back then. And now after, yeah, 7 years later, they reached out back and said, maybe you could help us, doing a new homepage, a new website, and that's what we did. And, yeah, that's what you can see here right now. That's awesome. So 8 years ago, you did the website or the logo for them, and then they like, 8 years later, they're like, hey. This guy is awesome. Let's come back and get the website done. Yeah. It's yeah. That's how it happens. So they are a so they're, basically, a recruiting firm for developers and engineering talent. Is that that's what I gather from the website. Yeah. That's that's exactly what they are. So they are a recruiting agency who, are looking for developers and data engineers and things like that. And, the first thing we did here was, we asked them, how do the users of your website reach to your website right now? And they said, yeah. The most of them are not, some some Google search hits. They are more like they go to a lot of showcases and things like that, and they're and they're Mhmm. From there, they go to the website. So we thought about when do most of the people who go to this website already know who Rockstar is? Why don't we start with a huge call to action where you can reach out to the to the point, what you're going to do right here? So if you're if you're a company and want to hire a tech talent or, if you're a candidate, meaning a developer or a data engineer or something like that, you could also go right to the to the candidate page. So we just made the animation where you can switch to left and right for, the for the candidates and also for the companies. Nice. Yeah. Nice. And I I love the, like, the black and white aesthetic and and just yeah. It, like, it it feels very much, like, you're specifically targeting developers in it. Are those, are those keyboard shortcuts that I see down there as well? Yeah. The the these are keyboard shortcuts inspired by the terminal, meaning you have, for example, here, you can see the control and h button, then you will get the would get to home or you could press control and e to go to the imprint and, for the events or the recruiter or everything like that. And you could can hit it and go straightly to the recruiter page, for example, like I did here. Or, you also could, if you're not, technical, more, more a company, for example, who want who's who's searching for technical developers, then you also could, can also just press the button. So the idea is to have a a user experience for both, for the developers or the tech experience people, but also it should be, able to navigate if you don't have much experience with with the terminal in this scenario. Yeah. And to keep it here, we we used a lot of, look and feel, you know, from from from the one point zero time. So, like, these ASCII borders, and this typing animations and everything. It's feels like like like a bit a long time ago. Yeah. That's so true. And, when we beautiful. How long did you guys spend in, like, the design phase for this? I think the design phase Just curious. In in 8 days, something like that. I think the the whole phase with with finding the right idea and deciding which one to go, it went about, like, a month. Yeah. When you go for the whole process with with thinking about the boot and yeah. Then it did take something like a month. But the the the the designing process where we just made the UI components where the idea was set, then, I think we we wait. We went forward pretty, pretty fast. Yeah. And and here we have things like, for example, the ASCII border. In the screen design process, it was pretty simple, and we thought about, yeah, the this this would be something like you would do it in the web 1.0 version. And, we didn't think one second about how it could be used, in a responsive scenario because in the one point zero world, there was no responsive. So we had we had problems that that we never thought about because when you when you want to, make this ASCII border responsive, it gets, it it gets it was quite complicated, to be honest. So we made the SVG grid. Yeah. I bet. So yeah. We we just started with just using some CSS and changing the content. Then we learned, okay. It's not possible. Then we used the Busia then we tried to boost JavaScript. Also pretty hard, and then we came to the SVG grid. It there you go. Yeah. That's you guys definitely made it challenging on yourself. Like, the end result, it it looks great. Yeah. Thank you. Yeah. But yeah. The these these are some small things which you didn't think when you're designing that that you never would think about. Yeah, it could can could be a problem doing a border like this. So Yeah. These are the things, which which, which which come back with a comment, like, this is not possible. Yeah. That's so true. And I can totally understand that. Yeah. I can totally understand that the the this would be something which can come at yeah. Possible. Yeah. But we made it possible with with a lot of effort, but, yeah, it's it's there. And, yeah, we also did hear the Odenowski animations. Yeah. Those are great. Can you guys or does your client, Rockstar, mind if you show us around, like, the the direct us instance that's powering this? No. Not at all. We asked before, and it's not a problem at all. So we can deep dive into the directest. So and as we told before, they have 2 front end pages. So they have 2 websites, And Groxo, the one we just saw, and text executive can also show that. That that's the same thing for, for executive roles in the development process. And, this is Okay. Gotcha. Yeah. The the this is right now, that's not an own firm. It's just by Rockstar Recruiting right now. They will change that, I think. But for the moment, they share a lot of global components. For example, the people. There are a lot of people who are working for Rockstar right now and also for the executive, That's the point where directors made so much sense because we could, do some global components and some components for Rockstar or for TechSec in this scenario. Yeah. Like, the locations, the blog post, people, and so on. Yeah. The blog post, for example, goes for both. People goes for both. And also the locations because they, decided not to translate their content. They decided to, just show the different different locations with different content. So you can choose between Berlin and Zurich, and there you have different people for, for the team, and you have have some some more Berlin related infos and things like that. So if you we go for the whole Got it. Here you here you can choose Cool. Between Berlin and Zurich, for example. Yeah. Nice. So this is using the Directus translations feature, but not necessarily for translations. It looks like it's all in English. That's true. All is all is in English, but they, we just use the translation feature as a location feature, and it works pretty good. Yeah. That's great. So it looks like I see over in the, like, the nav bar, you've got your globals, and then you've got, like, your different stacks of rock star versus tech executive. And, like, how like, your what do your clients think of of this? Like, was this, like, an iterative process when you built, like, the back end of Directus with them, or you just said, like, hey. We've gone through and mapped all this, and then just, like, hey. Go take a look and tell us what you thought. Yeah. That's that's one of the coolest thing in that. Coolest things in directors because we we do draft with, how we want to organize our data or how we want to be more specific when we have a UI component like, this one at the beginning, how we want to, to make it possible to change these these words which are typed over here. And then there are things which just make sense. For example, here, you can add the text for it, and then it will just, be changed in the in the front end. And it's, you can extend it with other, with other developer variants, how we called it, or you can erase one just with the tech feature. But Gotcha. Yeah. And and And you guys have it looks like every bit is dynamic on here. Like, the Yeah. Almost. That's so true. Almost. Yeah. Yeah. That's great. And and yeah. Because we we, as designers, we love to give the users a good experience on the front end. So on the website, when they are entering it, we we love a good user experience when they know how to navigate, when they know how to scroll, when they know where all the, most important informations are. But, with Directus, we had the opportunity to also make a good user experience for the back end, and that's the thing we really love because, we have the possibility to say, okay. We can we can, make almost every all yeah. Almost, everything dynamic, and then they have the possibility to change some things. But, in this scenario, it's almost not not only almost, it's impossible to break the design, because, all all things are as limitless as they they will always look good. It doesn't matter how much they enter here. And that these are the things when you for example, when our clients had Elementor in WordPress or things like that, they they just started entering a headline, which was, I don't know, 100 and 20 words or something like that. And the whole design breaks, and everything looks awkward. And, yeah, with directors, we have I've I've been there a bunch of times. Yeah. And we have the possibility to limit everything that's that's almost impossible to break the design. And that's a huge thing we love about. What are, like, 2 or 3 of your, like, your favorite pieces that you guys have implemented for this? I think the the contact form for tech executive was quite a quite a thing. Yeah. That's true. This one's one of our most loved features. It's a contact form for the tech executive page on, tech executive. And there you have the differentiation. So how do you want to start? You can choose between I'm a candidate or I represent a company. And if you choose 1, then you get, to the to the type to to the form wizard where you can enter your name and, your last name, then your email, and, your phone number. Okay. It checks it's a real phone number. Okay. And, all this is completely dynamic, and has has is completely editable. So you have the question groups. You can see over here with data, then the professional track record, technical skills, additional informations, and you can see all these things for the candidate form here. So you have the personal data, and there you have the questions we just go through. So first name and, last name, email, phone, things like that. And you always have the possibility to create a new question, and there you can choose between a question type. So we have a question with answers or a question with input or a question with answer autofill. So if you go for the answer, for example, I will show the the front. Yeah. This this looks really amazing. I I can't imagine how many hours you guys have spent just on this one component. Yeah. It was quite hard. But I I think it's very cool because now it's it's a pretty fast wizard for very complex and for a very complex, for a very complex topic because entering all data in from a CV, for example, the technical knowledge in this scenario is a question with answers autofill in short over here. And this is a component where we made, a question with answer autofill. The question is, what's your technical knowledge? Then enter your program image you're familiar with and write your experience from 1 to 6. And then you get all the autofill words. These are the, most used programming languages. And then you have the rating enabled, and you get, you can enter a a thumb a hint for each star. So it's a Novitz beginner intermediate advanced professional. Wow. This is And when mind blowing, guys. And when you, for example, add JavaScript, you can choose, you're a beginner or a new leads. And this this all comes from directors. And you have the possibility, for example, to do this with technical knowledge, but you could also use this component for, for languages. So are you a fluent speaker of, English, Spanish, or whatever? And then you also could rate it, and you could also, change the the the, the states here with intermediate bonds and things like that. And you could also, also, fill in all the autofills, like we did here. This is Wow. Pretty cool thing where we first used the edit draw value because when we when we we we got we were provided the list with, I don't know how many there. I think something like 250 programming languages. That's And then and then we yeah. That's that's that's true. And then we want to add it. And the first thing we tried was, like, okay. Yavas, and then we did some commas, but it didn't work because when you enter a comma that makes sense, then it just enters the this, this, this tag. But placing all 250 tags with with just copy paste them, it would be a lot of work. And then we just found out, ah, you you have the possibility to edit the to edit the raw value. And then we just, take all of them, export it as a JSON, and place copy paste it in here, and voila. There they are. Yeah. That's pretty cool that that you also want. Is that something that you teach your clients as well? Like, the edit raw value? Do your clients use that? Or just kind of you guys For for this specific use, we didn't have to because it's more like a initial fill. Because after after reporting all the 250 tags, the the only things which can happen in the future is that there will be 1 or 2 more, and you just have to enter them in here. So you you you will never have the the the possibility the use case again where you have to import 250, auto fill words because yeah. Which programming language? I don't know. They they just added, I think, OpenAI or something like that, which is pretty new. But, it's not like there are 3 or 4 program languages a month. Right. Right. What's, I'm I'm curious. Like, what do the relationships look like just for, like, this one, like, question and answer, like, form component? Which in the data mode? Uh-huh. Yeah. We we have the question groups with the name, description, and questions. Here, I see many to many relation question. And Look for the questions. Okay. We have the question. No. No. That's the group Where are we? Here the quest. Ah, yeah. Okay. So it's it's a credit it's a huge it's a huge question, data model. But it's it's still very easy to use because we made we would did work a lot of conditions in this scenario. So this is what I oops. This is what I thought, would which I have shown here. When you go for a new question, we have so many conditions that the first thing you would see is the question type. And after filling that, you will get the, question, question description, author words, and then you have also the condition for, do you want a rating for the answers? And if you enable that, you also, could, can change the, the rating description. So So it's very much yeah. It's a it's a lot of information, but, like, with the conditional fields inside Directus, you don't overwhelm the end user at all. It's very clean. Yeah. Yeah. I love it, man. Thank you. What like, are there any other, like, favorite little features that you guys have have built into this thing? Yeah. I think one of the the things we already have shown was, the the thing was the developer variants over here. And, one thing we also done is additional pages, And this is where we didn't use, right now, the many to any relation where you just can, place some components in. But, they had the idea that they want for SEO landing pages for for, different keywords which which they are going to pay for for the, Google Ads. And, that that's when we introduce the the component additional pages, and this is, just the ID in the next, and they can add it over here. So they have the page name contracting, for example, then they got a huge where they can implement everything. They also have a script field because they are, they have a good technical expertise. So and they ask for it and we just let them do that. But, yeah. Normally normally, this would be a much too too much for a customer with no technical expertise. Right. Yeah. And Yeah. Yeah. Yeah. It's really easy to blow up the site with those script tags. That's so true. But in this scenario, it works, and they have the possibility to enter a page name, and then they are live, the pages. So they you can reach them by entering the slash. And if you want to, if you want to, if you want to place them in the menu, you also have the possibility to go into the menu field, and there you can add the menu and also have the possibility to add the letter for the quick access, for example. So the menu we showed. I mean, like, you guys have literally thought of everything with this. Yeah. It it was very fun because, we we we it was the first time we we we recognized, how many possibilities there are with, not just making it dynamic, and also to make something like conditions and to limit things and to give, things like soft quotas in the in the blog posts for the descriptions, for example. And, yeah, these are a lot of things which which just made so much fun. That's the reason because why we, yeah, why we try to to And not everything dynamic. And also have the the whole control over the the the map. This was also pretty pretty impressive where each page had the type description in which field, which the the the client can use if if he if he wants to. And this Mhmm. Was was pretty neat and pretty pretty, pretty good because he he has the the whole control over over the SEO thing and, over his Google Ads campaigns. This was also, like, a game changer for us. Yeah. That's true. The metadata field was Yeah. And it looks like that is using the the translations feature as well. Yeah. That's true. So you can have different metadata for the different locations. Nice. And we also make And, is it, like, are both of these sites are built on Nuxt on the front end? Yeah. Both both are Nuxt front end pages. Gotcha. And, hey, like, like, obviously, like, you guys are you you mentioned you had a lot of you experience, but, you know, what were your like, as you were building this, like, what would you say are, like, your favorite bits or or, like, why why would you reach for Nuxt versus just, like, regular Vue or, you know, one of the other I think there's several other frameworks on Vue as well. I think Nuxt works best for us because it we test the different render modes, for for example, the hybrid rendering and the the SSG thing, and and the new, we we use I think it was the first time we were using, like, the server side rendering because before we to. We also we we we just did a project with aesthetic Yeah. Just aesthetic aesthetic size, aesthetic stack. That that was two times, but, yeah, we we also did the the the Nuxt generate and, reached out their static sites. But, yeah, the server side rendering thing is way too cool, to be honest. For me, I like the the file based routing because in in in the classical view environment, it's, it's it's it's it's in the ass to to configure the route and to say the these are the children of this route and and to register all the components. And if you want to start a a website with Nuxt, you just hit the CLI, go for it, and, directly start, developing for I think it's it's the perfect way to go. It it it and it keeps the boundaries for for for for get for making progress very low. Love it. Love it. What, it'll, like, did you guys have any trouble integrating Directus with Nuxt? Not at all. We we did we did see, there there was a example online already, I think, with with the block and next, thing, and that's that's something we set up, and then we just get from there. We we are we had everything we we needed, to be honest. So it was very easy. Yes. The beginning I saw, I think it was your guitar repo, Brian, the the one with the nice director's actually True. True. It was his. We built a little wrapper around because, we had to to implement the, our localized functionality. So we had a little wrapper around and around the wrapper, where we check, okay, which local is present and which local should be used. So, Yeah. Great, guys. So I I do wanna be respectful of your time. I know we're I think we've gone a little over what we had planned, but this is, it's so interesting to me to, like, see how you guys have constructed this and put it all together. You know, let's talk about, like, the the future. Like, what's, what's the future look like for you guys? I know that's pretty vague, but, like, what are you working on? Like, what do you wanna where do you wanna go with this? Like, what else do you wanna do? One thing we we are going to do for the page we just have shown, I think quite funny because I've seen you you just released, I don't know, 2 weeks ago or something like that, a video with, ChetchyPT and directors. And Yeah. That's the thing we we, did also in the same time, to be honest. And we That's great. We we love it because the idea is to you still have a a a long journey while filling out the whole form for a candidate for, because you have to do, you have to enter your name, your email, your telephone number, and also some some text, like, what are experiences in your technical industries and things like that. And our idea is to, just drop down your CV, and then we will pass all the data set it to chat gpt, and chat gpt will sort all the data into the fields we have in our form. Just, we'll prefill the whole form, and in the best case scenario, you just have to press next next next next and send. Wow. That would be amazing. That would be a great dude. Like, we're calling that new series the direct to top line, but that would be that would be a great episode as well. True. Oh, and what about the the future for you guys? Like, do you have a a bunch more projects in the works aside from this one? Or Yeah. We we we do have some daily tasks, but, for us as as a Calabrio, we, our next step would be to we we're the moment refactoring our own home page. So our Heinrichs on Heinrichs.ke. And, we we just set up a directors for this site also, and we're trying to to, reach out to the world with more, with more public relation. So we we're just looking forward to, to, release a blog and to do some things on LinkedIn to have the possibility to get more cool projects like Rockstar, for example, and not just to be in our daily task and as a ghost designer and ghost developer. Yes. And also, the website is getting a new a new look and feel, a new, a new design update, a new technical update. We're moving to moving into next 3. So at the moment, Fuse. Right? Yes. And we're also doing trying trying a new thing with directors, where we, we are rendering blocks. And maybe we can show many to any where we where we are where we're trying to like like a home page. The home page contains different blocks. And in the front end, we will have, like like a like a render skeleton where Mhmm. The the API call determines which component gets rendered. So we have, like, like, a front end block and a back end block, which will be which can be used, like, in in in in many ways or for many projects. Yeah. The the main idea is to have, Like like reusable components over and over and over. Like like like a like a like an own component framework. Small library where we just make, can make some, front of UI components and directors and reuse in our Nuxt framework, to to, yeah, to just get things passed down If you have the reusable components that you use all the time I've got some to share with you guys on that front then. Yeah. Yeah. I I I've got a project that is in the works, teasing the audience a little bit, but I'll share it with you guys for sure. I think it'll be helpful for you on that side. Yeah. We can. Yeah. Guys, so if anybody wants to learn more about you guys and, like, look at some of the projects that you've done or or even work with you guys, like, how how's the best way to go about contacting you? You? Reach us our our, to our website. So it's it's a very complicated URL. Many for the English speakers because it's Heinrichs. De, but, we just bought a new, URL, Heinrichs.cool. And then you cool. Very good. That's a little easier. That's very easy. There you can reach us via email every time. Yes. I think when this episode will go live, and the new date will also be live. This is this is not me calling you out. Don't put yourself on a timeline. We're gonna I think we're gonna turn this one around pretty quickly. So, yeah, I I I I look forward to seeing the the new site. I could tell you all the the guys on our team played around with your existing site for, like, 20 minutes, and they were like, oh, this is so cool. So I can't wait to see what the new one looks like. Guys, been a pleasure. I I really appreciate you joining us, and I I can't thank you enough. And I I look forward to seeing, like, the next project that you guys come out with. Thank you so much for having us. Alright, guys. Thank you. Thanks.",[205],"162e7b09-df83-4b34-ae4b-a88eddb69e52",[],{"reps":208},[209,264],{"name":133,"sdr":8,"link":210,"countries":211,"states":213},"https://meet.directus.io/meetings/john2144/john-contact-form-meeting",[212],"United States",[214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263],"Michigan","Indiana","Ohio","West Virginia","Kentucky","Virginia","Tennessee","North Carolina","South Carolina","Georgia","Florida","Alabama","Mississippi","New York","MI","IN","OH","WV","KY","VA","TN","NC","SC","GA","FL","AL","MS","NY","Connecticut","CT","Delaware","DE","Maine","ME","Maryland","MD","Massachusetts","MA","New Hampshire","NH","New Jersey","NJ","Pennsylvania","PA","Rhode Island","RI","Vermont","VT","Washington DC","DC",{"name":265,"link":266,"countries":267},"Michelle Riber","https://meetings.hubspot.com/mriber",[268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,427,428,429,430,431,432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447,448,449,450,451,452,453,454,455,245,456,457],"Albania","ALB","Algeria","DZA","Andorra","AND","Angola","AGO","Austria","AUT","Belgium","BEL","Benin","BEN","Bosnia and Herzegovina","BIH","Botswana","BWA","Bulgaria","BGR","Burkina Faso","BFA","Burundi","BDI","Cameroon","CMR","Cape Verde","CPV","Central African Republic","CAF","Chad","TCD","Comoros","COM","Côte d'Ivoire","CIV","Croatia","HRV","Czech Republic","CZE","Democratic Republic of Congo","COD","Denmark","DNK","Djibouti","DJI","Egypt","EGY","Equatorial Guinea","GNQ","Eritrea","ERI","Estonia","EST","Eswatini","SWZ","Ethiopia","ETH","Finland","FIN","France","FRA","Gabon","GAB","Gambia","GMB","Ghana","GHA","Greece","GRC","Guinea","GIN","Guinea-Bissau","GNB","Hungary","HUN","Iceland","ISL","Ireland","IRL","Italy","ITA","Kenya","KEN","Latvia","LVA","Lesotho","LSO","Liberia","LBR","Libya","LBY","Liechtenstein","LIE","Lithuania","LTU","Luxembourg","LUX","Madagascar","MDG","Malawi","MWI","Mali","MLI","Malta","MLT","Mauritania","MRT","Mauritius","MUS","Moldova","MDA","Monaco","MCO","Montenegro","MNE","Morocco","MAR","Mozambique","MOZ","Namibia","NAM","Niger","NER","Nigeria","NGA","North Macedonia","MKD","Norway","NOR","Poland","POL","Portugal","PRT","Republic of Congo","COG","Romania","ROU","Rwanda","RWA","San Marino","SMR","São Tomé and Príncipe","STP","Senegal","SEN","Serbia","SRB","Seychelles","SYC","Sierra Leone","SLE","Slovakia","SVK","Slovenia","SVN","Somalia","SOM","South Africa","ZAF","South Sudan","SSD","Spain","ESP","Sudan","SDN","Sweden","SWE","Tanzania","TZA","Togo","TGO","Tunisia","TUN","Uganda","UGA","United Kingdom","GBR","Vatican City","VAT","Zambia","ZMB","Zimbabwe","ZWE","UK","Germany","Netherlands","Switzerland","CH","NL",1773850428155]