Demo video: link
DoraHacks: link
AI-powered Chrome extension for learning new languages on the Farcaster client, Warpcast.
This is the first language-learning app native to Warpcast and introduces a gamification element that brings more people onchain. The quiz questions and learning content are AI-powered, so it can adapt to different users' individual learning styles. It also works for any language!
Most importantly, this app provides a real-world learning experience! Traditional language-learning apps drill you with generic vocabulary and basic sentences. With Castlingo, we provide a more realistic and practical approach by directly translating text that people wrote! Learning from these translations gives a better background of words and phrases you'll actually use, especially crypto-native terms since it's on Warpcast!
Note: you'll need your own OpenAI API key to run it locally!
- In terminal,
git clone https://github.com/MattWong-ca/castlingo.gitcdinto the repo, and create a.envfile- Add
NEXT_PUBLIC_OPENAI_API_KEY="YOUR_API_KEY"and replaceYOUR_API_KEYwith your OpenAI API key - Run the command:
npm run build(this should update theoutfolder)
- Head to
chrome://extensions/on Chrome - Turn on
Developer mode(top right) - Click
Load unpacked(top left) - Click on /castlingo --> /extension --> /out, and select the
outfolder - Extension should be installed! Pin it and head to a Warpcast cast (eg. this one)
- Click the extension, and start learning!
➔ Chrome API: fetches the current tab's URL
➔ Neynar API: fetches a cast's text given a URL input
➔ OpenAI API: returns a JSON object of the translation, definitions, and quiz questions given the cast's text
➔ Next.js: game logic, UI states, and general functionality of the extension
➔ MicroGPT: VS Code extension used to enhance workflow + improve code quality
I used this starter template for the Next.js extension. This blog provides a good overview of how to get started. This intro video and this content scripts + service workers video were both very useful.
MicroGPT's VS Code extension was used to speed up the workflow and enhance code quality. Whenever I saved my code, it would automatically show me potential errors and an improved version, which helped me avoid errors and reduced the length of my code. In the example below, it reminded me that I should check if a variable is undefined before proceeding to manipulate it.
- Farcaster-native experience: leverage Farcaster frames + cast actions so users don't have to install another extension, making the entire experience in-app. This also opens up the game to both web and mobile users.
- Leaderboard: gamify the experience with a social aspect by introducing a leaderboard where users can compete with points + streaks.
- Onchain rewards: win NFTs + USDC for streaks + points, and compete or bet against against friends to earn more rewards. This introduces a viral loop to get more users.
