Introducing my open source language flashcard app
Tags: opensource, webdev, showdev
Published: 2023-01-07 03:54:00

TLDR; In the most basic definition, the app automatically generates flashcard decks for language learners, that lives in their browsers. You supply either a short paragraph or a comma separated list of words, and the app will redirect you to an flashcard editor where you can make further edits before saving it in browser storage. I'm looking forward to improving it, like supporting more languages and making a chrome extension for the app, but I'm not terribly sure if I can ever accomplish them all alone. 

## Inspiration behind the project 

Aside from my job, 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. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0z65dmer69lfo6r5o1cz.jpg)

That's when I called the new project as Lingohelper ( Because I kinda suck at coining project names, so if you guys have a better idea, go to the comments please :) ) 

## What's inside the project  

The app is built with the tech stack I mentioned in my very first blog post, that is JAM stack plus TailwindCSS. 

In addition to that, I also made use of a neat React wrapper for IndexedDB called Dexie.js. 

UI/UX-wise, it's an app that contains the deck collections, the input to put in the words, and the editor to make customizations to the new deck. 

## How to use it 

First, you create your new set of flashcards by inputting a list of new words, or a paragraph if you're particularly lazy.

After pressing the Create Deck button, you'll be led to editor where you can create a new flashcard, delete or star any of the existing ones. 

If you make any changes to the deck, remember to press `Enter` to make sure the changes are saved. 

Of course, one picture can explain more than a thousand words, and so it goes, one video can explain 60 pictures a second. 

{% embed https://youtu.be/LlbAFDLhAZ4 %}

{% embed https://youtu.be/1Q_Q1tLpmtc %}

As the project is still in its MVP stage, the Chinese translations shown in the video are by no means correct. The generated words came from a random word API that I stumbled across on Github. 

## What are the features that make it unique ? How is it compared to existing products ?

Anki and Quizlet are the first ones that came to my mind when building it. Pretty much Lingohelper possesses the look/feel of Quizlet and the versatility of Anki. As well as its' offline uses. 

Quizlet charges people for importing CSV and Excel files to the deck. While Anki offers a cloud storage solution which obviously costs money.

Despite the advantage of privacy and simplicity Lingohelper possesses, the largest drawback of the site is the translation API itself. 

DeepL apparently has a generous plans for this kind of hobby project, but since I don't live in the global North, I'd be hard pressed to find a better solution.

## What else do you need help with ?  

I wondered for a long time if I could download Anki flashcards from the saved decks. 

And I'd love it if there's some sort of a flipping animation whenever you edit with the contents of the card or star it.

## Last but not least...
The source code is available on [GitHub](https://github.com/CallmeHongmaybe/lingohelper)