DEV Community: Ahmad Akmal Abdullah

Engineering the WingZone POS: State Management for Group Ordering & Dual Receipts in Kotlin

Ahmad Akmal Abdullah — Wed, 09 Sep 2026 02:43:03 +0000

One of the most notoriously difficult problems in food and beverage (F&B) software is handling large group orders. When a table of eight wants to order together but pay separately, standard POS systems either force the cashier to input eight separate orders or manually calculate the splits on a calculator.

I built the WingZone App—a native Kotlin-based POS application—to solve this exact workflow bottleneck. It is engineered specifically to handle complex state management for group orders, isolated payments, and hardware receipt generation.

Here is a breakdown of the architecture that secured 1st Place across all courses at the 2026 KPTM Ipoh FYP Exhibition.

The Tech Stack

Instead of building a web wrapper, this project required native execution to ensure zero latency at the checkout counter and direct hardware communication with receipt printers.

Core: Kotlin (Native Desktop .exe)
Architecture Pattern: MVVM (Model-View-ViewModel)
Local State Management: Kotlin Coroutines & StateFlow

Architectural Highlights

1. The Group Ordering Data Structure

The core challenge was structuring the data so a single "Master Order" could hold multiple "Sub-Orders" (individuals), without losing track of the total table state.

I designed a nested data model where a GroupSession acts as the parent object. When a group approaches the counter, the cashier opens a GroupSession. As each person orders, their items are appended to a unique SubOrder array inside that session.

This allows the UI to display the grand total for the kitchen, while keeping the financial data strictly compartmentalized for when it is time to pay.

2. Isolated Payment & Bill Splitting Logic

Because of the GroupSession structure, checkout becomes mathematically frictionless. The UI provides two checkout paths: Pay Full or Split by Individual.

When "Split by Individual" is triggered, the app iteratively locks each SubOrder as the payments are processed. This state is managed using Kotlin StateFlow. If a customer pays their specific portion, their sub-order state flips to PAID, but the parent GroupSession remains PENDING until every individual array is cleared. This guarantees that no items slip through the cracks during a chaotic group checkout.

3. Dual-Receipt Generation Pipeline

Printing receipts for group orders requires different data for different stakeholders. The kitchen needs to see everything at once, while the customer only needs to see what they paid for.

To solve this, I engineered a Dual-Receipt Generation Pipeline:

The Kitchen Ticket: When the order is confirmed, the app flattens the GroupSession array into a single, consolidated list, grouping duplicate items (e.g., combining 4 separate "Fries" into a single "4x Fries" line item) to reduce reading time for the chefs.
The Individual Tickets: Upon payment, the app queries the specific SubOrder, formats the string payload, and sends it to the thermal printer, generating a personalized receipt containing only that customer's items and their specific tax calculations.

The Result

The WingZone App replaced inefficient, manual checkout calculations with a structured, native Kotlin POS system designed around human F&B behavior. By solving the group-ordering and dual-receipt bottlenecks, the system drastically reduced queue times.

The architecture and practical utility of the app earned 1st Place overall at the KPTM Ipoh 2026 FYP Exhibition, outperforming projects from every other course.

I’m Ahmad Akmal (RuumiDev), Founder of MiraiWorks and an Independent Builder specializing in robust systems and interactive UI. If you prefer structured, practical engineering, let's connect:

GitHub: github.com/RuumiDev
Website: ahmadakmal.dev

Architecting Project Nero: Real-Time Exam Attendance via Local Computer Vision

Ahmad Akmal Abdullah — Wed, 09 Sep 2026 02:34:59 +0000

Taking attendance during university exams is a universally inefficient process. Invigilators waste the first 15 minutes of a critical testing period walking around with clipboards, checking IDs, and matching faces to names. It is a manual data-entry problem masquerading as a security protocol.

I wanted to automate this completely. The goal was to build a system that could passively scan students as they entered the hall and log their attendance in real-time, requiring zero manual input.

The result is Project Nero—a local facial-recognition attendance tracking system.

Here is how I architected the computer vision pipeline to make it fast, accurate, and completely independent of expensive cloud APIs.

The Tech Stack

Streaming live video to a cloud AI endpoint is slow, bandwidth-heavy, and raises massive privacy concerns for student data. To solve this, Nero processes everything on the edge (locally) using:

