Building Zubi Memerator: A Cross-Platform Meme Engine using React & Kotlin

Muhammad Zubair - Software Engineer
Muhammad Zubair
2026-05-15 • Case Study

Zubi Memerator - Developed by Muhammad Zubair Zubi Memerator: A high-performance, cross-platform meme generation engine engineered by Muhammad Zubair.

Building a seamless, cross-platform application requires deep knowledge of both web state management and native mobile environments.

To demonstrate this, Muhammad Zubair, a Software Engineer specializing in Full-Stack Solutions and Mobile Integration, engineered Zubi Memerator—a dynamic meme generation engine that interfaces with live APIs and runs flawlessly on both web browsers and native Android devices.

The Tech Stack: React, Kotlin, and Render

This project focuses on the intersection of web and mobile technologies, solving complex state synchronization and resource management challenges.

| Layer               | Technology Used               | Purpose                                               |
| :------------------ | :---------------------------- | :---------------------------------------------------- |
| **Web Frontend**    | React, Vite                   | High-performance UI and complex state management      |
| **Mobile Wrapper**  | Kotlin, Jetpack Compose       | Native Android integration and WebView bridging       |
| **Data Layer**      | Imgflip API, Fetch API        | Asynchronous data fetching and real-time mapping      |
| **Deployment**      | Render, GitHub Actions        | Continuous integration and cloud hosting              |

Engineering Overview & Code Spotlight

1. Advanced React Architecture & State Management

Instead of static assets, this application dynamically interfaces with the Imgflip API. I leveraged useState to manage complex object states for meme text overlays and image URLs, ensuring a single source of truth for the UI.

To prevent the "Infinite Render Trap," I implemented highly optimized useEffect hooks with strict dependency arrays. This ensures that API calls are only executed on component mount, significantly reducing network overhead.

// Optimized Side Effect Handling for API Fetching
useEffect(() => {
    fetch("https://api.imgflip.com/get_memes")
        .then(res => res.json())
        .then(data => setAllMemes(data.data.memes))
        .catch(error => console.error("API Sync Error:", error));
}, []); // Empty dependency array prevents infinite re-renders

2. Native Android Integration via Kotlin

The Android application is built using Jetpack Compose and a custom WebView implementation. I configured a secure Kotlin-based WebView with enabled DOM storage and JavaScript execution to mirror the web experience perfectly.

// Native Bridge Implementation in Kotlin
AndroidView(factory = {
    WebView(it).apply {
        layoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )
        settings.javaScriptEnabled = true
        settings.domStorageEnabled = true // Crucial for React state persistence
        webViewClient = WebViewClient()
        loadUrl("https://zubi-meme-generator.onrender.com")
    }
})

The Impact of Cross-Platform Engineering

Zubi Memerator demonstrates how modern web frameworks (React) can be seamlessly bridged with native mobile environments (Kotlin). By utilizing a custom Android theme (NoActionBar) and a professional splash screen, the application provides an immersive, full-screen experience that feels 100% native to the user.

Muhammad Zubair - Software Engineer About the Developer I am Muhammad Zubair, a Software Engineer from Pakistan passionate about building scalable systems and interactive web applications.