Executing on Inspiration with The Vercel Stack with Michelle Bakels
===

[00:00:00] 

and welcome tO PodRocket, a web development podcast brought to you by LogRocket. LogRocket helps software teams improve user experience with session replay, error tracking, and product analytics. Try it for free at logrocket. com today. My name is Paul and joined with us is Michelle bagels. She's a program director over at G2I, and we're going to be talking about how she leverages the Vercel stack, we can call it, and next year has to create the React Miami conference.

Excited to get into it, Michelle. Welcome to the podcast.

Thank you, appreciate you guys having me.

to do this? Cause that's one heck of a thing. 

Yeah, so I live in South Florida, I'm a React developer, and maybe a lot of people noticed like a few years ago, out of nowhere, Miami tech scene just started blowing up, and it felt like everybody [00:01:00] wanted to visit and check out what was going on here. And there were all of these events happening. And I was like in the midst of all this chaos, I'm like, okay all of these events are really great, but none of them are not a lot of them are really specifically focused on developers.

And this is a really core piece of a tech community and a tech hub. I already did a lot of community events I already had put together a lot of like meetups and stuff so I was like. Okay, thinking like we need to have a conference like the ones that I go to like I go to Cascadia JS or to the conference that JS world does in Amsterdam, all these conferences.

I'm like, we need a really big developers conference. And so as I'm thinking about this, I see on Twitter, a tweet from Someone that I knew locally in the tech community, Gabe Greenberg, who's the founder of G2I and I didn't work for G2I yet. And he was like, someone should put on a react conference in Miami.

And I just bought the domain react, miami. com. And I was like, that's us. Let's do this. We're going to put on this conference. And he was like. I don't really have time to put on a [00:02:00] conference. I meant somebody else should put this on, not me. We are happy to sponsor. But I was like, no, Gabe, we're the locals.

This is our thing. We should do this. And so slowly convinced him to become basically like the co organizers of this. And then he had the idea to partner with. JS world at the time, now they're called dev world. And they're like proper conference organizers to come together and do this conference.

So yeah, it's not like I'm a conference organizer or this is what I do, but it was this is something that we need in our local community and somebody has got to do it. So here we are. Absolutely.

And you really feel like you put an awesome conference, an awesome website together. Let's get into it. , at the end of the day, you chose next JS, which is a fan favorite of a lot of people out there.

And as CMS. So when you were making this website, what. Made you say [00:03:00] I, I need a CMS first off, because some people are like do I want to go that route? Or do I want to just statically render everything? Why did you choose the CMS and why did you choose Next. js for you? And,

So for the CMS it was not really necessarily about all of the benefits of a CMS beyond the fact that I had a co organizer who doesn't code, but he does a lot. And, He needed a way to update the website, add things to the website without having to ask me for every single thing. And so having a CMS is a good way to collaborate with a team on content and to also just help organize your content better.

Why we chose Next. js. It really was driven by The fact that they offered this template called the virtual event template, which I can talk about a little bit in a second. But again, I had already done a lot of like community work and been involved in some tech projects in my local community.

And so I already knew that I love Vercel because Vercel was just like the [00:04:00] easiest way for me to deploy react apps, just like. Vanilla React apps. So I already knew that I love that platform and then I dabbled with Next. js a little bit. It saved me the headache of having to stand up a new repository just to write Two end points for a little bit of data or whatever, like I could have those calls be directly in my next JS app.

And it's just simplified project management a lot for us on those projects. So going into React Miami, it was like, okay, this is something that I'm familiar with and I'm, and I can wield it pretty well. Like I moved pretty quick with it. But then when they offered the virtual event template, that was like it done deal.

I want to call them, or key motivators? That you're paying attention to when you're building the stack and you're building the react Miami conference website that as we're going to get into that your template choices and stuff like why that melded so well what were you focusing on?

What was it like speed? 

