Castlingo

🗣️ About

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!

📝 Setup

1. In terminal, git clone https://github.com/MattWong-ca/castlingo.git

   • cd into the repo, and create a .env file
   • Add NEXT_PUBLIC_OPENAI_API_KEY="YOUR_API_KEY" and replace YOUR_API_KEY with your OpenAI API key
   • Run the command: npm run build (this should update the out folder)

2. Head to chrome://extensions/ on Chrome

3. Turn on Developer mode (top right)

4. Click Load unpacked (top left)

5. Click on /castlingo --> /extension --> /out, and select the out folder

6. Extension should be installed! Pin it and head to a Warpcast cast (eg. this one)

7. Click the extension, and start learning!

🛠️ Tech Stack

➔ 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

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.

🗺️ Road Map

1. 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.
2. Leaderboard: gamify the experience with a social aspect by introducing a leaderboard where users can compete with points + streaks.
3. 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.