DEV Community: Ahmad Akmal Abdullah

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)[cite: 1].

Here is a fluff-free 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[cite: 1]. 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[cite: 1]. Each server gets its own playback queue, volume settings, and auto-timeout timers[cite: 1]. 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[cite: 1].
Lazy Stream Resolution: To prevent massive latency when loading large playlists, songs are queued as metadata "shells" in an O(1) collections.deque[cite: 1]. The actual audio stream is only hydrated right before playback[cite: 1].
Concurrent Preloading: While a song is playing, Mikira uses asyncio.ensure_future to preload upcoming tracks in the background, minimizing the gap between songs[cite: 1].
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[cite: 1].

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[cite: 1].

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

Validation & Impact

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

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