Table Champion: creating and submitting an app in less than 20 hours

My oldest daughter is in her second year of elementary school, deep in the trenches of learning multiplication and division tables. Every evening, we have this routine: she pulls out two little boxes from her satchel filled with flashcards of the tables she's learned. It's a bit cumbersome, and keeping her motivated to practice this way is hard.

That got me thinking... what if I could create a simple app for her iPad? That way, she would be more motivated to do her daily exercises because she loves that device.

There's been tons of videos on YouTube about how people with little to no programming language create apps in no time. I'm a bit skeptical of those for two reasons:

• Seeing people with no background in software architecture run around in circles doesn't feel that effective.
• There's so much more to building an app than just the coding.

Lately, there have been some great articles like this: AI is Creating a Generation of Illiterate Programmers. I feel that one. Using AI exclusively to build stuff takes away much of the craftmanship and fulfillment of being a software engineer. When used as an experienced software engineer, it can make you lazy, waste your potential, and, ultimately, dumb you down.

But, there's a big difference between letting AI write your entire app and using it strategically as part of your development workflow. While skeptical of the "AI built my app" trend, I believe in using AI as a powerful tool that enhances rather than replaces craftsmanship.

Back to the multiplication tables. I'd promised my daughter an app and challenged myself to create it as quickly as possible—from coding to the app store. As an additional challenge, I wanted to develop it for iOS and Android.

Setting Up for Speed

I configured Cursor (my IDE with AI support) with some specific cursorrules:

• One general rule for Expo development.
• One rule telling the AI how Gluestack v2 components work, because otherwise it will start outputting code for Gluestack v1.
• And finally, there is a rule telling the AI that when it makes mistakes, it should document them in a separate file and try to learn from them.

The newest version of Cursor supports MCP (Model Context Protocol), which gives AIs a standard way to call external tools. I installed the awesome-mcp-server, which allows Cursor to better architect, take screenshots, and do code reviews.

Taking the time to configure Cursor for this project paid off in the end. It was able to navigate the code base better and make fewer mistakes. It was also charming to see it document its own mistakes.

## 2025-02-10: Incorrect Gluestack v2 Import Pattern
- **Mistake**: Initially used `@gluestack-ui/themed` imports which is the v1 pattern, instead of importing from local `components/ui` directory which is the v2 pattern.
- **Impact**: This caused compilation errors and would have prevented the app from running.
- **Learning**: In Gluestack v2:
  1. Components need to be installed individually using `npx gluestack-ui add [component]`
  2. Components are then imported from `@/components/ui/[component]`
  3. Styling is done via Tailwind classes using the `className` prop instead of component props
  4. Color tokens use the format `text-primary-500` instead of `$primary500`

My starter kit

I start every project with an open mind and pick the tools I need for battle. For this project, I choose:

• Expo for all the cross-platform goodness.
• Redux-toolkit + Redux Persist for state management. Many people hate Redux, but I like how this combination allows me to persist the whole state tree easily. Also, by using the toolkit, Redux doesn't feel like Redux anymore.
• Gluestack UI: it's the shadcn/uiIt also brings Tailwind styling to mobile apps for free.
• RevenueCat: their SDK makes implementing in-app purchases child's play, and they offer quickly configurable paywalls that you can change without having to resubmit your app. Best of all, it's free until you start making a lot of money (in which case it's still very, very cheap at 1% of MRR).
• Firebase: I don't like Google Analytics that much, but it's decent for use in native apps. Furthermore, Crashlytics is handy and a breeze to set up.
• Lingui: an excellent library for translations - I started with just Dutch, added English, and somehow ended up supporting seven languages (Dutch, English, French, German, Spanish, Italian, and Portuguese).

Besides software libraries, I also used a couple of services.

• Midjourney: still the best image generation AI out there.
• T3.chat: the best AI chat out there. It offers all essential pro models (Claude, Deepseek, OpenAI, Gemeni) at less than the cost of a pro plan at any of these. Also: the UI does not suck. I used Claude and Gemini heavily for all the translations.
• AppScreens: a tool to create App Store screenshots. It comes packed with beautiful templates, and it manages all required screen sizes for you. It also offers free machine translation of your screenshots and the ability to upload them automatically to the stores. It's no Canva in terms of ease of use, but it's a time saver.

The real timeline

I didn't time it, but a rough estimate is that the total time I spent building this app and submitting it was around two working days. Much of that time was spent on metadata (app descriptions, screenshots, clicking around in the hells known as App Store Connect and Play Developer Console).

A guestimate:

AI

I wanted to avoid becoming one of those 'illiterate programmers' the article mentioned. To me, AI is a fantastic tool that enhances my skills. Cursor's AI has been such a great help with something I find pretty tedious: boilerplate. It was so fulfilling to ask it to implement a new Redux slice and watch it get it right!

Small, straightforward tasks had an almost 100% success ratio. I asked for a fun background animation, and it came up with something that would've taken me half a day in less than a minute.

When I asked it to do things that required more thinking, things became a lot less clear. It often produced results that looked good at first glance but were actually pretty bad—and sometimes produced hard-to-find bugs. Fixing those mistakes often took me way longer to prompt the model than it would've taken me to write the code myself.

AI will keep improving at coding, but at least I don't have to fear for my job (yet 😱).

The final product

The game won't win any Game Awards, but it scratches my itch, and Janne loves playing it 😺

This is the final feature set for version 1.0.

• You choose which tables you want to practice.
• There are two types of questions: multiple choice and open, where you must type the answer.
• It has an awkward text-to-speech voice that encourages you.
• There's a screen where you can learn/view the tables.
• There are multiple profiles so that multiple kids can play on the same tablet.
• There's a screen where parents can track the progress of their kid(s).
• Tables 1 through 5 are free. Tables 6-12 can be unlocked for a minimal fee of 1 euro. There's also a "parent gate" before unlocking, which offers you a slightly more difficult multiplication.

There are some enhancements I've got planned for the next version, such as more types of exercises, a better difficulty slope, achievements, more parental insights, and the ability to train on past mistakes. But there's only so much you can do in 20 hours 🤪

You can download the app today. It runs on both iOS and Android — tablets and phones. Enjoy!