99% of airdrop hunters will miss the Base and Farcaster builder allocation.
I would have too, because I thought coding was too complex.
But I created a functional @baseapp and @farcaster_xyz Mini App without understanding almost all of the code, thanks to vibe coding platforms.
It took me an entire weekend to code this out, and here’s the exact process I used (so you can avoid all the mistakes I made):
There are a bunch of software and accounts to get our app up and running, and this was what I used:
Figma (optional, for app images and designs)
Visual Studio Code (for coding locally)
Claude Code (coding on VSC)
ChatGPT (for crafting prompts)
v0 (to create the frontend)
Vercel (to host the app)
GitHub account (to save our progress)
Ngrok (optional, to preview your app locally)
Base Developer (to share an app on @baseapp)
You don’t need to follow the exact same setup because there are other platforms that can perform the same function.
Coding is not the only thing we need to prepare, as these images make your mini app more enticing:
App Icon (1024 x 1024)
Splash Image (200 x 200)
Frame / Embed (3:2, I used 1200 x 800), when posting on socials
Cost-wise, I didn’t have to pay for anything extra.
(But that’s because I have ChatGPT and Claude Code subscriptions from my full-time job)
These were the steps I used to create my app:
Coming up with an app idea
Create a prompt on ChatGPT (or other LLMs) to specify how to create the app on v0
Paste the prompt on v0 to get the first draft of the UI
Transfer the repo to GitHub
Vibe code with Claude on Visual Code Studio after cloning the repo (adding Farcaster elements)
Test the app locally on ngrok (optional)
Deploy the app to Vercel for hosting
Configure the Manifest on Farcaster and Base app
Share the app (like what I’m doing now)
The clearer the idea you have for your app, the easier this stage would be.
I had tons of ideas on what I wanted to build, but I’d likely spend a lot of time trying to create it.
Since I barely have any experience, I chose to keep my first project simple so I can publish it ASAP:
I followed @sodofi_ to build a quiz with these features:
A 10-question quiz that gives a score afterwards
A user pays 0.00001 ETH to view their result
A user shares the results on Farcaster or Base App
It’s an extremely bare-bones app, but again, I wanted to get it up and running quickly.
And once I had this idea, I started building it out:
v0 lets us build out the frontend of our app based on our prompts.
But since I don’t know what’s required to craft a detailed one:
I followed @sodofi_’s advice and used ChatGPT to create a prompt specifically for v0 (which included all of the details that I would’ve missed).
All of the prompts I used can be found on GitHub, which I’ll share later.
v0 is by Vercel, and I signed in with my GitHub account so it’s easier to clone the repo to my account later.
I pasted the prompt generated by ChatGPT and it took a few minutes to build out the app’s frontend.
It was a bare-bones but functional one that I could use, and I’m using this as a base when coding on Claude Code later.
v0 has rate limits on their free plan, so I chose to use Claude Code to build out the different features since I have a plan.
So I cloned this base code to GitHub first:
I shared my code on GitHub so I could clone it locally on Visual Code Studio and use Claude Code with it.
Cloning the repo on VSC is straightforward after signing into my GitHub account:
v0 already built out a functional app, but I used VSC to add onchain components to our app, including:
Connecting a Farcaster wallet
Getting users to pay a small fee to view their results
All LLMs work better with context, and the Farcaster docs had this function to copy the entire text.
I used this context on ChatGPT to craft another prompt for Claude Code.
This taught Claude Code how to make these changes to the app:
Add a ‘wallet connect function’
Optimise the app as a Farcaster Mini App
I made other changes to the app with Claude Code, including:
Copy changes on the screens
Alignment changes to the questions
Changing of app behaviour (one tap questions instead of having to click on the next button)
I made all these changes with Claude Code instead of v0 because I have the subscription, but you could choose to use v0 or Cursor for this stage too.
This is an optional step, but it helped me to preview the app first before I deployed it on a live site.
This involved another round of installations I had to perform to host the mini app locally.
I used Farcaster’s preview tool and pasted the URL to view the site as a mini app.
If I did it on v0, it would have displayed as a desktop app instead.
I did a few rounds of:
Testing the mini app on the Farcaster preview tool (I had to enable Developer Mode under settings on Farcaster)
Making changes with Claude Code
Testing the mini app again
It’s faster to make these major changes locally before I deploy it to Vercel (it’ll take 1-2 minutes after).
After getting the app to work and committing my changes to GitHub, I deployed it on Vercel to host it on a live site.
This was a troublesome part because I kept facing this error when deploying.
I spent a while troubleshooting my app and went through multiple rounds with Claude before finally deploying it.
Getting the app live is just the start, because we need to align this into the Mini App format:
The Manifest is the tricky part, where we have to:
Prove ownership of our app
Include all the metadata for our app
I generated an ‘account association’ first to tie the Mini App to my Farcaster account.
The 3 portions included:
Header
Payload
Signature (this changes)
I had tons of issues with this, and wasted a lot of time trying to create a Hosted Manifest.
I had to continuously type down all the fields, and there were limitations when linking it to @baseapp (which I’d share later).
Instead, I learnt that creating a Local Manifest on Vercel is more ideal (especially if we want to host it on the Base App too).
I spent an hour wondering why things were not being updated, only to realise that none of my commits were being pushed because Claude Code was using the wrong author email.
So my tip is to check your GitHub repo to see if your changes are being deployed directly to Vercel.
Otherwise, they’d just be in a list of failed commits like mine.
It took a while before all the changes were synced, and I had to do one more step to get it working on the Base App:
I went to the Base Dev portal to view my mini app, and I had to add one more field in the Farcaster.json file:
Our Base Builder address.
I logged into the portal with the Coinbase Smart Wallet that is tied to my @baseapp account.
We can’t use an EOA to sign in.
This is why I prefer using a local Manifest instead of using Farcaster’s tool, because the Hosted Manifest doesn’t let me add in this field.
I still had some issues verifying my mini app ownership,
and I finally fixed it after checking with Base’s Discord:
I had to remove the Account Association from my current Manifest and then redo the Association before it finally worked.
After hours of troubleshooting and going through the entire process, I finally have a functional mini app:
The steps are complicated, but you don’t have to follow exactly how I did it.
There’s likely a faster way to do it all, and please share it with me if you have one.
There are other ways to build apps, and @clemens_ shared a great starter guide on the recommended tools:
In particular, @tryOharaAI lets you vibe code and deploy directly as a Base mini app.
I did one for a 5 USDC reward and to get used to the entire flow again:
The Ohara Creator Fund is live! Earn 5 USDC for every mini-app you create and connect to your @baseapp account.
We only have 20 free responses per month, and customisability is limited, but it’s a great start to just vibe code and get an app out.
The road was not smooth at all, and I encountered plenty of issues:
Manifest failing to update
Vercel not updating
Not having Neon as a database
App previews took forever to work
Splash and App icons were not configured properly
This was particularly annoying because the app icon looked like this when I wanted it to be scaled down.
I spent many hours troubleshooting before it finally gave the right dimensions.
One possible explanation could be that I gave the LLM the wrong context and it misunderstood some of the dimensions required.
I didn’t understand the Manifest details well enough, and that led to a lot of frustration.
But on most cases, I could throw the error message to Claude and get it to debug, but understanding coding is definitely an advantage.
Many say how anyone can code, but they’re forgetting this caveat:
We need to have a lot of patience.
I spent more time troubleshooting than actually coding out the app, but it’s a ‘trial by fire’ situation where we have to experiment first and fail before building out one.
I barely understood what was happening, but all I needed was to give out clear instructions on what I wanted the LLM to do, and it would change it accordingly.
This could have been easier if I had a Figma file with my entire UI planned out, but this was ‘good enough’ for my first ever vibe coding experience.
I didn’t expect my app to do decently well in the Trending Ranks.
But it could just be me artificially boosting the rankings since I did multiple transactions to test out the app.
Farcaster has rewards when your Mini App is in the top 100 trending apps.
While for Base, we have a good chance of getting an allocation by creating a solid app:
But no matter how good your app is, it doesn’t matter unless people know about it:
Creating a solid app is not enough:
Others have to know that it exists to solve their problems.
A strong personal brand is required to get distribution because people know and trust you enough to try it out.
Coding is not enough, and I shared my philosophy towards building an algo-resistant brand below:
These guides helped me to code out my app:
Vibe Code a Farcaster Mini App: Build an Onchain Quiz Game by @sodofi
How to Build Viral Farcaster Mini-Apps by @limone_eth
Building an onchain app on Base by @jessepollak
Vibe code Farcaster Mini App guide by @ljxie
A full list of resources can be found on GitHub, including a step-by-step guide on how I vibe coded this app.
Share Dialog
FIP Crypto
Support dialog
42
All comments (0)