Yeah, there's a lot of things, so first of all, the resources for Next. js [00:05:00] are. Like prolific, like there's an incredible amount of information about Next. js online. A lot of people have built wild things with Next. js. So when I'm picking something and I'm pretty much the only developer on this project, right?

I'm working in this repo alone. I don't have a senior developer or somebody next to me that I can like, hey, how do you do this? Like I'm stuck on this or whatever. Like I always have to debug everything alone. And so when you pick something that is really well documented and that there's a lot of, information on stack overflow or blog posts or whatever, I know whatever I'm trying to do, someone's done it or like something, or they've done something 10 times harder.

So I'm going to be able to find that information online and it'll help me move along. Also, I don't want to like. under appreciate here like the support of Next. js team. As far as like frameworks go like it's like almost a joke on Twitter. If you mention Next. js, you're gonna end up like having a devrel from Vercel or somebody from the Next.

js team like [00:06:00] reach out to you or try and help you with your problem. And that is really beneficial. And there's just not a lot of people, like not a lot of frameworks that can do that or support that. And it definitely gave Next. js an edge for me. It's just that support.

that was a really great insight because I'm sure a lot of people can say of course, Michelle, you need to move fast. You need to get this conference going. But being the one custodian of the project like this was a good choice for that in the stack that we're about to get into. So that was a great motivator to hear.

Thank you. Now you mentioned the the Vercel virtual event starter kit. Can you talk to us a little bit about what that is, why it's so great, why you chose it?

Yeah so, Vercel hosts just like a whole library of free templates to get you started on all kinds of projects. I think it's really smart. There's a lot of people who want to start a blog or an e commerce website. All these really common use cases. So they create these templates where they build out routes and they, can...

configure [00:07:00] it with different integrations up front that you're probably going to need. And so they had one that they put out there right around the same time that I was launching react Miami. And when I saw it, I was like, Oh my God, this is like most of my work is already done. I just have to put my own data in here.

And it wasn't truly that simple because it's the virtual event template and we are an in person event. So there were some things that I had to like take out or add in, but it's a lot better than having to. And so I'm going to talk about how to set up all of your models, all of your data models and structures from scratch around like sponsors and speakers and talks, they were just like a lot of really clever things already thought of what is the relationship between a speaker and a talk and if a speaker has, or if a talk has multiple speakers, , how is that represented and how are those references tied together and so there was just so many things that I'm like, I don't even have to think about this, it's already figured out.

And. It's just like a one click thing, right? You're like, I want to use this template. It creates the repo for you in your GitHub, and then it uses a [00:08:00] CMS, which we needed, right? And it creates this project in a CMS that's fully templated, and it creates all of the environment variables that you need between your project and the CMS, and of course, sets up automatic builds and deployments on Vercel, and all of these things are just automatically configured in one Or two clicks maybe and there's just not anything else that's going to save you that kind of time that's like really hard to compete with.

Now, when you say template, CMS template, how things look, we're thinking front end, but here you're talking about data, talking about like how data structured. And the two most popular ORMs that you see people use with TypeScript, you got like Prisma and Drizzle. And so when you're saying, Oh, here's how data is related, it might be in like the schema.

How does The data representation go from, that mental model about how we do things into this template and how is it represented? Is it in the CMS? Is it in the Vercel and they're dynamically linked? Like, how did that work?

Yeah, they're linked together. So like you do model it again in [00:09:00] your project, like you, lay out what's going to be expected from the CMS. But then it's also modeled in the CMS or that's really where the data is organized. So it's just really straightforward. And that's the thing is you have the full stack experience in an XJS project.

And XJS is, you know, I think they used to talk about themselves as a front end framework. And one of my favorite, like Theo Brown. takes is that Next. js is actually a backend framework that just like lets you render UI stuff as well. And when you think about it, there is some truth to that, right?

