Mini Apps BBQ Week: Building Social Thursday

All right. All right. We are back. Tell you, how you doing?

H I'm good. How are you?

Good. You've been uh been traveling.

I've been to the office.

I mean, you're in Europe, so you're like country helping as if it's like a different like a a new town over. Um

yeah, it's been lovely.

Yeah. I am in London till tomorrow and I had I actually put a call out so if anyone's in London if you want to have coffee

um I'll be having coffee and stuff I posted about it so I'm trying to remember where yeah you can you can see the post.

Awesome. Yeah, I remember um I first met you in Thailand. This is before you joined the team and uh you gave me like my Bass Holland sticker. I have it on my my personal laptop. I still have it.

The the Bass Holland sticker. Yeah. Um, so guys, I definitely think you uh should up. Mia Poe, she's super fun. She's so knowledgeable and very kind.

Um, yeah, we see people rolling into the chat. Why don't I give a recap of the week before we jump in so far? This is our third

our third session. And you've been here the whole time, so let me know what did we learn yesterday.

Yeah. So, I'm going start from the top. Obviously, you guys were here with me and so League. We were doing mini apps 101. We gave you the rundown what TVA is, why mini apps, you know, uh mini apps are regular apps, right?

They are web apps with superpowers is the way I look at it because they can be deployed and shared uh on the feed on social feeds and that's Farcaster and TBA, the base app. Wednesday, we dive into UX on boarding and then we touched a little bit on the importance of embeds and manifest, right? We were talking about what makes a good application from a user perspective and if you know we were stressing onboarding, we were stressing having a clean UX and and putting yourself in the shoe of a firsttime user. You know, try not to overwhelm them with a bunch of buttons and things like that. You know, it's good to have a uh you know, how to use this app page.

You should have some sort of like cues to nudge your your users, right? and to not give them too many pop-ups, right? If you are asking them to sign into Farcaster as soon as they open your app, you might lose a couple users, right? Some people may abandon your app entirely, right? So, try and make it super easy for them to use and then only require signatures or transactions when desperately needed, like at the very last step once they're already bought in, and then make that transaction gasless.

So,

Mhm. No, I'm not AI. I promise. I promise. You might see me glitch, but I'm not AI.

That's, you know, that's uh that was at birth. Okay. If you see me glitch, that was at birth. All right. And then today, right?

All right. So, we talked a little about UX, but today we're going to talk about social stuff, right? Like I feel like you're going to talk a little bit more about embeds, maybe metadata, maybe sharing, maybe some hooks. I don't know. Let's uh tell us what's what do you got planned today, Sally?

So, I made two posts today. Everybody could see them. One of them has my FID and then another one is just a page with that says green. And the reason why I'm doing that is cuz I'm going to go through with you guys like how can you actually create this yourself. I think when it comes to like dynamic like sharing itself and how embeds work, how manifests work, how they all come together, um it's really good to be able to have these examples, especially like when you're building a game and stuff.

These are your cues. These This is the way to like sort of lock into distribution. Have items, have things that people can share, can talk about, make the app like yeah, making the app a bit more like socially viral. And yeah, that's what we're going to be talking about today in terms of like getting into the weeds about how all these embeds work. And then another part I really wanted to go through is just like I wanted to ask you like Pat, what's the number one app that you use?

Number one app that I use, let's see, I use a couple. So, YouTube is one is number one. Um, Chat GPT. The Notes app is actually really great. I think the notes app is like a good like simple app.

It's not intimidating that I use a lot, right? Um,

it has sharing capabilities. For example, I do we do our uh fiance fiance and I we do our grocery like list in the notes app because we can just like add to it. It's, you know, it's updated in real time and it's just super simple. Yeah. And you just share it with, you know, we have

I didn't know you could do that. Like you're just giving me tips. I'm like, man,

yeah. Yeah. Optimize your life.

Yeah. Yeah. Uh, what about you?

Yeah. I think like for a while my number one app was Duolingo because I was learning Dutch always am. And I I needed to pass an exam, like a language exam. So, I was using Dual Lingo like pretty pretty intense. Um, and then another app that I really like is the Apple Health app.

And the reason why I really like that one is because I use it for um mood tracking. Like at I think it's 3 p.m. my time, 3 p.m.

