cholid
#nuxt#saas#sqlite#drizzle#better-auth#tailwindcss#cloudflare-d1
Back to projects

Abelma - Learning Platform for Kids

What is this?

Abelma is an interactive, gamified web application designed to help children learn the alphabet, practice phonics, blend sounds, write letters, and build vocabulary in a highly engaging, child-friendly environment. It features an underwater theme with delightful audio guidance, colorful UI, and a rewarding progress system.

Why did I create this app?

I wanted to build an effective and engaging learning platform for my son to master the alphabet and foundational spelling. Traditional approaches can be dry, so Abelma combines visual canvas-based tracing, interactive phonetic games, and a parent-managed reward system to make learning a joyful, guided experience.

Architecture & Tech Stack

The application is built using a modern, fast, and edge-ready tech stack:

  1. Framework: Nuxt 4 & Vue 3 for a robust, performant frontend with file-based routing and a reactive component architecture.
  2. State Management: Pinia coupled with pinia-plugin-unstorage to handle local and persistent multi-profile game states.
  3. Database & ORM: Cloudflare D1 (SQLite at the edge) mapped and queried using Drizzle ORM for fast, type-safe database interactions.
  4. Authentication: Better Auth providing secure, seamless user and parent logins.
  5. Styling: Tailwind CSS v4 with @tailwindcss/vite offering modern, customizable layouts with fluid utility designs.
  6. PWA Support: @vite-pwa/nuxt to provide offline capabilities, installable web app experience, and efficient audio/image runtime caching.
  7. Testing: Vitest for unit testing, and Playwright for reliable End-to-End browser verification.

Key Features

  • Belajar Huruf (Learn Letters): Engaging interface introducing the alphabet A-Z with sound guidance.
  • Menulis Huruf (Letter Tracing): Interactive canvas (AlphabetTracingCanvas.vue) that guides kids on how to write letters step-by-step with accuracy thresholds.
  • Belajar Kata (Word Spelling): Interactive panels where kids match letters to pictures, complete words, and practice spelling.
  • Phonics & Sound Blending:
    • Lab Kata (CVC): Consonant-Vowel-Consonant syllable fusion exercises.
    • Vokal Rangkap (DDV): Mastery over Diphthongs and Double Vowels.
    • Bunyi Sengau (Nasal): Focusing on Indonesian nasal sounds like “NG” and “NY”.
  • Gamification & Rewards:
    • Daily & Progress-based Challenges: Completing learning modules yields coins.
    • Rewards Shop: Kids can redeem coins for stickers, emojis, or custom rewards.
    • Canvas Confetti: Visual celebration on completing exercises.
  • Parent Portal / Dashboard:
    • Profile management for multiple children.
    • Settings for coin value customization, level-up targets, and checking analytics of child performance/mistakes.
    • Premium Tier Subscription locking for advanced modules.

Deployment

Abelma is deployed on the edge utilizing Cloudflare’s ecosystem:

  • Hosting: Cloudflare Pages for lightning-fast serverless static and server-rendered generation.
  • Database: Cloudflare D1 to persist learning history, profiles, and rewards.
  • Media Assets: Cloudflare R2 (or standard public paths) configured to cache and deliver sound effects and images instantly.

Challenges I Faced

  1. Audio Latency & Caching: Ensuring audio instructions load instantly. Solved by integrating Workbox runtime caching configured with CacheFirst strategy specifically targeting audio formats (.webm, .mp3, .wav).
  2. Smooth Tracing Recognition: Designing the TracingCanvas to register clean cursor/touch strokes on different mobile screen ratios and validating drawing coordinates.
  3. Database Syncing at the Edge: Keeping profile progress synchronously updated between Pinia store client-side changes and the SQLite D1 DB without blocking user flow.

Try the App

🧪 Live App: https://abelma.tsurayya.com
🛠️ Source Code: https://github.com/choliddnr/abelma

Notes:

  1. This app is active under development; some features may not be fully implemented yet.
  2. The curriculum is being redesigned to better align with the learning styles of young children (3–6 years old).
  3. The tech architecture is currently under review to improve scalability and maintainability. A modular monorepo prototype is currently under construction.