AmA

Github Repo

Status

Description

AmA is a Desktop Application, which acts as a digital vocabulary book. You can add as many words and notes, edit them and give them tags to further organize all the words you learned. Gone are the days of tirelessly writing down each word, trying desperetaly to organize them somehow, while inevitebly awaiting the day you run out of space, IF you use AmA!

How to use

After intalling and starting the program, you should be able to see the main interface. This is where you'll see all your saved words, organized alphabetically.

Vocabulary

The top row consists of each letter in your alphabet. When you click on one of them, you'll only be able to see words that start with that exact letter

To create a new word, press on the + icon in the bottom right corner. After that, enter the desired word in both languages, select a tag if you need one, and press "Add word"

Tags are used to tag a specific group of words, for example adjectives, nouns or difficult words. To create a new tag, press the "Tags" button in the top right corner. A menu with all your tags and pages should appear. Press on the "New Tag" button to create a tag, then press the "Edit" button, then the "Pencil" button above your new tag, to give your new tag a name. After that, you can use that tag when creating a new word or edit an already existing word and give it that tag.

To edit a word, go into the main page and press the "Pencil" button next to the desired word. Then you'll be able to see two textboxes and one selector. The first and second textbox represent the word in both languages; the selector changes the words tag. After making your changes, you can either save them, by pressing the "save" icon on the right, or you can discard them, by pressing the "X" icon next to it.

Pages

Pages are used just to write down all kinds of notes. They don't restrict you in any way, unlike the vocabulary section, but you have to organize them yourself.

To create a page, press the "Tags" button in the top right corner. Then press the "Create new page" button in the top right corner of the menu. After that, a new page should appear in your list. Press the "Edit" button, then the "Pencil" button on your new page, to give it a name.

Open the page by just pressing on it, in the Tags Menu. After you do that, all the words, the top row and the +-button should all disappear and you'll be left with just a blank page. To write something down, just click this page once and write away! To save this page, press the new "Save" button in the bottom left corner. Keep in mind, that Pages DO NOT save automatically! You have to save them manually with the "Save" button.

Saving and loading

To save either your words, tags or pages, press the "Menu" icon on the top right. After that press "Saving and loading". A bunch of textboxes should appear to guide you to what you need to save. After that, you will see a long section of text. Copy this and store it somewhere safe, this is your "Save file".

So load something, follow the same process, until you land on a prompt asking you to input some text. Take the text from your save from before and input it. After that press "load". Your words should now be loaded. If not, press "CTRL" + "R".

How it works

AmA is an Electron application. Takes HTML&&CSS files and bundles them together with the Chromium browser as an executable. So under the hood, it's basically just a website. There are no frontend libraries or Typescript used, which was a mistake. The app does not connect to a server, instead everything is saved locally in three files:

The moment you create a word, dictionary.json is read and parsed. Every word is is defined by three values

      {
        "sp": "",
        "de": "",
        "ar": "",
        "tag": "rregi"
    }

sp stands for: Spanish, de stands for: German, ar stands for Arabic and last but not least, the words tag. After adding the new word, the file gets rewritten. This works like this for tags and pages too. Upon creation and saving the same happens for both of them.

Animation and transition wise, everything is done with the CSS transition in combination with transform.

To saving all your words, the program basically just reads the important files and gives them back as text. For loading it's the same, but backwards. So you input your json and the program reads that, and rewrites the important files. This does not check, if the json is valid or not, which can lead to problems, if the user copied it wrong.

Why I made it

This project was originally made for my father, as he tried to find some application, that digitilizes his vocabulary book. I tried to find something, but my search went nowhere, so I decided to make it for him. A program like that seemed very useful, I don't think it exists anywhere and it'd be a learning experience.

Roadmap

Conclusion

AmA is a great tool, and serves it's purpose for those, who need it. I can tell from experience, that keeping a vocabulary book organized it a huge pain. If I ever learn a new language, then I'll DEFINITELY use it, because it encapsulates that feeling of keeping track of vocabulary yourself pretty good, while also making it easier. That's... basically it