C, I get a notification to ask me like, "Hey, how do you feel today?" And then it's lit it's literally just a little quiz about how I feel. Then I can see, oh, okay, like this is how my mood s these these are my moods like every day. Like this is how I'm sort of feeling at this time of the day. I think it's really interesting time for me because it's like halfway between my European work day and then the start of the American work day.

So

yeah. Yeah,

I can really see. And I think like the call out there is like notifications are the thing that create the habit for me and that's a really powerful part of building social. And I know because Cada she she uses Dolingo like that little bird man those notifications like he ends up like if you don't like check in on him in a couple days he's looking real stressed out. So yeah I can see how notification plays a big role in calling your users back into your application right giving them a little carrot um and and nudging them to say like hey check in on the app. And I think those are some of the, you know, dopest mini apps, right?

The ones that you kind of have to do like a daily check-in, whether it's like maintaining, you know, like a farm animal or a plan or something like that. Uh, those are really cool. Um, and it adds like a social element to it as well.

100%. I think like these are all the things that also if these apps weren't good, if they didn't have good UX, like we talked about yesterday, we wouldn't come back to them. no matter the notifications, if there isn't a reward in it for me to open it up and to do it again, um I'm not going to do it. So, making sure like these as we've been going through the week, every pillar is something that makes a really good app. And one thing that I want us as developers to sort of think about is I want us to think about mini apps are apps.

They aren't very small. Like you guys have seen them, they're not very small in feature set. In fact, they're quite rich in a feature set. When you really think about the fact that you can spin a NextJS app up, get it up and running very fast. While base app doesn't support notifications yet, it is something that the team is working so incredibly hard to push forward with.

And I'm so excited for everyone to see when they're live. But in the meantime, just thinking thinking forward, thinking about, okay, how how can I make this application better? Like when notifications are enabled, like how do how does it add to like already very enriching experience? The notification shouldn't be like the spammy thing that brings you back. It should just be that thing that says, "Oh yeah, like I actually really like using this app.

I like the process. I like the I understand what what's happening. It's using my correct wallet. It's um everything is exactly how I think it should act." But yeah, that yeah, I guess like that's that's my soap box.

So sorry, guys. I realized

all good. All good. And um yeah, if people are filling in the chat, one thing I should mention is, you know, we've been doing this question of the day each day of the week. I want to make sure that we get the question out before we dive into like the nitty-gritty of what we have planned for today. But the question of the day for you guys is, what's your biggest hesitation or concern about launching?

What might help address it? So again, you're building this app. We're dropping the mini a little bit. Okay. You're you're making this app this social app, right, that you can distribute to users, millions of users easily with a post.

Okay. What is the barrier? What's the hesitation to launching? Do you feel like you need to add a bunch of features? What like what is kind of like weighing on you to deploy an app?

Mhm.

Is it the technical ability? Is it, you know, not thinking your idea is big enough? What What is it? We want to know. I'm going to also put the question of the day in the chat for you guys and uh yeah, let us know.

So, so you ready to talk about social building social?

Hell yeah, I am. And I just got my mini app all up and running today. Unfortunately, guys, I can't share my screen because I can't share my mobile phone screen because my phone has decided to die on me for fun. We all know how that goes. So I'm going to share but the yeah the really good thing about mini apps is that like I've said before if it works in Farcaster it works in the base app and I'm going to show you guys how it works in Farcaster and web view.

So let's get my screen up and running. I'm going to show you guys like the documentation that we have for today's lesson of course and at any point I've got Pat looking at the Pat's looking at the chat. So any questions always drop them. We're we love to see them. Uh right.

There we go. So today we're going to be talking directly from uh sharing your mini app. The sharing your mini app guide is a way that we break down how embed metadata works, how far caster metadata works like man your manifest uh works together. And one of the things that I really love is like this diagram right here. When you have a when when you have a mini app, it's not just a URL that you're sharing.

And the way that this works, you'll see like

So, can you zoom in just a little bit? I'm sorry.

Uh, yeah.

Excellent.

Is it? Yeah, kind of. It's a bit better, right? No.

Yeah. No, this is good. No, this is better. No, for sure.

Okay. Okay. Awesome. Well, first I'm going to show you guys like what does the embed look like? So, this is like an example of an embed.

Some text. There's an image. It has a call to action which is just open. Then I'm going to go back to this. So how does that all get get together?

