AnkiBuilder banner

AnkiBuilder

10 devlogs
41h 21m 39s

An app that generates Anki decks based on the words you want to learn. It supports extracting words from a CSV file to generate a deck with translations for the target words. You can also add pronunciation and optional images.

Amru

I refactored the frontend, changing some names and styles to make it more polished, because the backend was very neat but the frontend had started to become messy. Next, I will add dark mode support. This should be very easy using Tailwind, as I’ve read.

Attachment
0
Amru

Today, I finally added pronunciation support. You can now include pronunciation for your words. It will use Google Text-to-Speech to generate them. When using a dictionary source, you can request to use the dictionary audio instead, with gTTS as a fallback.

Attachment
0
Amru

Finally, I restored dictionary support in the app. I also divided the Anki generation code into classes for each source, each with a build method to construct the deck.
I noticed that the dictionary provides many meanings across multiple parts of speech, so I made a separate card for each meaning while still limiting the total number of cards to avoid overwhelming the user.
I also made the dictionary requests asynchronous, gathering all entries concurrently for faster lookups.
I also rewrote the pydantic model for responses to match the new card generation system.

Attachment
0
Amru

Finally, I refactored the backend completely. I first register each source and then dispatch with the appropriate source and provider as the user wants. I have different endpoints for each source, Pydantic models in their own folder, with services and utilities in separate folders. Now it’s time to introduce different sources and providers.

Attachment
0
Amru

I added FreeDictionary API as a provider, but now I feel the backend is messy and won’t accept more providers. So, the next few hours will go into refactoring the backend to allow scalability.

Attachment
0
Amru

I add icons to the navbar!!! what an achievement.
Note: I also fixed the alignment.

Attachment
0
Amru

Wow, I’ve done a lot.
In the frontend, I created a dropdown using Tailwind, replaced the legacy ones with that modern one, and also used it for language input. I also made three sources for the words and render the component based on that. In the end, I dealt with the response data to ensure that I send the correct data, taking into account user-specified options.

Furthermore, in the backend, I created a model to ensure I get the right data. I also made different processes based on the type of the response, whether it’s a file, word, or even a subsequence of words.

Told ya I did a lot of work.

Attachment
0
Amru

I changed the styles of the input form. Now it’s time to work on the backend.

Attachment
0
Amru

I have worked on the Home page, which contains information about the app and how to use it, I also changed the colors :)

Attachment
0
Amru

So far, I have managed to design the website in Figma. I started by creating a navbar and an input panel for entering words.

Attachment
0