Because like you can handle like your API calls, you can handle your data, like you can manipulate, modify things. It's, there's like a lot there for the back end experience as well. And then the easy part is just the front end. Like, how do you render? I don't want to say the easy part is the front end, but it is compared to what you would have to do. I mean, I don't know how many times like data modeling is hard, right? Like [00:10:00] most of the time you don't figure it out in one shot. You come up with a model that you like, you data structure that, you think this is going to work and then. As you start filling in data or developing your app, you're like, Oh, shit.

I think I have to like, put a reference in it, because, I don't know, it gets convoluted, but somebody really smart that works on the Next. js team figured all of this stuff out, and they got paid to figure it out, and then they put it out there for free, and it's just Alright, let's go, let's do this. Questions

the Vercel stack images, OG images, and how Vercel just helps you run a streamlined website. Right before we hop into the second section, though, I just want to remind our listeners that this podcast is brought to you by LogRocket. So if you're trying to put up a website.

Application, the platform, whatever it might be. And you want to have less time in your console, finding errors and digging through them and more time in your code, building good product. So head over to log rocket. com, check it out.

time.

[00:11:00] to the Vercel stack, I guess we can call it. There's images, of course, that's very important and for an event, that is probably You want them to load fast, right? You want them to be colorful. You want them to pull people in. So your image integration is important.

How did you go about making sure that you had all those qualities and boxes checked off? What technologies did you use? And why, do we call it the Vercell stack for what you chose to host those images?

So Vercel builds all of these little optimizations and tools for people who want to deploy on Vercel which I think is really great. It just makes the experience of developing apps and getting like really clean professional quality results very simple. So with images, I did two things.

One of them is I use their image optimization. Which kind of allows you to like load in images and prevent, like in a more optimized way and prevent things like [00:12:00] content layout shift from happening. So there's the image optimization feature that I used. And then also, OG images, which is really the thing that I.

love the most. I'm like obsessed with OG images. So OG images, or otherwise OpenGraph images, it's part of OpenGraph protocol, which takes just like a webpage and makes it an object that can be used in this like social graph schema that's used a lot for like social networks. And so like you can have like With OpenGraph, with this protocol, you can have a lot of different things like titles, descriptions, types of things or whatever.

Images is one of them. And so This is all part of the metadata of your web page, right? You can like in your metadata set a description and a title, etc. A lot of times you could throw an image in there too so that when you share a link on social media or in a Slack channel or a text message, it doesn't just show text, it has this nice graphic card as well.

The game changer here is that [00:13:00] Vercell wrote a library. That takes advantage of this open graph protocol in a very special way for images, so that you can basically create images for any route on your page or like anything that you want like this can be extremely customized because You can essentially just either load in an image that you want to use for a certain route on your page, or you can actually code up an image with HTML and CSS the same way that you would design a webpage, you could just design this Card for your webpage that, you can bring in like dynamic data to it.

So like for, I'll give an example, like for all of our speakers, every single speaker had their own page with like their bio and their talk and everything like that. And so then when we put together this open graph metadata for the speaker. I don't just get to have okay, cool.

The title can be their actual name and where they work and maybe they're tactile or whatever. It can also have this like custom image that I can code up and then generate. With their [00:14:00] face on it and like specific information and it just makes everything so much more compelling when you scroll past it because you're like, Oh, look at that person.

And when you click that link you know exactly what you're going to see on that page. And so every page can be like super, super customized when you're organizing a conference. You have to do so much marketing for a really long time, especially for something that you charge for and something that people have to travel for.

So you have to be preparing people for like almost a year. And so when you have these just these little things that are just like incrementally better experience. Like, Okay, instead of having a standard image, I have this beautiful, very specific, detailed image. Those things go really far in terms of people sharing your content and your sales.

So I'm obsessed with Open Graph Images.

And just for my clarity here, when you say code up an image, what goes into making that like packet of information?

Yeah, it's pretty exciting and cool, right? Like code open image. So basically you would use the Vercel og library and they [00:15:00] have this like specific image response constructor that you can use. And so you just have a file and you use their image response constructor and you literally lay out, HTML and CSS.