So you as a user you take a URL for your for your app then base the base app will request your open graph data. So open graph is like what you see like when I share Facebook and you see like the Facebook logo on that share image that is like that is the share image and that is the same thing for many apps except we all customize ours because they're apps and then what will happen is if it's just a static it will just call the image that we have in our public folder if it's a dynamic one. So this is this is like when I customize it. So the one that I just shared before it actually has my FID. So you Pat if you opened um that mini app and you click on the button which says share my FID that will create the share embed with your FID in it like with an image of your FID which I think is really cool.

And so I'm going to go through you guys how how you can do this because there's another way to do like static images as well. So for example, if you have there was a really good question on Monday and I am so sorry but I forget the username uh the person's username but they asked that they were building a event mini app and I hope you're here in the chat today cuz this is specifically for you. They were building an event mini app and every event they wanted to make wanted to have its own share image and so yes you can do that and the way that you would do that is through the dynamic metadata route. to the dynamic open graph route. It will trigger the gen the image generation when the user um just shares the embed the the actual link and then the image itself will change and you can put it can be as simple as um some text and yeah it literally mine is FID so it's just text and a black background and that's it and I'm using like uh the VEL open graph image library to generate that.

So any questions about that? No. All clear.

No. Yeah. Do you do you have recommendations on when um to use one over the other? Like what types of apps would use static apps versus dynamic? Like you mentioned the event management is a great one, but like what's a good when's a good what's a just good use case for static embeds?

Yeah, a really good use case is um I created this like Powerpuff Girls. You guys probably see it because I spam it.

I mentioned it yesterday, too. They're probably like, "Yeah,

these guys these guys have just stopped watching cartoons." I'm really surprised. Like, side note, there is actually a way to get Mojo Jojo and no one's ever got it. So, everyone must be a good person that uses the app. Um, that's neither here nor there.

But a really good the what I really love about it is like when I want to tell people, oh, you should try this, like it's just a static image. That's it. So, like maybe it's just an app that I want people to like I'm not really customizing anything for myself, but when I do the quiz, so at the start, maybe I see it, I'm like, "Oh my god, this would be so fun. I want Pat to do it as well." But if I wanted then to if I when I do the quiz, at the end of my quiz, I want to share my result.

Just like if you guys ever did like Buzzfeed quizzes or even those like silly like um the silly like Instagram filters with the things on your head that would flip over, you would want to share the results with your friend. Like that's a perfect example of like when to use dynamic metadata. Of course, if you have price, all this sort of stuff, but just these cues, these social cues that make it more likely that I'm going to share it.

Awesome. And I'm just showing them uh the doc you're on. I just shared the link that to that. Um

so the way that the like what I like we have this image here and then we also go we break it down. So about sharing the link how the platform fetches the metadata the metadata becomes the embed. The embed is then in the feed. But what does that actual metadata look like? So if you ever have an issue with sometimes it does happen where you share your mini app in the um in the base app and it doesn't actually show as a rich embed.

This is what it looks like. And I'll I'll zoom in here. This is what it looks like when it's when it is correct. So, if your metadata doesn't look like this, generally you'll have like an error in the Farcaster um dev tools for embeds or it just won't show up as a link. And the way I check myself is I right click on a website and I will I will actually show in the header what is missing and what why it doesn't work.

So, I can show you guys here. Here I have my mini app sharing. I am going to inspect. I'm going to go ahead and I will try and zoom in if I can. I don't think I really can which is a bit annoying.

Oh yeah. Hey, I was a liar. Sorry guys. Um let's look here in my head. There we go.

See how like in my meta I have this head here under the description. I have FC frame. I have all of the data that is needed in order to create a rich embed. If this doesn't exist, so if you've rightcicked on your website and then this doesn't exist, it's not going to work. This is crucial, absolutely crucial, as crucial as your manifest if you want to have like a rich sharing experience.

If you don't want it to just be a link on on any of the apps, this is what you definitely need. So, think about your manifest as a way as a way for the base app um to know who made the mini app. Think about your embed as a way that you present your mini app.

Yeah, I'm um answering a question in the chat here.

And I'm wondering so I think this is a good time to talk about context for just for like this question really here really quickly unless I'm going to derail you. I don't want to derail you. So

no no no go ahead because I'm actually going to show you guys context in a minute.

