by @nikolaiii for Base Meetup Seoul 🇰🇷 https://warpcast.com/amyk/0x1ba47975
Requirements:
- Install node and npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
- Get Airstack Fan Token and API key: https://app.airstack.xyz/pricing
- Register for lum0x: https://testnet.lum0x.com/explorer/
- Have a look at the lum0x SDK docs: https://sdk.lum0x.com
- Have a look at the frame specs: https://docs.farcaster.xyz/developers/frames/spec
Disclaimer:
- This is my first frame built in node & frog.js, so I am sure many of you have a better knowledge of node.js and my code might not be optimal, the best, or prettiest. My goal is to show you the basic principles of building a frame.
- The Frames v1 will be sunsetting in about 3-6 months. I still recommend to use v1 to build your first frame just to get into the game. To learn about Frames v2, please follow this link: https://framesv2.com/
Anatomy of a frame:
A frame is a collection of <meta> tags included within the <head> section of an HTML page. When a page includes all the necessary frame properties, Farcaster apps display the page as a frame. These <meta> tags build upon the OpenGraph protocol to enable this functionality.
Design Principles:
- Leave a 5-8% margin on each side of the frame image
- Select the key metric you want to show and maintain Visual Hierarchy https://www.canva.com/learn/visual-hierarchy/
- Use easy-to-read fonts