Frog.fm Tutorial - Easy Framework For Farcaster Frames

Building a Farcaster Frame using the new framework called Frog.fm.

The frame we'll be building is a meme generator, and we'll explore how Frog.fm reduces a lot of code when making frames.

We'll also talk about how to add a Farcaster Hub to your frame and how it's better to use the secure frameData when collecting user information.

New to Farcaster Frames? Start here!
   • Farcaster Frames Beginner's Guide - N...  

Github Repo:
https://github.com/codexbushi/meme-fr...

Frog.fm Website:
https://frog.fm/

Next.js ImageResponse:
https://nextjs.org/docs/app/api-refer...

Join Warpcast to see frames!
https://warpcast.com/~/invite-page/34...

Questions? Contact me on Warpcast:
https://warpcast.com/hunterchang

00:00 - Intro
01:37 - Frog.fm with Next.js Overview
03:28 - Starting Meme Generator
05:40 - Exploring Frog.fm Context Object
07:02 - Adding TextInput Field
08:29 - Next.js Open Graph Image Generation
10:29 - Testing Initial Meme Template Picker
11:19 - Route To Display Text On Meme Template
14:11 - Using Search Params In URLs
15:27 - Start Over Button
16:30 - Next.js Environment Variables
17:39 - Adding a Hub and Frame Validation