👀 Watch the YouTube tutorial
Paste the live demo url into https://warpcast.com/~/developers/frames to validate the frame.
Clone the repo and install dependencies
npm install
Next, create a `.env` file in the root of your project (you can copy from `.env.example`) and set the `NEXT_PUBLIC_SITE_URL` variable to your site's public URL:
If your website is not deployed, you may not have a public URL just yet. In that case, use localhost("http://localhost:3000").
NEXT_PUBLIC_SITE_URL=https://example.com
Next, run the development server:
```bash
npm run dev
Open http://localhost:3000 with your browser to see the result.
The project uses firebase. Setup firebase project and create web app. Paste the configuration details in ".env" file.
Since we are building on Next.js, it is recommended to deploy using Vercel so you can take advantage of the Open Graph Image Generator in the Advanced example.
Regardless of where you deploy, make sure you set up the NEXT_PUBLIC_SITE_URL in the environment variables.
NEXT_PUBLIC_SITE_URL=https://example.com
https://vercel.com/docs/projects/environment-variables
Basic Frame example is heavily inspired by https://github.com/Zizzamia/a-frame-in-100-lines
Images are also from the repo mentioned above.
Basic Frame API code was taken from: https://www.pinata.cloud/blog/how-to-make-a-frame-on-farcaster-using-ipfs
Official documentation on Farcaster frames: https://docs.farcaster.xyz/reference/frames/spec
Warpcast Frames Validator: https://warpcast.com/~/developers/frames
Coinbase onchainkit for local frame testing: https://github.com/coinbase/onchainkit
Generate Open Graph images dynamically: https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#generate-images-using-code-js-ts-tsx
Join Warpcast to see frames in action: https://warpcast.com/~/invite-page/341454?id=497d9b60