Introducing Browser Flashcards

What I built

What I built is an automatically generated flashcard repository for language learners, that lives in their browsers.

Category Submission:

No doubt this is gonna be a Wacky Wildcards submission, and possibly Phone Friendly since the app will adapt its layout accordingly to each screen size, even though it's not yet qualified as a PWA yet.

App Link

https://lingohelper.vercel.app/

Will change the domain name soon in accordance with the new name

Screenshots

For your better understanding, you can check out the videos below:

Description

Browser Flashcards (formerly Lingohelper ) is an automatic flashcard generator for language learners, designed to live right in your browser. You can input a short paragraph or a comma-separated list of words, and the app will take you to a flashcard editor where you can make edits before saving to your browser storage. The project was born out of a desire to provide an efficient vocabulary learning tool that doesn't require a subscription or registration.

No signup required, no ads, no cookies, no paywall, just flashcards. For your own benefit.

Link to Source Code

https://github.com/CallmeHongmaybe/browser-flashcards

Permissive License

The project's license is Apache 2.0

Background (What made you decide to build this particular app? What inspired you?)

Aside from my day job as a dev, one of my lesser known side hustle is teaching people languages online. By studying their learning experience and preferences, I thought it might be cool if there is an app that can help them learn vocabulary efficiently without having to pay for a subscription in Quizlet and without any registration whatsoever.

How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)

I built this project using Next.js, Tailwind CSS and Dexie.js (Which is React wrapper for IndexedDB, the kind of database that lives in browsers)

Obviously the project is hosted on Vercel, which I'm grateful for due to the seamless hosting experience provided without charge.

One thing I liked about this project is the amount of technical creativity I've never got to express before in any of my past personal projects, through management of mouse events and state management between different components inside the flashcard editor.

Like when you click a star button, the flashcard's gonna turn gold. Or when you add a new card, the input fields will reset to empty and the deck will be scrolled to the position of the new card.

I knew sometime before that GitHub Codespace is very similar to Gitpod, and I'd only need to tell Codespace which repo to host on its cloud.

Additional Resources/Info

The sortation and categorization of English words comes from a library/npm package called natural.