Loading video...
Video Failed to Load
introducing minidev: the lovable for web3 anyone to create a Farcaster miniapp or Base app in minutes. try it here: $MINI, the official token of minidev is live. more below:
37,567 views • 9 months ago •via X (Twitter)
0 Comments
No comments available
Comments from the original post will appear here
![😱 How to Build & Launch Your Base Mini App in 10Mins. ■ Investment: 0$ ( Free of Cost ) ■ Potential: $BASE ■ Exprience: No coding experience needed ( anyone can build ) 👀 Just watch full video & follow my simple 9 steps & Boom : Tools : 1.) Create V0 account :- 2.) Create Farcaster Account :- 3.) Create Baseapp Account :- •• Must link your farcaster account in base app Step 1 : Create the Calculator Application - Built a functional calculator with add, subtract, multiply, and divide operations - - Creat `/components/calculator.tsx` with full calculator logic and UI - - Creat `/app/page.tsx` as the main entry point - - Use React hooks (useState) for state management - - Designe with a modern dark theme using Tailwind CSS - Step 2 : Deploy the project & copy the url & save it . Step 3 : Create the Farcaster Manifest File - Created `/public/.well-known/farcaster.json` - This file tells Base about our app - Configured app metadata: My project name : My url link : { "accountAssociation": { "header": "", "payload": "", "signature": "" }, "miniapp": { "version": "1", "name": "My project name", "subtitle": "Fast & Easy Math", "description": "A simple calculator for basic arithmetic operations", "homeUrl": " "iconUrl": " "splashImageUrl": " "splashBackgroundColor": "#1a1a1a", "screenshotUrls": [ " " ], "primaryCategory": "utility", "tags": ["calculator", "math", "utility"], "tagline": "Calculate Instantly", "heroImageUrl": " "ogTitle": "Calculator", "ogDescription": "A simple calculator for basic math", "ogImageUrl": " "noindex": false } } Step 4 : Added Required Images - i attach a image , so convert that image as required ratio and attach the same image in our mini app for all 3 forms . `● icon.png` (300×300px) - A small icon of your app ● splash.png (200×200px) - A splash screen image ● screenshot.png (1284×2778px) - A screenshot showing how the app looks Step 5 Added Embed Metadata - Add `fc:miniapp` meta tag to layout.tsx metadata - Configure embed preview with: - Image URL for the 3:2 aspect ratio preview - Button configuration ("Open Calculator") - Launch frame settings - Splash image and background color Step 6: Added Farcaster Miniapp SDK Integration - Install `@farcaster/miniapp-sdk` package (automatically included) - Update `/app/page.tsx` to import and use the SDK - Call `sdk.actions.ready()` when the app loads - This is the **critical step** that tells Base to hide the splash screen and display your calculator Step 7: Update Next.js Configuration - Update `/next.config.mjs` to work with Next.js 16's Turbopack - Add `turbopack: {}` config to ensure clean builds - Remove webpack-specific configurations Step8 : •• Now for one time , click on deploy & deploy again •• Then Open Farcaster in Pc/Laptop •• Enable Developer Mode •• go to Developer section then & click on Mini app manifest tools •• then paste url ( check vidoe ) •• then click on fetch & then click on Genrate account association •• scan qr code and verify your farcaster account •• Now copy everything and paste in V0 ( add prompt ) Add this as account association •• then Reverify and Submit . Step9 : ● Download Base App : •• Create Account with email •• then connect same farcaster account ● Then Visit : •• signin with same base app email . •• and follow video process 📌📌 Join Our TG for More Alpha:-](https://image.24vids.com/tw-2016055058547552584/amplify_video_thumb/2016051977499676672/img/2m7GJeSIEfeYyLPo.jpg)