Sweet. So let me ask you a question. So, Dev Queen says, "I'm building an app that needs access to the profile name of the user's wallet when they open the base app. Quick question. Do all users uh users wallets on TBA and Farcaster have a name?

If yes, how can we access and get it? I feel like this is a context question.

If not, base profiles." Yeah.

Yeah. So, you're 100% on the money here. This is a context question. So the really awesome part about using um just using open protocols is that when I'm able to when I query on context, there are a few things that I get out of box. I get the users FID, so the unique identifier for my account.

I will get my PFP URL and I'll also get my um username. So I would I'm going to show you guys in a minute because obviously I'm querying the uh the context for users FID, but I can show you guys how to query for a username as well. Yes.

Code examples that I'll be showing you today are using mini kit just because I find it not because I just shill it every single day of my life. It's not like that. Someone actually messaged me the other day was like, "Oh, I saw that you've been chilling that for a while." I was like, "Friend, that's my job."

I wonder why.

I was like, "Yeah, life update." um not not because like it won't work in the Fcaster SDK or anything like that. Um it's just because it's the easiest for me to use since I use it every single day. And that also is a second thing is that there is no difference between like um the mini kit using mini well there's there's some differences but using mini kit uses the Farcaster SDK and I really want to hone in on that. So if you're a mini app developer, you don't like Nex.

js which is okay. I've met a few people like that before. It's not rare. You can use first off mini kit does work with uh vit as well but you can also just use the farcaster SDK and then that's completely fine. Kit just has hooks that makes it a bit easier to use um things in the farcast in the farcast SDK.

So why don't I go through and stop sharing my docs and why don't we go into the code because I feel

I feel like that's what we really want to see.

Okay.

And then I got a follow-up question for you once you once you go through this one. I have a uh embed question for you that's in the chat. And I think you showing the code is going to be is going to be perfect for for this as well.

I'm going to share everything here. Okay, that didn't share because that's a bit annoying, but one sec. All right,

take your time.

I'm going to share my I'll share my entire screen cuz each one Sorry, guys. There we go.

There's a delay as well. All right. So,

okay. So, here. Do you mind just zooming? Perfect. Perfect.

You got

Yeah, I got it. I got it. Okay. So, I'm going to hide this little bar cuz it's been Oh my gosh, it's annoying. But I'm going to show you guys how it all works together.

So, first off, like I said before, this is just a mini kit project, like a standard one, nothing special. This is the code in Mini Kit um that generates the embed metadata. So here with Mini Kit, the way the reason why I really love this is because all of this data is in my EMV file. When I sign the manifest in Mini Kit, cuz there's a CLI tool to sign the manifest with Mini Kit, um, this all gets pre-populated for me and filled out in my EMV file. What that means is that I'm able to copy it all and paste it directly into Versel into the EMV section in Versel.

So that's why I'm like pretty bullish on it. It's just super simple. But the things to the things to look out for is like this is our frame object. We have our um name of our project. We have the launch frame.

We have the URL, the splash image um and then the background color and image URL which is up here which is actually

because you're on this this page and it's literally going to it's it's the question that is is being asked. I'm gonna mention his question and I want you to sniff it out because I think I think you you know what the issue is. But Stellar Extinction has said my Farcaster.json file loads my embed images

uh fine in the Farcaster app, but it still uses the mini kit demo images in TBA. What do you think the issue is? My intuition?

Yeah, go ahead.

Yeah. No, no, you go.

All right. I I don't All right. So, here here's what I think. So Farcaster JSON is not going to be your embed. Um that is going to be this file here like for for your like splash images, right?

So there's either two there's two two thoughts. It's one you may not have updated it or you haven't posted the new link if you've like refreshed to tba so that it can reindex your app and show the most refreshed image. Does that make sense? What? So, hey, what do you think is the issue?

Yeah, that's like that's one that I would definitely look I would call out like make sure that once you've changed the images, paste it again to to reindex and update the man uh update the c. The second part is like it's kind of straight like it depends on how you've done your how you've set up your mini app. But if one image is only existing in the Farcaster client and another image is existing in the base app client, unless you remember putting in specific code that you're querying the client, you're querying context for which um which app is using your mini app and you've changed it on that. That's the only in from a code perspective, that's the only way that that's going to work because what Pat just said is right. The only thing that is determining what the embed is is looking like is this.

