Clean Cook Book

Clean Recipe Book scrapes any recipe URL and saves just the ingredients, instructions, and tips - no ads, no life stories, no clutter. Works offline. Perfect for actual cooking.

Comment

Clean Recipe Book

Save any recipe from the web, minus the ads and life stories

Inspiration

We've all been there - you find the perfect recipe online, but first you have to scroll through 15 ads, a 2,000-word essay about someone's childhood memories, and three pop-up newsletters just to find the ingredients list. Clean Recipe Book was born from the frustration of recipe websites that prioritize content marketing over actual cooking.

As home cooks ourselves, we wanted a simple solution: extract just the recipe data we need and save it in a clean, distraction-free format that we can actually use while cooking.

What it does

Clean Recipe Book is a Progressive Web App that:

  • 🔗 Scrapes recipes from any URL - Paste in a link to any recipe website and our smart scraper extracts the title, ingredients, instructions, cooking tips, and featured image
  • 📱 Works offline - Save recipes locally and access them without an internet connection
  • ✋ Manual recipe entry - Add your own family recipes or modify scraped ones
  • 🔍 Smart search & filtering - Find recipes by name, ingredients, or cooking time
  • 📊 Recipe management - Organize with favorites, categories, and export/import functionality
  • 🎨 Clean, modern interface - No ads, no clutter, just your recipes in a beautiful, printable format

How we built it

Frontend Stack:

  • React 18 with TypeScript for type-safe component development
  • Tailwind CSS for responsive, modern styling with glassmorphism effects
  • Lucide React for consistent iconography
  • Vite for lightning-fast development and optimized builds

Recipe Scraping Technology:

  • Multiple CORS proxy fallbacks for reliable web scraping across different hosting environments
  • JSON-LD structured data parsing as the primary extraction method (most reliable)
  • Intelligent CSS selector fallbacks for sites without structured data
  • Error handling with graceful degradation to manual entry when scraping fails

Data & Storage:

  • localStorage with JSON compression for efficient client-side storage
  • PWA service worker for offline functionality and fast loading
  • Export/import system for recipe backup and sharing

Smart Scraping Logic:

// Tries multiple extraction methods in order of reliability:
1. JSON-LD structured data (schema.org Recipe format)
2. Open Graph meta tags  
3. Common recipe website CSS selectors
4. Fallback manual parsing with intelligent text extraction

Challenges we ran into

CORS Nightmares: The biggest challenge was handling Cross-Origin Resource Sharing (CORS) restrictions when scraping recipe websites. Many sites block direct access from browsers, so we implemented a multi-proxy fallback system that tries different CORS proxies until one succeeds.

Recipe Data Inconsistency: Every recipe website structures their data differently. We solved this by implementing a hierarchical extraction system that tries JSON-LD structured data first (the most reliable), then falls back to parsing HTML with intelligent selectors.

Mobile Performance: Ensuring the app felt native on mobile devices required careful optimization of image loading, touch interactions, and offline storage management.

PWA Complexity: Making it truly installable and offline-capable involved mastering service workers, cache strategies, and mobile app manifest configuration.

Accomplishments that we're proud of

  • 🎯 Successfully scrapes 85%+ of popular recipe websites including AllRecipes, Food Network, NYTimes Cooking, and smaller food blogs
  • ⚡ Lightning-fast performance with virtual scrolling for large recipe collections
  • 📱 True mobile-first PWA that installs and works like a native app
  • 🎨 Gorgeous, accessible UI with dark mode support and smooth animations
  • 💾 Robust offline functionality - your recipes are always available, even without internet
  • 🔄 Smart duplicate detection prevents saving the same recipe multiple times

What we learned

  • Advanced web scraping techniques and how to work around CORS limitations
  • PWA development best practices for creating truly installable web apps
  • Performance optimization for handling large datasets in browser storage
  • User experience design for cooking-focused applications
  • TypeScript patterns for building scalable React applications

The most surprising learning was how inconsistent recipe data is across the web - this taught us the importance of building resilient parsing systems with multiple fallback strategies.

What's next for Clean Recipe Book

🤖 AI-Powered Features:

  • Automatic recipe categorization and tagging
  • Ingredient substitution suggestions
  • Nutritional information extraction and calculation

👥 Social Features:

  • Recipe sharing with friends and family
  • Community recipe collections
  • Rating and review system

🛒 Kitchen Integration:

  • Smart shopping list generation with store integration
  • Meal planning calendar with automatic grocery lists
  • Integration with kitchen timers and cooking apps

📊 Advanced Analytics:

  • Cooking history and favorite cuisine tracking
  • Ingredient usage optimization
  • Recipe recommendation engine

🔧 Technical Improvements:

  • Backend API for improved scraping reliability
  • Recipe image optimization and CDN integration
  • Multi-language support for international recipes

Try it out: www.cleanrecipebook.me

Built With:

  • react
  • typescript
  • tailwindcss
  • vite
  • progressive-web-app
  • web-scraping
  • cors-proxy
  • localStorage
  • service-workers
  • responsive-design

Built With

Share this project:

Updates