Core: Python
Video Processing: OpenCV
Facial Recognition: DeepFace / MediaPipe
Data Mapping: External Spreadsheet Integration

The Architecture Pipeline

1. Frame Capture & Face Detection (OpenCV)

The system initializes a local Python camera script that hooks directly into the hardware webcam. Using OpenCV, the script captures the live video feed and breaks it down into individual frames.

Before we can identify who is in the frame, the system must figure out where the faces are. I utilize a lightweight cascade classifier to isolate bounding boxes around human faces in real-time, cropping the frame down to just the necessary pixels to save processing power.

2. Facial Categorization (DeepFace)

Once a face is isolated, the cropped image is passed to the DeepFace library.

DeepFace acts as the core recognition engine. Instead of retraining a model from scratch, DeepFace wraps state-of-the-art models to generate a high-dimensional facial embedding (a mathematical representation of the face's features). It compares this real-time embedding against a pre-registered local directory of student photos.

If the similarity score breaches the confidence threshold, the system successfully categorizes the face and returns the student's unique ID.

3. Real-Time State Mapping (Spreadsheet Integration)

Recognizing a face is only half the battle; the system needs to log the data.

Once DeepFace returns a matched student ID, the Python script triggers an external spreadsheet integration. It maps the recognized ID against the master student roster, flips their attendance state from "Absent" to "Present," and logs the exact timestamp of entry.

To prevent the system from spamming the spreadsheet with 30 requests per second while a student stands in front of the camera, I implemented a local state-cache. Once a student is logged, their ID is cached in memory, and the system ignores them for the rest of the session.

The Result

Project Nero eliminates the manual bottleneck of exam invigilation. By combining OpenCV for rapid frame processing and DeepFace for accurate categorization, the entire pipeline runs locally on standard hardware. It is privacy-conscious, requires no cloud compute costs, and completely automates the administrative overhead of tracking students.

I’m Ahmad Akmal (RuumiDev), a software developer specializing in interface design, systems architecture, and practical AI. If you prefer structured, practical engineering, let's connect:

GitHub: github.com/RuumiDev
Website: ahmadakmal.dev

Building Project Airi: An Autonomous WhatsApp Fiscal Bot with GPT-4o & Tesseract.js

Ahmad Akmal Abdullah — Wed, 09 Sep 2026 02:27:29 +0000

Managing shared living expenses—like rent, WiFi, and utilities—is universally frustrating. The standard solution is forcing all your housemates to download a split-bill app, which no one ever updates.

I wanted a frictionless solution. People already use WhatsApp to coordinate bills and send screenshots of bank transfer receipts. So, I built Project Airi: an autonomous fiscal assistant that lives entirely inside WhatsApp.

Instead of manual data entry, users simply drop a bank receipt into the chat, and the bot reads the image, validates the payment, and updates the database. Here is the technical architecture behind it.

The Tech Stack

To make the bot fast, strongly typed, and resilient, I used:

Core: Node.js & TypeScript
Database: PostgreSQL managed via Prisma ORM
Computer Vision: Tesseract.js (for local Optical Character Recognition)
NLP Engine: OpenAI GPT-4o API
Platform: WhatsApp Web.js (headless client integration)

The Core Problem: Processing Bank Receipts

The biggest engineering hurdle was data extraction. Bank transfer receipts are messy. Different banks use entirely different layouts, fonts, and terminologies. A standard regex script would fail the moment a new bank layout was introduced.

To solve this, I built a two-step extraction pipeline: Local OCR $\rightarrow$ LLM Structuring.

Step 1: Local OCR with Tesseract.js

When a user uploads a receipt image to the WhatsApp chat, the bot intercepts the media payload. Instead of sending the heavy image file directly to an expensive cloud API, I process it locally using Tesseract.js.

The OCR engine scans the image and extracts the raw text. The output is highly unstructured and often contains noise (like battery percentages from the screenshot or random UI text), but it secures the critical data: amounts, dates, and reference numbers.

Step 2: NLP Structuring with GPT-4o

This is where the bot becomes intelligent. I pipe the raw, noisy text string from Tesseract directly into the GPT-4o API with a strict system prompt.

The LLM acts as a data parser. It is instructed to ignore the noise and extract only the verified transaction amount, the date, and the payer. It then returns this data in a perfectly formatted JSON object.

By combining local OCR with an LLM, I created a highly fault-tolerant extraction system that doesn't care what bank the receipt came from.

State Management & Database

Once GPT-4o returns the validated JSON data, the backend takes over.

I utilized Prisma as my ORM to interface with a PostgreSQL database. The bot checks the extracted payment amount against the pending bills for that specific user.

If the math checks out, Prisma updates the user's ledger to "Paid."
The bot then pings the WhatsApp chat, confirming the payment and outputting a generated financial summary of who still owes what.

The Result

Project Airi completely automates fiscal tracking for shared living spaces. No new apps to download, no manual spreadsheets to update. It was built as a competitive proposal for APC2026, proving that advanced AI integrations don't need complex user interfaces—sometimes, the best UI is the chat app everyone is already using.

I’m Ahmad Akmal (RuumiDev), a software developer specializing in interface design, systems architecture, and practical AI. If you prefer structured, practical engineering, let's connect:

GitHub: github.com/RuumiDev
Website: ahmadakmal.dev

Engineering Mikira: The Award-Winning AI Study & Music Bot for Discord

Ahmad Akmal Abdullah — Tue, 18 Aug 2026 07:57:07 +0000

If you manage a Discord community for developers or students, you already know the infrastructure pain: you need one bot for music, another for moderation, and a third for studying. Half the time, the music bot crashes due to YouTube API limits, and the study bot is just a glorified text dumper.

I wanted to fix this. I didn't want just another generic bot; I wanted a unified, production-grade tool that handled complex audio pipelines and gamified programming education without ever forcing the user to leave the platform.

Enter Mikira—a multi-purpose Discord bot built on a modern asynchronous Python architecture.

It hasn't just solved the problem for local servers; it recently secured 6 international awards (4 Gold, 2 Silver) and has been officially registered under the Intellectual Property Corporation of Malaysia (MyIPO) as an AI Study Companion (Credential ID: CRLY2026E03369)

Here is a breakdown of how I architected Mikira, the tech stack, and the engineering methodology behind it.

The Architecture & Tech Stack

Mikira is written in Python 3.10+ and relies heavily on asynchronous event loops.

Framework: py-cord (for modern slash commands, voice, and interactive UI views).
Audio Pipeline: yt-dlp, spotipy, and system-level FFmpeg.
Concurrency: Python's native asyncio and concurrent.futures.
Data Persistence: JSON-backed per-guild settings.

1. Cog-Based Modular Design

To make the codebase scalable, I split the domains (Music, General, Study) into independent Discord Cogs. This isolates the logic. If a music stream fails, it doesn't take down the quiz system.

2. Per-Guild State Isolation

One of the biggest issues with multi-server bots is state bleeding. Mikira uses global dictionaries (guild_to_audiocontroller and guild_to_settings) to ensure absolute isolation. Each server gets its own playback queue, volume settings, and auto-timeout timers. What happens in Server A never impacts Server B.

Engineering the Audio Pipeline

Building a music bot that doesn't break constantly requires aggressive fallback logic.

When a user fires /play:

URL Identification: The bot detects if the link is YouTube, Spotify, SoundCloud, Bandcamp, or a direct media file[cite: 1]. Spotify tracks are automatically reverse-searched into YouTube queries via spotipy.
Lazy Stream Resolution: To prevent massive latency when loading large playlists, songs are queued as metadata "shells" in an O(1) collections.deque. The actual audio stream is only hydrated right before playback.
Concurrent Preloading: While a song is playing, Mikira uses asyncio.ensure_future to preload upcoming tracks in the background, minimizing the gap between songs.
Cookie Auth & Fallbacks: To bypass age-restricted or region-locked content, yt-dlp hooks into a Netscape cookie file[cite: 1]. If the primary extraction format fails, it gracefully falls back to a secondary format[cite: 1]. If that fails, it skips the track entirely rather than crashing the bot.

The Interactive Study Hub

The real utility of Mikira is the /study command. Instead of dumping PDFs into a chat, I engineered a fully interactive, button-driven UI using Discord's Views.

The Curriculum: It covers Python, JavaScript, Java, and C++ across 4 core CS chapters (Variables, Control Flow, Functions, OOP).
Active Recall Quizzes: Users can take multiple-choice quizzes where both the questions and answers are randomized on every attempt to prevent position memorization.
Live Scoring & UI: The bot provides instant visual feedback—correct answers turn green, wrong answers turn red. It tracks the score dynamically and outputs a performance tier (e.g., 90%+ is "Outstanding") with a visual progress bar (🟩⬜).

Validation & Impact

Because of its resilient architecture and dual-purpose utility, Mikira was recognized at international innovation exhibitions, taking home 4 Gold and 3 Silver awards. Protecting the source code and brand was crucial, leading to its official MyIPO registration.

The bot proves that Discord doesn't just have to be a chat app. With the right async architecture and interactive components, you can turn it into a gamified Learning Management System (LMS) and a resilient media player simultaneously.

I’m Ahmad Akmal (RuumiDev), a software developer specializing in interface design, systems architecture, and practical AI. If you prefer structured, practical engineering, let's connect:

GitHub: github.com/RuumiDev
Website: ahmadakmal.dev

Escaping the Boring Portfolio: Building a Cinematic IDE Experience

Ahmad Akmal Abdullah — Tue, 18 Aug 2026 07:37:19 +0000

Most developer portfolios look exactly the same: a generic hero section, some floating mockups, and a standard contact form. As a software developer with a background in multimedia, I wanted to build something that didn't just tell visitors I write code—I wanted it to physically feel like a developer's environment.

I decided to ditch the standard web layout and build a cinematic, IDE-style terminal portfolio from scratch. Here is a breakdown of the architecture, the micro-interactions, and how I deployed it.

The Vision & Tech Stack

The goal was simple: build a production-ready, highly structural interface that mimics a code editor, complete with a dark theme, file-tree navigation, and zero fluff.

To execute this, I used:

React / Next.js: For the component architecture and routing.
Tailwind CSS: For strict, geometrical styling and rapid UI iteration.
GSAP (GreenSock): For complex timeline choreography and physical transition elements.
dotLottie: For lightweight, buttery-smooth vector animations.
Vercel: For serverless deployment and CI/CD.

Nailing the Boot Sequence (The Preloader)

A standard page load feels disconnected. I wanted the user to feel like they were actively booting up a terminal session that transitions smoothly into a workspace.

Instead of a basic spinning wheel, I built a dedicated <Preloader /> component utilizing GSAP for a "split-gate" eyelid reveal.

The Terminal Execution: On initial load, a lightweight dotLottie animation plays while a React useEffect interval simulates a snappy typing effect: mal@portfolio:~$ booting kernel....
CSS Micro-Interactions: I mapped a @keyframes block to a solid CSS square to mimic an authentic, blinking terminal cursor, bringing the text to life.
The GSAP Split-Gate: Once the virtual workspace "initializes", a GSAP timeline takes over. Instead of fading out, the dark background physically splits in half, sliding up and down to unveil the fully rendered IDE underneath.

Structuring the IDE Interface

The core layout is heavily inspired by VS Code. It requires strict CSS grid structuring to ensure the layout never breaks, regardless of screen size.

File Tree Navigation: The left sidebar acts as the primary router. Clicking files like about.html, projects.js, or experience.ts dynamically swaps out the main viewing pane.
Mobile Auto-Retraction: One of the trickiest UX details was handling mobile view. Standard sidebars stay open after you click a link, covering the content. I engineered the mobile state dispatcher to auto-retract the navigation tree the absolute millisecond a file is selected, ensuring the user can immediately read the content without fighting the UI.

Deployment & Routing Architecture

To keep the repository entirely private while maintaining an automated deployment pipeline, I hosted the project on Vercel.

Since the project uses Next.js, Vercel's serverless infrastructure automatically compiled the .next output directory without any friction. Finally, I routed my custom domain (ahmadakmal.dev) directly through Vercel's nameservers to enforce global HTTPS (a strict requirement for .dev top-level domains) and ensure ultra-low latency via their edge network.

The Result

The final build is fast, structured, and entirely fluff-free. It serves as a direct reflection of how I approach systems architecture and interface design.

You can run the live "boot sequence" and check out the IDE yourself here:
🔗 ahmadakmal.dev

I’m Ahmad Akmal (RuumiDev), a software developer studying multimedia in Malaysia. I spend my time building practical AI applications, clean interfaces, and production-ready systems. Let's connect:

GitHub: github.com/RuumiDev
Instagram: instagram.com/unsaltedsalt_
LinkedIn: linkedin.com/in/ahmadakmal-ruumidev

How I Built My Next.js Developer Portfolio & Optimized It for the Web

Ahmad Akmal Abdullah — Mon, 13 Jul 2026 21:07:18 +0000

When most developers build their personal websites, they focus entirely on UI animations, responsive layouts, and interactive components. While visual polish is essential, it means nothing if search engines cannot discover, crawl, and understand your site.

I am Ahmad Akmal Abdullah (known online as RuumiDev), a Full-Stack Web Developer and Founder of MiraiWorks. When I set out to architect my official developer platform at ahmadakmal.dev, my goal was twofold: ship a high-performance web application, and engineer a closed-loop SEO structure that cleanly links my legal name, developer alias, and development brand across the web.

Here is a practical breakdown of how I structured the project using Next.js App Router, solved common Single Page Application (SPA) indexing bottlenecks, and used structured JSON-LD schemas to build domain authority.

The Core Architecture: Next.js App Router & Server-Side Rendering Many modern portfolios are built as static client-side React or Vue applications. The problem with pure Client-Side Rendering (CSR) is that web crawlers must execute JavaScript just to read the basic text on your page—often resulting in delayed indexing or completely missed content.

By utilizing the Next.js App Router, ahmadakmal.dev leverages Server-Side Rendering (SSR) and React Server Components (RSC).

Instant Payload Delivery: When Googlebot or Bingbot requests a page, the server immediately delivers fully rendered HTML containing my professional bio, core stack, and project histories.

Component-Level Modularization: Features like dynamic project showcases, interactive terminal layouts, and responsive UI components are isolated, keeping client-side bundle sizes minimal and Core Web Vitals high.

Solving Identity Fragmentation with JSON-LD Structured Data As a developer operating under an alias (RuumiDev) while managing a brand (MiraiWorks), search engines initially saw fragmented entities. A standard search for my legal name wouldn't naturally surface my technical repositories or brand milestones.

To fix this, I bypassed basic meta tags and injected a formal Schema.org JSON-LD Graph directly into the initial server-rendered HTML of the root layout. This explicitly instructs the Google Knowledge Graph that these separate digital footprints represent the exact same entity.

Here is a simplified view of the schema structure implemented in the layout:

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Person",
      "name": "Ahmad Akmal Abdullah",
      "alternateName": "RuumiDev",
      "url": "https://ahmadakmal.dev",
      "jobTitle": "Full-Stack Web Developer",
      "worksFor": {
        "@type": "Organization",
        "name": "MiraiWorks"
      },
      "sameAs": [
        "https://github.com/RuumiDev",
        "https://linkedin.com/in/ahmadakmal-ruumidev"
      ]
    },
    {
      "@type": "Organization",
      "name": "MiraiWorks",
      "url": "https://ahmadakmal.dev",
      "founder": {
        "@type": "Person",
        "name": "Ahmad Akmal Abdullah"
      }
    }
  ]
}

