unrot

undoom your scroll

Comment

Inspiration

Have you ever decided to scroll on TikTok or Reels for just a little bit? Five minutes easily turn into 20, then an hour, to two—next thing you know, you have no time left to actually study for your test the next day!

What if your doomscrolling session was more productive? Introducing unrot, the Chrome extension to merge the fun of bedrotting and the satisfaction of acing your next exam!

What it does

Our Chrome extension adds flashcards right into your Instagram Reels feed. As you doomscroll, you will periodically answer questions to continue scrolling. Answer them correctly to score points and regain productivity!

Your flashcards are personalized to you. With just the click of a button, you can use any flashcard set from Quizlet or auto-generate flashcards from your notes. Brainrot? Who’s she? Last-minute cramming is now a thing of the past :)

How we built it

We build our Chrome extension in TypeScript using Vite to build and package the various components and scripts. Our UIs were written in React with the Mantine component library, with elements appended into the Reels document tree. Using a content script, we were able to parse cards from any Quizlet set. To extract flashcards from PDFs, we integrated with Google Gemini and engineered our prompts to generate JSON that we could parse to create flashcards.

Challenges we ran into

Due to the nature of this project, we faced a couple of obstacles along the way. We faced many obstacles trying to manipulate Instagram Reels’ obfuscated document tree to inject the flashcards. For one, we had difficulty getting React elements to look normal with the existing CSS without breaking existing elements. Instagram’s content-security-policy also made it difficult to load images within those components. Since there were no libraries to address these nuanced issues, we had to invent and exhaustively test workarounds using (oftentimes deprecated) JavaScript web interfaces and CSS tags.

We also faced issues developing a strategy to upload user files to an API endpoint from a Chrome worker, since it was a frontend. Different APIs had different response formats for the file (i.e., URI, File object), and text extraction of the PDFs produced nonsensical data due to different encoding formats.

Accomplishments that we're proud of

  • Weighted gamification and card randomization heuristics
  • Flashcard integration and scrolling prevention
  • File integration with Google Gemini

What we learned

  • Understanding how to read, modify, and interact with the document tree of another website
  • Experimenting with React outside of a pure React environment—for example, using a content script to inject React components into an existing live website
  • Using Mantine to quickly build nice user experiences

What's next for unrot

  1. Integration of other social media, such as TikTok, Twitter, and YouTube Shorts
  2. Configurable text prompt for personalized generation of flashcards
  3. Analytics dashboard of personal study performance
  4. Combining multiple flashcard sets
  5. New question formats
  6. Spaced repetition learning algorithms
  7. Support for mobile apps

Built With

Share this project:

Updates