Pulling whatever information you want on there to design this like display, this, image, but it's not properly an image until Basically what happens is that image response constructor in the Vercel OG library, it will take that code and it will essentially convert it into an image that is just treated like any other image on the web, on like your webpage.

So it's this kind of like magic that they do behind the scenes.

so we got OG images and you mentioned like little details like that are really important for grabbing people's attention, like incremental ads like they might not seem a lot, but they make a world of difference. So I know you used a certain library called split be right.

Kind of. 

Okay and how did that help you like in the past or in [00:16:00] this current bill that you were doing like really understand what drives adoption there.

yeah, so Splitbee does first party analytics and they were like a startup that was acquired by Vercel last year. Maybe a year and a half ago. And when Vercel acquired them, what that opened up was basically Vercel analytics that can just be like launched in your product, like with.

Again, like the Vercel way, just a mouse click, maybe add a couple lines of code to your project. But Google Analytics is pretty, there's like a tough learning curve and there's a bit of a time, investment into setting up Google Analytics and so when we have all of these other things that we have to do for the conference like year one, , we didn't get to have any analytics.

Because it just was taking too long and it just never got shipped. But analytics is really important. So you can see what's working, how people are using your website. Are they finding the information that you're trying to share with them? And so when you can set up analytics in your website in, I don't know, two, three minutes yes, of course, why wouldn't you [00:17:00] do that?

And it was just like insane to me, like what I could see after I. I mean, Of course, the first year we sold out for our conference. And so we're like, okay, then thank you. So we're like, we're getting reach, right? Like we know something's working. But there's no part of me that could have ever understood the reach I think we have visitors for like 86 percent of the countries in the world. I had no idea that many people around the world were looking at our like react conference in Miami. And now with this Vercel analytics, I'm like, Oh my God, what this is. Insane to be able to see but more than that gave us like very definitive direction because I could see, okay, people hit the landing page, they go to the speakers route, pretty much first thing, they'll go to the speakers route, see who's speaking, [00:18:00] and then they'll leave the site, right?

When we first installed analytics, we didn't have any speakers announced and we weren't planning on announcing any speakers for two more months. But then once we saw, okay, everybody's just going to the speakers route and then they're closing the page. We were like, let's announce like a couple of speakers and see what happens.

And so we announced like six speakers as part of a speaker preview. And then like our ticket sales started like right away. And that's just not something we would have done if we didn't. See that in our analytics dashboard. So they help us make a lot of decisions for our site that have very direct cash benefits to us.

So we're like super excited to use it.

Just to drive further down into the stack about how you guys threw together this production and technological deployment so quickly. How did you choose to process those payments for those tickets and issue? Uh, Membership to the conference,

Yeah, this is like one of them, [00:19:00] I think like low key, a lot of people don't. Have any idea how hard ticketing is we didn't build our own ticketing platform It is very hard to build like a proper ticketing platform Uh where you can add in all of your little discount codes and things like that and it's a lot So we always used third party.

Ticket platforms for react miami I won't like name names, but I will say the one that we used our first year It helped us in our first year, but ultimately the fees That it was charging our attendees on top of our ticket price. We're just like indefensible. Like We have to charge like a minimum to cover our costs And so like when we're already charging six hundred dollars for a ticket, which is tough But it's like what we have to do to cover our costs When this other platform goes ahead and adds almost a hundred dollars more in It just makes it so much more unaffordable to attend our conference.

And we're just like, this is unsustainable. So the second year we went through quite a journey with ticketing platforms. [00:20:00] We started off with one that was based in Europe and it started off good until ticket sales started. And then it just turned out that they just didn't accept a lot of credit card types.

And when I reached out to their team, they were like, Sorry we just don't have any plans on offering those things. We're like, oh my God, we need to get off this platform. And so we went back to our old one as a band aid. And then, like basically in the middle of ticket sales, we found this new platform called TicketTailor that we really like.

And we're using it again this year. That's like keeping the fees down to a minimum and allows you all of like discount codes and all the fun, funky things that you want to do. But, yeah, it was quite the journey, but yeah, ticket Taylor was ultimately where he ended up.

