HackStack

Project Info

FireflyBook: A Quote-Saving Tool

Devpost

Inspiration

Both of us are pretty avid online readers, from news articles to online textbooks to web novels to research papers. While reading, sometimes we stumble upon a funny line, a memorable quote, or an interesting fact we wish we could save for future reference. However, copying the quote into a notes app or a Google Doc is both tedious and hard to keep track of. Therefore, we decided to build FireflyBook, a quote-saving tool that makes highlighting and saving quotes from webpages much more convenient, so we can always have our favorite lines ready to reference on the go!

What it does

FireflyBook is a browser extension that lets you highlight sections of text on a webpage to be stored as a “quote,” noting down the source URL, the date, and additional “context” surrounding the quote if applicable. All saved quotes are stored in a pop-up dashboard that displays saved quotes with sorting, multi-selection, search, and folder features. The extension also supports additional export options, including generating an image of the quote to share with peers. Users can also annotate their quotes with additional notes and save them.

How we built it

To decide what specific features we wanted FireflyBook to have, we looked at existing book-specific highlight and quote-saving tools, such as Kindle’s notebook feature, for inspiration. Based on that research, and our own wants as avid readers, we created a list of tasks and ambitious features that would eventually shape the current FireflyBook extension. To be able to build the tool within the time constraints of the hackathon, we primarily used the coding agents Claude Code and GitHub Copilot to get the extension up and running. We also used our existing HTML/CSS/JS knowledge to make small changes where necessary. We designed our extension for the popularly accepted framework, ManifestV3. Sora used Procreate for iPad to design and draw the FireflyBook icon.

Challenges we ran into

We were very wary of duplicating a tool that already existed, given the simple concept of our tool. So, we researched similar highlighting tools to find out what they lacked; some tools only highlighted and saved text on a page, but no functional extensions saved the quotes themselves. We made sure the gaps existed before filling them. Additionally, we changed many of our features over time as we honed in on improving user experience and convenience. We wanted our extension and its features to be as quick and intuitive to use as possible, so we altered many features to streamline the user experience. One example of this was implementing an alternative “drag selection” in our mass-selection screen, which allowed users to click and drag to select multiple quotes instead of having to click each checkbox manually.

Accomplishments we're proud of

One of our inspirations for the project was the seamless highlighting experience of Kindle, and the extension perfectly matches that while adding additional web-specific features, like linking back to the article of origin and additional export options. There are many convenience features for users, such as a command shortcut for highlighting for quick note-taking, ensuring a smooth user experience, which is something we wanted to focus on. Manlin was happy that the extension was cross-compatible across Chrome, Firefox (her browser of choice), and other browsers. Sora did a great job of designing our FireflyBook icon by hand!

What we learned

Neither of us has extensive UX design experience, so we drew on our own experience of being web users to guide our main design principles: make actions take as few clicks as possible, and make the interface as uncluttered as possible. To make up for our lack of UX experience, we looked into extensions like Simple Translate and Firefox Multi Account Containers to gauge how to structure our popup and highlighter handling. We also did not have extensive experience using LLMs to create web apps, so we used this opportunity as a chance to explore how AI agents such as Claude could assist us in building software.

What's next

Generate an automatic AI summary for each quote when it’s selected- users can get detailed AI context when re-reading their saved quote. Launch a web server, so users can log into their saved quotes from anywhere. Support users focusing on research- add automatic citation tools, save articles in project folders, etc.

Analysis

Compare with all teams

View

Metric

Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.

Technology

Found in codeClaimed only
  • CSSIn code
  • HTMLIn code
  • JavaScriptIn code

3 of 3 appear in the indexed code.

AI coding agents

No AI coding agent signals were found in this repository.

Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.

Codebase size

Source size

125 KB

Source files

8

Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.

0 stars