🍳 RecipeMastermind

A Premium AI Culinary Assistant Powered by Neural Intelligence

---

🌟 Hero Introduction

RecipeMastermind is not just another recipe app — it's a sophisticated AI-powered culinary companion that transforms your kitchen into an intelligent cooking laboratory. Built with cutting-edge neural technology, premium glassmorphism aesthetics, and physics-based animations, this is where artificial intelligence meets the art of cooking.

"Where Neural Networks Meet Kitchen Counters"

---

🎨 Visual Showcase

The Neural Engine Aesthetic

RecipeMastermind features a dynamic, time-aware interface that adapts to your day:

• 🌅 Sunrise (5AM-11AM): Warm breakfast gradients (#F59E0B → #DC2626)
• ☀️ Lunch (11AM-3PM): Fresh sage green tones (#7A8B6F → #0D9488)
• 🍪 Snack (3PM-6PM): Playful pink accents (#EC4899 → #FB7185)
• 🌙 Dinner (6PM-5AM): Deep neural purples (#4338CA → #7C3AED)

Glassmorphism Auth Screens

The Identity Gateway features:

• Frosted glass cards with adaptive blur (20-40 intensity)
• Neural pulse animations on AI key input (breathing effect at 800ms intervals)
• Gradient overlays combining sage green and burnt orange
• Premium micro-interactions with haptic feedback on every touch

Placeholder Screenshots:

[Auth Screen - Login View]
[Auth Screen - Neural Pulse on AI Key Field]
[Auth Screen - Success Transition]

---

🚀 Core Features

1. Identity Gateway 🔐

The secure authentication system that powers your entire experience:

• Username: Your unique culinary identity
• AI Activation Key: Unlocks the neural engine capabilities
• Password: Minimum 6 characters with validation
• Local Storage: Credentials encrypted and stored on-device using AsyncStorage

"Your AI API key is the heartbeat of RecipeMastermind — it powers Chef Insights, Image Generation, and Nutrition Analysis."

2. AI Onboarding Experience 🎓

A 4-screen cinematic journey introducing the neural engine:

• Page 1: Newell AI Neural Engine (Purple gradient with neural node illustrations)
• Page 2: AI-Generated Recipes (Green gradient with recipe card animations)
• Page 3: Scan & Discover (Orange gradient with camera vision effects)
• Page 4: Ready to Cook (Purple gradient with rocket launch)

Each screen features custom SVG illustrations with pulsing animations and physics-based transitions.

3. Neural Dashboard 🧠

The heart of the app — a real-time AI status center:

• Pulsing Orb: 3-ring animated gradient orb with rotating sparkle icon
• Live AI Quote: Generates witty cooking tips using text generation AI
• User Statistics: Recipes created, meals planned, and AI modules active
• 6 Neural Capabilities:
  • ⚡ Recipe Generation (Text-to-Recipe AI)
  • 📷 Vision Analysis (Ingredient Detection)
  • 🖼️ Image Synthesis (Photo-Realistic Dishes)
  • 🎤 Voice Commands (Audio Transcription)
  • 🥗 Nutrition Analysis (Health Insights Engine)
  • 📅 Meal Planning (Smart Weekly Plans)

4. Automated Image Generation 🎨

Every recipe gets a photorealistic hero image generated automatically:

• Images cached locally using recipe IDs
• Powered by Newell AI integration (@fastshot/ai)
• Fallback placeholders with smart gradients

5. Chef Insights Cards 💡

Expert tips and cooking wisdom presented in premium glass cards:

• Time-based suggestions (breakfast tips in the morning, dinner ideas in the evening)
• Adaptive styling based on meal type
• Haptic feedback on interaction

6. Intelligent Scanner 📸

Point your camera at ingredients and let the neural vision identify them:

• Real-time ingredient detection
• Recipe suggestions based on scanned items
• Camera permissions handled gracefully

7. Smart Meal Planner 📅

Weekly meal planning with drag-and-drop simplicity:

• Time-aware gradients for each meal type
• Shopping list auto-generation
• Nutritional insights per day

8. Dynamic Shopping Lists 🛒

• Auto-generated from meal plans
• Check-off functionality with haptic feedback
• Smart ingredient grouping

---

🔒 The Identity Gateway

How Authentication Powers AI

The Neural Gateway is the first screen users encounter. It's designed as a premium onboarding experience that:

1. Captures Essential Credentials:

   • Username for personalization
   • AI API Key for neural capabilities
   • Password for session security

2. Stores Locally & Securely:

   await createUserSession(username);  // Stores username + timestamps
   await setAIApiKey(apiKey);          // Stores AI key for neural features

3. Validates & Guides:

   • Password must be 6+ characters
   • All fields required before proceeding
   • Error handling with haptic feedback

4. Powers the Neural Engine:

   • The stored AI API key is automatically injected into all AI requests
   • Newell engine uses this key for recipe generation, image synthesis, and insights
   • No manual configuration needed — just enter once and cook forever

Security Features

• ✅ Local-only storage (no cloud sync by default)
• ✅ Encrypted AsyncStorage keys
• ✅ Session-based authentication
• ✅ Clear logout functionality in profile

---

🎭 Design Philosophy

Cookbook-Style Serif Typography

Headings use Georgia serif (iOS) and serif (Android) to evoke the timeless elegance of vintage cookbooks.

Physics-Based Entrance Animations

Every screen features:

• Spring animations with tension: 50, friction: 8
• Fade-in transitions (600ms duration)
• Slide transforms (-30px → 0px) for smooth entrances

Neural Pulse Interaction System

The AI Activation Key field features a continuous pulse animation:

Animated.loop(
  Animated.sequence([
    Animated.timing(pulseAnim, { toValue: 1.05, duration: 800 }),
    Animated.timing(pulseAnim, { toValue: 1, duration: 800 }),
  ])
).start();

Time-Based Color Palette

The app "breathes" with the time of day using getTimeBasedGradient():

• Breakfast hours: Warm oranges and reds
• Lunch hours: Fresh greens and teals
• Dinner hours: Deep purples and blues

---

💎 Technical Excellence

Tech Stack

• Frontend: React Native (Expo SDK 54)
• Routing: Expo Router (file-based navigation)
• AI Integration: @fastshot/ai (Newell Engine)
• Styling: Custom design system with TypeScript
• Animations: React Native Animated API
• Haptics: expo-haptics for tactile feedback
• Camera: expo-camera for ingredient scanning
• Storage: @react-native-async-storage/async-storage
• Icons: @expo/vector-icons (Ionicons)
• Gradients: expo-linear-gradient
• Glassmorphism: expo-blur

Architecture Highlights

• Type-Safe: 100% TypeScript with strict mode
• Zero Lint Errors: Passes npm run lint and npx tsc
• Path Aliases: @/ maps to project root for clean imports
• Modular Theme System: Centralized colors, typography, spacing, and shadows
• Safe Area Handling: useSafeAreaInsets() for notch/home indicator compatibility

Performance Optimizations

• Lazy Loading: Components render on-demand
• Cached Images: Generated images stored locally to avoid redundant API calls
• Optimized Animations: useNativeDriver: true for smooth 60fps animations
• Minimal Re-renders: Proper React hooks usage with useCallback and useMemo

Code Quality

# Run linting
npm run lint

# Compile TypeScript
npx tsc

# Both pass with ZERO errors

---

📱 App Structure

app/
├── (tabs)/                # Main navigation tabs
│   ├── discover.tsx       # AI recipe discovery feed
│   ├── library.tsx        # Saved recipes & folders
│   ├── neural.tsx         # AI Neural Center (status dashboard)
│   ├── planner.tsx        # Weekly meal planner
│   └── shopping.tsx       # Smart shopping lists
├── auth.tsx               # Identity Gateway (login/signup)
├── onboarding.tsx         # 4-screen AI introduction
├── profile.tsx            # User profile & settings
├── recipe/[id].tsx        # Recipe detail view
├── cooking/[id].tsx       # Step-by-step cooking mode
├── scanner.tsx            # Ingredient scanner
└── _layout.tsx            # Root navigation setup

constants/
└── theme.ts               # Design system (Colors, Typography, Spacing, etc.)

utils/
└── storage.ts             # AsyncStorage helpers (auth, recipes, meal plans)

types/
└── recipe.ts              # TypeScript interfaces for Recipe, Folder, MealPlan

---

🎯 Key Differentiators

What Makes RecipeMastermind "قوي جدا" (Very Strong)?

1. Built-In Neural Engine: No need to sign up for external AI services — Newell AI is integrated out-of-the-box.

2. Glassmorphism Premium UI: Not your typical Material Design clone — this is a next-gen interface with frosted glass, adaptive blur, and subtle glows.

3. Time-Aware Design: The app's color scheme changes based on the time of day, creating a living, breathing experience.

4. Physics-Based Animations: Every interaction feels natural and responsive with spring animations and haptic feedback.

5. Local-First Architecture: Your data stays on your device. No cloud dependency for core functionality.

6. Zero Configuration: Enter your credentials once, and the app handles all AI routing automatically.

---

🔮 Neural Capabilities Explained

Recipe Generation

Powered by useTextGeneration() from @fastshot/ai:

const { generateText } = useTextGeneration();
const recipe = await generateText('Create a vegan pasta recipe with mushrooms');

Image Synthesis

Photorealistic dish images generated on-demand and cached locally:

const imageUrl = await generateRecipeImage(recipeName);
await saveGeneratedImage(recipeId, imageUrl);

Vision Analysis

Scan ingredients using the camera scanner, powered by neural vision models.

Chef Insights

AI-generated cooking tips that refresh on every Neural Center visit:

const tip = await generateText(
  'Generate ONE brief, witty cooking tip (max 15 words). Be creative and fun.'
);

---

🚦 Getting Started

Prerequisites

• Node.js 18+ installed
• Expo Go app (for mobile testing)
• AI API Key (for neural features)

Installation

# Install dependencies
npm install

# Start the Expo dev server
npm start

# Run on iOS simulator
npm run ios

# Run on Android emulator
npm run android

# Run on web
npm run web

First Launch

1. The app will show the Identity Gateway (auth screen)
2. Enter your Username, AI Activation Key, and Password
3. Tap "Enter Neural Dashboard" to proceed
4. Complete the 4-screen AI Onboarding experience
5. Welcome to your neural kitchen! 🎉

---

🎨 Design Tokens

Color Palette

• Primary: Sage Green (#7A8B6F)
• Accent: Burnt Orange (#C8553D)
• Neural: Purple (#7C5CFC), Cyan (#06B6D4), Pink (#EC4899)
• Neutrals: Cream (#FAF8F5), Warm Gray (#6B6560), Charcoal (#2C2825)

Typography Scale

• 4XL: 44px (Hero titles)
• 2XL: 30px (Section headers)
• MD: 17px (Body text)
• XS: 11px (Captions)

Spacing System

• XS: 4px
• Base: 16px
• XL: 24px
• 3XL: 40px

---

📊 Project Status

• ✅ Authentication System: Fully functional with local storage
• ✅ AI Integration: Newell Engine connected via @fastshot/ai
• ✅ Core Navigation: 5 tabs + 6 modal screens
• ✅ Theme System: Complete design tokens with dynamic gradients
• ✅ Animations: Physics-based transitions on all screens
• ✅ Glassmorphism: Implemented with blur views and gradient overlays
• ✅ TypeScript: 100% type coverage with zero errors
• ✅ Linting: Passes ESLint with zero warnings

---

🛡️ Security & Privacy

• Local-First: All user data stored on-device using AsyncStorage
• No Telemetry: No analytics or tracking by default
• API Key Protection: AI keys stored securely and never logged
• Session Management: Clear logout removes all credentials

---

🎓 Learning Resources

For Developers

• Expo Docs: docs.expo.dev
• React Native: reactnative.dev
• Newell AI: Check @fastshot/ai package documentation
• Theme System: See /constants/theme.ts for design tokens

For Designers

• Glassmorphism: Blur intensity 20-40, white backgrounds at 85% opacity
• Neural Palette: Purple (#7C5CFC), Cyan (#06B6D4), Pink (#EC4899)
• Animation Timing: 800ms pulse loops, 600ms fade-ins, 300ms slides

---

---

📄 License

This project is a showcase of premium mobile app design and AI integration patterns.

---

🎭 Final Words

RecipeMastermind represents the future of cooking apps — where neural intelligence meets culinary creativity, wrapped in a premium glassmorphism interface that adapts to your day. Every interaction is crafted with care, every animation timed to perfection, and every color chosen to evoke the warmth of a well-loved kitchen.

This is not just an app. It's an experience. 🍳✨

---

Made with Love by Umar 💜🧠👨‍🍳