Cookie App Screenshots

← Back to main article

Screenshots from the Cookie recipe app showing the modern React frontend (desktop and mobile) and the legacy ES5 frontend running on iOS 9 Safari.

Desktop (React Frontend)

The modern React SPA running on desktop browsers with dark and light theme support.

Home screen with recently viewed recipes
Home - Recently Viewed
Home screen in light theme
Home - Light Theme
Search results for beef recipes
Search Results
Recipe detail showing scaled ingredients
Recipe - Ingredients (Scaled)
Recipe detail in light theme
Recipe - Light Theme
Recipe detail showing instructions
Recipe - Instructions
Recipe detail showing nutrition information
Recipe - Nutrition
Recipe detail showing AI-generated tips
Recipe - AI Tips
Recipe tips scrolled view
Recipe - Tips (Scrolled)
Cooking mode with active timer
Cooking Mode - Timer Active
Discover tab generating AI suggestions
Discover - Generating
Discover tab with personalized recommendations
Discover - Recommendations
Settings page showing API configuration
Settings - API Config
Settings page showing AI prompts configuration
Settings - AI Prompts
Settings page showing recipe sources
Settings - Recipe Sources
Settings page showing user management
Settings - Users
Settings page showing danger zone options
Settings - Danger Zone

Mobile (React Frontend)

The same React SPA in responsive mobile view.

Mobile home screen with recently viewed recipes
Home - Recently Viewed
Mobile search results for chicken
Search - Source Filters
Mobile search results showing recipe cards
Search - Recipe Cards
Mobile recipe detail showing ingredients
Recipe - Ingredients
Mobile recipe detail showing instructions
Recipe - Instructions
Mobile recipe instructions scrolled
Recipe - Instructions (Scrolled)
Mobile remix recipe modal with AI suggestions
Remix - AI Suggestions
Mobile remixed recipe generating tips
Remix - Generating Tips
Mobile remixed recipe with generated tips
Remix - Tips Generated
Mobile cooking mode showing timers
Cooking Mode - Timers
Mobile cooking mode with active timer
Cooking Mode - Timer Active

Legacy iPad (ES5 Frontend)

The dedicated ES5 frontend designed for iOS 9 Safari on older iPads. No modern JavaScript features, fully compatible with decade-old WebKit.

Legacy iPad home screen
Home - Recently Viewed
Legacy iPad recipe ingredients
Recipe - Ingredients
Legacy iPad recipe instructions
Recipe - Instructions
Legacy iPad recipe instructions scaled
Recipe - Instructions (Scaled)
Legacy iPad recipe tips
Recipe - AI Tips