FrameHack#2 | Deploy Farcaster Frames using FrameTrain

🤘 Intro

Welcome to the second edition of FrameHack 👋

As you know by now, we keep it short and clear around here!

You can see the online workshop for this hackathon from organizer Chris here.👀👇🏻

⏰ Date & Location

FrameHack starts on 28th September 2024 at 16:00 UTC, and ends on 8th October at the same time, lasting for 10 days.

It is 100% online, you just need a computer and an internet connection.

🏆 Prize Pool: 20,000 PTS = $10,000

FrameHack #2 is the recipient of an OP Experimental Grant, which means that winners will be able to choose if they want to receive the reward in $USDC on Base or $OP on Optimism. Rewards are sent 10 days after the hackathon ends (buffer period for code review).

The total pot of $10,000 will be dispersed based on how many points you collected during the hackathon. You can see the number of points assigned to each track by going to the Issues tab on Github. 

Because you are not limited to work only on a single track it makes more sense to award points to winners, and convert the points into their USD value at the end.

There are 20,000 points in total across all tracks, for a total amount of $10,000 in USD value. The number of points that can be awarded is fixed and cannot go over the defined amount, so your prize cannot be diluted due to more people joining or any other factors.

1 point has the same value ($0.5) from the start of the hackathon until the end, when winners receive their prize.

🏎️ Tracks

There are 10 tracks in total, split in 3 general types:

- PRE-DEFINED Ideas (10 tracks)

- NEW Ideas (1 track)

- IMPROVEMENTS (2 tracks)

You can view all the available tracks in the Issues tab on Github. The number of points you get for each track is mentioned in the description of each issue.

Besides the points value, there is no difference between the tracks and you can choose to complete any of them.

🧑‍⚖️ Guidelines & Requirements

For existing tracks, the requirements are already mentioned in the specific Issue for each track. To see all tracks, click here.

For new ideas, the most important characteristics in a Template are: Reusability, Utility, Complexity, and for bonus points having a Page.tsx component that shows relevant data.

Frames that are only good for a specific period or one time use like a token balance checker have no reusability/utility. A Token Swap or NFT Store Template on the other hand would be highly customizable and always based on the user's needs, showing a greater potential for reusability. We strive for utility, not novelty.

You also get bonus points if your template has a `Page.tsx` component that shows relevant data. For more details about what this means, check out the Anatomy of a Template page.

Your template will not be accepted into the hackathon if it uses third-party code that is not MIT or permissively licensed. This does not refer to installed npm libraries.

Each winner will provide a short text guide for Users about using their template, after the hackathon has ended. 

🆙 Submitting your Template

To submit your Template open a PR in the FrameTrain repository with your Template code added to the @/templates folder, and details about it, then open an entry here on AKINDO.

The pull request should have a title in the [FH-2] TRACK_NAME (#TRACK_ISSUE_NUMBER) format. For example, if you're going for the "NFT Store" track which is Issue #153, your pull request will be titled [FH-2] NFT Store (#153).

It should contain a few words about your template, and a link to a Farcaster post showing a working example. Simply create a Frame using your Template, post it to Warpcast, and paste the link in the PR. 

This means you will need to deploy your own instance of FrameTrain to showcase it, but do not worry — it's easy and free! See the How to Get Started section for more details about running and deploying FrameTrain.

📲 About Farcaster & Frames

Farcaster is a decentalized social network created by Varun Srinivasan & Dan Romero, similar to Lens or Deso.

One of its killler features is Frames, programmable mini apps that live inside the news feed.

Frames allow you to render a React component as image, have a field to get input, and up to 4 buttons for interactions.

They are very lightweight, look familiar, and should not be confused with iframes, which render the entire website and differ in behavior & looks.

The cool part is that all interactions that a user does through a Farcaster client like Warpcast are signed, meaning the server can cryptographically verify which user did the action.

From then on we can get more info about the user, call APIs & hooks, and build rich interactions directly in the news feed. 

For more info, start here.

🖼️ From Previous Editions