By establishing two-way links—where external platforms point to my domain, and my domain's schema claims those platforms—search algorithms can confidently index and consolidate my domain authority.

Programmatic Sitemaps & Crawler Routing Static sitemap.xml files are prone to falling out of sync as you add new case studies, resume updates, or project logs. In Next.js App Router, I replaced static XML maintenance with a programmatic routing pipeline using app/sitemap.ts and app/robots.ts.

Instead of manually editing XML nodes, Next.js dynamically evaluates my route tree at build time and generates an optimized sitemap complete with specific crawl priorities:

Primary Hub (/): Priority 1.0 with daily change frequency.

Core Showcases (/projects, /about, /experience): Priority 0.8 for rapid re-crawling when new software updates are deployed.

Support Pages (/skills, /contact): Priority 0.5 for structural completeness.

Combined with an explicit robots.ts rule set that grants unrestricted crawler access to all major user agents while preventing accidental indexing of internal API routes, the site practically feeds itself to search indexers.

What’s Next?
With the structural SEO and web architecture locked in, my current focus at MiraiWorks is scaling production-ready web applications, integrating computer vision pipelines, and deploying enterprise-grade AI architectures.

If you are building complex web systems or want to connect regarding full-stack software development, feel free to explore my work or reach out across any of my active channels:

Official Portfolio & Case Studies: ahmadakmal.dev

GitHub Repositories: github.com/RuumiDev

Professional Network: linkedin.com/in/ahmadakmal-ruumidev