1
2
11
13
3
6
8
10
4
5
9
7
12
14
15

CookCue - Your TV, Your Kitchen Companion

CookCue transforms Amazon Fire TV into an interactive cooking companion, helping you discover what you can cook with the ingredients you already have. From ingredient-based recipe discovery to guided cooking and built-in timers, CookCue brings the entire cooking experience to your television.

Inspiration

Deciding what to cook shouldn't mean endlessly scrolling through recipes or discovering missing ingredients halfway through preparation.

We built CookCue to make everyday cooking simpler, faster, and more accessible. Designed specifically for the Amazon Fire TV track, CookCue brings recipe discovery and guided cooking to the biggest screen in the kitchen, turning an everyday frustration into a more seamless experience.

What It Does

CookCue is a TV-first recipe discovery and guided cooking application that helps users move from available ingredients to a completed dish.

Ingredient-Based Discovery: Find recipes based on the ingredients you already have, or search for a specific dish.
Recipe Insights: View ingredient quantities, missing ingredients, and preparation-time estimates when reliable data is available.
Smart Substitutions: Explore alternatives when certain ingredients aren't available.
Guided Cooking: Follow step-by-step instructions with built-in cooking timers.
Cooking History: Revisit previously completed dishes.
Offline Access: Browse and search a bundled catalogue of 790 meals, even without an internet connection.
Fire TV-Optimised Navigation: Navigate using the remote with directional focus movement, visible focus indicators, and back-button support.

How We Built It

CookCue combines a modern web frontend with a native Android wrapper to deliver a TV-focused experience.

Frontend and Architecture

Built with React 19, JavaScript, and Vite.
Organised into reusable UI components, five main screens, application-level state management, and dedicated service modules for recipes, cooking sessions, timers, and history.
Uses local storage to maintain cooking history and a service-based architecture that supports replaceable implementations.

Recipe Discovery Engine

Integrates the TheMealDB API for online recipe discovery.
Includes a bundled offline snapshot of 790 meals.
Normalises recipe data into a common structure and uses a dedicated matching layer to match ingredients and rank recipes.
Includes a separate recipe engine implementation selectable through a service registry.

Amazon Fire TV Deployment

Packages the production React application inside a native Android application written in Java.
Hosts the frontend in an Android WebView, with local assets served through AndroidX WebViewAssetLoader.
Supports full-screen rendering, screen-awake behaviour, and forwarding the device's Back action to the web application.

Testing and Reliability

Includes automated unit tests and a TV navigation smoke-test script to validate application behaviour and navigation flows.

Challenges We Overcame

Designing for television: Built a custom spatial focus-navigation system to support directional remote navigation and restore focus when users return to a screen.
Unifying recipe data: Implemented data normalisation and image-mapping logic to handle differences between TheMealDB and the application's internal recipe structure.
Handling incomplete data: Avoided presenting unreliable cooking-time estimates as exact values.
Fire TV integration: Worked through WebView configuration, full-screen rendering, remote-button handling, and APK packaging.
Maintaining application state: Ensured the interface could preserve ingredient selections and navigation state across screens while keeping the architecture modular.

Accomplishments We're Proud Of

Built a working recipe discovery and guided cooking application designed for Amazon Fire TV, rather than simply adapting a conventional recipe website.
Integrated ingredient matching, online recipe discovery, substitutions, step-by-step cooking, and timers into one experience.
Created an offline catalogue of 790 meals to support recipe discovery without internet access.
Developed a native Android wrapper around a React application, combining web technologies with Android deployment.
Established a modular architecture with dedicated services and testing tools, making the application easier to maintain and extend.

Most importantly, we took a familiar everyday problem and turned it into a functional product designed around a different way of interacting with technology: cooking with your TV, not constantly checking your phone.

What We Learned

Building CookCue strengthened our understanding of React architecture, JavaScript modules, API integration, data normalisation, local storage, and Android application packaging.

We also learned that building for TV requires a fundamentally different interaction model from building for desktop or mobile. Remote navigation, focus management, state preservation, and testing real navigation flows are essential to creating a usable television experience.

As a team, we gained experience integrating independently developed modules, separating business logic from UI components, and debugging issues across web and Android layers.

What's Next for CookCue?

Our goal is to make CookCue a smarter, more personalised, and more reliable cooking companion.

Personalised Recommendations: Consider dietary requirements, user preferences, preparation time, and cooking difficulty.
Voice-Based Interaction: Explore hands-free recipe searches and cooking-step navigation.
Smarter Guided Cooking: Improve timer flexibility, instruction clarity, and remote-based navigation.
Better Recipe Intelligence: Expand the offline catalogue, improve ingredient substitutions, and make online and offline recipe data more consistent.
User-Driven Improvements: Gather feedback to prioritise features that make the cooking experience genuinely more useful.

Our Vision

We envision a future where your TV does more than entertain you — it helps you create.

CookCue aims to reduce the friction between deciding what to cook and actually cooking it, helping people make better use of available ingredients and follow recipes with greater convenience.

CookCue - Discover what you can cook, and let your TV guide the way.