A mobile-friendly web application that captures, parses, and stores recipes from multiple sources including URLs, PDFs, images, and plain text.

• Multi-source Recipe Input: Accept recipes from:
  • Web URLs (recipe websites)
  • PDF files
  • Images (photos of recipes)
  • Plain text input
• Intelligent Parsing: Automatically extracts:
  • Dish title and description
  • Ingredients with precise quantities and units
  • Step-by-step cooking instructions
  • Cooking metadata (prep time, cook time, servings, difficulty)
  • Recipe tags and source information
• Mobile-Friendly: Responsive design optimized for mobile devices
• Recipe Storage: Persistent SQLite storage with full CRUD operations
• Recipe Management: View, edit, delete, and organize saved recipes
• Advanced Features:
  • Recipe filtering and search
  • Fraction-to-decimal conversion for precise measurements
  • Comprehensive error handling and validation
  • Real-time parsing feedback

• Frontend: React 18.2.0 with TypeScript, TailwindCSS
• Backend: Hono API framework with TypeScript
• Database: SQLite with normalized schema (recipes + ingredients tables)
• AI: OpenAI GPT-4o-mini for intelligent recipe parsing
• File Processing:
  • PDF parsing via unpdf library
  • Image OCR via OpenAI Vision API
  • URL content extraction

├── backend/
│   ├── database/
│   │   ├── migrations.ts    # Database schema
│   │   └── queries.ts       # Database operations
│   ├── routes/
│   │   ├── recipes.ts       # Recipe CRUD operations
│   │   └── parse.ts         # Recipe parsing endpoints
│   └── index.ts             # Main API entry point
├── frontend/
│   ├── components/
│   │   ├── App.tsx          # Main app component
│   │   ├── RecipeForm.tsx   # Recipe input form
│   │   ├── RecipeList.tsx   # Recipe listing
│   │   └── RecipeView.tsx   # Individual recipe display
│   ├── index.html           # Main HTML template
│   └── index.tsx            # Frontend entry point
└── shared/
    └── types.ts             # Shared TypeScript types

• POST /api/parse/url - Parse recipe from URL
• POST /api/parse/pdf - Parse recipe from PDF
• POST /api/parse/image - Parse recipe from image
• GET /api/recipes - Get all recipes
• POST /api/recipes - Save a recipe
• GET /api/recipes/:id - Get specific recipe
• PUT /api/recipes/:id - Update recipe
• DELETE /api/recipes/:id - Delete recipe

1. Open the app in your browser
2. Choose input method (URL, PDF, or image)
3. Submit your recipe source
4. Review and edit the parsed recipe
5. Save to your recipe collection