and I also love that we're not mentioning names in particular of things that didn't go well, but it's a good to focus on the positives here. So ticket Taylor, it, you guys are running with that now, no plans to switch and it handles membership, like letting people actually pay for the ticket, scanning their like authorization [00:21:00] into the space and everything.

Yeah, they have a whole separate app for like when you want to admit people into the conference. And yeah, end to end is just been a better experience for sure.

Last but not least before we like hop into a quick reflection about all this v0 is something that people have been getting accepted into their like alpha wait list and pumping out interesting stuff. Did you use v0 for this build? Do you find it successful? Do you find it helpful

Yeah, I used V0 a little bit. So V0 is Vercel's AI layout, UI generator, basically. So you have a prompt, like a text box, and you describe the webpage that you want built, and it will give you a bunch of different options on layouts, and then you can pick the one that you like the best to start with and make tweaks.

Once you're satisfied with where that has got you started, you can just copy and paste the code into your project. So I was really lucky because [00:22:00] I got asked to join VZero the day before they actually announced it on Twitter. So I got to see it from like baby stage. Cause it was wild how much they've like already improved this.

And it was like mind blowing. And I was towards the end of actually building the react Miami site when I started using it, but I did. Take some of the code that was generated by v0 and throw it into our project. Fortunately, because that timing lined up a little bit, so I could actually try it out a little bit.

Yeah, it was really cool. The whole premise of v0, it stands for version 0, so it's not going to give you like your final code but the idea is that it can get you started on a lot of the tedious Routine parts of starting a web app, which is a lot of flex box, grid layout, like headers, like images, this, that, whatever, all of that kind of stuff that you always have to do over and over again, it kind of pushes that out of the way.

And then you write the code that's [00:23:00] like more specific to your needs.

So, Looking at this project that you've been a custodian of and builder of, Michelle the React Miami site and using the Vercel stack,

I'm sorry.

like to build stuff. We like to use different technologies if we can. So, Does this fit really well into your personal vendetta of I'm going to be using this from here on out?

Yeah, it does because I think Vercel and XJS, I mean, Especially because Vercel is like the host, in a sense, of the Next. js project. They just have really spent a lot of time on thinking of a lot of use cases, thinking about quality of life. And I'm not building anything crazy complex.

This website could be built in any [00:24:00] framework at the end of the day. But what I like is really the quality of life improvements. Like, Next. js and Vercel work so well together, doing those deployments saves so much time, it's like a bittersweet thing I've experienced the other side of it, of , what it's like to not use Vercel and not use Next.

js and everything that all of the time that you have to pour into making a web application and deploying it without those things. And my personal website's actually built in Astro. It's just their template. It's nothing special, but I, I like to explore like different frameworks and stuff, but like when it comes to actually putting projects out into the world for now, it's always going to be next JS and Vercel.

I just don't think that you can beat the quality and , how prolific it is. And again, the customer support. I Can't understate it enough. Like it is very important to be able to find help and get unstuck, even if someone's not with you. So anybody's allowed to compete for my quality of life.

I invite you to do that, but the bar is pretty high.

So if you want to [00:25:00] hear Michelle talk about this project, you can go to the next JSConf 2023. You're up on stage talking about everything we went over today. If people wanted to learn more about what you're working on, Michelle, or other discoveries you're making about how to just streamline professional quality development.

Do you post anywhere? Twitter, Mastodon.

Twitter is my go to so you can follow me on Twitter, my handle is michellebacles, and I'll post pretty much anything that I'm working on there, so anything that I find exciting or cool I'll share it on Twitter.

Those are the best Twitters to follow you're just inundated with cool things every day. MIchelle, thank you so much for your time. It was great talking to you about your project and the success of it. And who knows, maybe some people listening to this podcast are going to head down to the next\ conference in Miami.

So wishing you the best of luck for all the future ones that come.

Thank you. Appreciate it.