Yeah.

What you see here. And if you're using Mini Kit, it's in your layout file. And I'm going to show you guys what that actually looks like. So this is the code here for Mini Kit. And then I'm there's three.

I'm sorry for the like. So this is the first version of the mini app. So when I just share this and I were to just um copy the link. Bye. So for this mini app and I probably should have changed this image to show you guys a bit more.

Like literally this is just my hero. This is my hero image in my folder in my public folder in my next.js. But then if I launch it like I have here, I'm going to share this green route. I'm going to show you guys like this one now.

So as you could see like there was like one p so my layout so my overall app will shoot will just use one if that's what I choose but maybe I have a special route and in that special route I just wanted to share like a green thing um and if I open the app from the green route it would still open in the basic um this should still open the um normal app like it won't do anything other than that. So that's like something to know. So in this green page, how does this work? I've set up a route here. So let's go into my uh

by the way this is gold. Let me for anyone just getting in uh what's happening right now. So there was a question on you know how can I set up sort of like different embeds or you know uh on different parts of my application right? So um I think it was like a a booking app and events app right I want to show a different embed slashimage for you know uh concerts and then like a different one for like comedy events or something like that right yeah

so so he is breaking down how you can uh because originally with mini kit you are you're doing one embed for the entire app what we're going to do is show different embeds depending on the route slash like URLs that we share So, so he's going into that right now. Just want to make sure everyone like people might have joined in at different times. So,

yeah. No, that that's completely fine. Yeah. So, I'm going to show you guys like how did I get that green page. So, in my green page I here I have um the same thing.

I have an image URL which you can see up here is just opening the like it just it's setting this green image.jpeg as the image which is how it's getting shared. Then it's going to open um it's going to open the normal project page. So nothing too crazy and there's there's really like not much to it. And the way that I'm setting up all cuz the the next part is well like how are you sharing all of these different share routes?

I'm glad you asked. I am using um here we go. I am using the compose. There's two ways of course in mini kit. We have um use compose car use compose cast as you can see on line 24.

So we're just using that hook and then I have a button and in my button I am able to there we go. This this only shares the green route. I have an embed here which is just green page. So my embed is getting called because I'm using the URL for the green page. I have the data there.

I have like the um custom green page embed data. That's how that's working. Does that make sense?

This is genius. So, basically, you wrap a you wrap the button uh in the hook and then you point to that route that you created.

Yeah, that's it. I'm

has the correct embed.

Yeah. Has the correct correct embed metadata 100%.

So, like when I go to that like when I open up my route and I actually look at that, you can see directly, oh, okay. It's going to um it it has like the green image as the image. Mhm.

as well. And that sort of stuff. So definitely like mini kit um has a hook, but there is also the SDK function in Farcaster which also works. Obviously it's like based off it. So you can do this and it's super simple.

Um so the next part is that I'm going to show you guys a dynamic route. A dynamic route is like something that is essentially the final final boss for the event mini app. This is how your user can determine how it works like what they're going to share. So I'm going to show you guys like and also it touches on like how this FID is being passed because here you can see me using FID to share. So let's go up and see how this is working.

Here I am call I'm trying to like bear with me guys for There we go. Finally I got I got it zoomed. So I hope this is really clear for you. But here I'm actually querying context. So here you can see like I'm using the mini app context.

I'm using user and then I'm getting FID. I have hardcoded my FID um just in case it's not there but you don't have to. So I think someone was asking um code queen which I love the name um const username. What we would do is we would do context dot then we have user and this is so this is so great guys like whenever whenever there is like you want to know what's available in the object using dot and being able to see oh okay we can get client so we can actually determine if I am in the farcaster app I can get the client FID um here I'm location is something that is also really really great context or location I've been on a spiel about for a little bit. But it's so cool because essentially what you can get is that you can get the referral.

I know I'm a bit nutty, but you can get the referral. Don't don't laugh at me, but you can get where the user has shared your app. And I think it is so like I genuinely think this is really cool.

Yes.

Because what's happening is that let's think about what we're talking about today. We're talking about sharing. So if I shared this mini app and I wanted to more people to share it and I wanted to create a referral program like based on shares and like how successful those shares are, I can now a get the data from where people are opening my mini app and b I can use like a context.lo location to actually get like the use the hash of the user. So the hash that was referred uh referred me to open their mini app.

