https://github.com/w1nt3r-eth/quizframe.xyz

Source code for QuizFrame
https://github.com/w1nt3r-eth/quizframe.xyz

farcaster farcaster-frames

Last synced: 2 months ago
JSON representation

Source code for QuizFrame

• Host: GitHub
• URL: https://github.com/w1nt3r-eth/quizframe.xyz
• Owner: w1nt3r-eth
• License: mit
• Created: 2024-01-28T22:29:50.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-01-28T22:30:04.000Z (5 months ago)
• Last Synced: 2024-04-14T10:34:56.420Z (3 months ago)
• Topics: farcaster, farcaster-frames
• Language: TypeScript
• Homepage: https://quizframe.xyz/
• Size: 946 KB
• Stars: 19
• Watchers: 3
• Forks: 8
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-frames - Quizframe.xyz

README

        
# Source code for [QuizFrame](https://quizframe.xyz/)

> WARNING: Work in progress, ugly code, no warranties

## Features

1. Simulates Farcaster embed locally with a form

2. Stores app's state in a URL

3. Uses `@vercel/og` to render images with React and Satori

## Getting Started

Register a Redis database on [Upstash](https://upstash.com/).

Create `.env.local`

```

REDIS_URL="https://abc-xyz.upstash.io"

REDIS_TOKEN="aHVudGVyMg=="

```

Running locally

```

$ yarn

$ yarn dev

```

Navigate to http://localhost:3000/new and create a new Quiz, then open the Quiz at http://localhost:3000/q/example-uuid-0000

## Interesting pices of code

`src/pages/api/og/[props].tsx` - renders the frame image based on current state. The URL contains all required serialized data, so Vercel can cache the image.

`src/pages/q/[id].tsx` - the main engine, using `` to simulate Farcaster embed, handles POST requests in `getServerSideProps`, handles the game state in Redux style.

`src/pages/new.tsx` - quiz editor using spreadsheet-like interface.