I built my first Mini App with zero coding experience (Here’s exactly how)

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):

The prerequisites

There are a bunch of software and accounts to get our app up and running, and this was what I used:

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:

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)

My entire flow

These were the steps I used to create my app:

  1. Coming up with an app idea
  2. Create a prompt on ChatGPT (or other LLMs) to specify how to create the app on v0
  3. Paste the prompt on v0 to get the first draft of the UI
  4. Transfer the repo to GitHub
  5. Vibe code with Claude on Visual Code Studio after cloning the repo (adding Farcaster elements)
  6. Test the app locally on ngrok (optional)
  7. Deploy the app to Vercel for hosting
  8. Configure the Manifest on Farcaster and Base app
  9. Share the app (like what I’m doing now)

Coming up with an app idea

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:

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:

Creating a prompt for v0

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.

Building the app on v0

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:

Transfer the repo to GitHub

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:

Using VSC to vibe code

v0 already built out a functional app, but I used VSC to add onchain components to our app, including:

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:

I made other changes to the app with Claude Code, including:

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.

Testing the app locally with ngrok (optional)

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:

It’s faster to make these major changes locally before I deploy it to Vercel (it’ll take 1-2 minutes after).

Deploy the app to Vercel for hosting

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:

Configuring the Manifest on Farcaster

The Manifest is the tricky part, where we have to:

I generated an ‘account association’ first to tie the Mini App to my Farcaster account.

The 3 portions included:

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:

Configuring the Manifest on Base

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:

FIP Crypto | Footprint

@fipcrypto

Not the most groundbreaking app, but I built this Farcaster/Base mini app to prove I could create an app even with zero coding experience.

All purely through LLMs and video tutorials on YouTube, but there's so much more to learn.

I'll share a full breakdown of how I did it soon

You don’t need to use the exact same setup

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 struggles I faced

The road was not smooth at all, and I encountered plenty of issues:

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.

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:

You still need distribution

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:

Useful References

These guides helped me to code out my app:

A full list of resources can be found on GitHub, including a step-by-step guide on how I vibe coded this app.