[{"data":1,"prerenderedAt":378},["ShallowReactive",2],{"/projects/bk-million-dollar-whopper":3},{"id":4,"title":5,"body":6,"description":345,"extension":365,"featured":366,"meta":367,"navigation":368,"path":369,"seo":370,"sortOrder":371,"stem":372,"tagline":373,"tags":374,"__hash__":377},"projects/projects/bk-million-dollar-whopper.md","BK Million Dollar Whopper Platform",{"type":7,"value":8,"toc":344},"minimark",[9,59,63,69,72,77,81,84,92,94,98,146,148,152,155,157,161,164,167,181,184,186,190,195,206,210,221,225,236,240,251,253,257,265,269,286,290,304,306,310,333,335,339,342],[10,11,26,27,26,36],"div",{"className":12},[13,14,15,16,17,18,19,20,21,22,23,24,25],"mb-8","flex","items-center","gap-4","rounded-xl","border","border-slate-200","bg-white/60","px-4","py-3","backdrop-blur","dark:border-slate-800","dark:bg-slate-950/50","\n  ",[28,29],"img",{"src":30,"alt":31,"className":32},"/images/logos/burger-king.png","Burger King",[33,34,35],"h-12","w-auto","object-contain",[10,37,41,42,41,51,26],{"className":38},[14,39,40],"flex-col","leading-tight","\n    ",[43,44,50],"span",{"className":45},[46,47,48,49],"text-xs","font-medium","text-slate-500","dark:text-slate-400","\n      Client\n    ",[43,52,58],{"className":53},[54,55,56,57],"text-sm","font-semibold","text-slate-900","dark:text-slate-100","\n      Burger King - Global Marketing Campaign\n    ",[60,61],"stack-chips",{":items":62},"[\"React.js\", \"Redux\", \"Material UI\", \"Tailwind CSS\", \"JavaScript/TypeScript\"]",[64,65],"screenshot",{"caption":66,"src":67,"type":68},"Frontend campaign experience for burger customization, AI-generated content, and competition submission","/images/projects/bk/overview.mp4","video",[70,71],"hr",{},[73,74,76],"h2",{"id":75},"overview","Overview",[78,79,80],"p",{},"BK Million Dollar Whopper was a national campaign experience where users could build a custom Whopper, generate an AI image and jingle, and submit their creation to compete for a $1,000,000 prize.",[78,82,83],{},"I owned the frontend application and integration layer, building the full user experience and connecting it to backend APIs and AI generation services built by other teams.",[85,86,89],"callout",{"title":87,"type":88},"Project Scope","info",[78,90,91],{},"This case study focuses on the frontend implementation work I delivered: building the experience from provided Figma designs, Redux state management, API integration, async AI response handling, and stable UI states during content generation.",[70,93],{},[73,95,97],{"id":96},"my-role","My Role",[99,100,102],"contribution",{"role":101},"Frontend Engineer",[103,104,105,122,125,131,134,137,140,143],"ul",{},[106,107,108,109,113,114,117,118,121],"li",{},"Built the full frontend application in ",[110,111,112],"code",{},"React",", ",[110,115,116],{},"Material UI",", and ",[110,119,120],{},"Tailwind CSS"," based on designs provided by the UI/UX team",[106,123,124],{},"Implemented the multi-step burger configuration and submission flow",[106,126,127,128],{},"Managed cross-step application state with ",[110,129,130],{},"Redux",[106,132,133],{},"Integrated frontend flows with backend APIs and AI generation endpoints",[106,135,136],{},"Handled asynchronous AI responses for image and audio generation",[106,138,139],{},"Rendered AI-generated content dynamically within the user journey",[106,141,142],{},"Implemented loading, error, and fallback states for network and generation steps",[106,144,145],{},"Implemented a responsive, polished interface across devices following the approved Figma designs",[70,147],{},[73,149,151],{"id":150},"problem","Problem",[78,153,154],{},"The campaign needed a consumer-facing experience that combined interactive customization with AI-generated outputs, while still feeling clear and responsive. The frontend had to manage several dependent steps, keep user selections across the flow, and maintain a good experience during AI processing delays.",[70,156],{},[73,158,160],{"id":159},"solution","Solution",[78,162,163],{},"I built the frontend from the UI/UX team's Figma designs as a structured multi-step flow, using Redux for centralized state management and reliable transitions between configuration, generation, review, and submission steps.",[78,165,166],{},"The interface was designed to handle asynchronous AI generation well by:",[103,168,169,172,175,178],{},[106,170,171],{},"Keeping user progress while requests were in progress",[106,173,174],{},"Showing clear loading states and next-step guidance",[106,176,177],{},"Rendering AI-generated image and audio outputs dynamically when available",[106,179,180],{},"Providing error and fallback states so users could recover without restarting",[78,182,183],{},"This approach kept the experience stable and polished even when AI responses had variable latency.",[70,185],{},[73,187,189],{"id":188},"application-features","Application Features",[191,192,194],"h3",{"id":193},"burger-configuration-flow","Burger Configuration Flow",[103,196,197,200,203],{},[106,198,199],{},"Multi-step ingredient selection flow for building a custom Whopper",[106,201,202],{},"Guided progression with state persistence across steps",[106,204,205],{},"Validation to ensure users completed required inputs before continuing",[191,207,209],{"id":208},"ai-generated-burger-image","AI-Generated Burger Image",[103,211,212,215,218],{},[106,213,214],{},"Triggered image generation from selected burger ingredients",[106,216,217],{},"Dynamic rendering of returned AI-generated visuals in the flow",[106,219,220],{},"Loading and retry-friendly UI states during generation",[191,222,224],{"id":223},"ai-generated-jingle","AI-Generated Jingle",[103,226,227,230,233],{},[106,228,229],{},"Triggered audio/jingle generation tied to the user burger concept",[106,231,232],{},"Playback-ready rendering of generated content in the submission journey",[106,234,235],{},"Graceful handling of delayed or failed responses",[191,237,239],{"id":238},"submission-competition-flow","Submission & Competition Flow",[103,241,242,245,248],{},[106,243,244],{},"Review step for confirming generated assets and ingredient selections",[106,246,247],{},"Final submission flow connected to backend APIs",[106,249,250],{},"UX continuity across step transitions, async responses, and completion states",[70,252],{},[73,254,256],{"id":255},"technical-highlights","Technical Highlights",[258,259,262],"decision",{"title":260,"tradeoff":261},"Centralized state management for a multi-step AI flow","More upfront state modeling → more predictable UX across async steps",[78,263,264],{},"Redux kept configuration data, generation status, returned AI assets, and submission state synchronized across the full flow. This reduced UI inconsistencies and made async transitions easier to manage.",[191,266,268],{"id":267},"frontend-architecture-react-redux","Frontend Architecture (React + Redux)",[103,270,271,274,277],{},[106,272,273],{},"Centralized state for ingredient selections, step progression, generated assets, and request status",[106,275,276],{},"Predictable transitions between configuration, generation, preview, and submission steps",[106,278,279,280,282,283,285],{},"UI implemented from Figma designs using ",[110,281,116],{}," and ",[110,284,120],{}," for consistent styling and layout",[191,287,289],{"id":288},"async-ux-reliability","Async UX & Reliability",[103,291,292,295,298,301],{},[106,293,294],{},"Loading state design for AI image/audio generation delays",[106,296,297],{},"Error and fallback handling for failed or delayed API responses",[106,299,300],{},"Dynamic rendering of generated content without breaking user progress",[106,302,303],{},"Responsive layout behavior for mobile and desktop campaign participation",[70,305],{},[73,307,309],{"id":308},"what-this-project-demonstrates","What This Project Demonstrates",[103,311,312,315,318,321,324,327,330],{},[106,313,314],{},"Frontend ownership of a high-visibility campaign application",[106,316,317],{},"Frontend implementation of product and UI/UX team designs in production-ready code",[106,319,320],{},"Delivery of a complex multi-step UX with centralized state management",[106,322,323],{},"Integration with backend APIs and AI-driven content generation systems",[106,325,326],{},"Strong async handling, loading states, and recovery flows",[106,328,329],{},"Responsive UI implementation for consumer-facing campaign experiences",[106,331,332],{},"Ability to build polished interaction layers on top of AI-powered workflows",[70,334],{},[73,336,338],{"id":337},"impact","Impact",[78,340,341],{},"The application delivered a polished frontend experience for a Burger King AI-driven campaign, guiding users from burger customization to AI-generated content and final competition submission in one clear flow.",[70,343],{},{"title":345,"searchDepth":346,"depth":346,"links":347},"",2,[348,349,350,351,352,359,363,364],{"id":75,"depth":346,"text":76},{"id":96,"depth":346,"text":97},{"id":150,"depth":346,"text":151},{"id":159,"depth":346,"text":160},{"id":188,"depth":346,"text":189,"children":353},[354,356,357,358],{"id":193,"depth":355,"text":194},3,{"id":208,"depth":355,"text":209},{"id":223,"depth":355,"text":224},{"id":238,"depth":355,"text":239},{"id":255,"depth":346,"text":256,"children":360},[361,362],{"id":267,"depth":355,"text":268},{"id":288,"depth":355,"text":289},{"id":308,"depth":346,"text":309},{"id":337,"depth":346,"text":338},"md",false,{},true,"/projects/bk-million-dollar-whopper",{"title":5,"description":345},6,"projects/bk-million-dollar-whopper","Frontend experience for an AI-powered Burger King campaign",[375,130,116,120,376],"React.js","JavaScript/TypeScript","pA2D-6JbCQQbmx0-dwojmAUJZY-fMOqXYadZxEzP5Gw",1778044212351]