Building a Talent Platform with H&H

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.

Guys, welcome to I Made This. I this is gonna be probably one of my favorite episodes. How are you guys?

Speaker 1: Thank you so much for us. We are fine. Thank you.

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.

Sure.

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.

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.

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.

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?

Speaker 1: We we don't have a agency right now. So we're both working as freelancers, but

Speaker 0: Oh, okay.

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.

With full time just doing our stuff, it's, like, two and a half years.

Speaker 0: So, like, how many in that 2 years, like, how many projects have you guys done?

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.

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.

We want something very interactive, or is that just like you guys flexing your own creative muscles for your own site?

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.

Speaker 0: So it

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.

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.

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.

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?

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.

Speaker 0: Alright. Cool. Cool. What are what's your your tech stack that you guys are using for, like, most of your clients?

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

Speaker 0: the go to.

Speaker 2: Use

Speaker 0: I love Nuxtree.

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.

Yeah. We

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?

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.

Speaker 1: So we we started with

Speaker 0: Okay.

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.

But yeah.

Speaker 2: Competitive. Yes.

Speaker 1: Everybody everybody knows WordPress. Yeah. And we don't like PHP, to be honest.

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.

I I my experience has been much the same, though. So I'll I'll echo exactly what you guys said.

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.

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

Speaker 1: No. No. No.

Speaker 0: We some other tool that you try.

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.

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

Speaker 2: Yeah. Pimcore.

Speaker 1: Pimcore, and yeah. And then Of course. Also.

Speaker 0: Gosh. So I know you guys have been through, like, dozens of different tools.

Speaker 1: Yeah. We tried everything,

Speaker 0: to be honest. How did you guys originally come across Directus, or how did you find Directus?

Speaker 1: I was more or less a Google search.

Speaker 2: Yes. I'm

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

Speaker 2: Story block, I think, is

Speaker 1: Story block contentful, things like that. And Yeah. That that we we did try every day.

Speaker 0: Marketing guys are definitely gonna love that. And and

Speaker 2: we also love the the open source approach.

Speaker 1: Yeah. That's awesome.

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.

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.

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.

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.

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?

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.

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.

Speaker 0: I see.

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.

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.

Alright. Like, are you guys ready to dive in? Oh, go ahead. I'm sorry, Yue. Sorry.

I also love the the the

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.

Speaker 0: That's true.

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.

Speaker 1: Yeah. That's so true.

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.

Speaker 1: Yeah. That's true.

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.

But

Speaker 1: Yeah. Sure. I'm going to share my screen.

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?

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.

And, yeah, that's what you can see here right now. That's awesome.

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.

Speaker 1: Yeah. It's yeah. That's how it happens.

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.

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.

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.

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.

Are those, are those keyboard shortcuts that I see down there as well?

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.

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.

Speaker 1: Yeah. That's so true. And, when we beautiful.

Speaker 0: How long did you guys spend in, like, the design phase for this?

Speaker 1: I think the design

Speaker 0: phase Just curious.

Speaker 1: In in 8 days, something like that.

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.

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.

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.

Speaker 0: Yeah. I bet. So yeah.

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.

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.

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.

Yeah, it could can could be a problem doing a border like this. So

Speaker 2: Yeah. These are the things, which which, which which come back with a comment, like, this is not possible.

Speaker 1: Yeah. That's so true. And I can totally understand that.

Speaker 0: Yeah. I can totally understand that

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.

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?

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.

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

Speaker 0: Okay. Gotcha.

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.

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.

Speaker 2: Yeah. Like, the locations, the blog post, people, and so on.

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.

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.

Speaker 0: Nice. So this is using the Directus translations feature, but not necessarily for translations. It looks like it's all in English.

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.

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.

We've gone through and mapped all this, and then just, like, hey. Go take a look and tell us what you thought.

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.

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.

Speaker 0: But Gotcha.

Speaker 1: Yeah. And and

Speaker 0: And you guys have it looks like every bit is dynamic on here. Like, the

Speaker 1: Yeah. Almost.

Speaker 2: That's so true.

Speaker 0: Almost. Yeah. Yeah. That's great.

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.

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

Speaker 0: I've I've been there a bunch of times.

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.

Speaker 0: What are, like, 2 or 3 of your, like, your favorite pieces that you guys have implemented for this?

Speaker 2: I think the the contact form for tech executive was quite a quite a thing.

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.

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.

Speaker 2: It checks it's a real phone number. Okay.

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.

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.

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.

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?

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

Speaker 0: mind blowing, guys.

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.

And you could also, also, fill in all the autofills, like we did here. This is

Speaker 0: Wow.

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.

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.

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

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.

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.

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?

Speaker 2: Which in the data mode?

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

Speaker 0: for the questions. Okay.

Speaker 1: 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.

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.

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?

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.

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.

Speaker 0: Yeah. It's really easy to blow up the site with those script tags. That's so true.

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.

Speaker 2: So the menu we showed. I mean,

Speaker 0: like, you guys have literally thought of everything with this.

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.

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.

Speaker 1: Yeah. That's true. The metadata field was Yeah.

Speaker 0: And it looks like that is using the the translations feature as well.

Speaker 1: Yeah. That's true.

Speaker 0: So you can have different metadata for the different locations.

Speaker 1: Nice. And we also make

Speaker 0: And, is it, like, are both of these sites are built on Nuxt on the front end?

Speaker 1: Yeah. Both both are Nuxt front end pages.

Speaker 2: Gotcha. And,

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.

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.

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.

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.

Speaker 0: Love it. Love it. What, it'll, like, did you guys have any trouble integrating Directus with Nuxt?

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.

Speaker 2: Yes. The beginning I saw, I think it was your guitar repo, Brian, the the one with the nice director's actually

Speaker 1: True. True. It was his.

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,

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.

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

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.

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.

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.

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

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.

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.

Speaker 1: So at the moment, Fuse. Right?

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

Speaker 1: many to any

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.

Speaker 1: Yeah. The the main idea is to have,

Speaker 2: Like like reusable components over and over and over. Like like like a like a like an own component framework.

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

Speaker 0: that you

Speaker 1: use all the time I've

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.

Speaker 1: Yeah. We can.

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?

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.

And then you cool.

Speaker 0: Very good. That's a little easier.

Speaker 1: That's very easy. There you can reach us via email every time.

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.

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.

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.

Speaker 1: Thank you so much for having us.

Speaker 0: Alright, guys. Thank you. Thanks.