That's super cool.

It's super cool. And if it's if it if it's not clicking yet, like you know, getting your mini app working and and and getting users is like step one, stage zero sort of thing.

But then the next thing is monetizing your application, right? How you know you put in a lot of time, you put in a lot of effort, you you put you know blood, sweat, and tears into building your app,

right? Now, once you have users um and you you've already got some adoption, you're now going to think, well, how can I, you know, kind of make some money off this thing, right? Um and this is one of those ways. There's so many ways. There's so many different like business models, but affiliate links and being able to um create a program sort of like this onchain without the need of like third party tools is is is pretty awesome, right?

Um so, yeah, this is this is why it's like kind of also important, right? because it'll help you to monetize and and give credit and things like that.

Yeah, 100%. And also if I am like maybe I I have these events like mini app, imagine if I like then pay a k um money to to promote my event. I can I can now like actually see how successful that has been for me.

Yes.

Like did did they actually get more people to open the mini app? Were people who were were registering were they coming from like this one cast like how is it working? That is great. Like all this data data helps us build better products. It helps us build the products that our users are using.

And we're not just making decisions for them, but they're helping us lead the decision-m in our products. That's why it's Yeah, I can go on about it for a while, but I won't.

That's all good.

To answer the question, we have our user and then we also have here we go. display name, FID, location, PFP URL, and also username. So all of this, all of this is just out of box. There's nothing that you have to do, especially with mini kit. You you really have to just have a mine 29 like set making sure that the mini app is loading.

So set frame ready and is ready and context. So using the use mini kit hook just gives you the context straight away. And of course, this is all available in Farcast SDK as well. So that is how I'm getting the FID. And now let's actually get into how does this all work.

So here I have my dynamic FID route.

I am pass I'm going to a dynamic route called FID and then I'm using that users FID. So what does that look like in code? It means that here is my route FID. Then we have our square brackets because this is a dynamic route and then I have my page.tsx.

I have the same the same uh function which is generate metadata as you can see that I used in layout that I used in green green page and then I have my object here. This is like the only thing that you guys will need to know is like here is the image URL I'm using like uh next.js open graph images. So if I go to my API route and then here I have OG FID I am um I have it forced dynamic I'm getting I'm creating the image itself if I have any issues this is how I was debugging I actually 5 minutes before we went live this didn't work um so yeah just showing you guys how it all it all comes together and then here I'm passing the FID and then that's it like I'm I'm just passing the FID down to this image URL to be able to create it and then I'm making that a URL and then I'm able to put that in my metadata. That's how I'm getting the dynamic metadata.

So when I look at my mini app here, I'm going to launch it. Then I'm going to share the dynamic FID route and then that's it. It's queried for my FID because I've opened the mini app. It has that context. It creates the image for me and then I can hit cast.

This is awesome. I remember in the early days, this is before mini kid. This is this is frames. I um I made I made a uh Yeah. Is it like a mini app?

It's not any I don't know. It was a frame at the time that showed uh everyone's like base name expiration. Um it was able to, you know, query your uh expiration date based on uh some stuff and dynamically change the embed with the date time when it would uh expire. That's super cool.

This is so awesome. And And this is way easier though. This is way easier.

Yeah. I was just thinking damn because that was like a lot to do with frames was very much hardcoded.

Yeah. Yeah. Yeah.

But yeah, this is um this is just done. It honestly wasn't that much code when you really think about it and especially like if you're using things like mini kit and stuff like that like or even just farcast SDK you just have your however you're doing your embed metadata you could use the same functionality you just change the things that you want to change based on route

yeah can I ask you a question so you you're you're always in the trenches any kid you're you're working with developers all the time what are some of the common mistakes you see uh developers make when it comes to their embeds?

Yeah. Um, that's a really good question. I think I think one of the common issues that I see a lot is either not making either not making use of dynamic embeds quite honestly. Like if I've played a game and stuff, I should be able to like a tag a friend like I should be able to tag Pat and say like can you be my score? My score should be the embed.

Like that's that's why wouldn't he like

why wouldn't he want to like answer that?

Yeah,

I think that and I also think sometimes like not checking that you have all the correct data like making sure that your metadata is correct. If you

