Developer Anchubby

 While developing my K-PopRama Slang app, I added a FlashCard feature to the Study screen. Users can tap a card to flip it over and reveal the meaning of a Korean slang word, along with examples and other details. After reviewing the answer, they can mark it as correct or wrong and move to the next word. The basic functionality worked, but I encountered two visual bugs while testing the feature: On Android, the FlashCard started flickering abnormally after the first card transition. When moving to the next word, the previous word briefly appeared again for approximately 0.1 seconds before the new word was displayed. Both issues were related to how the card animation, React state updates, and UI rendering interacted with each other. I investigated them separately and adjusted the animation sequence in my StudyFlashCard.tsx component. My FlashCard animation design The FlashCard consists of two views: a front and a back. They occupy the same position, with the back initially hidden. ...

When I started developing K-Pop Celeb Like Me, I wanted the app to find a K-pop celebrity who looked similar to a user's photo. The app uses an image classification model trained with Google's Teachable Machine. Getting the model to run inside a mobile app was only one part of the challenge. I also needed to prepare a useful training dataset, choose how to crop the images, compare training settings, and check whether the model behaved reasonably when I tested it with photos that were not part of the training process. In this post, I will share the workflow I developed using Python and OpenCV, along with the experiments that helped me decide which model settings to use. Why image preprocessing mattered My first concern was how Teachable Machine processes training images. For my image classification project, the model uses a square input image resized to 224 × 224 pixels. If I uploaded images with very different aspect ratios and compositions without checking them, important faci...

In this post, I will focus on one of challenges during K-PopRama Slang development: making sure the study screen maintains the correct word order and progress across different situations. The Study screen has two modes: Daily Picks and Random Study . Users can mark a word as correct or wrong, reset their session, switch modes, and leave the app before returning later. At first glance, managing the word order seems simple. However, the logic becomes more complicated when the app must also save progress, restore it after restarting, and reset the session when the daily word list changes. I found that the best way to investigate the behavior was to trace the state changes and useEffect execution step by step instead of looking at each function in isolation. How the study screen works The Study screen displays one word at a time from an array called studyWords . The currently displayed word is determined by currentIndex . For example, imagine that the study list contains five words: [A, ...

In the K-PopRama Slang application, one of the features I developed was a FlashCard study screen. Users can tap a card to reveal its meaning and example sentences, then mark their answer as correct or wrong. The basic interaction was straightforward: rotate the card around its vertical axis to reveal the back. However, while implementing the animation, I encountered several rendering issues. The card sometimes interfered with other UI components, and its appearance became distorted during rotation. In this post, I will explain how I implemented the flip animation and the changes that helped me resolve these problems. The FlashCard design The study screen contains three main areas: Study toggle: Switches between Daily Picks and Random Study. FlashCard: Displays a Korean slang word on the front and its meaning and example on the back. Study progress: Shows the user's progress through the current set of cards. The front of the card displays the Korean word, its pronunciation, and a...