Video presentation
Here's an extra video extending from the first one above.
May I know what the project is ?
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.
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 ( 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.