Posts

Debugging study progress and word order in React Native

Image
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, ...

Fixing FlashCard flip animation rendering issues in React Native

Image
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...

Fixing a TensorFlow Lite model loading error in a preview build

Image
 In my previous post, I described how I moved K-Pop Celeb Like Me from a WebView implementation to a local React Native app. I also explained why I switched from TensorFlow.js to TensorFlow Lite after finding that image prediction was too slow on Android. After getting the basic image recognition feature working, I moved on to testing preview builds on real devices. That was when I encountered another problem: the model worked during development, but the app could not load it in the Android preview build. In this post, I will explain the error, the cause I identified, and the change that allowed the model to load successfully in both Android and iOS preview builds. The model worked during development but failed in the APK My app uses image classification models exported from Teachable Machine. I bundled the TensorFlow Lite model files and their corresponding label files inside the project. The model-loading function initially looked like this: export async function loadModel(g...

WebView to local app: testing on-device image recognition

Image
 When I started developing K-Pop Celeb Like Me , the app was originally built as a WebView app. The main feature was simple: users could select or take a photo, and an image classification model trained with Teachable Machine would predict which K-pop celebrity looked most similar to them. The web version already worked, so I initially considered keeping it as a WebView app. However, before developing more features, I wanted to check whether I could run the same model directly inside a React Native app. There were two main reasons for this experiment. First, I wanted to reduce the app's dependence on a separately hosted website. Second, I wanted to see whether running image recognition locally would provide a better experience, especially on Android devices. This post describes my initial traffic investigation, my first attempt using TensorFlow.js, and the performance improvement I observed after switching to TensorFlow Lite. Why I considered moving away from WebView My website was...

About K-PopRama Slang app

Image
  I made a Korean Slang dictionary app specifically for trendy words used in K-Pop & K-Dramas. I built this to help fans fully enjoy the content without missing any subtle jokes or meanings. Please check it out, and any feedback would be very appreciated! If you have any question or request for bug fix, slang words addition, etc. etc. pleaes leave some comments here or you can send me email to: developer.anchubby@gmail.com - K-PopRama Slang (Free version) Android: https://play.google.com/store/apps/details?id=com.taehyeonkim345.kpopramaslang iOS: https://apps.apple.com/app/k-poprama-slang/id6782297211 - K-PopRama Slang Plus (No ads version) Android: https://play.google.com/store/apps/details?id=com.taehyeonkim345.kpopramaslang.plus iOS:   https://apps.apple.com/app/k-poprama-slang-plus/id6782601678 Key Features:   1990s ~ Present trendy words 1,000+ Words & Growing Search by Artists & Shows Learn by Daily Flashcards