if you open it up and something is missing like it's not going to work. also just like wrong size images or images that don't necessarily like aren't very in are sort of a bit of skew like I'm not really going to do anything with that.

Yeah.

So, there's a few things. I think that the number one thing is like casting miniups. I've definitely seen a lot of conversation like my mini app doesn't show on base um because you didn't cast it. There's that. That's been a big one.

And also just um like with with embeds in general sometimes like people don't check if the embed is actually just there. So like as you do check your manifest like definitely check that your embed exists.

Make sure it's there.

Yeah. I mean yeah it depends on like I guess how it how you're how you're building it. But yeah it's something I have seen.

Yeah I think you bring up a good point. Like if you stay on that screen really quickly. Imagine you're a user, you're scrolling uh the timeline and there's this off centered image that's telling you to play some sort of game. You're going to be like this this is crap, right? So, you also want like when we're talking about high quality apps, when we're talking about getting users on there, you want to pay attention to to the details like that.

You want to use quality images. You want to use the right sizing. And then more importantly, once they do click on your cuz like that's the first barrier, right? But once they do click on your app, u So makes a a good point. She mentioned earlier like rewards like as humans like we need some sort of reward for the things we do, right?

Sometimes like even when we're just scrolling, like there's like rewards baked in. That's how these apps are kind of like, you know, they they suck us in, right? These social apps, right? So create some sort of reward. Um and then you you know, you just mentioned how using custom metadata, i.

e. sharing your score um putting your score inside that using a dynamic embed to share scores and and and share um the links like that that is going to increase user engagement and enhance discoverability because there is this okay I'm going to play this game or I'm going to do this thing I'm going to share my mood you you know check my mood but then I can then go and say you know I'm I'm I'm happy for the day or I'm sad or whatever uh I'm feeling and such and such, someone else check your score, right? Or check your mood or uh try and beat my high score. This like thing is what is called, you know, thinking social. Um, and so thank you for explaining that and and diving in on that because that's what helps grow your application as well.

100%. And of course, like we have it under the guide like like build viral mini apps. I think like the really cool thing about this guide specifically is that there are a set of questions that you can actually just ask AI. You can copy these even the AI that we have in our docs. You can take them talk about like what your idea is and how can I how can you make this how can you make this app like be shared more than once?

Like how can I get someone else involved? Like what are the sort of fun things that I can do with this app to make it a bit more sticky? Like make it a a better experience. Mini apps and are like light. We always say that they're lightweight, but the the really the big the big unlock here is like there's not a lot of I've been really trying to think like in web 2 like what the equivalent would be.

And well there's obviously like Telegram and I think we chat and I don't think WhatsApp has like an open platform for devs but like there yeah like the this can be like this is such a like empowering thing to do to build with developers like you already you already have people where they are and you can get them Discord is a really good example like people do things with their friends a lot and they share things with their friends so creating these these experiences just make your mini app stronger and better and increases the quality.

So, so he um

before we wrap up, someone shared their mini app. I opened it and I think we should just go through it and use it as an example on just some of the stuff we talked about today.

Yeah.

Is is that cool? Do you do you mind?

I can't share my phone. Can you?

No, but we can share it on Farcaster and we can kind of go through some stuff. I'm going to slack you the uh the link really quickly.

Yeah. Yeah. Yeah.

And then do your screen.

Okay. All right. I've got it up. I'm going to Why is Riverside being funny?

I can also share. So, let me know.

No, it's okay. I think I've got it.

Can everyone see Foster?

Yes.

Okay, great. Messa contracts.

Check out Mr. Music Contracts.

I was going to say, what's the first thing you notice?

We just mentioned it.

Yeah. I want to know like I'm not sure if it's a design thing like if it's

if this image is like Yeah. if it's meant Yeah. But I would I wouldn't I would make you better use of the space that you have because for me I don't understand like I'm not quite sure yet. That that's my like it would sort of it's jarring to me but um but yeah I can see that the logo looks really cool. Yeah, I would say this like before you launch.

So, uh, you know, I clicked on it for a second, but it says, you know, mess a music contract, right? So, build quick, easy, and inexpensive music contracts in under five minutes, right?

