AnkiBuilder

I created a modal popup that is displayed while the deck is being generated. Before, the user wouldn’t know if the request was successful since deck creation happened in the background. In the next steps, I will add validation for the APIs and the UI, as there is currently no way to surface errors to the user other than the console.

I spent some time refactoring the Anki building logic. Before, the pronunciation generation and fetching were in the base along with dictionary-specific attributes. I moved the pronunciation into its own module and improved the base logic so children can inherit what is relevant to them.
I also added pictogram support for words using a dedicated API.

I worked on the navbar a bit. Nothing fancy, just polished it a bit and added some fancy hover effects.

I created a reusable alert component to show info, success, danger and warning. I used it to show success when the deck is created instead of logging to the console.

Finally, I made the app responsive for mobiles. It was easy thanks to Tailwind and a YouTube video.
I also reconnected the frontend with the backend using a different strategy. I have a function to determine the endpoint based on the source the user selects, and another one to build the payload, because it’s not constant and varies a lot between endpoints.
These functions are stored in the useApi composable.
The app is about to be finished — just a few hours and it will be ready.

feat: “I added dark mode support! yay”
I used VueUse to handle that, there is a toggle button in the newly born settings page to take care of it. The hardest part was finding a good color theme. I decided on this one. It’s good but I feel there is better.
However, I still have things to do. The next step is to fill the pages with real content, then make it responsive.

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.

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.

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.

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.

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.

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

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.

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

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

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