Meme Pop Project Report
1. The Concept
Meme Pop is a lightweight, mobile-first meme creation web app for Khmer and English social media users. It helps users turn personal photos into funny, shareable memes in under one minute without requiring graphic-design experience.
Users can choose a layout, add photos or caption panels, create and style multiple text layers, and save or share the result. The app also includes daily challenges, caption ideas, streak tracking, automatic draft saving, a local gallery, and bilingual navigation to encourage users to return.
2. The Stack
The Stack: HTML5 Canvas, Vanilla CSS, JavaScript, Local Storage, and the Web Share API.
The AI Assist: OpenAI Codex handled both planning and development. It helped define the target audience, product direction, retention loop, and Sakurai-inspired UI/UX approach. Codex then translated those requirements into the working index.html, styles.css, and app.js files. It was also used to review the project, remove unused assets and legacy code, implement bilingual support, build the Home and Settings screens, validate the source code, and create the project documentation.
3. The 1 Day Sprint
Morning (Hours 1–3): We started by defining the target audience as Cambodian students, young adults, social media users, and small content creators who want to make Khmer or English memes quickly. Imgflip was selected as the main functional reference, while Canva’s meme maker was used as a secondary editing reference. The initial MVP focused on a short creation loop: choose an image, write a caption, style it, preview the result, and export the meme. We also reviewed the Sakurai-style planning notes and UI rules covering portrait layout, fast feedback, touch controls, concise text, and clear visual hierarchy.
Afternoon (Hours 4–6): Codex developed the main editor with HTML5 Canvas and JavaScript. The app gained multiple layouts, photo and caption panels, movable text layers, font and color controls, outlines, undo and redo, sharing, automatic draft saving, and a local gallery. The visual design went through several iterations. An early colorful game-style design was replaced by a darker professional editor, then adjusted to a softer blue-gray palette after testing showed that the black interface was difficult to read.
The Finish Line (Hours 7–8): The final stage focused on navigation and retention. We added a Home screen with a Daily Challenge, streak display, Create New Meme action, Continue Draft option, Gallery, and Settings. The Settings screen added Khmer and English language controls, privacy information, a short usage guide, and an About section. The Home screen received larger text, clearer cards, and improved bottom navigation. Duplicate language and Gallery controls were removed from the Editor header. Final QA included JavaScript syntax validation, HTML ID checks, CSS cleanup, removal of approximately 1.9 MB of unused image assets, and updates to the English README.
4. The Roadblocks
Roadblocks: The largest challenge was balancing three directions: a fast web utility, a game-like daily experience, and strict commercial mobile-game UI rules. The asset rules required image-based buttons, icons, panels, and frames, but Meme Pop also needed responsive layouts and dynamic Khmer and English text. Using only rasterized UI assets would have made localization and iteration difficult, so the project used HTML and CSS for functional controls while keeping the game-design principles of clear hierarchy, fast feedback, and portrait interaction.
Visual consistency was another roadblock. The interface moved through several styles before reaching the current design, leaving behind unused images and legacy CSS selectors that needed to be removed. The project also grew beyond its original MVP as layouts, photo cropping, gallery editing, backgrounds, drafts, localization, Settings, and Home navigation were added to one JavaScript codebase. Automated visual testing of the local app was limited by browser security restrictions, so some UI issues were identified through manual testing and screenshots.
5. Key Takeaways
The strongest part of the project was the rapid conversion of product requirements into a functional browser application. Codex created the Canvas editor, responsive interface, localization system, local gallery, draft recovery, sharing flow, and retention features without adding a framework, backend, build process, or user account.
The weakest part was visual iteration and scope growth. Several UI directions were explored before the final design was selected, and the increasing number of features made app.js harder to maintain. The strict image-asset rules also conflicted with the flexibility required by a bilingual responsive web app.
My final thought: If I had one more day, I would split app.js into separate modules for Canvas rendering, editor state, storage, localization, gallery, and navigation. I would also add a first-use tutorial, caption categories, a seven-day streak calendar, more social-media export sizes, and usability testing with Cambodian students and content creators. If I restarted the project, I would define the Home-to-Editor flow and hybrid design system before implementation to reduce duplicate controls, abandoned assets, and unnecessary visual rework.