And so, your audience is, you know, musicians and things like that. Imagine if you didn't write that like, you know, that, you know, that text above. no one would really know what your app is and they would be less inclined to click. You have so much like real estate like this is your billboard, right? And so until you build the brand where people know like if this if there's you know like a base logo like you know people know base this is a Google logo people know Google right cuz they've spent so much time building that brand but because you guys are are new we're in a new space everything is new right and so you want to use that real estate there to really capture your audience maybe you put that message within your image right so build quick and you know inexpensive music contracts and then check it out like you know your call to action where it says launch messa contracts should say something like really witty like you know build your first contract or launch your first contract or something like that

or even like that's such a good call out because I was just thinking like also you can also like use you could actually use this space for your mini app um just like you would you would see like ads like oh I used this product and it was really good for me like this is your space like if you have actual yeah this If you have testimonials as like your hero image for your mini app, that is so cool.

So, you're the first person to like mention mini ads could be for marketing like it's it it could be a ad a ad in itself and you you guys should look at it like that because

it is you are advertising your your app

it all in one. So yeah

100%. And I'm so I Yeah, I think tomorrow I I will touch on a little bit because I want we want to go through like existing mini apps and stuff and we're going to talk about debugging things. Yeah, 100%. Like if you're an existing app developer, you do not have to think of a mini app as a net new app. You can actually use it as a way to give people a taste of your app and then be able to use the full experience still on desktop because sometimes things are just better on desktop.

Yeah.

And that's the truth. Now if Yeah. Now if you click on it

Yeah.

Yeah. Click on it.

Awesome. Boom. Right.

Love it.

Love it.

Love this. Love this. Right. I intuitively know what to do,

right? Like I need to click a language contract jurisdiction. This might, you know, and then I hover over it. I may not know what that is. I I may not.

I don't know, right? But at least it tells me. So this is really good onboarding. Again, this this isn't an app for everyone. This is sounds like something for artists and musicians, right?

And so this is likely something that would click to that uh you know persona. Um but this is a clean way to onboard someone into your app.

Yeah.

So far. Yeah.

I think it's really great.

I don't know what to Yeah.

No, I love it. And it's really clear what it does. So that makes me really happy as as a dev. I saw like the little animation as well. I thought that was pretty cute.

Yeah,

it was definitely a choice, but I think it's like just having it like this simple. Great job.

Mhm. Great job.

All right.

Um, yeah, it's great.

I think this is our session for today.

Yeah, I think this is our session today, Simon. Yeah. What do should we say anything else? What What do we have? I mean, we have a couple

tomorrow, right? Tomorrow. Tell us about tomorrow. Tomorrow we're going to be like we've brought you all this way to build these mini apps to make them gold standard, but now we're going to teach you guys how to like debug it. Like when things go wrong, I'm going to go through like a router.

For my existing mini app developers, I want to show you guys like how you can build a route in your app as a mini app. You heard that right. So you you don't have to put the context provider like everywhere. You can actually just make one particular route

to see how just test mini apps out. See like do you get distribution? Is it working for you? All this sort of stuff. So, I I really want to go through that with you guys and then when it goes wrong, what does it look like?

I think that's super important as well.

Yes. Awesome. Can't wait for tomorrow, guys. Stay tuned. We have so much stuff planned.

We have a Vibe Co week next week. We are going to be going from zero to 100 and building apps, mini apps, using Vibe coding tools. We're going to be handing out credits, maybe some invite codes, pay master credits, uh AI credits. Um, we're going to have product managers give you guidance on how to build uh mini apps, chat agents, things like that.

I'm down for I'm so excited.

Yo, next week is going to be crazy. You guys got to come sign up. Uh, look for the Build on Bass. Look out on Build on Bass. We're going to have links there.

Please sign up. U, it's going to be epic. And if you can't meet us live, it's okay. We're going to record it and post it.

Thank you so much for everything. And thank you so much guys for joining. Yes, always tweet us your questions. And what was the question of the day part before we jump off?

Yes, the question of the day is what is your biggest hesitation or concern about launching? Basically, we're asking what's the hold up, man? What's going on? You let us know we're unblocked. Yeah.

Why are you not live yet? So, um yeah, we want to help reduce all that friction. Whether it's like a mental thing of like I don't think people like it or a technical thing. We're going to help you to go through all of that and uh help you to launch. All right.

Awesome. So, thanks guys.

Thank you so much.

Stay based. Bye.

Stay base.