aspro (aspro02)

📱 Guide: Build a Farcaster Mini-App Game with AI (No Coding Skills Needed) want to build a Mini-App like Ghost Rush on Base? You don't need to be a developer you just need Trae AI and this blueprint. I have open-sourced the code for Ghost Rush. Clone my GitHub repo https://github.com/aspro45/Ghost-Rush to see exactly how a Mini-App is structured. Want to see a live example? Play the original Ghost Rush here: https://farcaster.xyz/miniapps/3y_PqEjNqKoX/ghost-rush 🧰 The Mini-App Toolkit 1. @Trae_ai (Free AI Code Editor). 2. My GitHub Repo (Your template). 3. Vercel (Free hosting). 🚀 Step 1: Initialize Project 1. Create a new empty folder on your desktop (e.g., my-miniapp). 2. Open Trae AI. 3. Click "Open Folder" and select your new folder. 🧠 Step 2: The "Mini-App" Prompt We need to tell Trae specifically that this is a Farcaster Mini-App, not just a website. Copy and paste this EXACT prompt into Trae: "I want to build a Farcaster Mini-App (Frame v2) game using HTML5 Canvas. Please generate the files based on this structure: The Game Concept: [DESCRIBE YOUR IDEA HERE] 1. index.html (The Mini-App Shell) > Include the Farcaster Frame SDK in the head: <script src=" "></script> > Add a 'Connect Wallet' button and a 'Start Game' button. > Ensure the viewport is width=device-width, initial-scale=1 for full-screen mobile feel. 2. src/wallet.js (The Payment Layer) > Create a module to handle EVM wallet connections (window.ethereum). > Include a function to switch to Base Mainnet. > Include a function sendPayment(amount) for in-game fees. > IMPORTANT: Create a constant named CREATOR_WALLET at the top. Set it to a placeholder address for now. 3. src/main.js (The Logic) > Initialize farcaster.sdk.actions.ready() on load to signal the Mini-App is ready. > Game Logic: Write the code for the game concept above. > Integration: When 'Connect Wallet' is clicked, trigger the wallet.js logic. 4. .well-known/farcaster.json (The Manifest) > Create a valid Frame v2 manifest JSON. > Use placeholder URLs for the icons and splash screen. 5. styles.css > Make it look like a native mobile app (dark mode, no scrolling, touch-friendly UI). Please generate all these files." 🛠️ Step 3: Let Trae Build Trae will write the code. Click "Accept" for all files. > To test: Type npx serve in the terminal to play in your browser. 💸 Step 4: The Money Move (CRITICAL) If you skip this, you will not get creator fees. 1. Open src/wallet.js in Trae. 2. Find the line at the top: JavaScript const CREATOR_WALLET = "0x..."; 3. DELETE the placeholder address. 4. PASTE your own Base wallet address. Now, any fees players pay in the Mini-App go straight to your wallet. ☁️ Step 5: Deploy & Verify A Mini-App needs to be verified on the Farcaster network. 1. Host it: Upload your code to GitHub and deploy it on Vercel. Copy your new URL (e.g., https://my-miniapp.vercel.app). 2. Update Manifest: In Trae, go to .well-known/farcaster.json and replace the placeholder URLs with your Vercel URL. 3. Verify Domain: > Go to the https://farcaster.xyz/~/developers/mini-apps/manifest > Enter your Vercel URL. > It will ask you to sign a message. Copy the signature data it gives you. >Paste that signature data into your farcaster.json file under accountAssociation. 4. Final Push: Push these changes to GitHub. 🏆 Launch It! Paste your Vercel URL into a Cast it will automatically detect as a Mini-App and show the "Play" button. Stuck? Check my code https://github.com/aspro45/Ghost-Rush to see how I built Ghost Rush. Let's build! 🫡

• 0 replies
• 0 recasts
• 2 reactions

recast:farcaster://casts/0x318dff4a265300d870318c6484ad5e1129be8a3736cd96c8a98b11377c1ccfb0

• 0 replies
• 0 recasts
• 0 reactions

recast:farcaster://casts/0xb4ed89769136bd7de3a903556c0cc3b167ef976fcd4481e15a15510d64b37ca8

• 0 replies
• 0 recasts
• 0 reactions

recast:farcaster://casts/0x4ee76c739b71a52071f9fc6d3fc3e8dbd89d0559a765adb37852e14139974267

• 0 replies
• 0 recasts
• 0 reactions