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

• Multi-source Recipe Input: Accept recipes from:
  • Web URLs (recipe websites)
  • PDF files
  • Images (photos of recipes)
• Intelligent Parsing: Automatically extracts:
  • Dish title
  • Ingredients with quantities
  • Cooking steps/instructions
• Mobile-Friendly: Responsive design optimized for mobile devices
• Recipe Storage: Persistent storage of parsed recipes
• Recipe Management: View, edit, and organize saved recipes

• Frontend: React with TypeScript, TailwindCSS
• Backend: Hono API framework
• Database: SQLite for recipe storage
• AI: OpenAI GPT-4 for intelligent recipe parsing
• File Processing: PDF parsing and image OCR capabilities

├── 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